manche: create theme (#83773)

static/manche/_custom.scss

@@ -6,7 +6,7 @@ div#header {
 
 #top {
 	display: grid;
-	grid-template-columns: auto 1fr auto;
+	grid-template-columns: auto max-content auto;
 	align-items: center;
 	gap: $space-medium;
 	@media($max-mobile-viewport) {
@@ -32,9 +32,16 @@ div#header {
 		max-width: unset;
 		grid-area: 2 / 1 / 3 / 3;
 
-		.toplinks--list {
-			display: flex;
-			justify-content: space-around;
+		.toplinks{
+			&--list {
+				display: flex;
+				justify-content: space-around;
+				gap: $space-large;
+			}
+
+			&--item {
+				text-align: center;
+			}
 		}
 	}
 }
@@ -59,10 +66,6 @@ div.gru-nav {
 		}
 
 		@media($max-mobile-viewport) {
-			position: absolute;
-			inset: 0;
-			height: 0;
-			border-top: 0 !important;
 		}
 
 		&--link {
@@ -85,15 +88,11 @@ div.gru-nav {
 	}
 	
 	.gru-nav-button {
+		top: $space-medium;
+		right: $space-medium;
+		left: auto;
 		border-radius: 100%;
-		.icon-bar {
-				width: 40%;
-				left: 30%;
-		}
-
-		.icon-bar-1 { top: 33% }
-		.icon-bar-2 { top: 50% }
-		.icon-bar-3 { top: 68% }
+		border: 9px solid transparent;
 
 		&.toggled {
 			background: $yellow;
@@ -102,12 +101,10 @@ div.gru-nav {
 				background: $blue-dark;
 			}
 		}
-	}
-	@media($max-mobile-viewport) {
-			.gru-nav-button.toggled + ul {
-				height: 100vh;
-				padding-top: 60px;
-			}
+
+		+ ul {
+			width: 100vw;
+		}
 	}
 
 	.submenu {
@@ -186,6 +183,11 @@ div.gru-nav {
 	&--title {
 		background: transparent;
 		font-size: $fz-1;
+
+		@media($max-mobile-viewport) {
+			font-size: $fz-2;
+		}
+
 		color: $blue-dark;
 		font-weight: 900;
 		padding-top: 1rem;
@@ -205,10 +207,14 @@ div.gru-nav {
 	box-shadow: 0 0 16px 0 rgba(0,0,0,.33)
 }
 
-input, textarea, .godo--editor, select {
+input, textarea, .godo--editor, select, div.select2-container, span.select2-container {
 	border-bottom: 1px solid $blue-dark;
 }
 
+.select2-results {
+	border: 1px solid $blue-dark;
+}
+
 #footer {
 	padding: 3rem 0;
 

static/manche/_vars.scss

@@ -37,6 +37,7 @@ $header-logo-size: 200px 50px;
 
 $toplinks-style: none;
 
+$responsive-menu: left-to-right;
 $nav-active-color: $blue-dark;
 $nav-background: $yellow;
 $nav-item-background: transparent;
@@ -48,6 +49,7 @@ $nav-mobile-menu-item-color: white;
 $nav-mobile-menu-item-hover-color: $yellow;
 $nav-button-color: $yellow;
 $nav-button-bar-height: 4px;
+$nav-after-image: false;
 
 
 // Widgets