css

user/config/site.yaml

@@ -1,14 +1,13 @@
 title: 'Le style de l’ours'
 default_lang: fr
 author:
-  name: 'Emmanuel Cauchois'
+  name: 'Emmanuel CAUCHOIS'
   email: joe@example.com
-  profession: 'Secretaire d''édition et de rédaction chef de projet " print "'
 taxonomies:
   - category
   - tag
 metadata:
-  description: 'Grav is an easy to use, yet powerful, open source flat-file CMS'
+  Description: 'Secretaire d''édition et de rédaction </br> Chef de projet " PRINT "'
 summary:
   enabled: true
   format: short

user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss

@@ -1,6 +1,6 @@
 .owl-carousel{
   display: flex!important;
-  margin: 100px 50px 0 50px;
+  margin: 0px 50px 0 50px;
   width: auto!important;
   .owl-stage-outer{
   height: 500px;

user/themes/le_style_de_lours_modif/scss/theme/_header.scss

@@ -114,7 +114,7 @@ header{
          content: " ";
          width: 50%;
          height: 0px;
-         border: 1px solid black;
+         border: 1px solid $blue;
          margin-left: 20px;
        }
        &::before{
@@ -122,7 +122,7 @@ header{
          content: " ";
          width: 50%;
          height: 0px;
-         border: 1px solid black;
+         border: 1px solid $blue;
          margin-right: 20px;
        }
 

user/themes/le_style_de_lours_modif/scss/theme/_start.scss

@@ -1,7 +1,11 @@
+body{
+  position:relative;
+}
+
 .arrow{
   width: 0!important;
   height: 0;
-  top: 40px;
+  top: 35px;
   left: 50%;
   right: 50%;
   border: 50px solid white;
@@ -19,224 +23,230 @@
   background-color: $bkg-d!important;
 }
 
-body{
-  position:relative;
-  padding-bottom: 20px;
-}
-
 #start{
-  &>section:last-child{
-    margin-bottom: 0!important;
+  .section{
+    margin-bottom: 150px;
+  }
+  .sous-section{
+    section{
+      margin-bottom: 100px;
+    }
   }
   section{
     position: relative;
-    margin-top: -10px;
-    margin-bottom: 100px;
-    padding-top: 5px;
-    & > h2, & > h3{
+    h2{
       text-align: center;
+      z-index: 1;
+      margin-top: -35px;
+      display: inline-flex;
+      width: 100%;
+      align-items: center;
+      &::after{
+        right: 0;
+        content: " ";
+        width: 50%;
+        height: 0px;
+        border: 1px solid $blue;
+        margin-left: 20px;
+      }
+      &::before{
+        left: 0;
+        content: " ";
+        width: 50%;
+        height: 0px;
+        border: 1px solid $blue;
+        margin-right: 20px;
+      }
     }
     h3{
       width: 100%;
+      text-align: center;
+      display: inline-flex;
+      width: 100%;
+      align-items: center;
+      white-space:nowrap;
+      &::after{
+        right: 0;
+        content: " ";
+        width: 50%;
+        height: 0px;
+        border: 2px dashed #8d2815;
+        margin-left: 20px;
+      }
+      &::before{
+        left: 0;
+        content: " ";
+        width: 50%;
+        height: 0px;
+        border: 2px dashed #8d2815;
+        margin-right: 20px;
+      }
     }
-  }
-   h2{
-    z-index: 1;
-    margin-top: -35px;
-    display: inline-flex;
-    width: 100%;
-    align-items: center;
-    &::after{
-      right: 0;
-      content: " ";
-      width: 50%;
-      height: 0px;
-      border: 1px solid $blue;
-      margin-left: 20px;
-    }
-    &::before{
-      left: 0;
-      content: " ";
-      width: 50%;
-      height: 0px;
-      border: 1px solid $blue;
-      margin-right: 20px;
+    .section-content{
+      & > h3{
+        margin: 50px auto;
+        &::before{
+          border: 0px!important;
+        }
+        &::after{
+          border: 0px!important;
+        }
+      }
+      & > p{
+        margin: 20px;
+        width: 50%;
+        text-align: center;
+        min-width: 600px;
+        margin: 50px auto 100px auto;
+
+      }
     }
   }
+
   #home{
     width: 40%;
     min-width: 700px;
-    margin: 0 auto 100px auto;
+    margin-left: auto;
+    margin-right: auto;
   }
-  #m-tier{
-  & > div{
+  .section:not(#home){
     background:$section;
+    & > .sous-section{
       display: inline-flex;
       flex-wrap: wrap;
       justify-content: center;
-      h3{
-        text-align: center;
-      }
-      & > section:nth-of-type(odd){
+      width: 100%;
+      & > .no-gal:nth-of-type(odd){
         margin-right: 50px;
       }
-      & > section:nth-of-type(even){
+      & > .no-gal:nth-of-type(even){
         margin-left: 50px;
       }
-    section{
-      width: 35%;
-      min-width: 350px;
-      &:nth-of-type(n+3){
-        position: relative;
-        .title{
-          position: absolute;
-          z-index: 1;
-          transform: rotate(-135deg);
-          width: 0;
-          height: 0;
-          top: -65px;
-          left: -70px;
-          border: 70px solid #0f265c;
-          border-top-color: transparent;
-          border-right-color: transparent;
-          border-bottom-color: transparent;
-          h3{
-            transform: rotate(90deg);
+      .no-gal:not(#clients){
+        width: 35%;
+        min-width: 350px;
+        &:nth-of-type(n+3){
+          position: relative;
+          .title{
             position: absolute;
-            top: -75px;
-            left: -50px;
+            z-index: 1;
+            transform: rotate(-135deg);
+            width: 0;
+            height: 0;
+            top: -70px;
+            left: -120px;
+            border: 70px solid #0f265c;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            h3{
+              transform: rotate(90deg);
+              position: absolute;
+              top: -75px;
+              left: -50px;
+              &:before{
+                margin-right: 7px;
+              }
+              &:after{
+                margin-left: 0px;
+              }
+            }
           }
-        }
-        & > .content{
-          display: none;
-        }
-      .images{
-        height: auto;
-        position: relative;
-        .content{
-          position: absolute;
-          top: 0;
-          left: 0;
-          display: none;
-          height: 100%;
-          width: 100%;
-          background: #0f265c;
-          p,ul,li{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translateY(-55%) translateX(-50%);
-            color: white;
+          & > .content{
+            display: none;
+          }
+          .images{
+            height: auto;
+            position: relative;
+            .content{
+              position: absolute;
+              top: 0;
+              left: 0;
+              display: none;
+              height: 100%;
+              width: 100%;
+              background: #0f265c;
+              p,ul,li{
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translateY(-55%) translateX(-50%);
+                color: white;
+              }
+            }
+            &:hover{
+              .content{
+                display: block;
+              }
+            }
           }
         }
-        &:hover{
-          .content{
-            display: block;
+        .content{
+          p{
+            text-align: justify;
           }
         }
       }
-    }
-    .content{
-      p{
-        text-align: justify;
+      section{
+        width: 100%;
+        .title{
+          margin: 0 50px;
+        }
       }
     }
-    .filet{
-      display: none;
-    }
-    }
-    }
   }
-  #r-f-rences{
+
+  #m-tier{
     h3{
-      display: inline-flex;
-      width: 100%;
-      align-items: center;
-      white-space:nowrap;
-      &::after{
-        right: 0;
-        content: " ";
-        width: 50%;
-        height: 0px;
-        border: 2px dashed #8d2815;
-        margin-left: 20px;
-      }
       &::before{
-        left: 0;
-        content: " ";
-        width: 50%;
-        height: 0px;
-        border: 2px dashed #8d2815;
-        margin-right: 20px;
+        border: 0px!important;
       }
-    }
-    & > div{
-      background: $section;
-    & > p{
-      width: 50%;
-      text-align: center;
-      min-width: 600px;
-      margin: 0px auto 0px auto;
-    }
-    .title{
-      margin-bottom: 50px;
-    }
-    section{
-      &:last-child{
-        p{
-          display: inline-flex;
-          flex-wrap: wrap;
-          align-items: center;
-          justify-content: center;
-          img{
-            margin: 0 20px;
-            width: 15%;
-            min-width: 150px;
-            height: 100%;
-          }
-        }
+      &::after{
+        border: 0px!important;
       }
     }
-    #recommandations{
+  }
+  #r-f-rences{
+    h3{
+      margin-bottom: 100px;
     }
     #clients{
       .images{
-        margin: 0 50px;
         display: inline-flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: center;
-        margin-bottom: 50px;
-        flex-wrap: wrap;
         img{
-          width: 10%;
-          min-width: 200px;
-          margin-bottom: 20px;
-        &:not(:first-child){
-          margin-left: 20px;
+          margin: 0 20px;
+          width: 15%;
+          min-width: 150px;
+          height: 100%;
         }
       }
-      }
     }
   }
 
-}
   #contact{
+    background: transparent!important;
+    margin-bottom: 0!important;
+    h2{
+      background: transparent!important;
+    }
     & > div {
       display: inline-flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
       width: 100%;
-      p{
-        width: 40%;
-        &:nth-of-type(1){
-          text-align: right;
-          margin-right: 50px;
-        }
-        // &:nth-of-type(2){
-        //   text-align: left;
-        //   margin-left: 20px;
-        // }
+        p{
+          width: 40%;
+          &:nth-of-type(1){
+            text-align: right;
+            margin-right: 50px;
+          }
+          &:nth-of-type(2){
+            text-align: left;
+          }
         img{
           margin-bottom: 20px;
           border-radius: 150px;

user/themes/le_style_de_lours_modif/scss/theme/_typography.scss

@@ -38,6 +38,7 @@ h1{
   font-size: $fontH1;
   line-height: $lineH96;
   a{
+    color: $blue!important;
     font-family: $Regular-L;
     font-size: $fontH1;
     line-height: $lineH96;
@@ -46,10 +47,9 @@ h1{
 
 h2{
   font-size: $fonth2;
-  line-height: $lineH40;
-  margin-bottom: -10px;
+  line-height: $lineH30;
   color: $blue!important;
-
+  background: white;
 }
 
 h3{
@@ -93,11 +93,11 @@ header{
 
 #start{
   &> section > div > h3{
-    margin-top: 120px;
+    // margin-top: 120px;
   }
   &> section > div > p{
-    padding-top: 120px!important;
-    padding-bottom: 100px;
+    // padding-top: 120px!important;
+    // padding-bottom: 100px;
   }
 
   section{
@@ -151,20 +151,19 @@ header{
       line-height: 1.7rem;
     }
     .title{
-      margin: 0 50px;
+      // margin: 0 50px;
     }
     h3{
       font-family: $Regular-L;
       text-align: center;
       color: $h3-color;
-      width: 350px;
       margin: auto;
       background-color: $section;
     }
     #travaux_r-alis-s{
       .galerie{
         p{
-          font-size: 0.8rem; 
+          font-size: 0.8rem;
           line-height: 1.2rem;
         }
       }

user/themes/le_style_de_lours_modif/scss/theme/_variables.scss

@@ -22,6 +22,8 @@ $fontH1: 4rem;
 
 // interline
 $lineH24: 2rem;
+$lineH30: 2.5rem;
+
 $lineH32: 3rem;
 $lineH40: 4rem;
 $lineH96:6rem;

user/themes/le_style_de_lours_modif/templates/modular.html.twig

@@ -26,7 +26,7 @@
         {% endfor %}
         {% for mitem in site.menu %}
             <li>
-                <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
+                <a {% if mitem.class %} class="{{ mitem.class }}" {% endif %} href="{{ mitem.url }}">
                     {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                     {{ mitem.text }}
                 </a>
@@ -46,77 +46,32 @@
 {% endblock %}
 
 {% block body %}
-  <section id="{{ macro.pageLinkName(page.menu) }}">
+  <section id="{{ macro.pageLinkName(page.menu) }}" class="section">
     {{page.content}}
   </section>
 
   {% for module in page.collection() if module.template == 'blog' %}
 
-    <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}">
-
-      <h2>{{ module.title }}</h2>
-      <div class="arrow"></div>
-      <div>
+    <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}" class="section">
+      <div class="content section-content">
+        <h2>{{ module.title }}</h2>
+        <div class="arrow"></div>
         {{ module.content|raw }}
+      </div>
 
-      {% for child in module.collection %}
-      {% set gal = child.header.blog.config %}
-
-        <section id="{{ macro.pageLinkName(child.menu)|hyphenize }}">
-
-            {% if child.title %}
-              <div class="title">
-                <h3>{{ child.title }}</h3>
-              </div>
-            {% endif %}
-
-            {% if child.content %}
-              <div class="content">
-                {{ child.content }}
-              </div>
-            {% endif %}
+      <div class="sous-section">
+        {% for child in module.collection %}
+          {% set gal = child.header.blog.config %}
 
-            <div class="images">
-            {% for images in child.media.images %}
-                {{ images.html }}
-                <div class="content">
-                  {{ child.content }}
-                </div>
-            {% endfor %}
-          </div>
-
-        {% if gal %}
-          <div class="owl-carousel">
-          {% for item in child.collection %}
-          <div class="galerie">
-            {% for images in item.media.images %}
-              <div class="images">
-                {{ images.html }}
-              </div>
-            {% endfor %}
-            <div class="content">
-              {{ item.content }}
-            </div>
-          </div>
-          {% endfor %}
-        </div>
-        {% else %}
-
-          {% for item in child.collection %}
-            <h4>{{ item.title }}</h4>
-            {{ item.content }}
-            <div class="images">
-            {% for images in item.media.images %}
-                {{ images.html }}
-            {% endfor %}
-          </div>
-          {% endfor %}
+          {% if gal %}
+            {% include 'partials/blog/sous-gal.html.twig' %}
+          {% else %}
+            {% include 'partials/blog/no-gal.html.twig' %}
+          {% endif %}
+        {% endfor %}
+      </div>
 
-        {% endif %}
       </section>
-      {% endfor %}
-    </div>
 
-    </section>
   {% endfor %}
 {% endblock %}

user/themes/le_style_de_lours_modif/templates/partials/base.html.twig

@@ -79,7 +79,7 @@
             <p>{{ theme_config.profile.name | default(site.author.name) }}</p>
           </div>
           <div id="pro">
-            <p>{{ site.author.profession }}</p>
+            <p>{{ site.metadata.Description }}</p>
           </div>
         </div>
 

user/themes/le_style_de_lours_modif/templates/partials/blog/no-gal.html.twig

@@ -0,0 +1,38 @@
+<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="no-gal">
+
+    {% if child.title %}
+      <div class="title">
+        <h3>{{ child.title }}</h3>
+      </div>
+    {% endif %}
+
+    {% if child.content %}
+      <div class="content">
+        {{ child.content }}
+      </div>
+    {% endif %}
+
+    <div class="images">
+      {% for images in child.media.images %}
+        {% if images.html %}
+          {{ images.html }}
+          {% if child.content %}
+            <div class="content">
+              {{ child.content }}
+            </div>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    </div>
+
+  {% for item in child.collection %}
+    <h4>{{ item.title }}</h4>
+    {{ item.content }}
+    <div class="images">
+    {% for images in item.media.images %}
+        {{ images.html }}
+    {% endfor %}
+  </div>
+  {% endfor %}
+
+</section>

user/themes/le_style_de_lours_modif/templates/partials/blog/sous-gal.html.twig

@@ -0,0 +1,39 @@
+<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="sous-gal">
+
+  {% if child.title %}
+    <div class="title">
+      <h3>{{ child.title }}</h3>
+    </div>
+  {% endif %}
+
+  {% if child.content %}
+    <div class="content">
+      {{ child.content }}
+    </div>
+  {% endif %}
+
+  <div class="images">
+    {% for images in child.media.images %}
+      {{ images.html }}
+      <div class="content">
+        {{ child.content }}
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="owl-carousel">
+    {% for item in child.collection %}
+      <div class="galerie">
+        {% for images in item.media.images %}
+          <div class="images">
+            {{ images.html }}
+          </div>
+        {% endfor %}
+        <div class="content">
+          {{ item.content }}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+</section>