fabregues: update theme to match new institutional site (#50512)

static/fabregues/_custom.scss

@@ -1,26 +1,38 @@
-div#header-wrapper {
-	background: transparent url(img/bandeau_plateforme.png) top center no-repeat;
-	height: 208px;
-	@media screen and ($max-mobile-viewport) {
-		background-position: 0px -30px;
-		height: 185px;
+body.has-header-background {
+	.site-header {
+		background: none;
 	}
-	div#header h1 {
-		padding-top: 80px;
-		a {
-			display: block;
-			height: 120px;
-			text-indent: -1000px;
-			overflow: hidden;
-		}
-		@media screen and ($max-mobile-viewport) {
+	#header {
+		padding-top: $toplinks-height;
+		@media ($max-mobile-viewport) {
 			padding-left: 0;
-			width: 100%;
+			padding-right: 0;
+		}
+		@media ($min-desktop-viewport) {
+			background: url(/assets/header:background) right center no-repeat;
+			background-size: auto 100%;
+		}
+	}
+	#logo {
+		display: flex;
+		height: 208px;
+		width: 350px;
+		background-color: white;
+		align-items: center;
+		@media screen and ($max-mobile-viewport) {
+			height: 90px;
+			width: auto;
+		}
+	 	a {
+			height: 60px;
+			flex: 100%;
+			background-size: contain;
 		}
 	}
 }
 
 div#nav {
+	text-transform: uppercase;
 	margin-top: 0;
 	& > ul {
 		margin-top: 0;
@@ -31,17 +43,35 @@ div.gru-nav .gru-nav-button {
 	margin-left: 0;
 }
 
+div.gru-nav > ul ul {
+	@media (min-width: $nav-mobile-limit + 1) {
+		box-shadow: 0 2px 5px rgba(0,0,0,.1);
+		border-top: 2px solid $primary-color;
+	}
+}
+
 #toplinks {
-	background: white;
+	background: $primary-color;
+	color: white;
+	font-weight: 600;
+	text-align: right;
 	border: none;
 	box-shadow: none;
-	border-radius: 0 0 0 5px;
+	border-radius: 0;
 	right: 0;
+	left: 0;
+	padding: 0 1em;
+	max-width: none;
 	a {
 		display: inline-block;
-		color: $font-color;
+		color: inherit;
+		line-height: $toplinks-height;
 		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
 }
+
+%button {
+	font-weight: 500;
+}

static/fabregues/_vars.scss

@@ -1,19 +1,36 @@
-$primary-color: #f3af51;
+// Custom vars
+$cyan: #02a294;
+$cyan-dark: #003a3e;
+$gray: #666;
+
+$toplinks-height: 2rem;
+
+
+// core Vars
+
+$primary-color: #02a294;
 
 $font-color: #111;
 $font-size: 0.938em;
-$font-family: Myriad, Arial, Verdana, sans-serif;
-$width: 1003px;
-$border-radius: 0;
+$font-family: raleway, sans-serif;
+$width: 1024px;
+$link-color: darken($cyan, 15);
 
 $nav-full-width-background: false;
-$nav-background: $primary-color;
-$nav-color: black;
-$nav-active-color: darken($primary-color, 10%);
-$border-radius: 0px;
-$button-background: $primary-color;
+$nav-background: white;
+$nav-color: $gray;
+$nav-active-color: $cyan;
+$nav-submenu-color: $gray;
+$nav-item-selected-background: white;
+$nav-item-selected-color: $nav-active-color;
+$nav-button-background: white;
+$nav-button-color: $nav-active-color;
+$nav-mobile-menu-item-color: $gray;
+$nav-mobile-menu-background: white;
+$button-background: $cyan-dark;
 $title-background: $primary-color;
-$title-color: black;
+$title-color: white;
 $title-transform: uppercase;
+$title-weight: 500;
 $footer-background: #edf1f0;
 $footer-color: black;

static/fabregues/config.json

@@ -2,5 +2,13 @@
   "label": "Fabrègues",
   "variables": {
     "theme_color": "#f3af51"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:background": { "label": "Têtière : fond" },
+        "header:logo": { "label": "Têtière : logo" }
+      }
+    }
   }
 }

static/fabregues/style.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import '../includes/fonts/raleway';
 
 @import 'vars';
 @import '../includes/publik';