add theme for saint-chamond (#25226)

static/saint-chamond/_custom.scss

@@ -0,0 +1,266 @@
+$dashboard-slugs: mon-compte, mes-demandes;
+
+header {
+	background: $blue;
+	padding-top: 25px;
+	padding-bottom: 40px;
+	@media screen and (max-width: $nav-mobile-limit) {
+		padding-top: 0;
+	}
+	h1#logo {
+		@media screen and (max-width: $nav-mobile-limit) {
+			padding-top: 50px;
+			padding-left: 0;
+			text-align: center;
+		}
+		a {
+			background: url(img/logo.png);
+			display: inline-block;
+			text-indent: -10000px;
+			width: 285px;
+			height: 37px;
+		}
+	}
+	a {
+		color: white;
+	}
+	#toplinks {
+		padding-top: 0;
+		border: none;
+		background: none;
+		box-shadow: none;
+	}
+}
+
+footer {
+	#footer-wrapper {
+		padding-bottom: 0;
+	}
+	#footer {
+		min-height: 200px;
+		background: url(img/m.png) left 0 bottom -60px no-repeat;
+		position: relative;
+	}
+	div.menucell ul li a {
+		color: white;
+	}
+	p:last-child {
+		margin-bottom: 0;
+	}
+	#fleche-haut {
+		font-size: 20px;
+		position: absolute;
+		right: 0;
+		top: 10px;
+		a {
+			background: $blue2;
+			color: white;
+			display: block;
+			height: 60px;
+			line-height: 60px;
+			width: 60px;
+			text-align: center;
+			color: white;
+		}
+	}
+}
+
+nav ul {
+	display: none;
+}
+
+#sidebar {
+	padding-right: 40px;
+	@media screen and (max-width: $nav-mobile-limit) {
+		padding-right: 0;
+	}
+}
+
+#left {
+	width: calc(100% - 250px);
+	@media screen and (max-width: $nav-mobile-limit) {
+		width: auto;
+	}
+}
+
+#right {
+	width: 250px;
+	@media screen and (max-width: $nav-mobile-limit) {
+		clear: both;
+		width: auto;
+	}
+}
+
+div.cell,
+div.comment-field,
+div.infonotice {
+	&.fond-bleu, &.fond-turquoise, &.infonotice {
+		&.comment-field {
+			padding: 0.5rem 0.5rem;
+			&.infonotice {
+				padding-left: 4rem;
+			}
+		}
+		padding-bottom: 0.5rem;
+		color: white;
+		h2:first-child, h3:first-child {
+			margin-top: 0;
+			color: white;
+			font-weight: normal;
+		}
+	}
+	&.fond-bleu {
+		background: #2a8be7;
+	}
+	&.fond-turquoise, &.infonotice {
+		background: $turquoise;
+	}
+}
+
+#encart-bandeau {
+	position: absolute;
+	top: -300px;
+	left: 130px;
+	width: 480px;
+	background: rgba(42, 139, 231, 0.8);
+	padding: 0.5rem 2rem;
+	color: white;
+	@media screen and (max-width: $nav-mobile-limit) {
+		padding: 0.5rem 0.5rem;
+		position: static;
+		width: auto;
+	}
+	h2 {
+		font-size: 36px;
+		color: white;
+		@media screen and (max-width: $nav-mobile-limit) {
+			font-size: 24px;
+		}
+	}
+}
+
+#content .wcsformsofcategorycell {
+	picture {
+		display: block;
+		text-align: center;
+		+ h2 {
+			margin-top: 0;
+			padding-top: 0;
+			color: $blue2;
+		}
+	}
+	a {
+		background-image: url(img/disc.png);
+		background-position: 5px 50%;
+		background-repeat: no-repeat;
+		color: $font-color;
+	}
+	li.more-items a {
+		background-image: url(img/plus.png);
+		background-position: 5px 50%;
+		background-repeat: no-repeat;
+		font-weight: bold;
+		text-align: left;
+	}
+}
+
+div#rub_service h2 {
+	text-align: left;
+	color: #545454;
+	font-size: 28px;
+}
+
+div#tracking-code h3 {
+	background: $blue;
+	color: white;
+	padding: 0.5rem 1rem;
+	text-transform: uppercase;
+}
+
+div.buttons button {
+	text-transform: uppercase;
+}
+
+div#gauche {
+	width: 15%;
+	text-align: center;
+	@media screen and (max-width: $nav-mobile-limit) {
+		width: auto;
+		margin-top: 0;
+	}
+}
+
+div#steps {
+	@media screen and (max-width: $nav-mobile-limit) {
+		ol {
+			text-align: center;
+			padding-top: 5px;
+		}
+	}
+	ol li {
+		border: none;
+		text-align: center;
+		&.current span.marker,
+		span.marker {
+			background: $turquoise;
+			border-radius: 100%;
+			color: white;
+			width: 50px;
+			margin: 0 auto;
+			display: inline-block;
+			@media screen and (max-width: $nav-mobile-limit) {
+				width: 16px;
+				border: none;
+			}
+		}
+		&.current span.marker {
+			background: $blue;
+		}
+		span.label {
+			display: block;
+			color: $font-color;
+			margin-top: 5px;
+			@media screen and (max-width: $nav-mobile-limit) {
+				display: none;
+			}
+		}
+	}
+}
+
+div.dataview {
+	span.label {
+		color: #545454;
+	}
+}
+
+%button {
+	@extend %button;
+	box-shadow: none;
+	border: 1px solid #373737;
+}
+
+div.cancel-button {
+	float: right;
+	button {
+		background: white;
+		color: $font-color;
+	}
+}
+
+@each $slug in $dashboard-slugs {
+	##{$slug} a {
+		background-image: url(img/#{$slug}.png);
+		background-size: contain;
+		background-repeat: no-repeat;
+		padding-left: 65px;
+		border: none;
+	}
+}
+
+@media screen and (max-width: $nav-mobile-limit) {
+	@supports (background-image: var(--page-picture)) {
+		body.has-picture nav::after {
+			height: 200px;
+		}
+	}
+}

static/saint-chamond/_vars.scss

@@ -0,0 +1,29 @@
+@import '../includes/font-din';
+
+$blue: #00517c;
+$blue2: #2f8dda;  // lighter
+$turquoise: #3eb2af;
+
+$width: 1240px;
+$sidebar-width: 240px;
+
+$font-color: #020202;
+$font-family: Din, sans-serif;
+$font-size: 18px;
+
+$footer-background: #373737;
+$footer-color: white;
+
+$nav-mobile-mode: default;
+$nav-after-image-height: 400px;
+
+$cell-border: 0;
+
+$title-color: $blue;
+$title-background: transparent;
+$title-weight: bold;
+$title-padding: 0.5rem 0.5rem 0 0.5rem;
+
+$border-radius: 0;
+$button-background: $blue;
+$widget-focus-border: 1px solid $blue2;

static/saint-chamond/config.json

@@ -0,0 +1,7 @@
+{
+  "label": "Saint-Chamond",
+  "variables": {
+    "email_header_img": "img/logo.png",
+    "theme_color": "#00517c"
+  }
+}

static/saint-chamond/style.scss

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