static/css/fonts/roboto-slab.css

@@ -1,8 +1,9 @@
+/* latin */
 @font-face {
-  font-family: 'Lexend';
+  font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 100 900;
   font-display: block;
-  src: url(https://fonts.gstatic.com/s/lexend/v23/wlpwgwvFAVdoq2_v-6QU82RHaA.woff2) format('woff2');
+  src: url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}

static/css/main.css

@@ -1,9 +1,9 @@
 @import url('fonts/nunito.css');
-@import url('fonts/lexend.css');
+@import url('fonts/roboto-slab.css');
 
 html {
   color: rgba(53,53,53,1)!important;
-  font-size: 1rem;
+  font-size: 1em;
   line-height: 1.15;
   font-kerning: normal;
   overflow-x: hidden;
@@ -12,12 +12,14 @@ body {
   font-family: var(--bs-body-font-family);
   background-color: var(--background);
   overflow-x: hidden;
+  font-size: 1.125rem;
   letter-spacing: .125px;
 /*   -webkit-font-smoothing: antialiased; */
   font-variant-ligatures: no-common-ligatures;
+/*   font-weight: 400; */
 }
 h1, h2, h3, h4{
-  font-family: var(--bs-ttl-font-family);
+  font-family: 'Roboto Slab';
 }
 /* ::selection, ::-moz-selection {
   background-color: var(--grauwert3);
@@ -32,13 +34,14 @@ h1, h2, h3, h4{
   --accent:45,98%; /* hsl */
   --accent-normal: hsl(var(--accent), 54%);
   --accent-light: hsl(var(--accent), 75%);
+  --bs-btn-active-color: var(--grau);
+  --bs-btn-active-border-color: var(--grau);
   --bs-btn-hover-bg: #f28705;
   --bs-link-color: #f28705;
-  --bs-body-font-family: 'Nunito', Arial, Tahoma, sans-serif;
-  --bs-ttl-font-family: 'Lexend', Arial, Tahoma, sans-serif;
+  --bs-body-font-family: "Nunito", Arial, Tahoma, sans-serif;
   --top-bar: 98px;
   --bottom-bar: 5em;
-  --div-padding: 3em;
+  --div-padding: 3rem;
 }
 .top-bar{
   height: var(--top-bar);
@@ -55,6 +58,9 @@ h1, h2, h3, h4{
 #mainNav, .offcanvas-backdrop{
   top: var(--top-bar);
 }
+/* .offcanvas-body{
+  background-color: var(--accent-light);
+} */
 .offcanvas-header, .offcanvas-body{
   padding: 1.625rem;
 }
@@ -116,9 +122,6 @@ h1, h2, h3, h4{
   margin-top: var(--top-bar);
   height: auto;
 }
-.hero .d-flex{
-  justify-content: center;
-}
 .hero .row{
   justify-content: center !important;
   align-items: flex-end !important;
@@ -235,11 +238,12 @@ article li:not(:first-of-type){
   color: darkgray;
 }
 .profile .user-avatar{
-  text-align:center;
+  display: flex;
+  justify-content: center;;
 }
 .user-avatar img{
-  width: 9rem;
-  height: 9rem;
+  width: 9em;
+  height: 9em;
   object-fit: cover;
   object-position: top;
   border: 2px solid #f28705;
@@ -374,7 +378,7 @@ footer a img{
 /* media queries */
 @media (width <= 576px) {
   body{
-    font-size: 1.125rem;
+    font-size: 0.9rem;
   }
   :root{
     --div-padding: 2em;
@@ -412,6 +416,9 @@ footer a img{
   h1, h2, h3, h4{
     text-align: center;
   }
+  .profile .user-avatar{
+    text-align: center;
+  }
   .profile-options{
     display: grid;
     gap: 0 .5rem;

tandem-list.html

@@ -88,13 +88,10 @@
     </header>
 
     <main data-screen="search">
-        <div class="hero hero-primary container-fluid">
+        <div class="hero hero-secondary container-fluid">
             <div class="d-flex">
-                <div class="row">
-                    <div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
-                        <img class="img-fluid" src="static/img/ban-3.png">
-                    </div>
-                    <div class="col-lg-6 order-1 order-lg-2">
+                <div class="container">
+                    <div class="col-lg-8">
                         <h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Rechercher des TANDEMs</h1>
                     </div>
                 </div>
@@ -148,7 +145,7 @@
 
                 <section id="tandem-list" class="col-lg-8">
                     <div class="ui-btn">
-                        <a data-bs-toggle="collapse" href="#search-filters" role="button" aria-expanded="false" aria-controls="search-filters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Filtrer</a>
+                        <a data-bs-toggle="collapse" href="#search-filters" role="button" aria-expanded="false" aria-controls="search-filters"><span><img class="icon-ui" src="static/img/icons/filters.svg" alt=""></span>Afficher les filtres</a>
                     </div>
                     <div id="search-filters" class="collapse">
                         <form>
@@ -220,7 +217,7 @@
                         </form>
                     </div>
                     <div id="search-total-results" class="alert alert-warning mt-3">
-                        XX profils correspondent à votre recherche
+                        XX profils correspondent à vos critères de recherche
                     </div>
 
                     <div id="tandem-search-results">