From 9353c7c6501945f5c42c2e555d1dd182b08c9e0d Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 14 Jul 2021 16:07:14 +0200
Subject: [PATCH] themes: add la-baule (#55534)

---
 static/la-baule/_custom.scss                  | 305 ++++++++++++++++++
 static/la-baule/_vars.scss                    |  59 ++++
 static/la-baule/config.json                   |  16 +
 static/la-baule/style.scss                    |   6 +
 .../la-baule/combo/page_template.html         |  17 +
 templates/variants/la-baule/wcs/base.html     |   5 +
 6 files changed, 408 insertions(+)
 create mode 100644 static/la-baule/_custom.scss
 create mode 100644 static/la-baule/_vars.scss
 create mode 100644 static/la-baule/config.json
 create mode 100644 static/la-baule/style.scss
 create mode 100644 templates/variants/la-baule/combo/page_template.html
 create mode 100644 templates/variants/la-baule/wcs/base.html

diff --git a/static/la-baule/_custom.scss b/static/la-baule/_custom.scss
new file mode 100644
index 00000000..90bfd258
--- /dev/null
+++ b/static/la-baule/_custom.scss
@@ -0,0 +1,305 @@
+
+
+//
+//	Components
+//
+
+%title {
+	line-height: 1;
+}
+
+%button {
+	font-weight: bold;
+}
+
+h1 {
+	font-size: $fz-h2;
+	font-weight: 900;
+	line-height: 1.1;
+	margin-top: 0;
+	margin-bottom: 0.5em;
+	@media ($min-desktop-viewport) {
+		font-size: $fz-h1;
+	}
+}
+
+//
+//	HEADER
+//
+h1#logo {
+	@media ($max-mobile-viewport) {
+		padding-top: 0.7em;
+		padding-bottom: 0.7em;
+		padding-left: 0;
+	}
+	@media ($min-desktop-viewport) {
+		padding-top: 30px;
+		padding-bottom: 30px;
+	}
+	&.has-logo a {
+		height: 100px;
+		display: block;
+		@media ($min-desktop-viewport) {
+			height: 150px;
+		}
+	}
+}
+
+
+// 
+//	NAV
+//	user-infos block is child of #nav-wrapper
+//
+$skew-value: 15deg;
+
+#page {
+	overflow-x: hidden;
+}
+
+#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;
+		}
+	}
+	// skew in desktop
+	@media ($min-desktop-viewport) {
+		> ul > li > a {
+			transform: skewX(#{ -1 * $skew-value});
+			border-right: 1px solid $nav-active-color;
+			transform-origin: top left;
+			> span {
+				transform: skewX($skew-value);
+				display: block;
+			}
+		}
+	}
+}
+#toplinks {
+	// reset
+	background: none;
+	box-shadow: none;
+	border: none;
+	border-radius: 0;
+	position: static;
+	padding: 0;
+	
+	background-color: $orange;
+
+	@media ($max-mobile-viewport) {
+		font-size: $fz-small;
+	}
+
+	> 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: .33em .66em;
+		color: white;
+		font-weight: bold;
+
+		&:hover {
+			color: $blue;
+		}
+
+		&.logout {
+			font-weight: normal;
+		}
+	}
+	.sep {
+		color: $blue;
+	}
+
+	// skew
+	& {
+		transform: skewX(#{ -1 * $skew-value});
+		transform-origin: bottom right;
+		> span {
+			transform: skewX($skew-value);
+		}	
+	}
+}
+
+//
+//	MAIN
+//
+
+.page-header, .gru-content {
+	padding-top: $columns-gutter;
+}
+
+// Page header
+.page-header {
+	h1, h2, h3 {
+		color: $blue;
+	}
+	div.text-cell {
+		font-size: $fz-h4;
+		color: $orange-dark;
+		font-weight: 500;
+
+		p {
+			line-height: 1.3;
+		}
+	}
+
+	div.searchcell form {
+		input {
+			margin-right: 0;
+		}
+		button {
+			@extend input;
+			flex: 0 0 auto;
+			color: white;
+			background-color: $orange;
+			font-weight: bold;
+			&:focus {
+				background-color: $blue !important;
+				color: white !important;
+			}
+		}
+		@media ($min-desktop-viewport) {
+			&::before {
+				content: "Rechercher";
+				font-size: $fz-h4;
+				color: $blue;
+				font-weight: bold;
+				padding-right: .33em;
+			}
+		}
+	}
+}
+
+//
+//	CELLS
+//
+.right-icon {
+	// $image-width: #{$title-font-size + 1.4};
+	$image-width: 3.15rem;
+	@debug($image-width);
+	.gru-content &.cell {
+		// Picture position
+		&.has-asset-picture {
+			> div {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+
+				> * {
+					flex: 0 0 100%;
+				}
+
+				> h2:first-child {
+					flex: 1 0 50%;
+					margin-left: calc(-1 * #{$image-width});
+					padding-left: #{$image-width + 1};
+					line-height: 1;
+				}
+				> picture {
+					display: block;
+					order: -1;
+					flex: 0 0 $image-width;
+					height: $image-width;
+					align-self: center;
+					position: relative;
+					z-index: 1;
+
+					background-color: $cyan;
+					border: 2px solid white;
+					border-radius: 50%;
+					padding: .66em;
+
+
+					img {
+						padding: 0;
+						object-fit: contain;
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+		&.foldable.folded {
+			> div {
+				h2:first-child {
+					background-color: $gray;
+					color: $blue;
+				}
+
+			}
+		}
+	}
+}
+
+#columns {
+	.wcs-forms-of-category-cell,
+	.link-list-cell {
+		@extend .right-icon;
+	}
+}
+
+#main-content div.text-cell > div {
+	> * {
+		margin-right: 1rem;
+		margin-left: 1rem;
+	}
+	h1, h2:not(:first-child), h3 {
+		color: $blue;
+	}
+}
+
+//
+//	WCS
+//
+
+
+.wcs-page {
+	.page-header h1 {
+		font-size: $fz-h2;
+		@media ($max-mobile-viewport) {
+			padding: 0 0.7rem;
+		}
+	}
+	#content {
+		padding-top: 0;
+	}
+	#rub_service {
+		h2 {
+			display: none;
+		}
+		:first-child {
+			margin-top: 0;
+		}
+	}
+}
diff --git a/static/la-baule/_vars.scss b/static/la-baule/_vars.scss
new file mode 100644
index 00000000..cc5187d4
--- /dev/null
+++ b/static/la-baule/_vars.scss
@@ -0,0 +1,59 @@
+// Colors
+$blue: #15357b;
+$blue-bright: #00308c;
+$cyan: #70b8b9;
+$orange: #ec6539;
+$orange-light: #fab441;
+$orange-dark: #6a605e;
+$gray: #e1e1e6;
+
+// fonts size
+$fz-h1: 72px;
+$fz-h2: 42px;
+$fz-h3: 36px;
+$fz-h4: 1.75em;
+$fz-small: 0.85em;
+
+$header-width: 1680px;
+
+// Core vars
+$font-family: ubuntu, sans-serif;
+$font-color: #222;
+
+$primary-color: $blue;
+$link-color: $orange;
+
+$width: 1340px;
+$mobile-limit: 1280px;
+$columns-gutter: 40px;
+
+$nav-background: $blue !important;
+$nav-mobile-menu-background: $blue;
+$nav-full-width-background: true;
+$nav-color: white;
+$nav-mobile-menu-item-color: white;
+$nav-active-color: $cyan;
+$nav-button-background: $blue;
+
+$title-background: $blue;
+$title-color: white;
+$title-weight: bold;
+$title-font-size: $fz-h4;
+
+$cell-border: none;
+$cell-title-cover-border: false;
+$cell-entry-color: $font-color;
+$cell-entry-hover-background:$orange-light;
+
+$widget-background: $gray;
+$widget-border: 1px solid transparent;
+
+$button-background: $cyan;
+$button-color: white;
+
+
+$widget-unique-checkbox-position: left;
+
+$footer-background: $blue-bright;
+$footer-color: white;
+$footer-link-color: white;
diff --git a/static/la-baule/config.json b/static/la-baule/config.json
new file mode 100644
index 00000000..2c852760
--- /dev/null
+++ b/static/la-baule/config.json
@@ -0,0 +1,16 @@
+{
+  "label": "La Baule",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#15357b",
+    "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/la-baule/style.scss b/static/la-baule/style.scss
new file mode 100644
index 00000000..fddd37eb
--- /dev/null
+++ b/static/la-baule/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/la-baule/combo/page_template.html b/templates/variants/la-baule/combo/page_template.html
new file mode 100644
index 00000000..ff065787
--- /dev/null
+++ b/templates/variants/la-baule/combo/page_template.html
@@ -0,0 +1,17 @@
+{% 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/la-baule/wcs/base.html b/templates/variants/la-baule/wcs/base.html
new file mode 100644
index 00000000..aecd87d8
--- /dev/null
+++ b/templates/variants/la-baule/wcs/base.html
@@ -0,0 +1,5 @@
+{% extends "wcs/base.html" %}
+
+{% block placeholder-page-header %}
+    {% if title %}<h1>{{ title }}</h1>{% endif %}
+{% endblock %} 
-- 
2.20.1

