From e413e749cbd1a6455240d96b1557dc660afd65de Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Tue, 5 Oct 2021 16:50:17 +0200
Subject: [PATCH] meudon-2021: new theme (#57548)

---
 static/meudon-2021/_custom.scss               | 531 ++++++++++++++++++
 static/meudon-2021/_vars.scss                 |  82 +++
 static/meudon-2021/config.json                |  16 +
 static/meudon-2021/img/account.svg            |  13 +
 static/meudon-2021/style.scss                 |   6 +
 .../combo/page_template_homepage.html         |  23 +
 templates/variants/meudon-2021/theme.html     |  26 +
 templates/variants/meudon-2021/wcs/base.html  |  18 +
 8 files changed, 715 insertions(+)
 create mode 100644 static/meudon-2021/_custom.scss
 create mode 100644 static/meudon-2021/_vars.scss
 create mode 100644 static/meudon-2021/config.json
 create mode 100644 static/meudon-2021/img/account.svg
 create mode 100644 static/meudon-2021/style.scss
 create mode 100644 templates/variants/meudon-2021/combo/page_template_homepage.html
 create mode 100644 templates/variants/meudon-2021/theme.html
 create mode 100644 templates/variants/meudon-2021/wcs/base.html

diff --git a/static/meudon-2021/_custom.scss b/static/meudon-2021/_custom.scss
new file mode 100644
index 00000000..3b030796
--- /dev/null
+++ b/static/meudon-2021/_custom.scss
@@ -0,0 +1,531 @@
+//
+//	TYPO
+//
+%title {
+	position: relative;
+	margin-left: 1rem;
+	&::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 50px;
+		height: 0.2em;
+		background-color: currentColor;
+
+	}
+	@media ($max-mobile-viewport) {
+		font-size: $fz-3;
+	}
+}
+h1 {
+	@extend %title;
+	font-size: $fz-1;
+	@media ($max-mobile-viewport) {
+		font-size: $fz-2;
+	}
+}
+h2 {
+	@extend %title;
+}
+%button {
+	text-transform: uppercase;
+	font-weight: bold;
+}
+%cancel-button {
+	background-color: $gray;
+	border-color: $gray;
+	&:hover {
+		color: $gray-dark;
+	}
+}
+
+//
+//	SITE HEADER
+//
+$header-desktop-height: 100px;
+$logo-width: 310px;
+
+div#header {
+	max-width: $header-width;
+	#top {
+		display: flex;
+		align-items: center;
+
+		@media ($min-desktop-viewport) {
+			height: $header-desktop-height;
+		}
+		@media ($max-mobile-viewport) {
+			flex-wrap: wrap;
+			padding: calc(10px + 0.7rem) 10px;
+			.site-nav {
+				order: 1;
+				flex: 1 1 100%;
+			}
+		}
+	}
+	// Logo
+	#logo {
+		flex: 1 1 $logo-width;
+		@media ($max-mobile-viewport) {
+			flex-basis: 100%;
+		}
+		padding: 0;
+		font-size: 1em;
+		&::before {
+			content: none;
+		}
+		a {
+			display: block;
+			width: $logo-width;
+			height: 40px;
+			@media ($min-desktop-viewport) {
+				margin-top: 10px;
+			}
+			@media ($max-mobile-viewport) {
+				margin-bottom: 10px;
+			}
+		}
+	}
+}
+
+// User links
+#toplinks {
+	$icon-size: 38px;
+	position: static;
+	z-index: 1;
+	box-shadow: none;
+	border: none;
+	border-radius: 0;
+	padding: 0.33em;
+	padding: $fz-small 1rem;
+	padding-left: calc(#{$icon-size} + (#{$fz-small} * 2));
+	background: url(img/account.svg) left $fz-small center no-repeat $green;
+	background-size: $icon-size;
+	@media ($max-mobile-viewport) {
+		margin-right: $nav-menu-side;
+	}
+	.sep {
+		display: none;
+	}
+	a {
+		color: $violet-dark;
+		display: block;
+		font-weight: bold;
+		&:last-child {
+			font-size: $fz-small;
+			font-weight: normal;
+		}
+	}
+}
+
+//
+//	NAV
+//	inside header-content
+//
+.gru-nav-wrapper {
+	@media ($max-mobile-viewport) {
+		margin-top: calc(-1 * #{$nav-menu-side});
+	}
+}
+
+div.gru-nav {
+	text-transform: uppercase;
+	> ul {
+		margin: 0;
+		> li {
+			a {
+				font-weight: normal;
+			}
+			&.selected > a,
+			a:hover, a:focus {
+				font-weight: bolder;
+			}
+		}
+	}
+	@media ($max-mobile-viewport) {
+		$header-gutter: '(10px + 0.7em)';
+		text-align: right;
+		.gru-nav-button {
+			display: inline-block;
+			border: 5px solid transparent;
+			.icon-bar {
+				border-width: 3px;
+			}
+			+ ul {
+				position: relative;
+				text-align: left;
+				border-top: 0;
+				margin-left: calc(-1 * #{$header-gutter});
+				margin-right: calc(-1 * #{$header-gutter});
+			}
+			&.toggled + ul {
+				border-top: 10px solid white;
+				overflow: visible;
+				&::before {
+					content: "";
+					display: block;
+					width: 20px;
+					height: 20px;
+					border: 10px solid transparent;
+					border-bottom-color: $green;
+					position: absolute;
+					top: -20px;
+					right: calc(#{$nav-menu-side / 2} - 10px + #{$header-gutter});
+				}
+			}
+		}
+	}
+}
+
+//
+//	PAGE HEADER
+//
+
+%page-title {
+	background-color: $violet-dark;
+	background-image: var(--page-picture);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	padding : 4em 0;	
+	color: white;
+	> div, > h1 {
+		max-width: $width;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	* {
+		color: inherit;
+	}
+}
+.theme-page-header {
+	max-width: $header-width;
+	margin: 0 auto 2rem;
+
+	.text-cell {
+		@extend %page-title;
+		display: flex;
+		align-items: flex-end;
+		min-height: calc(360em / 15);
+		@media ($max-mobile-viewport) {
+			min-height: calc(240em / 15);
+		}
+		> div {
+			flex: 0 0 100%;
+		}
+	}
+	div.carrousel-content {
+		min-height: calc(360em / 15);
+		@media ($max-mobile-viewport) {
+			min-height: calc(240em / 15);
+		}
+		input + div div.carrousel-item {
+			padding-bottom: $carrousel-navigation-bullet-size + 20;
+			div.carrousel-item-content{
+				flex: 0 1 $width;
+				margin-left: auto;
+				margin-right: auto;
+
+				> a {
+					max-width: 40rem;
+					strong {
+						@extend h1;
+						margin-left: 0;
+						color: white;
+						display: block;
+						line-height: normal;
+					}
+				}
+			}
+		}
+		div.carrousel-nav {
+			max-width: $width;
+			left: 0;
+			right: 0;
+			margin-left: auto;
+			margin-right: auto;
+			text-align: left;
+			label {
+				background-color: black;
+			}
+		}
+	}
+}
+
+//
+//	MAIN
+//
+div#main-content-wrapper {
+	position: static;
+}
+// home page template
+.page-template-homepage {
+	.gru-content { 
+		flex-wrap: wrap;
+	}
+	#theme-top-section {
+		flex: 0 0 100%;
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+		@media ($max-mobile-viewport) {
+			padding-left: 0.7rem;
+			padding-right: 0.7rem;
+		}
+	}
+	// 3 cols layout
+	@media ($min-desktop-viewport) {
+		#columns {
+			display: flex;
+			.column {
+				flex: 1 1 0;
+
+				.cell {
+					margin-left: #{$columns-gutter / 2};
+					margin-right: #{$columns-gutter / 2};
+				}
+			}
+		}
+	}
+}
+
+//
+//	CELLS
+//
+
+.gru-content div.cell {
+	margin-bottom: $columns-gutter;
+}
+
+// cells custom style
+.shadowed-cell {
+	overflow: hidden;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+
+	> div {
+		box-shadow: 0 0 1.9em -0.8em #000;
+		padding-top: 1rem;
+		padding-bottom: 0.5rem;
+	}
+}
+
+.shadowed-cell-top {
+	@extend .shadowed-cell;
+	padding-bottom: 0;
+	> div {
+		padding-bottom: 0;
+	}
+}
+
+.shadowed-cell-bottom {
+	@extend .shadowed-cell;
+	padding-top: 0;
+	> div {
+		padding-top: 0;
+	}
+}
+
+.list-of-forms-cell {
+	$image-size: 2.5rem;
+	.gru-content &.cell {
+		color: white;
+		background-color: $red-dark;
+		h2:first-child {
+			color: inherit;
+			font-size: $fz-5;
+			text-align: left;
+			min-height: 5em;
+			display: flex !important;
+			align-items: center;
+			padding-right: 3rem;
+			padding-bottom: 0;
+			padding-left: 1rem;
+			margin-left: 0;
+			background-color: $red;
+			&::before {
+				content: none;
+			}
+		}
+		&.foldable.folded {
+			h2:first-child {
+				background-color: $violet-dark;
+			}
+		}
+		// Picture position
+		&.has-asset-picture {
+			h2:first-child {
+				padding-left: $image-size + 2;
+			}
+			> div {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				> * {
+					flex: 0 0 100%;
+				}
+				> h2:first-child {
+					flex: 1 0 50%;
+					margin-left: -1 * ($image-size + 1);
+				}
+				> picture {
+					display: block;
+					order: -1;
+					flex: 0 0 $image-size;
+					align-self: center;
+					margin-left: 1rem;
+					position: relative;
+					z-index: 1;
+					img {
+						padding: 0;
+						height: $image-size;
+						width: $image-size;
+						object-fit: contain;
+					}
+				}
+			}
+		}
+		ul > li {
+			border-bottom: none;
+			color: inherit;
+			> *, a::after {
+				color: inherit !important;
+			}
+			> a:hover {
+				background-color: $red-xdark;
+			}
+		}
+	}
+}
+
+#theme-top-section {
+	.tracking-code-input-cell {
+		@extend .shadowed-cell-bottom;
+		.wcs-tracking-code-input {
+			@media ($min-desktop-viewport) {
+				&, & form {
+					display: flex;
+					align-items: flex-start;
+				}
+				h2 {
+					flex: 1 0 auto;
+					& + div {
+						padding-top: 0;
+						padding-left: 1.5rem;
+					}
+				}
+				form {
+					p {
+						flex: 1 1 50%;
+						margin-right: 0.5rem;
+					}
+					input {
+						margin-right: 1rem;
+					}
+					button {
+						margin-right: 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+.search-cell {
+	.combo-search--button::before {
+		content: "\f002"; // search icon
+		font-family: FontAwesome;
+		font-size: $fz-5;
+	}
+	.combo-search--button-label {
+		display: none;
+	}
+}
+
+.wcs-forms-of-category-cell {
+	@extend .list-of-forms-cell;
+}
+
+//
+//	Forms
+//
+
+label {
+	font-style: italic;
+	font-weight: 300;
+}
+
+//
+//	WCS
+//
+.wcs-steps {
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: $fz-5;
+	@media ($min-desktop-viewport) {
+		font-size: $fz-4;
+	}
+}
+
+div#gauche {
+	padding: 0.5rem;
+	div#tracking-code {
+		@extend .shadowed-cell;
+		h3 {
+			margin-left: 0;
+		}
+		a {
+			font-weight: bold;
+			color: $red;
+			@media ($min-desktop-viewport) {
+				padding-left: 0;
+			}
+			@media ($max-mobile-viewport) {
+				padding-left: 1em;
+			}
+		}
+	}
+}
+.theme-form-title {
+	@extend %page-title;
+	padding-left: calc(0.7rem + 0.5rem);
+	@media ($min-desktop-viewport) {
+		padding-left: 0.5rem;
+	}
+}
+div#rub_service {
+	h3 {
+		@extend h2;
+		margin-left: 0;
+	}
+	h4 {
+		font-size: $fz-3;
+	}
+}
+
+//
+//	FOOTER
+//
+#theme-gray-footer-wrapper {
+	background-color: $gray-light;
+}
+#theme-gray-footer {
+	max-width: $width;
+	margin-left: auto;
+	margin-right: auto;
+}
+#footer-wrapper {
+	margin-top: 0;
+	padding: 0;
+}
+#theme-gray-footer,
+#footer {
+	padding: 3rem 0.7rem 2rem;
+	@media ($min-desktop-viewport) {
+		padding-top: 4.5rem;
+		padding-bottom: 3.5rem;
+	}
+	.cell {
+		margin-bottom: 1rem;
+	}
+}
diff --git a/static/meudon-2021/_vars.scss b/static/meudon-2021/_vars.scss
new file mode 100644
index 00000000..f5c9aba3
--- /dev/null
+++ b/static/meudon-2021/_vars.scss
@@ -0,0 +1,82 @@
+// colors
+$violet-dark: #22104b;
+$red: #ec234f;
+$red-dark: #ac1a3a;
+$red-xdark: #84142d;
+$green: #bcf157;
+$gray-light: #e3e3e3;
+$gray: #ccc;
+$gray-dark: #999;
+
+// font-size
+$fz-1: 55em / 15;
+$fz-2: 35em / 15;
+$fz-3: 30em / 15;
+$fz-4: 25em / 15;
+$fz-5: 19em / 15;
+$fz-small: 13em / 15;
+
+$header-width: 1440em / 15;
+
+// Core vars
+$primary-color: $violet-dark;
+$font-family: Roboto, sans-serif !default;
+$font-color: $violet-dark;
+$font-size: 15px;
+$link-color: $red;
+$width: 1220rem / 15;
+$mobile-limit: 64em;
+$very-small-limit: 35em;
+$columns-gutter: 2rem;
+$sidebar-width: 20rem;
+
+$nav-background: transparent;
+$nav-active-color: transparent;
+$nav-color: $font-color;
+$nav-menu-color: $nav-color;
+$nav-submenu-background: $green;
+$nav-mobile-menu-background: $green;
+$nav-after-image: false;
+$nav-menu-side: 4rem;
+
+$title-background: transparent;
+$title-color: $violet-dark;
+$title-font-size: $fz-2;
+$title-weight: 800;
+$title-transform: uppercase;
+$title-padding: 0 0 0.33em 0;
+
+$cell-background: transparent;
+$cell-border: none;
+$cell-title-cover-border: false;
+
+$carrousel-arrows: none;
+$carrousel-text-position: middle left;
+$carrousel-item-mask-color: false;
+
+$button-background: $red;
+$button-border: 1px solid $red;
+$button-color: white;
+$button-hover-background: white;
+$button-hover-color: $red;
+$buttons-order: cancel, previous, submit;
+
+$widget-border: 1px solid $gray;
+$widget-focus-border: 1px solid $font-color;
+$widget-unique-checkbox-position: left;
+
+$form-sidebar-position: right;
+$form-sidebar-width: $sidebar-width;
+$form-sidebar-gutter: $columns-gutter;
+
+$wcs-steps-spacing: 0.7em;
+$wcs-step-color: $gray;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-background: $wcs-step-color;
+$wcs-step-marker-color: white;
+$wcs-step-current-marker-background: $red;
+$wcs-step-current-marker-color: white;
+
+
+$footer-background: $violet-dark;
+$footer-link-color: $green;
diff --git a/static/meudon-2021/config.json b/static/meudon-2021/config.json
new file mode 100644
index 00000000..dae3801d
--- /dev/null
+++ b/static/meudon-2021/config.json
@@ -0,0 +1,16 @@
+{
+  "label": "Meudon 2021",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#22104b",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      }
+    }
+  }
+}
diff --git a/static/meudon-2021/img/account.svg b/static/meudon-2021/img/account.svg
new file mode 100644
index 00000000..e5a478c8
--- /dev/null
+++ b/static/meudon-2021/img/account.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#22104B;}
+</style>
+<path class="st0" d="M256,0C114.5,0,0,114.5,0,256c0,140.2,113.5,256,256,256c141.9,0,256-115.1,256-256C512,114.5,397.5,0,256,0z
+	 M87.4,406.5c89.8-100.7,247.4-100.7,337.2,0C334.5,507.3,177.5,507.3,87.4,406.5z M196,234v-30c0-33.1,26.9-60,60-60s60,26.9,60,60
+	v30c0,33.1-26.9,60-60,60S196,267.1,196,234z M309.2,306.6c22.3-16.4,36.8-42.8,36.8-72.5v-30c0-49.6-40.4-90-90-90s-90,40.4-90,90
+	v30c0,29.7,14.5,56.1,36.8,72.5c-49.6,10.5-96.7,35.8-134.1,76C43.6,345.4,30,301.6,30,256C30,131.4,131.4,30,256,30
+	s226,101.4,226,226c0,45.6-13.6,89.4-38.7,126.5C406,342.4,358.9,317.1,309.2,306.6z"/>
+</svg>
diff --git a/static/meudon-2021/style.scss b/static/meudon-2021/style.scss
new file mode 100644
index 00000000..d7337687
--- /dev/null
+++ b/static/meudon-2021/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/roboto';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/meudon-2021/combo/page_template_homepage.html b/templates/variants/meudon-2021/combo/page_template_homepage.html
new file mode 100644
index 00000000..d26a233a
--- /dev/null
+++ b/templates/variants/meudon-2021/combo/page_template_homepage.html
@@ -0,0 +1,23 @@
+{% extends "combo/page_template.html" %}
+{% load combo i18n %}
+
+
+{% block content-top %}
+  <div id="theme-top-section">
+    {% placeholder "top-section" name="Haut de page" %}
+  </div>
+{% endblock %}
+
+{% block columns %}
+  <div class="column">
+  {% trans "Left column" as name %}
+  {% placeholder "content" name=name %}
+  </div>
+  <div class="column">
+  {% placeholder "center" name="Colonne du milieu" %}
+  </div>
+  <div class="column">
+  {% trans "Right column" as name %}
+  {% placeholder "right" name=name %}
+  </div>
+{% endblock %}
diff --git a/templates/variants/meudon-2021/theme.html b/templates/variants/meudon-2021/theme.html
new file mode 100644
index 00000000..a46ecef9
--- /dev/null
+++ b/templates/variants/meudon-2021/theme.html
@@ -0,0 +1,26 @@
+{% extends "theme.html" %}
+{% load combo %}
+
+{# Move nav block into header-content block #}
+{% block header-content %}
+  {% block nav %}{% endblock %}
+  {{ block.super }}
+{% endblock %}
+{% block after-header %}{% endblock %}
+
+{# add Page title #}
+{% block before-main-content %}
+<div class="theme-page-header--wrapper">
+  <header class="theme-page-header">
+    {% placeholder "page-header" name="Entête de la page" %}
+  </header>
+</div>
+{% endblock %}
+
+{% block footer-pre %}
+<div id="theme-gray-footer-wrapper">
+  <div id="theme-gray-footer" class="clearfix">
+    {% placeholder "gray-footer" name="Pied de page gris" %}
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/variants/meudon-2021/wcs/base.html b/templates/variants/meudon-2021/wcs/base.html
new file mode 100644
index 00000000..dcb0bce7
--- /dev/null
+++ b/templates/variants/meudon-2021/wcs/base.html
@@ -0,0 +1,18 @@
+{% extends "wcs/base.html" %}
+{% load static %}
+
+
+{% block page-header %}
+  {% if title %}
+  <div class="theme-form-title">
+    <h1>{{ title }}</h1>
+  </div>
+  {% endif %}
+{% endblock %}
+
+{# remove default title #}
+{% block content %}
+  {% with title=false %}
+      {{ block.super }}
+  {% endwith %}
+{% endblock %}
-- 
2.20.1

