From d66ef883652a6523851b6f71a63948329e85ddbf Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Tue, 8 Jun 2021 15:47:22 +0200
Subject: [PATCH] marseille: new theme (#54569)

---
 static/marseille/_custom.scss                 | 294 ++++++++++++++++++
 static/marseille/_vars.scss                   |  87 ++++++
 static/marseille/config.json                  |  16 +
 .../marseille/img/Armoiries_de_Marseille.png  | Bin 0 -> 315341 bytes
 static/marseille/style.scss                   |   6 +
 5 files changed, 403 insertions(+)
 create mode 100644 static/marseille/_custom.scss
 create mode 100644 static/marseille/_vars.scss
 create mode 100644 static/marseille/config.json
 create mode 100644 static/marseille/img/Armoiries_de_Marseille.png
 create mode 100644 static/marseille/style.scss

diff --git a/static/marseille/_custom.scss b/static/marseille/_custom.scss
new file mode 100644
index 00000000..f412eced
--- /dev/null
+++ b/static/marseille/_custom.scss
@@ -0,0 +1,294 @@
+%button {
+	font-weight: 500;
+}
+
+//
+// HEADER
+//
+
+$logo-height: 50px;
+$header-height: $logo-height + 20px;
+
+#header-wrapper {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid #dfdfdf;
+}
+
+#top {
+	display: flex;
+	align-items: center;
+}
+h1#logo {
+	flex-grow: 1;
+	font-size: $fz-h4;
+	@media (max-width: $very-small-limit) {
+		font-size: 1rem;
+	}
+	@media ($min-desktop-viewport) {
+		font-size: $fz-h2;
+	}
+	&.has-logo a {
+		text-indent: 0;
+		color: $primary-color;
+		display: flex;
+		align-items: center;
+		padding-left: calc(75px + 1em);
+		height: $logo-height;
+		background-size: auto $logo-height;
+		background-position: left center;
+	}
+}
+
+// toplinks
+#toplinks {
+	// reset
+	border: none;
+	padding: 0;
+	border-radius: none;
+	box-shadow: none;
+	position: static;
+
+	line-height: 1.7;
+	@media ($max-mobile-viewport) {
+		font-size: $fz-small;
+	}
+}
+
+// nav
+body {
+	border-left: 0 none;
+}
+div.gru-nav {
+	font-size: $fz-small;
+
+	.gru-nav-button {
+		box-sizing: content-box;
+		border: 10px solid $primary-color;
+		border-width: #{($header-height - $nav-menu-side) / 2} 10px;
+		top: 0;
+		left: 0;
+
+		&.toggled {
+			border-color: transparent;
+
+			+ ul {
+				@media ($max-mobile-viewport) {
+					padding-top: $header-height;
+					border-right: 2px solid $primary-color;
+				}
+			}
+		}
+	}
+	> ul {
+		overflow: visible;
+		li a {
+			font-weight: 500;
+		}
+
+		@media ($min-desktop-viewport) {
+			> li {
+				position: relative;
+				padding-left: 0.625em;
+				padding-right: 0.625em;
+				> a {
+					padding: 0.33em 0.66em;
+					border-radius: 3em;
+				}
+				ul {
+					left: -1px;
+					padding-top: 1em;
+				}
+			}
+		}
+
+		// sep line
+		li {
+			@media ($max-mobile-viewport) {
+				border-top: 1px solid $sep-color;
+			}
+			@media ($min-desktop-viewport) {
+				border-left: 1px solid $sep-color;
+			}
+		}
+
+
+	}
+}
+
+// Page Image
+body.has-picture {
+	.site-nav::after {
+		top: 0;
+		height: 0;
+		padding-top: 20%;
+		@media (max-width: $very-small-limit) {
+			padding-top: 50%;
+		}
+	}
+	@media ($min-desktop-viewport) {
+		div#main-content-wrapper {
+			margin-top: -1.875rem;
+		}
+	}
+}
+
+//
+//	MAIN
+//
+
+div#main-content-wrapper {
+	background-color: white;
+	padding: $columns-gutter;
+	@media (max-width: $very-small-limit) {
+		padding-left: #{$columns-gutter / 2};
+		padding-left: 0;
+		padding-right: #{$columns-gutter / 2};
+		padding-right: 0;
+	}
+}
+
+// cells vertical gutters
+.column div.a2-block,
+.gru-content div.cell,
+.block {
+	margin-bottom: $columns-gutter;
+}
+
+// Links-list
+div#rub_service div.category ul,
+div#services > ul > li > ul,
+div#account-management ul,
+div.links-list ul,
+div.menucell ul,
+div.wcsformcell,
+div.categoriescell ul,
+div.wcscurrentdraftscell ul,
+div.wcscurrentformscell ul {
+	& > li {
+		> a {
+			padding-left: 2rem;
+				&::before {
+				content: "\f04b";
+				color: $link-color;
+				font-family: fontawesome;
+				font-size: 0.7em;
+				position: absolute;
+				left: 1rem;
+				line-height: 1.7;
+			}
+		}
+	}
+}
+
+.search-cell {
+	@extend .pk-transparent;
+	input[type=search] {
+		background-color: white;
+		border-color: $font-color;
+		border-radius: 2em;
+	}
+}
+
+
+//
+//	WCS / FORMS
+//
+
+input[readonly], select[readonly], textarea[readonly] {
+	background-color: transparent;
+}
+
+div#rub_service {
+	background-color: white;
+
+	& > h2 {
+		font-size: $fz-h1;
+		padding-left: 0.5rem;
+	}
+}
+
+div.gru-content div#rub_service,
+div#rub_service {
+	h3 {
+		font-size: $fz-h2;
+		color: $title-color;
+	}
+	h4 {
+		color: $title-color;
+		font-size: $fz-h3;
+	}
+}
+
+div#summary h2,
+div#evolution-log h2 {
+	border-bottom: 1px solid currentColor;
+}
+
+ul#evolutions div.evolution-metadata,
+ul#evolutions li div.msg {
+	background-color: white;
+}
+
+
+//
+//	FOOTER
+//
+
+#footer {
+	font-size: $fz-small;
+	padding-left: 0.7rem;
+	padding-right: 0.7rem;
+
+	// Blason
+	position: relative;
+	z-index: 0;
+	&::before {
+		content: "";
+		background: url(img/Armoiries_de_Marseille.png) no-repeat center $footer-background;
+		background-size: contain;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: block;
+		opacity: 0.2;
+		z-index: -1;
+	}
+
+	h2, h3 {
+		font-weight: 500;
+	}
+
+	.menucell {
+		li a {
+			&::before {
+				content: none;
+			}
+		}
+	}
+
+	div.links-list ul {
+		& > li {
+			border: none;
+			> a {
+				padding: 0;
+				margin-bottom: 1em;
+				&::before {
+					content: none;
+				}
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
+
+//
+//	PWA nav
+//
+.pwa-navigation div > ul li a {
+	background-size: auto 20px;
+}
diff --git a/static/marseille/_vars.scss b/static/marseille/_vars.scss
new file mode 100644
index 00000000..699c9cfc
--- /dev/null
+++ b/static/marseille/_vars.scss
@@ -0,0 +1,87 @@
+// Custom vars
+
+$gray-dark: #464646;
+$blue: #2c62cb;
+$blue-dark: #1a489c;
+$blue-xdark: #002454;
+$flesh: #f7f4f1;
+$sep-color: hsla(0, 0%, 0%, 0.2);
+
+// fonts size
+$fz-h1: 3.125em;
+$fz-h2: 1.875em;
+$fz-h3: 1.375em;
+$fz-h4: 1.25rem;
+$fz-small: 0.875em;
+$fz-xsmall: 0.78em;
+
+// Core vars
+$primary-color: $blue-dark;
+$font-color: $gray-dark;
+$font-family: orkney, sans-serif;
+$link-color: $blue;
+$body-background: $flesh;
+
+$width: 1200px;
+$mobile-limit: 1024px;
+$very-small-limit: 560px;
+$columns-gutter: 30px;
+
+$header-background-color: white;
+
+$nav-menu-side: 20px;
+$nav-background: $flesh;
+$nav-full-width-background: true;
+$nav-color: $blue-xdark;
+$nav-button-background: $primary-color;
+$nav-submenu-color: $blue-xdark;
+$nav-item-selected-background: white;
+$nav-item-selected-color: $nav-color;
+$responsive-menu: left-to-right;
+$nav-mobile-menu-background: $flesh;
+$nav-mobile-menu-item-color: $nav-color;
+
+$nav-mobile-bottom-bar-background: $blue-xdark;
+$nav-mobile-bottom-bar-color: white;
+$nav-mobile-bottom-bar-item-hover-color: white;
+$nav-mobile-bottom-bar-item-hover-background: $link-color;
+$nav-mobile-bottom-bar-item-selected-background: $link-color;
+$nav-mobile-bottom-bar-item-selected-color: white;
+
+$cell-image-position: top;
+$cell-image-padding: 0;
+$cell-background: $flesh;
+$cell-border: 1px solid transparent;
+$cell-title-cover-border: false;
+$cell-entry-color: $font-color;
+$cell-entry-font-weight: 400;
+$cell-entry-hover-background: transparent;
+$cell-entry-hover-color: $link-color;
+$cell-entry-border-color: $sep-color;
+
+$title-background: transparent;
+$title-color: $blue-xdark;
+$title-font-size: $fz-h3;
+$title-weight: 700;
+
+$widget-background: $body-background;
+$widget-border: 1px solid $sep-color;
+$widget-focus-border: 1px solid $font-color;
+$widget-unique-checkbox-position: left;
+
+$wcs-step-border-bottom: none;
+$wcs-step-marker-type: disc;
+
+$button-background: $link-color;
+$button-hover-background: $primary-color;
+
+$wcs-steps-spacing: 0.7rem;
+$wcs-step-color: darken($flesh, 40%);
+$wcs-step-marker-background: darken($flesh, 15%);
+$wcs-step-marker-color: white;
+$wcs-step-current-marker-background: $primary-color;
+$wcs-step-current-marker-color: white;
+
+$footer-background: #0047a3;
+$footer-link-color: white;
+$footer-menucell-separator: 1px solid hsla(0, 0%, 100%, 0.3);
\ No newline at end of file
diff --git a/static/marseille/config.json b/static/marseille/config.json
new file mode 100644
index 00000000..068b920f
--- /dev/null
+++ b/static/marseille/config.json
@@ -0,0 +1,16 @@
+{
+  "label": "Marseille",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#1a489c",
+    "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/marseille/img/Armoiries_de_Marseille.png b/static/marseille/img/Armoiries_de_Marseille.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecb6bed130fb0a90adcb9f671e06ac9dae93a4c4
GIT binary patch
diff --git a/static/marseille/style.scss b/static/marseille/style.scss
new file mode 100644
index 00000000..228b81ef
--- /dev/null
+++ b/static/marseille/style.scss
@@ -0,0 +1,6 @@
+@charset "UTF-8";
+@import '../includes/fonts/orkney';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';
-- 
2.20.1

