From 57675bbbb41ce58133fdd475678c32c52a017df0 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Mon, 16 Aug 2021 12:14:41 +0200
Subject: [PATCH] cap-atlantique: new theme (#56126)

---
 static/cap-atlantique/_custom.scss            | 224 ++++++++++++++++++
 static/cap-atlantique/_vars.scss              |  43 ++++
 static/cap-atlantique/config.json             |  22 ++
 static/cap-atlantique/style.scss              |   6 +
 .../cap-atlantique/combo/page_template.html   |  15 ++
 .../combo/page_template_neutral.html          |   2 +
 6 files changed, 312 insertions(+)
 create mode 100644 static/cap-atlantique/_custom.scss
 create mode 100644 static/cap-atlantique/_vars.scss
 create mode 100644 static/cap-atlantique/config.json
 create mode 100644 static/cap-atlantique/style.scss
 create mode 100644 templates/variants/cap-atlantique/combo/page_template.html
 create mode 100644 templates/variants/cap-atlantique/combo/page_template_neutral.html

diff --git a/static/cap-atlantique/_custom.scss b/static/cap-atlantique/_custom.scss
new file mode 100644
index 00000000..2e990f6e
--- /dev/null
+++ b/static/cap-atlantique/_custom.scss
@@ -0,0 +1,224 @@
+//
+//	Typo
+//
+h1 {
+	color: $blue-dark;
+	font-size: 2.5em;
+	background-color: transparent;
+
+}
+h2 {
+	color: $blue;
+	font-size: 1.5em;
+}
+
+//
+//	header
+//
+div#header {
+	padding-top: $columns-gutter;
+	padding-bottom: $columns-gutter / 2;
+	@media ($max-mobile-viewport) {
+		padding-top: $columns-gutter / 2;
+	padding-bottom: $columns-gutter / 4;
+	}
+}
+h1#logo {
+	@media ($max-mobile-viewport) {
+		padding-left: 0;
+	}
+	&.has-logo a {
+		width: 260px;
+		height: 80px;
+		@media ($min-desktop-viewport) {
+			width: 400px;
+			height: 90px;
+		}
+	}
+}
+
+//
+//	NAV
+//	user-infos block is child of #nav-wrapper
+//
+#nav-wrapper {
+	position: relative;
+	display: flex;
+	margin-top: 0;
+}
+
+div#nav {
+	margin-left: 0;
+	flex-grow: 1;
+	@media ($min-desktop-viewport) {
+		margin-right: $columns-gutter;
+	}
+	@media (min-width: $width) {
+		margin-left: calc(50vw - #{$width / 2});
+	}
+	> ul {
+		margin: 0;
+		border-top: none;
+
+		@media (max-width: $mobile-limit) {
+			position: absolute;
+			z-index: 1;
+			width: 100vw;
+		}
+	}
+}
+
+#toplinks {
+	// reset
+	background: none;
+	box-shadow: none;
+	border: none;
+	border-radius: 0;
+	position: static;
+	padding: 0;
+
+	> span::before {
+		content: "\f007";
+		font-family: fontawesome, sans-serif;
+		align-self: center;
+		color: $blue;
+		padding-left: .66em;
+	}
+
+	&, & > span {
+		display: flex;
+		align-items: center;
+	}
+	& > span {
+		flex-wrap: wrap;
+	}
+	a {
+		align-items: center;
+		padding: .75em .66em;
+		color: white;
+		font-weight: bold;
+
+		&.logout {
+			font-weight: normal;
+		}
+	}
+	.sep {
+		color: $blue;
+	}
+}
+
+//
+//	MAIN
+//
+#content {
+	margin-top: $columns-gutter;
+}
+
+.page-header {
+	margin: 0 0.7rem;
+	text-align: center;
+}
+
+
+//
+//	CELLS
+//
+.list-of-forms-cell {
+	.gru-content &.cell {
+		margin-bottom: $columns-gutter;
+		border: none;
+		h2:first-child {
+			background-color: transparent;
+			text-align: center;
+			padding-right: 3rem;
+			text-transform: uppercase;
+			&::after {
+				line-height: 0.6em;
+				font-size: 2em;
+				color: $blue;
+				right: 1rem;
+			}
+		}
+		&.has-asset-picture picture {
+			display: block;
+			text-align: center;
+			border-bottom: 1px solid $cell-entry-border-color;
+			img {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.wcs-forms-of-category-cell {
+	@extend .list-of-forms-cell;
+}
+
+//
+//	WCS / FORMS
+//
+
+.orange-btn {
+	&, &:hover {
+		@extend %button;
+		background-color: $orange;
+	}
+}
+
+div#rub_service {
+	h2 {
+		@extend h1;
+		padding-left: 0.5rem;
+		padding-top: 0;
+	}
+
+	h3 {
+		@extend h2;
+		padding-left: 0;
+
+	}
+	.submit-button button {
+		@extend .orange-btn;
+	}
+}
+
+//
+//	NEUTRAL TPL
+//
+.page-template-neutral {
+	#top,
+	#nav > * {
+		display: none;
+	}
+	h1, h2 {
+		color: $gray-dark;
+	}
+	div.gru-nav-wrapper,
+	#footer-wrapper {
+		background: $gray-dark !important;
+	}
+	div.gru-content button {
+		background-color: $gray-dark;
+		color: white;
+		&:hover {
+			background-color: black;
+		}
+	}
+	#toplinks {
+		> span::before,
+		.sep {
+			color: $gray-light;
+		}
+	}
+	// cell titles
+	div#rub_service div.category h3,
+	.gru-content div.a2-block h2,
+	.gru-content .block h2,
+	div.links-list h2,
+	div#services > ul > li > strong > a,
+	.gru-content div.textcell h2:first-child,
+	.gru-content div.cell h2:first-child {
+		background-color: $gray-dark;
+		color: white;
+	}
+}
diff --git a/static/cap-atlantique/_vars.scss b/static/cap-atlantique/_vars.scss
new file mode 100644
index 00000000..ee89a9ba
--- /dev/null
+++ b/static/cap-atlantique/_vars.scss
@@ -0,0 +1,43 @@
+// colors
+$blue:  #00b6d8;
+$blue-dark: #006889;
+$orange: #fa8e2f;
+$brown: #b6600a;
+$gray-light: #f0f0f0;
+$gray-dark: #555;
+
+// Core vars$
+$font-family: ubuntu, sans-serif;
+$font-color: #222;
+$primary-color: $blue;
+$link-color: $blue-dark;
+
+$width: 1280px;
+$mobile-limit: 1024px;
+$very-small-limit: 560px;
+$columns-gutter: 40px;
+$sidebar-columns-gutter: 60px;
+
+$nav-full-width-background: true;
+$nav-background: $blue-dark !important;
+$nav-color: white;
+$nav-active-color: $blue;
+$nav-button-background: transparent;
+$nav-mobile-menu-background: $nav-background;
+$nav-mobile-menu-item-color: $nav-color;
+
+$title-background: $blue;
+$title-weight: bold;
+
+$button-background: $blue;
+$button-color: black;
+
+$widget-background: $gray-light;
+$widget-border: 1px solid transparent;
+$widget-focus-border: 1px solid $font-color;
+$widget-unique-checkbox-position: left;
+
+$wcs-step-current-color: $brown;
+
+$footer-background: #005f83;
+$footer-link-color: $orange;
diff --git a/static/cap-atlantique/config.json b/static/cap-atlantique/config.json
new file mode 100644
index 00000000..3e93a409
--- /dev/null
+++ b/static/cap-atlantique/config.json
@@ -0,0 +1,22 @@
+{
+  "label": "Cap Atlantique",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#00b6d8",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "emails:logo": {"label": "Emails : logo"}
+      },
+      "COMBO_PUBLIC_TEMPLATES.update": {
+        "neutral": {
+          "name": "Une colonne - Neutre",
+          "template": "combo/page_template_neutral.html"
+        }
+      }
+    }
+  }
+}
diff --git a/static/cap-atlantique/style.scss b/static/cap-atlantique/style.scss
new file mode 100644
index 00000000..fddd37eb
--- /dev/null
+++ b/static/cap-atlantique/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/ubuntu';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
diff --git a/templates/variants/cap-atlantique/combo/page_template.html b/templates/variants/cap-atlantique/combo/page_template.html
new file mode 100644
index 00000000..3a07f7be
--- /dev/null
+++ b/templates/variants/cap-atlantique/combo/page_template.html
@@ -0,0 +1,15 @@
+{% extends "combo/page_template.html" %}
+
+{# move user infos block #}
+{% block top-links %}
+{% endblock %}
+{% block nav-post %}
+  {% include 'includes/user-info.html' %}
+{% endblock %}
+
+{# add page header placeholder #}
+{% block content-pre %}
+	<div class="page-header">
+	{% placeholder "page-header" name="Entête de la page" %}
+	</div>
+{% endblock %}
diff --git a/templates/variants/cap-atlantique/combo/page_template_neutral.html b/templates/variants/cap-atlantique/combo/page_template_neutral.html
new file mode 100644
index 00000000..0e89c273
--- /dev/null
+++ b/templates/variants/cap-atlantique/combo/page_template_neutral.html
@@ -0,0 +1,2 @@
+{% extends "combo/page_template.html" %}
+
-- 
2.20.1

