From 32f4a0ca3dc945c0b683c8e436e357c255f8761f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <csechet@entrouvert.com>
Date: Mon, 22 Aug 2022 17:04:36 +0200
Subject: [PATCH] armentieres: create theme

---
 static/armentieres/_custom.scss               | 640 ++++++++++++++++++
 static/armentieres/_vars.scss                 |  98 +++
 static/armentieres/config.json                |  24 +
 static/armentieres/style.scss                 |   5 +
 .../armentieres/combo/page_template.html      |  15 +
 templates/variants/armentieres/theme.html     |  11 +
 templates/variants/armentieres/wcs/base.html  |  14 +
 7 files changed, 807 insertions(+)
 create mode 100644 static/armentieres/_custom.scss
 create mode 100644 static/armentieres/_vars.scss
 create mode 100644 static/armentieres/config.json
 create mode 100644 static/armentieres/style.scss
 create mode 100644 templates/variants/armentieres/combo/page_template.html
 create mode 100644 templates/variants/armentieres/theme.html
 create mode 100644 templates/variants/armentieres/wcs/base.html

diff --git a/static/armentieres/_custom.scss b/static/armentieres/_custom.scss
new file mode 100644
index 00000000..607df02f
--- /dev/null
+++ b/static/armentieres/_custom.scss
@@ -0,0 +1,640 @@
+//
+// Typo
+//
+h1 {
+	font-size: $fz-1;
+}
+
+h2 {
+	font-size: $fz-2;
+}
+
+h3 {
+	font-size: $fz-3;
+}
+
+//
+// Header
+//
+div#top {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	padding-top: 0.5rem;
+}
+
+#logo{
+	@media($max-mobile-viewport) {
+		padding-left: 0;
+	}
+}
+
+nav.site-nav {
+	flex-grow: 1;
+	@media($max-mobile-viewport) {
+		position: absolute;
+		top: 75px;
+		right: 10px;
+	}
+}
+
+div.gru-nav > ul {
+	margin: 0;
+	@media($max-mobile-viewport) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 10;
+	}
+
+	li a {
+		font-weight: normal;
+		padding: 30px 20px;
+	}
+}
+
+div#header {
+	max-width: calc(#{$width} + 100px);
+}
+
+div#toplinks {
+	position: static;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	padding-right: 2rem;
+	@media($max-mobile-viewport) {
+		flex-grow: 1;
+		padding-right: 50px;
+	}
+
+	.logged-in, .login {
+		display: flex;
+		flex-wrap: wrap;
+
+		@media($max-mobile-viewport) {
+			span {
+				display: flex;
+				a:first-child {
+					flex-grow: 1;
+				}
+			}
+		}
+
+		> * {
+			margin: 0 .3rem;
+		}
+
+		a {
+			color: black;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+		}
+
+		&::before {
+			font-family: FontAwesome;
+			content: '';
+			width: 1.5rem;
+			height: 1.5rem;
+			background: url('/assets/profile:icon');
+			margin-right: 0.5rem;
+		}
+	}
+}
+
+.arm-page-header {
+	background: url('/assets/page-header:background');
+	background-size: cover;
+	background-position: center;
+	color: white;
+
+	h1 {
+		font-size: 48em / $base-font;
+	}
+
+	&--default {
+		display: none;
+	}
+
+	&--content {
+		max-width: $width;
+		clear: both;
+		margin: 0 auto;
+		.cell {
+			padding: 3rem 0rem;
+		}
+	}
+
+	@media ($max-mobile-viewport) {
+		display: none;
+	}
+}
+
+//
+// Content
+//
+div#main-content-wrapper {
+	max-width: none;
+}
+
+.central-content {
+	max-width: $width;
+	clear: both;
+	margin: 0 auto;
+}
+
+@media ($min-desktop-viewport) {
+	.gru-content {
+		padding: 3rem 0.5rem 0 0.5rem;
+	}
+}
+
+div#sidebar {
+	div.cell h2:first-child {
+		display: flex;
+		align-items: center;
+		&::after {
+			content: '';
+			background: $gray-light;
+			flex-grow: 1;
+			height: 1px;
+			margin-left: 8px;
+		}
+	}
+
+	@media($max-mobile-viewport) {
+		display: none;
+	}
+}
+
+.errornotice, .warningnotice, .successnotice, .infonotice {
+	border-radius: $border-radius;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	padding-right: 2rem;
+
+	a {
+		color: $red;
+	}
+
+	&::before {
+		top: calc(50% - 1rem);
+	}
+}
+
+.errornotice::before {
+	color: $red;
+}
+
+.warningnotice::before, .infonotice::before {
+	color: $yellow;
+}
+
+.successnotice::before {
+	color: $green-dark;
+}
+
+//
+// Footer
+//
+#footer-wrapper {
+	padding: 3rem 1.5rem 0;
+	#footer {
+		position: relative;
+	}
+
+	.back-top {
+		position: absolute;
+		top: -4.5rem;
+		right: 0rem;
+		background: $primary-color;
+		border-radius: $border-radius;
+		padding: 0.5rem;
+
+		&--link {
+			color: black;
+
+			&:hover {
+				text-decoration: none;
+			}
+
+			&::before {
+				font-size: 1.8rem;
+			}
+		}
+
+		&--link-label {
+			display: none;
+		}
+
+
+	}
+
+}
+
+.arm-footer-bottom {
+	padding: 1rem;
+	background: $gray;
+	color: white;
+	.menu-cell {
+		text-align: center;
+		li {
+			display: inline-block;
+			border: none;
+			a {
+				border-radius: 0;
+				border: none;
+				color: white;
+				padding: 0.5rem 2rem;
+				&:hover {
+					color: white;
+				}
+			}
+		}
+	}
+}
+
+//
+// Cells
+//
+%title {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+%cell-links-list {
+	> li > a:hover {
+		text-decoration: underline;
+	}
+}
+
+div#rub_service div.category,
+div#services > ul > li,
+div#account-management,
+#columns div.cell:not(.pk-button,.pk-big-button) div.links-list,
+#columns div.menucell,
+div.wcsformcell,
+div.wcsformsofcategorycell,
+div.wcscurrentdraftscell,
+div.wcscurrentformscell {
+	 ul > li {
+		margin: 0.5rem;
+		border: 1px solid $gray-light;
+		border-radius: $border-radius;
+		padding: 0rem 0.8rem;
+		a {
+			text-decoration: none;
+		}
+
+		&:hover {
+			box-shadow: $widget-focus-box-shadow;
+		}
+
+		&.required-authentication, &.external-link {
+			a{
+				padding-right: 2rem;
+
+				&::after {
+					content: '';
+					height: 1.3rem;
+					width: 1.3rem;
+					position: absolute;
+					right: 0.7rem;
+				}
+			}
+		}
+
+		&.required-authentication a::after {
+			background: center / contain no-repeat url('/assets/authentication-required:icon');
+		}
+
+		&.external-link a::after {
+			background: center / contain no-repeat url('/assets/external-link:icon');
+		}
+
+		&:not(:last-child) {
+			border-bottom: 1px solid $gray-light;
+		}
+	}
+}
+
+.gru-content div.cell {
+	h2:first-child:not(:only-child) {
+		border-bottom-left-radius: $border-radius;
+		border-bottom-right-radius: $border-radius;
+	}
+
+	&.foldable > div > h2:first-child {
+		background: $yellow;
+		border: $yellow solid $gray;
+		color: black;
+		display: flex;
+		font-size: $fz-3;
+		align-items: center;
+		height: 4rem;
+		margin: 0;
+		padding-left: 1rem;
+		text-transform: none;
+
+		&:hover {
+			box-shadow: $widget-focus-box-shadow;
+		}
+	}
+
+	&.folded > div > h2:first-child {
+		border: 1px solid $gray;
+		background: transparent;
+
+		&::after {
+			color: $gray;
+		}
+	}
+
+	&.has-asset-picture {
+		position: relative;
+
+		> div > h2:first-child {
+			padding-left: 6rem;
+		}
+
+		picture {
+			height: 3rem;
+			left: 1.5rem;
+			position: absolute;
+			top: 0rem;
+			width: 3rem;
+		}
+	}
+}
+
+.gru-content div.searchcell form {
+	padding: 0;
+	input[type="search"] {
+		background: $gray-xlight;
+		border: none;
+
+		&:focus {
+			background: $gray-xlight;
+			border: none;
+		}
+	}
+
+	.combo-search--button {
+		width: 100%;
+	}
+}
+
+.gru-content div.tracking-code-input-cell {
+	background: right / cover url('/assets/tracking-code-input:background');
+	div.wcs-tracking-code-input {
+		padding: 1rem;
+		div {
+			padding: 0;
+
+			form {
+				display: flex;
+				flex-wrap: wrap;
+				input {
+					flex-grow: 99999;
+					width: 11rem;
+				}
+				button {
+					flex-grow: 1;
+					@extend %black-button;
+					margin-right: 0;
+					min-width: 10rem;
+
+					&, &:hover {
+						color: $primary-color;
+					}
+				}
+			}
+		}
+	}
+
+	h2:first-child {
+		color: black;
+		background: transparent;
+		font-size: $fz-3;
+		margin-bottom: 0.5rem;
+	}
+
+}
+
+/// WCS
+.arm-form-header {
+	background: $gray-xlight;
+
+	&--content {
+		max-width: $width;
+		margin: 0 auto;
+		padding: 1.5rem 0 2.5rem 0;
+	}
+
+	&--title {
+		margin: 0;
+		font-weight: 900;
+		max-width: 35rem;
+		text-transform: uppercase;
+		font-size: 48em / $base-font;
+	}
+
+	@media($max-mobile-viewport) {
+		&--content {
+			padding: 1rem 0 1rem 0;
+		}
+
+		&--title {
+			font-size: $fz-1;
+			text-align: center;
+		}
+	}
+}
+
+div#tracking-code {
+	padding: 1rem;
+	background: right / cover url('/assets/tracking-code:background');
+	border-radius: $border-radius;
+	.tracking-code-part {
+		display: flex;
+		flex-direction: column;
+		h3 {
+			background: transparent;
+			color: black;
+			text-transform: none;
+			text-align: center;
+			margin-bottom: 0.7rem;
+		}
+		a {
+			text-align:center;
+			background: white;
+			padding: 0.5rem;
+			border-radius: $border-radius;
+			font-weight: bold;
+		}
+	}
+
+	form[action="removedraft"] {
+		display: flex;
+		justify-content: center;
+		.form-discard-draft {
+			@extend %black-button;
+			margin-right: 0;
+			&, &:hover {
+				color: $primary-color;
+			}
+		}
+	}
+}
+
+%button {
+	box-shadow: none;
+	padding: 0.5rem 1.5rem;
+}
+
+%black-button {
+	@extend %button;
+	background: black;
+	&:hover {
+		background: black;
+	}
+}
+
+%gray-button {
+	background: $gray-xlight;
+	color: black;
+	&:hover {
+		background: $gray-xlight;
+	}
+}
+
+.wcs-step {
+	border-radius: 0;
+	align-items: center;
+	&.current {
+		font-weight: normal;
+	}
+
+	&--marker-nb {
+		font-weight: bold;
+	}
+
+	@media($min-desktop-viewport) {
+		&.step-before::after {
+			content: '\f00c';
+			font-family: FontAwesome;
+			margin: 0rem 1rem;
+			color: $green;
+		}
+	}
+}
+
+.field {
+	&--label .required {
+		margin: 0;
+		color: $primary-color;
+	}
+}
+
+input[type=radio], input[type=checkbox] {
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+input[readonly], select[readonly], textarea[readonly] {
+	border-radius: $widget-border-radius;
+	background: transparent;
+	border: $widget-border;
+}
+
+input::placeholder {
+	font-style: italic;
+}
+
+@mixin form-button-left($symbol) {
+	&::before {
+		content: $symbol;
+		font-family: FontAwesome;
+		font-size: 0.7rem;
+		margin-right: 1rem;
+	}
+}
+
+@mixin form-button-right($symbol) {
+	&::after {
+		content: $symbol;
+		font-family: FontAwesome;
+		font-size: 0.7rem;
+		margin-left: 1rem;
+	}
+}
+
+.form-content {
+	&--body .buttons.submit {
+		.form-next{
+			@include form-button-right('\f054');
+		}
+
+		.form-previous {
+			@include form-button-left('\f053');
+		}
+
+		.form-submit {
+			@include form-button-left('\f00c');
+		}
+
+		.form-discard, .cancel {
+			@include form-button-left('\f00d');
+		}
+	}
+}
+
+div.form-validation div.page {
+	border-radius: $border-radius;
+}
+
+.back-home-button {
+	display: flex;
+	justify-content: center;
+	a {
+		@extend %button;
+		&::after {
+			content: '\f0e2';
+			font-family: FontAwesome;
+			margin-left: 1rem;
+		}
+	}
+}
+
+///
+/// Custom classes
+///
+.arm-salmon {
+	color: $salmon;
+}
+
+@mixin custom-background-cell($background, $button-color) {
+	border: 1px solid transparent;
+	background: right / cover no-repeat url($background);
+	.pk-button, .pk-big-button {
+		@extend %black-button;
+		&, &:hover {
+			color: $button-color;
+		}
+	}
+}
+
+.gru-content .cell {
+	&.arm-report {
+		@include custom-background-cell('/assets/report:background', $secondary-color)
+	}
+
+	&.arm-suggest {
+		@include custom-background-cell('/assets/suggest:background', $primary-color)
+	}
+
+	&.arm-register {
+		@include custom-background-cell('/assets/register:background', $primary-color)
+	}
+}
diff --git a/static/armentieres/_vars.scss b/static/armentieres/_vars.scss
new file mode 100644
index 00000000..e3b543ba
--- /dev/null
+++ b/static/armentieres/_vars.scss
@@ -0,0 +1,98 @@
+$gray-xlight: #f2f2f2;
+$gray-light: #cccccc;
+$gray: #919191;
+$gray-dark: #333333;
+$salmon: #ec8771;
+$yellow: #ecbe54;
+$yellow-light: #fdf4da;
+$red: #e95f5c;
+$red-light: #fae1db;
+$green-dark: #557c40;
+$green: #9ecf87;
+$green-light: #e6efdf;
+
+$primary-color: $salmon;
+$secondary-color: $yellow;
+
+
+/// Typo
+$font-family: Lato, sans-serif;
+$link-color: $primary-color;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+$base-font: 16;
+$fz-1: 30em / $base-font;
+$fz-2: 20em / $base-font;
+$fz-3: 18em / $base-font;
+$fz-4: 14em / $base-font;
+$fz-small: 14em / $base-font;
+$fz-xsmall: 11em / $base-font;
+
+$font-size: 100% / ( 15 / $base-font );
+
+// General
+$border-radius: 5px;
+$notification_error_color: $red-light;
+$notification_warning_color: $yellow-light;
+$notification_success_color: $green-light;
+$notification_info_color: $yellow-light;
+$sidebar-columns-gutter: 50px;
+$back-top-display: block;
+$back-top-icon-character: "\f062";
+
+// Header
+$header-logo-size: 250px 60px;
+$toplinks-style: none;
+$sidebar-width: 30%;
+$nav-after-image: false;
+
+$nav-color: $gray;
+$nav-item-hover-background: transparent;
+$nav-item-selected-mode: bottom-border;
+$nav-item-selected-border: $primary-color 3px solid;
+$nav-item-hover-border: $primary-color 3px solid;
+$nav-button-background: transparent;
+$nav-button-color: $primary-color;
+$nav-border-color: transparent;
+$nav-mobile-menu-item-hover-color: black;
+$nav-button-bar-height: 3px;
+$nav-mobile-bottom-bar-item-hover-color: black;
+$nav-mobile-bottom-bar-item-selected-background: $primary-color;
+$nav-mobile-bottom-bar-item-selected-color: black;
+
+// Title
+$title-padding: 0;
+$title-color: $primary-color;
+$title-font-size: $fz-2;
+$title-transform: uppercase;
+$title-weight: 700;
+$title-background: transparent;
+
+// Cells
+$cell-border: none;
+$cell-entry-color: black;
+$cell-entry-hover-color: black;
+$cell-entry-font-weight: normal;
+$cell-entry-hover-background: transparent;
+$cell-entry-border: none;
+
+$widget-focus-box-shadow: 0 0 5px 2px $gray-light;
+
+// Footer
+$footer-background: $gray-dark;
+
+// WCS
+$wcs-step-current-label-color: black;
+$wcs-step-color: $gray;
+$wcs-step-border-bottom: 1px solid $gray-light;
+$wcs-step-current-border-bottom: 2px solid $gray-light;
+$form-sidebar-width: 25%;
+$form-sidebar-gutter: 3rem;
+
+$form-accent-color: $primary-color;
+$widget-border-radius: $border-radius;
+$button-color: black;
+$button-background: $secondary-color;
+$buttons-order: previous (grow), cancel (grow), submit;
+$cancel-button-style: "%gray-button";
diff --git a/static/armentieres/config.json b/static/armentieres/config.json
new file mode 100644
index 00000000..e8785e80
--- /dev/null
+++ b/static/armentieres/config.json
@@ -0,0 +1,24 @@
+{
+  "label": "Armentières",
+  "variables": {
+    "theme_color": "#e8735f",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "authentication-required:icon": { "label": "Authentification nécessaire: Icône" },
+        "emails:logo": { "label": "Emails : logo" },
+        "external-link:icon": { "label": "Lien externe: Icône" },
+        "header:logo": { "label": "Têtière : logo" },
+        "page-header:background": { "label": "En-tête de page : fond" },
+        "profile:icon": { "label": "Profil : Icône" },
+        "register:background": { "label": "S'enregistrer: Fond" },
+        "report:background": { "label": "Signaler une anomalie: Fond" },
+        "suggest:background": { "label": "Suggérer une démarche: Fond" },
+        "tracking-code-input:background": { "label": "Entrée du code de suivi: fond" },
+        "tracking-code:background": { "label": "Code de suivi: Fond" }
+      }
+    }
+  }
+}
diff --git a/static/armentieres/style.scss b/static/armentieres/style.scss
new file mode 100644
index 00000000..1fd447de
--- /dev/null
+++ b/static/armentieres/style.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/armentieres/combo/page_template.html b/templates/variants/armentieres/combo/page_template.html
new file mode 100644
index 00000000..1873255b
--- /dev/null
+++ b/templates/variants/armentieres/combo/page_template.html
@@ -0,0 +1,15 @@
+{% extends "combo/page_template.html" %}
+
+{% block content-pre %}
+	<header class="arm-page-header">
+		<div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page"%}</div>
+	</header>
+	{%skeleton_extra_placeholder after-header %}
+	{% end_skeleton_extra_placeholder %}
+{% endblock %}
+
+{% block footer-post %}
+  <div class="arm-footer-bottom">
+	{% placeholder "footer-bottom" name="Bas du pied de page" acquired=True optional=True %}
+  </div>
+{% endblock %}
diff --git a/templates/variants/armentieres/theme.html b/templates/variants/armentieres/theme.html
new file mode 100644
index 00000000..8d0f4246
--- /dev/null
+++ b/templates/variants/armentieres/theme.html
@@ -0,0 +1,11 @@
+{% extends 'theme.html' %}
+
+{# move nav #}
+{% block header-content %}
+  {% block nav %}{% endblock %}
+  {% block top-links %}{% endblock %}
+{% endblock %}
+
+{% block after-header %}
+{% endblock %}
+
diff --git a/templates/variants/armentieres/wcs/base.html b/templates/variants/armentieres/wcs/base.html
new file mode 100644
index 00000000..96799200
--- /dev/null
+++ b/templates/variants/armentieres/wcs/base.html
@@ -0,0 +1,14 @@
+{% extends "wcs/base.html" %}
+
+{% block placeholder-after-header %}
+  {% if title %}
+  <div class="arm-form-header">
+	<div class="arm-form-header--content">
+	  <h1 class="arm-form-header--title">{{ title }}</h1>
+	</div>
+  </div>
+  {% endif %}
+{% endblock %}
+
+{% block wcs-form-title %}{% endblock %}
+
-- 
2.35.1

