From 618573108cf57ff0f17b7bc78a443369035c5d86 Mon Sep 17 00:00:00 2001
From: Paul Marillonnet <pmarillonnet@entrouvert.com>
Date: Mon, 19 Jul 2021 11:57:07 +0200
Subject: [PATCH] theme: add guerande (#55457)

---
 static/guerande/_custom.scss                  | 327 ++++++++++++++++++
 static/guerande/_vars.scss                    |  37 ++
 static/guerande/config.json                   |  21 ++
 static/guerande/img/favicon-16x16.png         | Bin 0 -> 1054 bytes
 static/guerande/img/moins.svg                 |  55 +++
 static/guerande/img/plus.svg                  |  54 +++
 static/guerande/style.scss                    |   5 +
 .../guerande/combo/page_template.html         |   7 +
 .../guerande/combo/page_template_3cols.html   |  13 +
 9 files changed, 519 insertions(+)
 create mode 100644 static/guerande/_custom.scss
 create mode 100644 static/guerande/_vars.scss
 create mode 100644 static/guerande/config.json
 create mode 100644 static/guerande/img/favicon-16x16.png
 create mode 100644 static/guerande/img/moins.svg
 create mode 100644 static/guerande/img/plus.svg
 create mode 100644 static/guerande/style.scss
 create mode 100644 templates/variants/guerande/combo/page_template.html
 create mode 100644 templates/variants/guerande/combo/page_template_3cols.html

diff --git a/static/guerande/_custom.scss b/static/guerande/_custom.scss
new file mode 100644
index 00000000..e3b84536
--- /dev/null
+++ b/static/guerande/_custom.scss
@@ -0,0 +1,327 @@
+@import '../includes/fonts/montserrat';
+
+@mixin form-icon($content) {
+	content: $content;
+	font-family: FontAwesome;
+}
+
+html {
+	background: white;
+}
+
+#header {
+	padding-top: 10px;
+	padding-left: 0;
+	position: relative;
+	h1 {
+		position: absolute;
+		top: 20px;
+		left: 20px;
+		@media screen and (max-width: $nav-mobile-limit) {
+			padding-left: 0px;
+			top: 50px;
+		}
+	}
+}
+
+div#header h1#logo {
+		@media screen and (max-width: $nav-mobile-limit) {
+			margin-left: calc(55% - 160px);}
+		a {
+		background-position: top left;
+		padding-left: 400px;
+		@media screen and (max-width: $nav-mobile-limit) {
+			background-size: 80%;
+			margin-top: 30px;
+			padding-left: 300px;
+		}
+		display: block;
+		min-height: 130px;
+		line-height: 120px;
+	}
+}
+
+nav.site-nav {
+	@media screen and (max-width: $nav-mobile-limit) {
+		margin-top: 75px;
+	}
+	margin-bottom: 50px;
+}
+
+div#nav {
+	background-color: white;
+	> ul {
+		margin-top: 120px;
+		@media (min-width: $nav-mobile-limit + 1) {
+			margin-left: 440px;
+			margin-top: 65px;
+		}
+		a {
+			font-size: 1.3em;
+			color:black;
+			&:hover {
+				color: $primary-color;
+				background-color: white;
+			}
+			&::before {
+				@include form-icon("\f105");
+				color: $primary-color;
+				padding-right: 8px;
+				font-size: 1.2rem;
+			}
+		}
+		li a {
+			padding: 0.5em 20px;}
+		li:last-child {
+			a{
+				border: 1px solid $primary-color;
+				color: white;
+				background-color: $primary-color;
+				&::before {
+				content: none;}
+				&:hover {
+					color: black;
+					background-color: white;
+				}
+			}
+		}
+	}
+		@media screen and (max-width: $nav-mobile-limit) {
+			margin-left: 0;
+	}
+}
+
+div#toplinks {
+	a {
+		color: black;}
+	@media (min-width: $mobile-limit) {
+		right: 9em;}
+}
+
+div#services > ul > li,
+div.a2-block,
+div.block {
+	box-shadow: 0 0 36px rgba(0,0,0,0.2);
+}
+
+.three-cols-column {
+	flex: 1 1 0;
+}
+
+#center-content div.empty-cell {
+	display: none;
+}
+
+.page-header {
+	margin-left: 7%;
+	margin-right: 7%;
+	text-align: center;
+
+	h1, h2 {
+		font-weight: 300;
+	}
+}
+
+#content div.cell {
+	@media ($max-mobile-viewport) {
+		max-width: 600px;
+		margin-left: auto !important;
+		margin-right: auto !important;
+	}
+}
+
+#content div.wcsformsofcategorycell,
+#content div.link-list-cell
+ {
+	padding-bottom: 50px;
+	padding-top: 50px;
+	h2 {
+		background: white;
+		text-align: left;
+		color: black;
+		font-weight: normal;
+	}
+	&.foldable h2::after {
+		width: 25px;
+		height: 25px;
+	}
+	li a {
+		padding-left: 40px;
+	}
+	picture {
+		height: 250px;
+		overflow: hidden;
+		margin: 0;
+	}
+	img {
+		padding: 0;
+	}
+}
+
+div#footer-wrapper {
+	padding: 0;
+}
+
+div#footer {
+		@media screen and (max-width: $nav-mobile-limit) {
+			div[class*="grid-"] { // discard grid properties in mobile mode
+				width: 100%;
+				padding-right: 0;
+			}
+		}
+	.text-cell {
+		padding-top: 66px;
+		padding-bottom: 36px;
+	}
+	.contact {
+		div {
+			display: flex;
+			justify-content: space-around;
+		}
+	}
+	.site-infos__main {
+		display: flex;
+		padding-left: 50px;
+		@media (min-width: $nav-mobile-limit + 1) {
+			padding-left: 20%;
+		}
+		.site-infos__address {
+			width: 100%;
+		}
+		.site-infos__image {
+			background: url(/assets/footer:logo) top left no-repeat;
+			background-size: contain;
+			display: block;
+			min-width: 165px;
+			min-height: 124px;
+		}
+	}
+	.menu-cross {
+		@media (min-width: $nav-mobile-limit + 1) {
+			background: $primary-color;
+			padding-bottom: 120px;
+			div {
+				margin: 0 20% auto 15%;
+			}
+			* a {
+				color: black;
+			}
+		}
+		nav.menu-cross__nav {
+			padding-left: 20px;
+			ul {
+				margin: 0;
+				padding: 0;
+				li {
+					a {
+						font-size: 0.7rem;
+						text-transform: uppercase;
+					}
+				}
+			}
+		}
+		.menu-cross__item::before, .menu-cross__link::before {
+			@include form-icon("\f105");
+			@media (min-width: $nav-mobile-limit + 1) {
+				color: black;
+			}
+			padding-right: 5px;
+			font-size: 0.8rem;
+			font-weight: 800;
+		}
+	}
+	* {
+		box-sizing: content-box;
+	}
+	img {
+		width: 165px;
+		height: 124px;
+		@media (min-width: $nav-mobile-limit + 1) {
+			margin: 0 20px 60px 20px;
+		}
+	}
+	border-color: #fff;
+	width: 100%;
+	max-width: unset;
+	li {
+		list-style: none;
+	}
+	a {
+		color: #fff;
+	}
+	.ghost {
+		display: none;
+	}
+	.btn:focus, .btn:hover {
+		background-color: #0f183b;
+		border-color: transparent !important;
+		text-decoration: none;
+	}
+	address.site-infos__listitems {
+		font-size: 0.75rem;
+		font-weight: 400;
+		font-style: normal;
+		@media screen and (max-width: $nav-mobile-limit) {
+			text-align: end;
+		}
+	}
+	a.contact-social__link, a.contact-cityhall__link {
+		display: flex;
+		font-size: 1rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		padding: 25px 25px 25px 25px;
+		@media (min-width: $nav-mobile-limit + 1) {
+			margin-top: 80px;}
+		&:hover {
+			color: $primary-color;
+			background-color: black;
+		}
+	}
+	* a.menu-cross__link {
+		display: block;
+		font-size: 1rem;
+		font-weight: 700;
+		border: solid 1px;
+		border-radius: 0;
+		padding: 10px 0px 10px 10px;
+		&:hover {
+			color: white;
+			background-color: black;
+		}
+	}
+	.social-networks {
+		display: flex;
+		justify-content: start;
+		margin-left: 120px;
+		@media screen and (max-width: $nav-mobile-limit) {
+			margin-left: 30px;}
+	}
+	.social-networks li a::after {
+		padding-left: 6px;
+	}
+	.social-networks {
+		li:nth-child(1) a::after {
+			@include form-icon("\f09a");
+		}
+		li:nth-child(2) a::after {
+			@include form-icon("\f099");
+		}
+		li:nth-child(3) a::after {
+			@include form-icon("\f16a");
+		}
+		li:nth-child(4) a::after {
+			@include form-icon("\f16d");
+		}
+	}
+	.social-networks__item a {
+		height: 27px;
+		width: 24px;
+		border: 1px solid #fff;
+		border-radius: 50%;
+		display: grid;
+		text-decoration: none;
+		padding-top: 4px;
+		padding-right: 7px;
+	}
+}
diff --git a/static/guerande/_vars.scss b/static/guerande/_vars.scss
new file mode 100644
index 00000000..d462f225
--- /dev/null
+++ b/static/guerande/_vars.scss
@@ -0,0 +1,37 @@
+$primary-color: #A99A6f;
+
+$width: 1260px;
+$font-color: black;
+$font-family: Montserrat, sans-serif;
+$nav-background: $primary-color;
+$nav-submenu-background: $primary-color;
+$nav-submenu-color: white;
+$nav-color: white;
+$nav-active-color: darken($primary-color, 5%);
+$nav-item-selected-color: white;
+$nav-item-hover-color: white;
+$mobile-limit: 1024px;
+$border-radius: 0;
+$button-background: lighten($primary-color, 10%);
+$title-background: $primary-color;
+$title-weight: bold;
+$title-color: white;
+$footer-background: black;
+$footer-color: white;
+$cell-title-cover-border: false;
+$cell-entry-color: darken($primary-color, 20%);
+$cell-entry-hover-color: black;
+$cell-entry-hover-background: lighten($primary-color, 10%);
+$cell-image-position: top;
+$cell-open-foldable-icon: url(img/plus.svg);
+$cell-close-foldable-icon: url(img/moins.svg);
+$cell-border-radius: 4px;
+$cell-border: 1px solid #d3d3d3;
+$link-color: darken($primary-color, 20%);
+
+$wcs-steps-spacing: 1rem;
+$wcs-step-border-bottom: none;
+$wcs-step-color: #000;
+$wcs-step-background-color: #fff;
+$wcs-step-current-marker-background: $primary-color;
+$wcs-step-current-marker-color: #fff;
diff --git a/static/guerande/config.json b/static/guerande/config.json
new file mode 100644
index 00000000..37e8c226
--- /dev/null
+++ b/static/guerande/config.json
@@ -0,0 +1,21 @@
+{
+  "label": "Guérande",
+  "variables": {
+    "favicon": "guerande/img/favicon-16x16.png",
+    "theme_color": "#A99A6F"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_PUBLIC_TEMPLATES.update": {
+        "three_columns": {
+          "name": "Trois colonnes",
+          "template": "combo/page_template_3cols.html"
+        }
+      },
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "footer:logo": { "label": "Pied de page : logo" }
+      }
+    }
+  }
+}
diff --git a/static/guerande/img/favicon-16x16.png b/static/guerande/img/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..03252c2534741aada7c8f12ec4f667df0a9faa3b
GIT binary patch
diff --git a/static/guerande/img/moins.svg b/static/guerande/img/moins.svg
new file mode 100644
index 00000000..b0e3c44f
--- /dev/null
+++ b/static/guerande/img/moins.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Calque_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 25.02 25.02"
+   style="enable-background:new 0 0 25.02 25.02;"
+   xml:space="preserve"
+   sodipodi:docname="moins.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
+   id="metadata11"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs9" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1016"
+   id="namedview7"
+   showgrid="false"
+   inkscape:zoom="29.376498"
+   inkscape:cx="12.51"
+   inkscape:cy="12.51"
+   inkscape:window-x="0"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Calque_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#FBD764;}
+</style>
+<path
+   class="st0"
+   d="M12.51,0C5.6,0,0,5.6,0,12.51s5.6,12.51,12.51,12.51s12.51-5.6,12.51-12.51S19.42,0,12.51,0z M21.14,13.81H13.8  v7.34h-2.59v-7.34H3.87v-2.59h7.34V3.88h2.59v7.34h7.34V13.81z"
+   id="path4" />
+<path
+   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.167256;stroke-linecap:square;paint-order:markers stroke fill"
+   d="M 11.454735,24.966882 C 8.3886618,24.68634 5.6546076,23.382956 3.5232246,21.185757 0.30401969,17.867146 -0.80631979,13.037768 0.63424809,8.6202667 1.4337138,6.1687056 2.9600474,4.0520646 5.0639708,2.4773547 7.2977786,0.80543089 10.008266,-0.04927732 12.833388,0.02739482 c 1.370208,0.03718663 2.483077,0.23409695 3.717802,0.65782497 1.900089,0.65206561 3.517027,1.67961281 4.928565,3.13205311 1.991423,2.0491261 3.18001,4.6251145 3.476882,7.5353391 0.05141,0.503981 0.05141,1.810796 0,2.314776 -0.295568,2.897442 -1.483302,5.47941 -3.456868,7.514751 -2.061408,2.125932 -4.63262,3.393802 -7.611116,3.753058 -0.422581,0.05097 -1.99888,0.07149 -2.433918,0.03168 z m 6.025225,-11.12929 h 3.659387 V 12.527021 11.216449 H 17.47996 7.5226161 3.8458032 l 0.00891,1.302061 0.00891,1.302062 3.6678981,0.0087 c 13.6078257,0.0083 -3.6678981,-0.0087 9.9484387,0.0083 z"
+   id="path838"
+   sodipodi:nodetypes="cssssssssssccccccccccccc" /></svg>
diff --git a/static/guerande/img/plus.svg b/static/guerande/img/plus.svg
new file mode 100644
index 00000000..880ea16c
--- /dev/null
+++ b/static/guerande/img/plus.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Calque_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 25.02 25.02"
+   style="enable-background:new 0 0 25.02 25.02;"
+   xml:space="preserve"
+   sodipodi:docname="plus.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
+   id="metadata11"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs9" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1016"
+   id="namedview7"
+   showgrid="false"
+   inkscape:zoom="29.376498"
+   inkscape:cx="12.51"
+   inkscape:cy="12.475959"
+   inkscape:window-x="0"
+   inkscape:window-y="27"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Calque_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#FBD764;}
+</style>
+<path
+   class="st0"
+   d="M12.51,0C5.6,0,0,5.6,0,12.51s5.6,12.51,12.51,12.51s12.51-5.6,12.51-12.51S19.42,0,12.51,0z M21.14,13.81H13.8  v7.34h-2.59v-7.34H3.87v-2.59h7.34V3.88h2.59v7.34h7.34V13.81z"
+   id="path4" />
+<path
+   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.167256;stroke-linecap:square;paint-order:markers stroke fill"
+   d="M 11.454735,24.966882 C 8.3886618,24.68634 5.6546076,23.382956 3.5232246,21.185757 0.30401969,17.867146 -0.80631979,13.037768 0.63424809,8.6202667 1.4337138,6.1687056 2.9600474,4.0520646 5.0639708,2.4773547 7.2977786,0.80543089 10.008266,-0.04927732 12.833388,0.02739482 c 1.370208,0.03718663 2.483077,0.23409695 3.717802,0.65782497 1.900089,0.65206561 3.517027,1.67961281 4.928565,3.13205311 1.991423,2.0491261 3.18001,4.6251145 3.476882,7.5353391 0.05141,0.503981 0.05141,1.810796 0,2.314776 -0.295568,2.897442 -1.483302,5.47941 -3.456868,7.514751 -2.061408,2.125932 -4.63262,3.393802 -7.611116,3.753058 -0.422581,0.05097 -1.99888,0.07149 -2.433918,0.03168 z m 2.365837,-7.469902 v -3.659388 h 3.659388 3.659387 V 12.527021 11.216449 H 17.47996 13.820572 V 7.540041 3.8636327 H 12.51 11.199429 V 7.540041 11.216449 H 7.5226161 3.8458032 l 0.00891,1.302061 0.00891,1.302062 3.6678981,0.0087 3.6678987,0.0087 v 3.659235 3.659236 H 12.51 13.820572 Z"
+   id="path838" /></svg>
diff --git a/static/guerande/style.scss b/static/guerande/style.scss
new file mode 100644
index 00000000..1fd447de
--- /dev/null
+++ b/static/guerande/style.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/guerande/combo/page_template.html b/templates/variants/guerande/combo/page_template.html
new file mode 100644
index 00000000..8667eaf9
--- /dev/null
+++ b/templates/variants/guerande/combo/page_template.html
@@ -0,0 +1,7 @@
+{% extends "combo/page_template.html" %}
+
+{% block content-pre %}
+  <div class="page-header">
+    {% placeholder "header" name="Entête" %}
+  </div>
+{% endblock %}
diff --git a/templates/variants/guerande/combo/page_template_3cols.html b/templates/variants/guerande/combo/page_template_3cols.html
new file mode 100644
index 00000000..afc2f370
--- /dev/null
+++ b/templates/variants/guerande/combo/page_template_3cols.html
@@ -0,0 +1,13 @@
+{% extends "combo/page_template.html" %}
+
+{% block combo-content %}
+  <div id="left-content" class="three-cols-column">
+    {% placeholder "left" name="Colonne gauche" %}
+  </div>
+  <div id="center-content" class="three-cols-column">
+    {% placeholder "content" name="Colonne centrale" %}
+  </div>
+  <div id="right-content" class="three-cols-column">
+    {% placeholder "right" name="Colonne droite" %}
+  </div>
+{% endblock %}
-- 
2.33.0

