grosboule-les-bains: add new sample theme

Makefile

@@ -30,6 +30,7 @@ css: data_uris
 	cd static/grandlyon-sau/ && sass style.scss:style.css
 	cd static/grenoble-metropole/ && sass style.scss:style.css
 	cd static/greville-hague/ && sass style.scss:style.css
+	cd static/grosboule-les-bains/ && sass style.scss:style.css
 	cd static/haute-goulaine/ && sass style.scss:style.css
 	cd static/hautes-alpes/ && sass style.scss:style.css
 	cd static/jobourg/ && sass style.scss:style.css

static/grosboule-les-bains/_custom.scss

@@ -0,0 +1,104 @@
+#toplinks {
+	right: -90vw;
+	top: -2rem;
+	font-size: 90%;
+}
+
+header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100;
+	#header {
+		transition: all ease 0.2s;
+		margin-top: 2rem;
+		margin-bottom: 2rem;
+		h1 {
+			margin-top: 0.4rem;
+			a {
+				padding-left: 1rem;
+			}
+		}
+	}
+}
+
+div#nav {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 100%;
+	max-width: unset;
+	text-align: right;
+	padding-right: 1rem;
+	border-bottom: 1px solid #aaa;
+	z-index: 10;
+	margin-top: 0;
+	& > ul {
+		transition: all ease 0.2s;
+		margin-top: 2rem;
+		margin-bottom: 2rem;
+		li > a {
+			font-weight: normal;
+		}
+	}
+}
+
+div#main-content-wrapper {
+	z-index: 0;
+	padding-top: 8rem;
+}
+
+body.has-picture {
+	nav::after {
+		content: "";
+		display: block;
+		width: 100%;
+		height: 600px;
+		background: white center center no-repeat;
+		background-size: cover;
+	}
+	div#main-content-wrapper {
+		padding-top: 1rem;
+	}
+}
+
+body.scrolled {
+	header #header,
+	div#nav > ul {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+#logo a {
+	color: $primary-color;
+	font-weight: normal;
+}
+
+@media screen and (max-width: $mobile-limit) {
+	div#nav, header {
+		text-align: left;
+		position: static;
+		width: unset;
+		padding-right: 0;
+		border-bottom: 0;
+		#header h1 a {
+			padding-left: 0;
+		}
+	}
+
+	header #header,
+	div#nav > ul {
+		margin-top: 2rem;
+		margin-bottom: 1rem;
+	}
+
+	div#main-content-wrapper {
+		padding-top: 0;
+	}
+
+	#toplinks {
+		right: 1vw;
+		top: -2rem;
+	}
+}

static/grosboule-les-bains/_vars.scss

@@ -0,0 +1,15 @@
+$font-color: #333;
+$primary-color: #13b29c;
+$border-radius: 3px;
+
+$nav-active-color: $primary-color;
+$nav-item-selected-mode: bottom-border;
+$nav-submenu-color: $font-color;
+
+$button-background: $primary-color;
+$cell-border: 1px solid transparent;
+$title-border-bottom: 2px solid $primary-color;
+$title-border-radius: 0;
+
+$form-style: light;
+$notification-style: border-icon;

static/grosboule-les-bains/extra.js

@@ -0,0 +1,19 @@
+$(function() {
+  /* set page picture as background */
+  if (document.body.attributes['data-picture']) {
+    var sheet = document.head.appendChild(document.createElement("style")).sheet;
+    sheet.insertRule('body.has-picture nav::after { background-image: url(' + document.body.attributes['data-picture'].value + ')');
+  }
+  /* add a class to body when the page got scrolled */
+  $(window).on('scroll', function() {
+    if ($(window).scrollTop() == 0) {
+      $('body').removeClass('scrolled');
+    } else {
+      $('body').addClass('scrolled');
+    }
+  });
+  /* reset error class when contents is changed */
+  $('input, select, textarea').on('change', function() {
+    $(this).parents('.widget-with-error').removeClass('widget-with-error');
+  });
+});

static/grosboule-les-bains/style.scss

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

themes.json

@@ -156,6 +156,14 @@
      "theme_color": "#431403"
    }
   },
+  {"id": "grosboule-les-bains",
+   "label": "Grosboule-les-Bains",
+   "variables": {
+     "css_variant": "grosboule-les-bains",
+     "no_extra_js": false,
+     "theme_color": "#13b29c"
+   }
+  },
   {"id": "haute-goulaine",
    "label": "Haute Goulaine",
    "variables": {