From 8c7031342bf139e014bb7b8ef580c567b768469f Mon Sep 17 00:00:00 2001
From: Agate Berriot <aberriot@entrouvert.com>
Date: Tue, 4 Oct 2022 16:39:37 +0200
Subject: [PATCH] univ-nantes: new theme (#69791)

---
 static/saumur/_custom.scss                    | 268 ++++++++++++++++++
 static/saumur/_vars.scss                      |  92 ++++++
 static/saumur/config.json                     |  14 +
 static/saumur/img/facebook.png                | Bin 0 -> 15877 bytes
 static/saumur/img/instagram.png               | Bin 0 -> 50060 bytes
 static/saumur/img/linkedin.png                | Bin 0 -> 24208 bytes
 static/saumur/style.scss                      |   6 +
 .../variants/saumur/combo/page_template.html  |  15 +
 .../saumur/includes/social-links.html         |   9 +
 9 files changed, 404 insertions(+)
 create mode 100644 static/saumur/_custom.scss
 create mode 100644 static/saumur/_vars.scss
 create mode 100644 static/saumur/config.json
 create mode 100644 static/saumur/img/facebook.png
 create mode 100644 static/saumur/img/instagram.png
 create mode 100644 static/saumur/img/linkedin.png
 create mode 100644 static/saumur/style.scss
 create mode 100644 templates/variants/saumur/combo/page_template.html
 create mode 100644 templates/variants/saumur/includes/social-links.html

diff --git a/static/saumur/_custom.scss b/static/saumur/_custom.scss
new file mode 100644
index 00000000..f2bb1bef
--- /dev/null
+++ b/static/saumur/_custom.scss
@@ -0,0 +1,268 @@
+$logo-height: 140px;
+$banner-height: 300px;
+
+%button {
+    box-shadow: none;
+    text-transform: uppercase;
+    &:hover {
+        box-shadow: none;
+    }
+}
+
+%title {
+    text-transform: uppercase;
+}
+
+// golbal layout
+
+main {
+    background: $gray-light-2;
+    padding: $space-large 0;
+}
+
+
+// header and navigation
+
+#logo {
+    @media screen and ($max-mobile-viewport) { 
+        padding: 0 $space-xsmall;
+        
+    }
+}
+
+#logo.has-logo a {
+    z-index: 2;
+    height: $logo-height / 2;
+    min-width: $logo-height;
+    @media screen and ($min-desktop-viewport) { 
+        height: $logo-height;
+        min-width: $logo-height * 2;
+    }
+}
+
+.site-nav {
+    z-index: 101;
+}
+.gru-nav-wrapper {
+    margin-top: -$logo-height * 0.85;
+}
+div#nav {
+    text-transform: uppercase;
+}
+div.gru-nav {
+    background: transparent;
+    @media screen and ($min-desktop-viewport) {
+        > ul {
+            text-align: right;
+            float: right;
+        }
+    }
+    & > ul > li:first-child > a {
+        border-radius: $border-radius-1;
+    }
+    & > ul > li a {
+        font-weight: 500;
+    }
+    .menu--link {
+        border-radius: $border-radius-1;
+        
+    }
+    @media screen and ($max-mobile-viewport) {
+        .gru-nav-button {
+            top: $space-small;
+            right: $space-small;
+            left: unset;
+            & + ul::before {
+                display: none;
+            }
+        }
+        &.togglable .menu {
+            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);
+            & > li {
+                border-bottom: 1px solid $gray-light-3;
+            }
+        }
+    }
+}
+
+#toplinks {
+    @media screen and ($max-mobile-viewport) {
+        margin-top: $space-small;
+        margin-right: $nav-menu-side;
+        background: transparent;
+    }
+}
+
+//  banner
+
+.banner {
+    background-image: url(/assets/banner:background);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: $banner-height / 1.5;
+    @media screen and ($min-desktop-viewport) {
+        height: $banner-height;
+    }
+}
+// content and cells
+
+h1, h2, h3, h4, h5, h6 {
+    @extend %title;
+}
+h1 {
+    font-size: $fz-1;
+}
+h2 {
+    font-size: $fz-2;
+}
+h3 {
+    font-size: $fz-3;
+}
+
+.search-cell.transparent {
+    border: none;
+    background: transparent;
+    form {
+        padding: 0;
+    }
+}
+
+
+#sidebar {
+    div#rub_service div.category h3,
+    div.a2-block h2,
+    .block h2,
+    div.links-list h2,
+    div#services > ul > li > strong > a,
+    div.textcell h2:first-child,
+    div.cell h2:first-child {
+        background-color: $gray-dark-1;
+        color: $white;
+        font-weight: 600;
+        &::before {
+			content: '\f054';
+			font-family: FontAwesome;
+			margin-right: 0.6em;
+            font-size: 0.6em;
+			display: inline-block;
+			vertical-align: middle;
+		}
+    }
+}
+
+%orange-border {
+    content: " ";
+    display: block;
+    margin: $space-small auto;
+    border-bottom: 3px solid $orange;
+}
+
+#columns-wrapper {
+    div#rub_service div.category h3,
+    div.a2-block h2,
+    .block h2,
+    div.links-list h2,
+    div#services > ul > li > strong > a,
+    div.textcell h2:first-child,
+    div.cell:not(.has-asset-picture) h2:first-child {
+        &::after {
+            @extend %orange-border
+        }
+    }
+}
+
+.gru-content div.cell.has-asset-picture {
+    & > div {
+        position: relative;
+    }
+    h2:first-child {
+        padding-left: $space-large * 1.75;
+        width: 100%;
+    }
+    img {
+        position: absolute;
+        width: $space-large * 1.5;
+        top: $space-xsmall;
+        left: $space-small;
+    }
+    &.foldable:not(.folded) picture::after {
+        @extend %orange-border;
+        margin: 0 1rem;
+    }
+    &:not(.foldable) picture::after {
+        @extend %orange-border;
+        margin: 0 1rem;
+    }
+}
+
+// forms
+.form-content, .form-content--sidebox, .form-content--body {
+    @extend %cell;
+}
+
+.form-previous {
+    &::before {
+        content: '\f053';
+        font-family: FontAwesome;
+        margin-right: 0.6em;
+        font-size: 0.6em;
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+.form-next {
+    &::after {
+        content: '\f054';
+        font-family: FontAwesome;
+        margin-left: 0.6em;
+        font-size: 0.6em;
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
+// footer
+#footer-wrapper {
+    margin-top: 0;
+}
+.social-links {
+    h2 {
+        font-size: $fz-2;
+        text-transform: uppercase;
+        margin-top: $space-medium;
+        border-top: 3px solid $light-green;
+        border-bottom: 3px solid $light-green;
+        margin-left: auto;
+        margin-right: auto;
+        display: inline-block;
+        strong {
+            color: $primary-color;
+        }
+    }
+    a {
+        display: inline-block;
+        height: 80px! important;
+        width: 80px! important;
+        border-radius: 50%;
+        padding: $space-small;
+        border: 2px solid $light-green;
+        margin: $space-medium;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 80%;
+    }
+
+    .link--linkedin { 
+        background-image: url(img/linkedin.png);
+    }
+    .link--instagram {
+        background-image: url(img/instagram.png);
+    }
+    .link--facebook {
+        background-image: url(img/facebook.png);
+    }
+}
+footer {
+    text-align: center;
+}
diff --git a/static/saumur/_vars.scss b/static/saumur/_vars.scss
new file mode 100644
index 00000000..86c127ce
--- /dev/null
+++ b/static/saumur/_vars.scss
@@ -0,0 +1,92 @@
+$orange: #EA5625;
+$pink: #F4A7A8;
+$light-green: #C5DED1;
+$black: black;
+$white: white;
+
+
+// $carbon: #222222;
+// $white: #ffffff;
+// $epicea: #5d7b84;
+
+// $gray-secondary: #666666;
+$gray-light-1: #EEEEEE;
+$gray-light-2: #EAECE8;
+$gray-light-3: #A9A9A9;
+$gray-dark-1: #596E80;
+
+$primary-color: $orange;
+
+$space-xsmall: 0.25em;
+$space-small: 0.5em;
+$space-medium: 1em;
+$space-large: 2em;
+$space-xlarge: 3em;
+
+$border-radius-1: 15px;
+
+// // typo
+$font-color: $black;
+$font-family: Manrope, sans-serif;
+$font-size: 18px;
+$font-line-height: 1.4;
+$base-font: 16;
+$fz-1: 30em / $base-font;
+$fz-2: 24em / $base-font;
+$fz-3: 21em / $base-font;
+$fz-4: 18em / $base-font;
+$fz-small: 14em / $base-font;
+$fz-xsmall: 12em / $base-font;;
+$fz-xxsmall: 11em / $base-font;;
+
+$width: 1200px;
+$link-color: inherit;
+$link-decoration: underline;
+$link-hover-decoration: none;
+
+$responsive-menu: left-to-right;
+$nav-button-background: $white;
+$nav-button-color: $black;
+
+$nav-mobile-menu-background: $white;
+
+$nav-item-selected-background: $orange;
+$nav-item-selected-color: $white;
+
+$nav-item-hover-background: $white;
+$nav-item-hover-color: $orange;
+$nav-item-hover-border: 1px solid $orange;
+
+$nav-submenu-background: $orange;
+$nav-submenu-color: $white;
+
+$toplinks-border-radius: 0;
+$toplinks-background: transparent;
+$toplinks-box-shadow: none;
+$toplinks-padding: $space-medium;
+$toplinks-border: none;
+
+$cell-border: 1px solid $gray-dark-1;
+$cell-entry-border: 2px dotted $gray-dark-1;
+$cell-title-cover-border: false;
+$title-color: $gray-dark-1;
+$title-transform: uppercase;
+
+$button-background: $light-green;
+$button-color: $gray-dark-1;
+$button-border-radius: $border-radius-1;
+$button-box-shadow: none;
+$button-hover-background: $orange;
+$button-hover-color: $white;
+$button-focus-outline: 2px solid $orange;
+$button-focus-outline-offset: 2px;
+$buttons-order: previous, cancel (grow), submit;
+
+$widget-background: $gray-light-1;
+$widget-border: 1px solid $gray-dark-1;
+$widget-focus-border: 1px solid $orange;
+$widget-focus-background: $white;
+
+$footer-background: $orange;
+$footer-color: $white;
+$footer-link-color: $white;
diff --git a/static/saumur/config.json b/static/saumur/config.json
new file mode 100644
index 00000000..c95536a7
--- /dev/null
+++ b/static/saumur/config.json
@@ -0,0 +1,14 @@
+{
+  "label": "Saumur Agglomération",
+  "variables": {
+    "theme_color": "#EA5625"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "banner:background": {"label": "Bannière : image de fond"}
+      }
+    }
+  }
+}
diff --git a/static/saumur/img/facebook.png b/static/saumur/img/facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..e468f214a10008a23eeeea824b92a04265bf8995
GIT binary patch
diff --git a/static/saumur/img/instagram.png b/static/saumur/img/instagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcbbb41ce2853ecd19d59e1e29cadcfd14b74b85
GIT binary patch
diff --git a/static/saumur/img/linkedin.png b/static/saumur/img/linkedin.png
new file mode 100644
index 0000000000000000000000000000000000000000..21932de350ff381568426b2c5e1817a2f647db7e
GIT binary patch
diff --git a/static/saumur/style.scss b/static/saumur/style.scss
new file mode 100644
index 00000000..cf7cc33e
--- /dev/null
+++ b/static/saumur/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/montserrat';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/saumur/combo/page_template.html b/templates/variants/saumur/combo/page_template.html
new file mode 100644
index 00000000..2f7caaa8
--- /dev/null
+++ b/templates/variants/saumur/combo/page_template.html
@@ -0,0 +1,15 @@
+{% extends 'combo/page_template.html' %}
+{% load assets combo i18n %}
+
+{% block before-main-content %}
+  {{ block.super }}
+  {% get_asset "banner:background" as banner_background %}
+  {% if banner_background %}
+    <div class="banner"></div>
+  {% endif %}
+{% endblock %}
+
+{% block footer-pre %}
+  {% include 'variants/saumur/includes/social-links.html' %}
+  {{ block.super }}
+{% endblock %}
diff --git a/templates/variants/saumur/includes/social-links.html b/templates/variants/saumur/includes/social-links.html
new file mode 100644
index 00000000..a8cbc504
--- /dev/null
+++ b/templates/variants/saumur/includes/social-links.html
@@ -0,0 +1,9 @@
+<div class="social-links">
+  <h2>Suivez <strong>#PLUSSLV</strong> sur :</h2>
+  <div>
+    <a class="link--linkedin" href="{{ social_linkedin_url }}" title="Nous suivre sur LinkedIn"></a>
+    <a class="link--facebook" href="{{ social_facebook_url }}" title="Nous suivre sur Facebook"></a>
+    <a class="link--instagram" href="{{ social_instagram_url }}" title="Nous suivre sur Instagram"></a>
+  </div>
+</div>
+
-- 
2.37.2

