static/saumur/_custom.scss

@@ -13,7 +13,7 @@ $banner-height: 300px;
     text-transform: uppercase;
 }
 
-// golbal layout
+// global layout
 
 main {
     background: white;
@@ -25,7 +25,7 @@ main {
 
 .site-header {
     background-color: white;
-    height: 150px;
+    height: 200px;
     @media screen and ($min-desktop-viewport) {
         height: 300px;
     }
@@ -33,19 +33,54 @@ main {
 
 body.has-header-background .site-header {
     background-color: white;
-    background-image: var(--banner-url);
+    background-image: var(--banner-url, url(/assets/header:background));
     background-size: cover;
     background-position: center;
 }
-#logo.has-logo a {
-    height: 100px;
-    width: 250px;
-    @media screen and ($max-mobile-viewport) {
-        margin-top: $space-medium;
+
+div#header {
+    max-width: 1600px;
+}
+
+#top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media ($max-mobile-viewport) {
+        flex-wrap: wrap;
     }
-    @media screen and ($min-desktop-viewport) {
-        height: 200px;
-        width: 500px;
+    @media ($min-desktop-viewport) {
+        padding-top: 2.5rem;
+    }
+}
+
+#logo.has-logo {
+    padding-left: 0;
+    max-width: 50%;
+    a {
+        height: 100px;
+        width: 250px;
+        max-width: 100%;
+        @media screen and ($min-desktop-viewport) {
+            height: 200px;
+            width: 500px;
+        }
+    }
+}
+
+.logo-commune {
+    max-width: 40%;
+    &--link {
+        display: block;
+    }
+    &--img {
+        width: 100px;
+        height: 100px;
+        object-fit: contain;
+        @media screen and ($min-desktop-viewport) {
+            height: 200px;
+            width: 200px;
+        }
     }
 }
 
@@ -61,14 +96,21 @@ div#nav {
 
 #toplinks {
     @media screen and ($max-mobile-viewport) {
-        right: $space-xlarge * 2;
+        position: static;
+        order: -1;
+        flex: 1 1 100%;
+        padding-right: calc(#{$nav-menu-side} + 2em);
+        max-width: none;
+        min-height: $nav-menu-side;
+        margin-left: -0.7em;
+        margin-right: -0.7em;
     }
 }
 div.gru-nav {
     @media screen and ($max-mobile-viewport) {
         .gru-nav-button {
-            top: $space-small;
-            right: $space-small;
+            top: 0;
+            right: 0.7rem;
             left: unset;
             & + ul::before {
                 display: none;
@@ -101,14 +143,21 @@ h3 {
 %cell-links-list {
     font-family: Roboto, sans-serif;
     li a {
-        z-index: 0;
-    }
-    li div.description p {
-        margin-left: 0;
-        margin-top: -$space-large * 0.7;
-        position: relative;
-        z-index: 1000;
+        padding-top: 0.65rem;
+        padding-bottom: 0.65rem;
+
+        &:hover + .description {
+            background-color: $cell-entry-hover-background;
+        }
     }
+    li div.description {
+        margin-top: -0.65rem;
+        padding-bottom: 0.65rem;
+        p {
+            margin: 0;
+            position: relative;
+        }
+    } 
 }
 
 .search-cell.transparent {
@@ -252,7 +301,7 @@ div#services-communes {
 #footer-wrapper {
     padding-bottom: 0;
     #footer {
-        max-width: 100%;         
+        max-width: $width * 0.75;
     }
     margin-top: 0;
     border-top: 3px solid $orange;
@@ -260,29 +309,22 @@ div#services-communes {
         a {
             text-decoration: none;
         }
-        & > div {
-            max-width: $width;
-            margin: 0 auto;
-        }
     }
-    .text-cell:first-child {
-        > div {
-            max-width: $width * 0.75;
-        }
+    .text-cell{
         strong {
             color: $orange;
         }
     }
-    .text-cell:not(:first-child) {
-        background: $orange;
+}
+.orange-footer-wrapper {
+    background: $orange;
+    color: white;
+    a {
         color: white;
-        a {
-            color: white;
-        }
     }
 }
 
 div#tracking-code a {
     padding-right: 0;
     font-size: 110%;
-}
+}

static/saumur/_vars.scss

@@ -50,8 +50,10 @@ $nav-button-background: $white;
 $nav-background: $pink;
 $nav-after-image: false;
 $nav-button-color: $black;
+$nav-button-background: $gray-light-2;
 $nav-color: white;
 $nav-mobile-menu-background: $white;
+$nav-border-color: none;
 
 $nav-item-selected-background: $orange;
 $nav-item-selected-color: $white;
@@ -78,6 +80,7 @@ $cell-entry-border: 2px dotted $gray-dark-1;
 $cell-title-cover-border: false;
 $title-color: $gray-dark-1;
 $title-transform: uppercase;
+$cell-entry-hover-background: #eee;
 
 $button-background: $light-green;
 $button-color: $gray-dark-1;

templates/variants/saumur/combo/page_template.html

@@ -1,24 +1,43 @@
 {% extends 'combo/page_template.html' %}
 {% load assets combo i18n %}
 
+{% block header-title %}
+  {{ block.super }}
 
+  {% if code_postal_commune %}
+    {% with cards|objects:"commune-1"|filter_by:"code_postal"|filter_value:code_postal_commune|include_fields|first|get:"fields" as commune_card %}
+      {% with commune_card|get:'banner' as banner %}
+        {% if banner %}
+          <style>
+            :root {
+              --banner-url: url('{% make_public_url banner.url %}');
+            }
+          </style>
+        {% endif %}
+      {% endwith %}
+
+      {% if commune_card.logocommune %}
+        <div class="logo-commune">
+          <a class="logo-commune--link" href="{{ commune_card.urlsitecommune }}" title="Aller sur le portail de {{ commune_card.nomcommune }}">
+            <img class="logo-commune--img" src="{% make_public_url commune_card.logocommune.url %}" alt="{{ commune_card.nomcommune }}">
+          </a>
+        </div>
+      {% endif %}
+    {% endwith %}
+  {% endif %}
+{% endblock %}
 
 {% block before-main-content %}
-  <style>
-    :root {
-      {% if code_postal_commune %}
-      {% with cards|objects:"commune"|filter_by:"code_postal"|filter_value:code_postal_commune|include_fields|first|get:"fields" as commune_card %}  
-      {% with commune_card|get:'banner' as banner %}
-      --banner-url: url('{% make_public_url banner.url %}');
-      {% endwith %}
-      {% endwith %}
-      {% else %}
-      --banner-url: url(/assets/header:background);
-      {% endif %}
-    }
-  </style>
   {{ block.super }}
   {% if banner_background %}
     <div class="banner"></div>
   {% endif %}
 {% endblock %}
+
+{% block footer-post %}
+  <div class="orange-footer-wrapper">
+    <div class="orange-footer page-width">
+      {% placeholder "orange-footer" acquired=True name="Pied de page orange" optional=True %}
+    </div>
+  </div>
+{% endblock %}