add entrouvert variant (#30700)
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"label": "Entr'ouvert",
|
||||
"variables": {
|
||||
"theme_color": "#E0007A",
|
||||
"include_top_links": true
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 798 B |
After Width: | Height: | Size: 9.3 KiB |
After Width: | Height: | Size: 359 B |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 14 KiB |
|
@ -0,0 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import '../includes/font-lato';
|
||||
@import 'carrousel-references';
|
||||
@import 'custom';
|
|
@ -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>
|
|
@ -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> /
|
||||
<a class="faq-link" href="/qui-sommes-nous/faq/">FAQ</a> /
|
||||
<span>Notre réseau :</span>
|
||||
<a href="/qui-sommes-nous/liberte-en-reseaux/#le">Libre-entreprise</a>
|
||||
</div>
|
||||
{% endblock %}
|