add initial clermont-metropole theme (#29600)

static/clermont-metropole/_custom.scss

@@ -0,0 +1,116 @@
+
+h1#logo {
+	height: 80px;
+	a {
+		padding-top: 30px;
+		background-image: url('img/logo.jpg');
+		background-repeat: no-repeat;
+		background-position: 5% bottom;
+		display: block;
+		text-indent: -9999px;
+		height: 50px;
+		@media screen and (max-width: $mobile-limit) {
+			background-position: center center;
+			background-size: contain;
+			padding-top: 15px;
+			margin-top: 10px;
+		}
+	}
+}
+
+div#toplinks {
+	position: absolute;
+	top: -40px;
+	background: transparent;
+	border: 0;
+	@media screen and (max-width: $mobile-limit) {
+		padding-top: 0;
+	}
+	a {
+		color: #ffffff;
+	}
+	span.connected-user {
+		@media screen and (max-width: $mobile-limit) {
+			display: none;
+		}
+	}
+}
+
+div#nav {
+	li {
+		margin: 0 0.5em;
+	}
+}
+
+div.carrousel-item-content {
+	background: rgba(51, 51, 51, 0.65);
+	padding: 25px 10px;
+	text-transform: uppercase;
+	margin-bottom: 20px;
+	width: 50%;
+	@media screen and (max-width: $mobile-limit) {
+		width: 100%;
+	}
+}
+
+div#header-wrapper {
+	border-top: 40px solid $footer-background;
+}
+
+#pwa-navigation a {
+	padding-top: 35px;
+	background-size: auto 25px;
+}
+
+div#footer-wrapper {
+	@media screen and (max-width: $mobile-limit) {
+		display: none;
+	}
+}
+
+div#header-top {
+	position: absolute;
+	top: -40px;
+	font-size: 80%;
+	@media screen and (max-width: $very-small-limit) {
+		display: none;
+	}
+	ul {
+		@media screen and (max-width: $mobile-limit) {
+			margin-top: 0;
+		}
+	}
+}
+
+div#header-top, div#footer {
+	ul {
+		padding: 0;
+		li {
+			list-style-type: none;
+			display: inline;
+			margin-right: 10px;
+			a {
+				color: #ffffff;
+				transition: color ease 0.25s;
+				&:hover {
+					color: #e44b00;
+				}
+			}
+		}
+	}
+}
+
+div#footer {
+	a {
+		color: #ffffff;
+	}
+	div.cell {
+		border-bottom: 1px solid #484745;
+		margin-bottom: 20px;
+	}
+	div.cell.adresse {
+		text-align: center;
+		font-size: 85%;
+		border-bottom: 0;
+	}
+}

static/clermont-metropole/_vars.scss

@@ -0,0 +1,54 @@
+@import '../includes/font-cabin';
+
+$body-background: transparent;
+$font-family: Cabin, sans-serif;
+$primary-color: #333333;
+$width: 1240px;
+$mobile-limit: 1024px;
+$very-small-limit: 600px;
+
+$title-font-size: 1.5em;
+$title-weight: bold;
+$title-color: #ffffff;
+$title-background: $primary-color;
+
+$sidebar-width: 410px;
+$sidebar-position: right;
+
+$nav-after-image: false;
+$nav-background: transparent;
+$nav-active-color: $primary-color;
+$nav-item-background: $primary-color;
+$nav-item-hover-background: #ffffff;
+$nav-item-hover-color: $primary-color;
+$nav-color: #ffffff;
+
+$nav-submenu-background: $primary-color;
+$nav-mobile-menu-background: $primary-color;
+$nav-mobile-menu-item-color: #ffffff;
+
+$nav-mobile-bottom-bar-background: #2a2421;
+$nav-mobile-bottom-bar-height: 53px;
+$nav-mobile-bottom-bar-color: #dddddd;
+$nav-mobile-bottom-bar-item-hover-color: #ffffff;
+$nav-mobile-bottom-bar-item-hover-background: transparent;
+
+$link-color: $primary-color;
+
+$cell-border: none;
+$cell-title-cover-border: false;
+
+$footer-background: #2a2421;
+$footer-color: #ffffff;
+
+$carrousel-height: 600px;
+
+$button-background: $link-color;
+$widget-background: transparent;
+$widget-border: 1px solid #2a2421;
+$widget-border-radius: 3px;
+$widget-focus-color: #2a2421;
+$widget-focus-border: 1px solid #e44b00;
+
+$carrousel-height: 420px;
+$carrousel-text-position: bottom-left;

static/clermont-metropole/config.json

@@ -0,0 +1,7 @@
+{
+  "label": "Clérmont-Métropole",
+  "variables": {
+    "theme_color": "#333333",
+    "pwa_display": "standalone"
+  }
+}

static/clermont-metropole/style.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import 'custom';

templates/variants/clermont-metropole/combo/page_template.html

@@ -0,0 +1,9 @@
+{% extends "combo/page_template.html" %}
+{% load combo %}
+
+
+{% block header-top %}
+<div id="header-top">
+  {% placeholder "header" name="En-tête du bandeau" %}
+</div>
+{% endblock %}