finished for desktop version

user/themes/labonneadresse/css/styles.css

@@ -7216,7 +7216,7 @@ header#top-bar {
       list-style: none; }
     @media screen and (min-width: 40em) {
       header#top-bar .nav .wrapper {
-        padding-top: 4.15em; } }
+        padding-top: 4.55em; } }
   header#top-bar #left-nav a {
     font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 0.87em;
@@ -7264,7 +7264,7 @@ header#top-bar {
   \_____\___|_| |_|\__\___|_|
 */
 div#center {
-  padding-top: 11.5em;
+  padding-top: 12.3em;
   padding-bottom: 6em;
   /*
   * LIST PROJET
@@ -7278,7 +7278,7 @@ div#center {
   div#center .columns {
     padding: 0; }
   div#center p {
-    display: inline-block;
+    line-height: 1.5;
     position: relative;
     font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 0.8em;
@@ -7293,6 +7293,8 @@ div#center {
         display: block;
         margin-top: -1em;
         border-top: 0.5em solid lime; }
+    div#center p a {
+      text-decoration: underline; }
   div#center .projet-block {
     padding: 0.7em;
     text-align: center; }
@@ -7354,28 +7356,34 @@ div#center {
     font-size: 0.87em;
     font-weight: bold;
     margin: 0;
-    padding: 0 0.7em; }
+    padding: 0 0.7em;
+    line-height: 1;
+    display: inline-block; }
     div#center .projet h1:after {
       content: "";
       display: block;
-      margin-top: -.5em;
-      margin-bottom: .5em;
+      margin-top: -.7em;
+      margin-bottom: .7em;
       border-top: 0.5em solid lime;
       transition: border-color 0.3s ease-in; }
   div#center .projet h2 {
     font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
     font-size: 0.8em;
     font-weight: normal;
-    margin: 0;
+    margin: -0.2em 0 0.7em;
+    line-height: 1;
     padding: 0 0.7em; }
   div#center .projet p {
-    padding: 0.7em;
+    padding: 0 0.7em 0.7em;
     margin: 0; }
   div#center .projet #images .block {
     padding: 0.7em; }
   div#center .projet img {
     width: 100%;
     max-width: 100%; }
+  div#center .default > * {
+    padding-left: 0.7em;
+    padding-right: 0.7em; }
   div#center body.projet nav.categories ul.tags li a:hover span {
     text-decoration: underline; }
   div#center nav.categories {
@@ -7449,6 +7457,8 @@ div#center {
       font: "CiutadellaRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
       font-size: 0.8em;
       font-weight: normal; }
+      div#center .client-block h4 a:hover {
+        text-decoration: underline; }
 
 /*
                                       _             _                         _
@@ -7464,12 +7474,12 @@ div#center {
   header#top-bar:before {
     padding-bottom: 0.45em; }
   header#top-bar #title-area {
-    height: 9.3em -1.2em; }
+    height: 10.1em -2.1em; }
     header#top-bar #title-area h1 a {
       display: block;
       height: 6.3em; }
   header#top-bar.reduced #title-area {
-    height: 6.075em;
+    height: 6.044em;
     overflow: hidden; }
   header#top-bar .nav {
     position: absolute;
@@ -7480,7 +7490,7 @@ div#center {
   header#top-bar #right-nav {
     right: 0; }
   div#center {
-    padding-top: 10.4em;
+    padding-top: 11.2em;
     padding-bottom: 6em; } }
 
 /*

user/themes/labonneadresse/scss/styles.scss

@@ -63,10 +63,11 @@ ul,li{padding:0; margin:0; list-style: none;}
 */
 $headerborderH: 0.3em;
 $headerpaddingtopH:0.9em;
-$titlearea_mt:0.3em;
-$titlearea_mb:0.5em;
-$titleareaH: 9.3em;
-$titleareaHReduced: 5em;
+$logoH: 9.3em;
+$logo_mt:0.3em;
+$logo_mb:0.5em;
+$titleareaH: $logoH+$logo_mb+$logo_mt;
+$titleReducedFactor:0.7555;
 $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
 $footerheight: 5em;
 $centerpaddingbottom:$footerheight+1em;
@@ -95,18 +96,18 @@ header#top-bar{
   #title-area{
     // overflow: hidden;
     position:relative;
-    height:$titleareaH + $titlearea_mt + $titlearea_mb;
+    height:$titleareaH;
     transition: height 0.4s ease-in-out;
     h1{
       font-size: 1em; margin: 0;
       height:100%;
-      min-height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.8;
+      min-height:$titleareaH*0.8;
       overflow: hidden;
       position: relative;
       a{display: block;
         // height:100%;
-        height:$titleareaH;
-        margin:$titlearea_mt 0 $titlearea_mb;
+        height:$logoH;
+        margin:$logo_mt 0 $logo_mb;
         // height:$titleareaH;
         background: transparent url("../images/logo.png") no-repeat center center;
         background-size: contain;}
@@ -118,7 +119,7 @@ header#top-bar{
 
   &.reduced{
     #title-area{
-      height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.7555;
+      height:$titleareaH*$titleReducedFactor;
     }
   }
 
@@ -202,8 +203,9 @@ div#center{
   }
 
   p{
-    // line-height:0.6;
-    display:inline-block; position:relative;
+    line-height:1.5;
+    // display:inline-block;
+    position:relative;
     @include fontnormal;
     span.stab{
       display:inline-block; position:relative;
@@ -215,7 +217,9 @@ div#center{
         // transition:border-color 0.3s ease-in;}
       }
     }
-
+    a{
+      text-decoration: underline;
+    }
   }
 
   /*
@@ -275,20 +279,20 @@ div#center{
     .row{margin:0;}
     h1{
       @include fontbold;
-      margin:0; padding:0 0.7em;
-      // $green overline
+      margin:0; padding:0 0.7em; line-height: 1;
+      display: inline-block;
       &:after{
         content: "";
-        display: block; margin-top:-.5em; margin-bottom:.5em;
+        display: block; margin-top:-.7em; margin-bottom:.7em;
         border-top:0.5em solid $green;
         transition:border-color 0.3s ease-in;}
     }
-    h2{@include fontnormal; margin:0; padding:0 0.7em;}
+    h2{@include fontnormal;  margin:-0.2em 0 0.7em; line-height: 1; padding:0 0.7em;}
     // .block{
     //   display: inline-block;
     // }
 
-    p{padding:0.7em; margin:0;}
+    p{padding:0 0.7em 0.7em; margin:0;}
 
     #images{
       // .row{margin:0;}
@@ -301,6 +305,10 @@ div#center{
 
   }
 
+  .default{
+    >*{padding-left:0.7em;padding-right:0.7em;}
+  }
+
   body.projet{
     nav.categories{
       ul.tags li a:hover span{
@@ -319,7 +327,10 @@ div#center{
       li{
         list-style: none; display:inline-block;
         margin:0 1em;
-        a{display:block;}
+        a{
+          display:block;
+          // &:hover{text-decoration: underline;}
+        }
         span{@include fontnormal;}
         &.active span{
           display:inline-block;
@@ -352,6 +363,7 @@ div#center{
       img{height:100%;}
     }
   }
+
   .client-block{
     margin:0 0 1em;
     h3{
@@ -369,6 +381,7 @@ div#center{
     h4{
       margin:0;
       @include fontnormal;
+      a:hover{text-decoration: underline;}
     }
 
   }
@@ -391,11 +404,11 @@ div#center{
     }
 
     #title-area{
-      height:$titleareaH -2.1em + $headerpaddingtopH;
+      height:$titleareaH -2.1em;
       // padding-top: $headerpaddingtopH;
       h1{
         a{display: block;
-          height:$titleareaH - 3em;
+          height:$logoH - 3em;
           // height:100%;
         }
       }
@@ -403,7 +416,7 @@ div#center{
 
     &.reduced{
       #title-area{
-        height:($titleareaH - 2.1em  + $headerpaddingtopH)*0.75;
+        height:($titleareaH - 2.1em)*$titleReducedFactor;
         overflow: hidden;
       }
     }

user/themes/labonneadresse/templates/default.html.twig

@@ -1,5 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+  <section class="default">
     {{ page.content }}
+  </section>
 {% endblock %}