Updated many thing + new 404 page and profile search

static/css/main.css

@@ -30,6 +30,7 @@ body {
   --accent-light: hsl(var(--accent), 75%);
   --bs-btn-active-color: var(--grau);
   --bs-btn-active-border-color: var(--grau);
+  --bs-link-color: #f28705;
   --top-bar: 98px;
   --bottom-bar: 5em;
   --div-padding: 3rem;
@@ -59,6 +60,34 @@ body {
 [data-platform="public"] > [data-screen="connect"]{
 /*   background-color: var(--accent-normal); */
 }
+[data-screen="404"] .container{
+  justify-content: center;
+}
+
+/* side menu */
+.side-menu{
+
+}
+.side-menu li{
+  background: white;
+}
+.side-menu .nav-link{
+  color: black;
+}
+.side-menu .nav-link:active, .side-menu .nav-link.active{
+  color: white;
+  background-color: #f28705;
+  font-weight: 700;
+}
+.side-menu .nav-link:focus{
+  color: black;
+  background-color: #fdc314;
+  font-weight: 600;
+}
+.side-menu li:not(:first-child){
+  margin-top: 0.35rem;
+}
+
 /* heros */
 .hero{
   background-image: linear-gradient(to right bottom, #f28705, #f69602, #f9a502, #fbb409, #fdc314);
@@ -127,13 +156,6 @@ body {
 #tandem-meet .col label{
   font-weight: initial;
 }
-.user-avatar{
-  width: 7em;
-  height: 7em;
-  background-color: var(--background);
-  border: 1px solid var(--accent-normal);
-  border-radius: 50%;
-}
 #tandem-explanations{
   box-shadow: 0 20px 10px -20px rgba(0,0,0,0.45) inset;
   padding-top: 5rem;
@@ -170,11 +192,51 @@ article li:not(:first-of-type){
   background-color: white;
   min-height: 5vh;
 }
+/* user profile */
+.profile{
+  background: white;
+  padding: calc(var(--div-padding) / 2);
+  border-radius: 0.25rem;
+  margin-top: 1rem
+}
+/* .profile:nth-child(even){
+  margin-top: 1rem
+} */
+.user-avatar img{
+  width: 9em;
+  height: 9em;
+  object-fit: cover;
+  object-position: top;
+  border: 2px solid #f28705;
+  border-radius: 50%;
+}
+.profile .label{
+  font-weight: 600;
+}
+.user-description{
+  margin-top: 1.5em;
+}
+.profile-options{
+  margin-top: 2em;
+  justify-content: end;
+  display: flex;
+}
+
+/* search filters */
+#search-filters{
+  border: 1px solid white;
+  background-color: var(--accent-light);
+  padding: calc(var(--div-padding) / 3);
+}
 
 /* btn */
 .btn{
   font-weight: 600;
 }
+.btn-primary{
+  background-color: #f28705;
+  border-color: #f28705;
+}
 .btn-hero-primary{
   background-color: white;
   color: var(--primary);
@@ -214,6 +276,9 @@ label[for="lang"]{
   font-size: 0.9em;
   margin-bottom: 0.25rem;
 }
+#search-filters label{
+  font-weight: 600;
+}
 /* overrides */
 ul, ol{
   padding-left: 1rem;
@@ -274,9 +339,7 @@ footer a img{
     --div-padding: 2em;
     --bottom-bar: 40px;
   }
-  h1{
-    text-align: center;
-  }
+
   .navbar-toggler-icon {
     width: 1em;
   }
@@ -296,6 +359,27 @@ footer a img{
   .partners-logo-grid{
     grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
   }
+  .profile .user-avatar, .profile .user-pseudo{
+    margin: 0 auto;
+    text-align: center
+  }
+  .profile .user-pseudo{
+    margin: .5em auto;
+  }
+}
+@media (width <= 992px) {
+  h1, h2, h3, h4{
+    text-align: center;
+  }
+  .profile .user-avatar{
+    text-align: center;
+  }
+  .profile-options{
+    display:grid;
+    gap: 0 1rem;
+	  width: fit-content;
+	  margin: calc(var(--div-padding) / 2) auto 0;
+  }
 }
 @media (576px <= width <= 992px) {
   .btn-stack{

static/img/avatar-dans-rond-gris.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><path fill-rule="evenodd" clip-rule="evenodd" fill="#DADADA" d="M60 0c33.137 0 60 26.863 60 60s-26.863 60-60 60S0 93.137 0 60 26.863 0 60 0z"/><path fill="#FAC307" d="M74.5 81.474c0 7.745-6.716 14.026-15 14.026-8.284 0-15-6.281-15-14.026V37.525c0-7.746 6.716-14.025 15-14.025 8.284 0 15 6.28 15 14.025v43.949z"/><ellipse fill="#FFF" cx="55.402" cy="34.265" rx="2.293" ry="2.145"/><ellipse fill="#FFF" cx="63.208" cy="34.265" rx="2.294" ry="2.145"/><path fill="none" stroke="#FFF" stroke-width="1.428" stroke-linecap="round" stroke-miterlimit="10" d="M65.887 43.062c-1.497 1.492-3.626 2.425-5.991 2.425-2.372 0-4.509-.941-6.008-2.445"/></svg>

static/img/avatars/default-avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" viewbox="0 120 0 120"><path fill-rule="evenodd" clip-rule="evenodd" fill="#DADADA" d="M60 0c33.137 0 60 26.863 60 60s-26.863 60-60 60S0 93.137 0 60 26.863 0 60 0z"/><path fill="#FAC307" d="M74.5 81.474c0 7.745-6.716 14.026-15 14.026-8.284 0-15-6.281-15-14.026V37.525c0-7.746 6.716-14.025 15-14.025 8.284 0 15 6.28 15 14.025v43.949z"/><ellipse fill="#FFF" cx="55.402" cy="34.265" rx="2.293" ry="2.145"/><ellipse fill="#FFF" cx="63.208" cy="34.265" rx="2.294" ry="2.145"/><path fill="none" stroke="#FFF" stroke-width="1.428" stroke-linecap="round" stroke-miterlimit="10" d="M65.887 43.062c-1.497 1.492-3.626 2.425-5.991 2.425-2.372 0-4.509-.941-6.008-2.445"/></svg>