diff --git a/static/entrouvert/_carrousel-references.scss b/static/entrouvert/_carrousel-references.scss new file mode 100644 index 00000000..2dd10ad0 --- /dev/null +++ b/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; + } + } +} diff --git a/static/entrouvert/_custom.scss b/static/entrouvert/_custom.scss new file mode 100644 index 00000000..222f2d65 --- /dev/null +++ b/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; +} diff --git a/static/entrouvert/_vars.scss b/static/entrouvert/_vars.scss new file mode 100644 index 00000000..16a0f997 --- /dev/null +++ b/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; diff --git a/static/entrouvert/config.json b/static/entrouvert/config.json new file mode 100644 index 00000000..f4bd9b44 --- /dev/null +++ b/static/entrouvert/config.json @@ -0,0 +1,7 @@ +{ + "label": "Entr'ouvert", + "variables": { + "theme_color": "#E0007A", + "include_top_links": true + } +} diff --git a/static/entrouvert/img/downrose.png b/static/entrouvert/img/downrose.png new file mode 100644 index 00000000..cce29529 Binary files /dev/null and b/static/entrouvert/img/downrose.png differ diff --git a/static/entrouvert/img/e36.png b/static/entrouvert/img/e36.png new file mode 100644 index 00000000..37ef4641 Binary files /dev/null and b/static/entrouvert/img/e36.png differ diff --git a/static/entrouvert/img/eo-background.png b/static/entrouvert/img/eo-background.png new file mode 100644 index 00000000..4fce373e Binary files /dev/null and b/static/entrouvert/img/eo-background.png differ diff --git a/static/entrouvert/img/feed36.png b/static/entrouvert/img/feed36.png new file mode 100644 index 00000000..9aa63a64 Binary files /dev/null and b/static/entrouvert/img/feed36.png differ diff --git a/static/entrouvert/img/id36.png b/static/entrouvert/img/id36.png new file mode 100644 index 00000000..40c3a703 Binary files /dev/null and b/static/entrouvert/img/id36.png differ diff --git a/static/entrouvert/img/logo.png b/static/entrouvert/img/logo.png new file mode 100644 index 00000000..fb954dd0 Binary files /dev/null and b/static/entrouvert/img/logo.png differ diff --git a/static/entrouvert/img/refs36.png b/static/entrouvert/img/refs36.png new file mode 100644 index 00000000..f475b794 Binary files /dev/null and b/static/entrouvert/img/refs36.png differ diff --git a/static/entrouvert/img/sol36.png b/static/entrouvert/img/sol36.png new file mode 100644 index 00000000..92cf38c9 Binary files /dev/null and b/static/entrouvert/img/sol36.png differ diff --git a/static/entrouvert/style.scss b/static/entrouvert/style.scss new file mode 100644 index 00000000..a5b33411 --- /dev/null +++ b/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'; diff --git a/templates/variants/entrouvert/combo/cells/carrousel_references/menu-cell.html b/templates/variants/entrouvert/combo/cells/carrousel_references/menu-cell.html new file mode 100644 index 00000000..6d4e139c --- /dev/null +++ b/templates/variants/entrouvert/combo/cells/carrousel_references/menu-cell.html @@ -0,0 +1,82 @@ +{% load assets %} +

Références

+
+ {% for menuitem in menuitems %} + +
+ {% block carrousel-item %} + + {% endblock %} +
+ {% endfor %} + + {% block carrousel-navigation %} +
+ {% for menuitem in menuitems %} + + {% endfor %} +
+ {% endblock %} + +
+ diff --git a/templates/variants/entrouvert/combo/page_template.html b/templates/variants/entrouvert/combo/page_template.html new file mode 100644 index 00000000..f216d890 --- /dev/null +++ b/templates/variants/entrouvert/combo/page_template.html @@ -0,0 +1,10 @@ +{% extends '../../combo/page_template.html' %} + +{% block user-info %} +
+ Contact / + FAQ / + Notre réseau : + Libre-entreprise +
+{% endblock %}