From 48b9e73d1fbacdec59bf163ed7c67f1945a5c0ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <csechet@entrouvert.com>
Date: Wed, 11 May 2022 14:34:04 +0200
Subject: [PATCH] angouleme: create theme (#65079)

---
 static/angouleme/_custom.scss | 174 ++++++++++++++++++++++++++++++++++
 static/angouleme/_vars.scss   |  77 +++++++++++++++
 static/angouleme/config.json  |  15 +++
 static/angouleme/style.scss   |   6 ++
 4 files changed, 272 insertions(+)
 create mode 100644 static/angouleme/_custom.scss
 create mode 100644 static/angouleme/_vars.scss
 create mode 100644 static/angouleme/config.json
 create mode 100644 static/angouleme/style.scss

diff --git a/static/angouleme/_custom.scss b/static/angouleme/_custom.scss
new file mode 100644
index 00000000..0ca6935d
--- /dev/null
+++ b/static/angouleme/_custom.scss
@@ -0,0 +1,174 @@
+ul {
+    margin: 0;
+}
+
+div#header {
+    display: flex;
+    justify-content: center;
+    div#top {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: $header-height;
+
+        h1#logo.has-logo a {
+            min-width: 400px;
+            min-height: 120px;
+        }
+    }
+
+    div#toplinks a {
+        @extend %button;
+        border-radius: 20px 10px 10px 0;
+        margin-top: 0.5rem;
+        padding: 0.3rem 0.4rem;
+        margin-right: 0.5rem;
+
+        @media ($min-desktop-viewport) {
+            margin-top: 1rem;
+            padding: 0.5rem 0.8rem;
+
+            &.login-link::before, &.account-link::before {
+                content: '\f007';
+                font-family: FontAwesome;
+                margin-right: 0.5rem;
+            }
+
+            &.registration::before {
+                content: '\f234';
+                font-family: FontAwesome;
+                margin-right: 0.5rem;
+            }
+
+            &.logout::before {
+                content: '\f08b';
+                font-family: FontAwesome;
+                margin-right: 0.5rem;
+            }
+        }
+    }
+}
+
+div.gru-nav ul li a {
+    font-size: $nav-font-size;
+    text-transform: uppercase;
+    font-weight: normal;
+}
+
+@media ($min-desktop-viewport) {
+    .site-nav {
+        position: sticky;
+        top: $nav-height;
+        margin-bottom: -$nav-height;
+        z-index: 200;
+
+        .gru-nav-wrapper {
+            position: relative;
+            top: -$nav-height;
+            
+            .gru-nav > ul {
+                display: flex;
+
+                > li {
+                    display: flex;
+                    border-right: 1px solid white;
+                    height: 100%;
+                    > a {
+                        display: flex;
+                        justify-content: center;
+                        flex-direction: column;
+                        padding: 0 20px;
+                        font-size: $nav-font-size;
+                        text-transform: uppercase;
+                        font-weight: normal;
+                    }
+
+                    > ul {
+                        top: $nav-height;
+                        font-weight: normal;
+                    }
+                }
+            }
+        }
+    }
+}
+
+div#main-content-wrapper {
+    margin-top: 2rem;
+}
+
+div#footer{
+    display:flex;
+    flex-direction: row;
+    a {
+        text-decoration: underline;
+    }
+    @media ($min-desktop-viewport) {
+        &::before {
+            margin: 1rem 2rem;
+            content: url(/assets/footer:logo);
+        }
+    }
+}
+
+%cell-links-list {
+    li > a {
+        border-left: 5px solid transparent;
+        &:hover {
+            border-left: 5px solid $primary-color;
+        }
+    }
+    ul li a {
+        text-decoration: underline;
+    }
+}
+
+%button {
+   box-shadow: none; 
+   transition: none;
+   &:hover {
+       box-shadow: none;
+   }
+}
+
+%cancel-button {
+    background: $orange;
+}
+
+%title {
+    a {
+        color: white;
+    }
+}
+
+.form-content--title {
+    background: transparent;
+    border-bottom: 2px solid $primary-color;
+    color: $gray;
+    font-size: $fz-1;
+}
+
+div.cell.has-asset-picture {
+    position: relative;
+    z-index: 0;
+    h2:first-child {
+        padding-left: 4rem;
+    }
+    picture {
+        width: 4rem;
+        height: 4rem;
+        position: absolute;
+        top: 0;
+    }
+}
+
+@media ($max-mobile-viewport) {
+    body.has-header-background .site-header {
+        background-image: none;
+    }
+
+    div#header div#top {
+        height:auto;
+        padding-top: 50px;
+    }
+}
diff --git a/static/angouleme/_vars.scss b/static/angouleme/_vars.scss
new file mode 100644
index 00000000..9b3b42e4
--- /dev/null
+++ b/static/angouleme/_vars.scss
@@ -0,0 +1,77 @@
+$blue: #009CDC;
+$dark-blue: #2382C1;
+$light-gray: #F6F6F6;
+$white: white;
+$gray: #64777E;
+$orange: #E34107;
+
+$header-height: 230px;
+$header-full-width-background: true;
+
+$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;
+
+$ss-serif: 'Muli', sans-serif;
+
+$primary-color: $blue;
+$width: 1160px;
+$link-color: $primary-color;
+$error-color: $orange;
+
+$font-size: 100%;
+$font-family: $ss-serif;
+
+$toplinks-style: none;
+
+$nav-after-image: false;
+$nav-background: $gray;
+$nav-color: white;
+$nav-font-size: $fz-xsmall;
+$nav-full-width-background: false;
+$nav-height: 50px;
+$nav-submenu-background: $blue;
+$nav-item-hover-background: $dark-blue;
+$nav-mobile-item-color: black;
+$nav-mobile-item-hover-background: $dark-blue;
+$nav-mobile-item-hover-color: white;
+$nav-mobile-menu-background: white;
+$nav-button-background: white;
+$nav-button-color: $blue;
+$responsive-menu: left-to-right;
+
+$title-color: white;
+$title-background: $primary-color;
+$title-border-radius: 0;
+$title-font-size: $fz-2;
+
+$cell-border-radius: 0;
+$cell-border: none;
+$cell-background: transparent;
+$cell-entry-border: 1px solid $primary-color;
+$cell-entry-color: $gray;
+$cell-entry-hover-color: $primary-color;
+$cell-entry-hover-background: transparent;
+
+$widget-border: 1px solid $gray;
+$widget-background: none;
+$widget-color: $gray;
+$widget-focus-border: 1px solid $blue;
+$widget-focus-outline: 1px solid $blue;
+
+$button-background: $blue;
+$button-border-radius: 10px;
+$button-border: transparent;
+$button-color: $white;
+$button-hover-background: $dark-blue;
+$button-hover-color: white;
+$buttons-order: previous, cancel (grow), submit;
+
+$wcs-step-color: $gray;
+
+$footer-background: $gray;
+$footer-link-color: white;
diff --git a/static/angouleme/config.json b/static/angouleme/config.json
new file mode 100644
index 00000000..d19dfee2
--- /dev/null
+++ b/static/angouleme/config.json
@@ -0,0 +1,15 @@
+{
+  "label": "Angoulême",
+  "variables": {
+    "theme_color": "#009CDC"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" },
+        "footer:logo": { "label": "Pied de Page : logo" }
+      }
+    }
+  }
+}
diff --git a/static/angouleme/style.scss b/static/angouleme/style.scss
new file mode 100644
index 00000000..e59553e1
--- /dev/null
+++ b/static/angouleme/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/muli';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
-- 
2.35.1

