add entrouvert variant (#30700)

static/entrouvert/_carrousel-references.scss

@@ -0,0 +1,143 @@
+div.carrousel-references-content {
+	position: relative;
+	height: 172px;
+	overflow: hidden;
+	input {
+		visibility: hidden;
+	}
+	input + div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity ease 0.5s;
+		div.carrousel-item {
+			display: table;
+			position: relative;
+			background-position: center center;
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			padding: 10px;
+			&::after {
+				content: "";
+				display: block;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				background: inherit;
+				opacity: 0.3;
+			}
+			div.carrousel-item-content {
+				> a {
+					display: block;
+					color: inherit;
+					box-sizing: border-box;
+				}
+				position: relative;
+				@if $carrousel-text-position == "middle" {
+					> a {
+						padding: 1rem;
+						margin-left: 6rem;
+						margin-right: 6rem;
+					}
+					display: table-cell;
+					vertical-align: middle;
+					p {
+						margin-left: auto;
+						margin-right: auto;
+					}
+				} @else if $carrousel-text-position == "bottom-left" {
+					text-align: left;
+					position: absolute;
+					bottom: 1rem;
+				}
+				z-index: 100;
+				line-height: 110%;
+				p {
+					max-width: 40ex;
+				}
+			}
+			color: white;
+			font-size: 120%;
+			text-align: center;
+		}
+	}
+
+	input:checked + div {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	div.carrousel-nav {
+		position: absolute;
+		@if $carrousel-navigation == "visible" {
+			display: block;
+		} @else {
+			display: none;
+		}
+		bottom: 10px;
+		text-align: center;
+		width: 100%;
+		height: 20px;
+		z-index: 100;
+		label {
+			display: inline-block;
+			margin: 0 10px;
+			width: 10px;
+			height: 10px;
+			border: 1px solid #fff;
+			border-radius: 50%;
+			cursor: pointer;
+			transition: background-color 0.25s;
+		}
+	}
+	a.carrousel-references-previous,
+	a.carrousel-references-next {
+		@if $carrousel-arrows == visible {
+			display: block;
+		} @else {
+			display: none;
+		}
+		position: absolute;
+		top: calc(50% - 3rem);
+		color: #ccc;
+		height: 6rem;
+		line-height: 6rem;
+		width: 6rem;
+		cursor: pointer;
+		z-index: 1000;
+		text-align: center;
+		&::after {
+			font-family: FontAwesome;
+			font-size: 24px;
+		}
+		&.carrousel-references-previous {
+			left: 1ex;
+			&::after {
+				content: "\f053";  // chevron-left;
+			}
+		}
+		&.carrousel-references-next {
+			right: 1ex;
+			&::after {
+				content: "\f054";  // chevron-right;
+			}
+		}
+		@media screen and (max-width: $nav-mobile-limit) {
+			display: none;
+		}
+	}
+
+	@for $i from 1 through 10 {
+		.carrousel-radio-#{$i}:checked ~ .carrousel-nav label.carrousel-label-#{$i} {
+			background-color: $carrousel-navigation-bullet-color;
+		}
+	}
+}

static/entrouvert/_custom.scss

@@ -0,0 +1,178 @@
+h1 {
+	font-weight: 300;
+}
+
+h2, h3, .gru-content div.cell h2:first-child {
+	font-weight: 400;
+	margin-bottom: 10px;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a.pk-button:hover {
+	text-decoration: none;
+}
+
+#columns {
+	@media screen and (max-width: $very-small-limit) {
+		padding: 0 4px 0 0;
+	}
+}
+
+#footer {
+	padding: 10px 0 0 4px;
+	line-height: 1.33em;
+}
+
+#footer a {
+  color: white;
+}
+
+#header {
+	h1 a {
+		float: left;
+		background: url(img/logo.png) left center no-repeat;
+		width: 160px;
+		height: 95px;
+		display: block;
+		margin-top: 7px;
+		text-indent: -10000px;
+		@media screen and (max-width: $nav-mobile-limit) {
+			height: 60px;
+			background-size: contain;
+		}
+	}
+}
+
+#nav-wrapper {
+	margin-bottom: 12px;
+	@media screen and (max-width: $nav-mobile-limit) {
+		border-top: 1px solid #eee;
+	}
+}
+
+#sidebar h1 {
+	font-size: 22px;
+	font-weight: 400;
+	margin-top: 30px;
+}
+
+#toplinks {
+	border: none;
+	box-shadow: none;
+	font-size: 13px;
+}
+
+.page-index {
+	background: url('img/eo-background.png') left top repeat-x;
+}
+
+.gru-content #columns > .cell[class*="grid-"] {
+	min-height: 286px;
+	font-weight: 500;
+	border: 1px solid #555;
+	padding: 1rem 1rem 0.5rem 1rem;
+	@media screen and (max-width: $very-small-limit) {
+		min-height: inherit;
+	}
+}
+
+.gru-content #sidebar div.cell {
+	border: 1px solid #ced0d5;
+	margin-top: 10px;
+}
+
+.gru-content div.textcell h2:first-child, .gru-content div.cell h2:first-child {
+	background-color: inherit;
+	width: unset;
+	top: 0;
+	left: 0;
+}
+
+.gru-content div.cell a.pk-button {
+	margin-top: 15px;
+}
+
+.gru-content div.cell h2 + div {
+    padding: 0;
+}
+
+.deuxcolonnes p {
+	font-size: 17px;
+	line-height: 1.4;
+}
+
+div.gru-nav > ul {
+	padding-left: 28px;
+}
+
+div.gru-nav > ul > li a {
+	font-weight: 600;
+	line-height: 2.5em;
+	text-decoration: none;
+}
+
+div.gru-nav > ul {
+	border-top: 1px solid #ced0d5;
+	border-bottom: 1px solid #ced0d5;
+}
+
+.gru-content div.logo-id36 h1:first-child, .gru-content div.logo-id36 h2:first-child {
+	background: url(img/id36.png) left center no-repeat;
+	padding-left: 48px;
+}
+
+.gru-content div.logo-sol36 h1:first-child, .gru-content div.logo-sol36 h2:first-child {
+	background: url(img/sol36.png) left center no-repeat;
+	padding-left: 48px;
+}
+
+.gru-content div.logo-e36 h1:first-child, .gru-content div.logo-e36 h2:first-child {
+	background: url(img/e36.png) left center no-repeat;
+	padding-left: 48px;
+}
+
+.gru-content div.logo-refs36 h1:first-child, .gru-content div.logo-refs36 h2:first-child {
+	background: url(img/refs36.png) left center no-repeat;
+	padding-left: 48px;
+}
+
+.gru-content div.logo-feed36 h1:first-child, .gru-content div.logo-feed36 h2:first-child {
+	background: url(img/feed36.png) left center no-repeat;
+	padding-left: 48px;
+}
+
+div.carrousel-content input + div div.carrousel-item {
+	background-size: 300px auto;
+	background-repeat: no-repeat;
+	background-position: 70px center;
+	padding-left: 405px;
+	color: #555;
+}
+
+div.carrousel-content input + div div.carrousel-item::after {
+	background-color: transparent;
+}
+
+div.carrousel-content input + div div.carrousel-item div.carrousel-item-content {
+	bottom: 2.2rem;
+}
+
+div.carrousel-content input + div div.carrousel-item div.carrousel-item-content p {
+	max-width: 90%;
+	line-height: 1.1em;
+}
+
+div.carrousel-content a:hover {
+	text-decoration: none;
+}
+
+div.carrousel-content a.carrousel-previous.carrousel-previous {
+	left: 0;
+}
+
+div.carrousel-content a.carrousel-previous, div.carrousel-content a.carrousel-next {
+	color: #ccc;
+}

static/entrouvert/_vars.scss

@@ -0,0 +1,36 @@
+$primary-color: #37a7da;
+$secondary-color: #e0007a;
+
+$width: 1160px;
+$very-small-limit: 1060px;
+$mobile-header-height: 40px;
+$font-color: #555;
+$font-size: 16px;
+$font-family: Lato, sans-serif;
+$link-color: #0a71a1;
+$nav-background: white;
+$nav-submenu-background: #eee;
+$nav-submenu-color: #333;
+$nav-color: #0a71a1;
+$nav-active-color: white;
+$nav-item-selected-color: $secondary-color;
+$nav-item-selected-background: white;
+$nav-item-hover-color: $secondary-color;
+$nav-item-hover-background: white;
+$border-radius: 4px;
+$button-color: white;
+$button-background: $primary-color;
+$title-font-size: 22px;
+$title-background: white;
+$title-font-family: Lato, sans-serif;
+$nav-mobile-mode: bottom-bar;
+$footer-background: #919396;
+$footer-colot: white;
+$cell-border: 0;
+$nav-mobile-bottom-bar-item-hover-color: white;
+$nav-mobile-bottom-bar-item-hover-background: $primary-color;
+$nav-mobile-bottom-bar-item-selected-color: white;
+$nav-mobile-bottom-bar-item-selected-background: $primary-color;
+$carrousel-height: 220px;
+$carrousel-text-position: bottom-left;
+$carrousel-navigation-bullet-color: #ccc;

static/entrouvert/config.json

@@ -0,0 +1,7 @@
+{
+  "label": "Entr'ouvert",
+  "variables": {
+    "theme_color": "#E0007A",
+    "include_top_links": true
+  }
+}

static/entrouvert/style.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+@import 'vars';
+@import '../includes/publik';
+@import '../includes/font-lato';
+@import 'carrousel-references';
+@import 'custom';

templates/variants/entrouvert/combo/cells/carrousel_references/menu-cell.html

@@ -0,0 +1,82 @@
+{% load assets %}
+<h2><span><a href="/references">Références</a></span></h2>
+<div class="carrousel-references-content">
+ {% for menuitem in menuitems %}
+  <input type="radio" name="carrousel-{{cell.id}}"
+     class="carrousel-radio-{{forloop.counter}}"
+     id="carrousel-{{cell.id}}-{{forloop.counter}}"
+     {% if forloop.first %}checked{% endif %}>
+  <div class="slide">
+     {% block carrousel-item %}
+     <div class="carrousel-item"
+          style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
+      <div class="carrousel-item-content">
+       {% block carrousel-item-content %}
+       <a href="{{menuitem.page.get_online_url}}">
+       <strong>{{menuitem.page.title}}</strong>
+       {% if menuitem.page.description %}<p>{{ menuitem.page.description }}</p>{% endif %}
+       </a>
+       {% endblock %}
+      </div>
+     </div>
+     {% endblock %}
+  </div>
+ {% endfor %}
+ <a class="carrousel-references-previous"></a>
+ {% block carrousel-navigation %}
+ <div class="carrousel-nav">
+ {% for menuitem in menuitems %}
+ <label class="carrousel-label-{{forloop.counter}}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label>
+ {% endfor %}
+ </div>
+ {% endblock %}
+ <a class="carrousel-references-next"></a>
+</div>
+<script>
+$(function() {
+  function next() {
+    if ($('.carrousel-references-content input:checked ~ input').length) {
+      $('.carrousel-references-content input:checked ~ input').first().click();
+    } else {
+      $('.carrousel-references-content input').first().click();
+    }
+  }
+  function previous() {
+    if ($('.carrousel-references-content input ~ input:checked').length) {
+      $('.carrousel-references-content input:checked').prev().prev().click();
+    } else {
+      $('.carrousel-references-content input').last().click();
+    }
+  }
+  var timeout_references_id = setInterval(next, 5000);
+  $('.carrousel-references-content label').on('click', function() {
+    clearInterval(timeout_references_id);
+  });
+  $('a.carrousel-references-previous').on('click', function() {
+    clearInterval(timeout_references_id);
+    previous();
+  });
+  $('a.carrousel-references-next').on('click', function() {
+    clearInterval(timeout_references_id);
+    next();
+  });
+
+  var touch_start = null;
+  $('.carrousel-item').on('touchstart', function(ev) {
+    touch_start = ev.originalEvent.touches[0].pageX;
+  });
+  $('.carrousel-item').on('touchend', function(ev) {
+    var touch_end = ev.originalEvent.changedTouches[0].pageX;
+    var diff = touch_start - touch_end;
+    touch_start = null;
+    clearInterval(timeout_references_id);
+    var width = $('body').width();
+    if (diff*2 > width) {
+      previous();
+    }
+    if (diff*2 < -width) {
+      next();
+    }
+  });
+});
+</script>

templates/variants/entrouvert/combo/page_template.html

@@ -0,0 +1,10 @@
+{% extends '../../combo/page_template.html' %}
+
+{% block user-info %}
+<div id="le">
+    <a class="contact-link" href="/qui-sommes-nous/contact/">Contact</a>&nbsp;/
+    <a class="faq-link" href="/qui-sommes-nous/faq/">FAQ</a>&nbsp;/
+    <span>Notre réseau&nbsp;:</span>
+    <a href="/qui-sommes-nous/liberte-en-reseaux/#le">Libre-entreprise</a>
+</div>
+{% endblock %}