meyzieu-2018: initial theme (#23257)
This commit is contained in:
parent
c519953b0c
commit
bb6b36c284
1
Makefile
1
Makefile
|
|
@ -43,6 +43,7 @@ css: data_uris
|
|||
cd static/massoins/ && sass style.scss:style.css
|
||||
cd static/meaux/ && sass style.scss:style.css
|
||||
cd static/meyzieu/ && sass style.scss:style.css
|
||||
cd static/meyzieu-2018/ && sass style.scss:style.css
|
||||
cd static/minint/sass && sass styles.scss:../css/styles.css
|
||||
cd static/montpellier/ && sass style.scss:style.css
|
||||
cd static/nancy/ && sass style.scss:style.css
|
||||
|
|
|
|||
|
|
@ -0,0 +1,385 @@
|
|||
@import '../includes/font-din';
|
||||
|
||||
#header {
|
||||
height: 150px;
|
||||
background-color: #fff;
|
||||
background-image: url('img/header-left.png'), url('img/logo.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center, 6em center;
|
||||
background-size: 5% auto, 55% auto;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
background-image: url('img/logo.png');
|
||||
background-position: 3em center;
|
||||
background-size: 75% auto;
|
||||
}
|
||||
h1#logo {
|
||||
text-indent: -999999px;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
background: $primary-color;
|
||||
border-radius: 0 0 0 1em;
|
||||
right: 0;
|
||||
padding: 1ex 2em 1ex 2em;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
div#nav {
|
||||
margin: 0 auto;
|
||||
> ul {
|
||||
margin: 0;
|
||||
@include flexbox();
|
||||
@include justify-content(space-between);
|
||||
> li {
|
||||
> a {
|
||||
font-size: 1.1em;
|
||||
line-height: 3.5em;
|
||||
}
|
||||
&.selected, &:hover {
|
||||
> a {
|
||||
background: $nav-item-hover-background;
|
||||
border-bottom: 5px solid $primary-color;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
> a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.menu-contact {
|
||||
border-top: 1px solid $nav-background;
|
||||
background: #fff;
|
||||
width: calc(#{$sidebar-width} - 20px);
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
background: transparent;
|
||||
width: auto;
|
||||
}
|
||||
&.selected a {
|
||||
background: $nav-item-hover-background;;
|
||||
border-bottom: 5px solid $primary-color;
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
color: $primary-color;
|
||||
border-bottom: 5px solid #fff;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
border: 0
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 5px solid $primary-color;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
span::after {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
background: url('img/contact.png') no-repeat;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0 2ex;
|
||||
background-size: contain;
|
||||
background-position: 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
#columns {
|
||||
margin-top: 2ex;
|
||||
}
|
||||
div.top {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
margin-bottom: 2ex;
|
||||
.carrousel-wrapper {
|
||||
@include flexbox();
|
||||
@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
div.menu {
|
||||
@include flexbox();
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
a {
|
||||
text-align: center;
|
||||
}
|
||||
ul {
|
||||
border-right: 1px solid #000;
|
||||
li {
|
||||
margin: 10px 0;
|
||||
&.selected {
|
||||
border-right: 3px solid $primary-color;
|
||||
margin: 10px -2px;
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
}
|
||||
#sidebar {
|
||||
div.textcell.espace-personnel {
|
||||
margin-bottom: 0;
|
||||
h1 {
|
||||
padding: 0.5ex 1ex;
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 65%;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.mes-demandes {
|
||||
background: $nav-background;
|
||||
border-radius: 0 0 0 1em;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
&:hover {
|
||||
background: $nav-submenu-background;
|
||||
color: $primary-color;
|
||||
a {
|
||||
color: $nav-item-selected-color;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
div#espace-personnel {
|
||||
background: $primary-color url('img/moncompte.png') no-repeat;
|
||||
background-position: 250% 50%;
|
||||
background-size: contain;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
padding: 0 0.5em 0.5em 0.5em;
|
||||
div.description {
|
||||
color: #fff;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
ul > li {
|
||||
text-align: right;
|
||||
> a {
|
||||
color: #fff;
|
||||
padding-bottom: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.searchcell {
|
||||
position: absolute;
|
||||
top: -7.5em;
|
||||
right: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
form.combo-search-form {
|
||||
padding: 0;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "\f002"; /* search icon */
|
||||
font-family: FontAwesome;
|
||||
display: block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
top: 0.25em;
|
||||
padding-left: 5px;
|
||||
font-size: 1.5em;
|
||||
color: $primary-color;
|
||||
}
|
||||
input {
|
||||
border: 1px solid $primary-color;
|
||||
padding-left: 3.5ex;
|
||||
width: 25ex;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
div#gauche {
|
||||
width: 27.5%;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
+ div#rub_service {
|
||||
width: 70.5%;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#steps {
|
||||
h2 {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
display: block;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 1ex 0;
|
||||
text-align: center;
|
||||
}
|
||||
ol li {
|
||||
border: 0;
|
||||
position: relative;
|
||||
&.first span.marker::after {
|
||||
display: none;
|
||||
}
|
||||
&.current {
|
||||
background: transparent;
|
||||
span.marker {
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
span.label {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin: 0 3px;
|
||||
vertical-align: middle;
|
||||
&.marker {
|
||||
display: inline-flex;
|
||||
border-radius: 50%;
|
||||
padding: 1em;
|
||||
@include justify-content(center);
|
||||
align-items: center;
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
background: #e0e0de;
|
||||
font-size: calc(#{$font-size} + 0.5vw);
|
||||
color: #c2c3c1;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
height: 20%;
|
||||
width: 1px;
|
||||
top: -35%;
|
||||
background: $primary-color;
|
||||
padding: 0;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
width: 20%;
|
||||
height: 1px;
|
||||
left: -35%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.label {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div#tracking-code {
|
||||
h3 {
|
||||
font-size: 110%;
|
||||
display: inline;
|
||||
&::after {
|
||||
content: ':';
|
||||
padding: 0 0 0 1ex;
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-size: 110%;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
div#liens-divers {
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
div.description {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
border: 0;
|
||||
}
|
||||
ul {
|
||||
@include flexbox();
|
||||
@include flex-direction(row);
|
||||
@include vendor-prefix(flex-wrap, wrap);
|
||||
@include justify-content(flex-start);
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@include justify-content(space-around);
|
||||
}
|
||||
li {
|
||||
max-width: 10em;
|
||||
margin: 1ex;
|
||||
@each $category in (associations, base-nautique, demenagement, etat-civil, famille, mediatheque) {
|
||||
&.menu-#{$category} {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
background: $primary-color url('img/#{$category}.png') no-repeat;
|
||||
box-shadow: 0px 0px 10px #888888;
|
||||
background-position: center 0;
|
||||
background-size: 5em;
|
||||
div.description {
|
||||
color: $nav-item-hover-background;
|
||||
}
|
||||
a {
|
||||
color: $nav-item-hover-background;
|
||||
}
|
||||
}
|
||||
padding-top: 5em;
|
||||
background: url('img/#{$category}.png') no-repeat;
|
||||
background-position: center 0;
|
||||
background-size: 5em;
|
||||
&:hover {
|
||||
background-image: url('img/#{$category}-hover.png');
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
div.description {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
$primary-color: #3997a5;
|
||||
$mobile-limit: 800px;
|
||||
$width: 1200px;
|
||||
$font-family: Din, Roboto, sans-serif;
|
||||
$font-weight: 500;
|
||||
$font-size: 16px;
|
||||
$border-radius: 0;
|
||||
$nav-background: #e0e0de;
|
||||
$nav-item-selected-color: #000;
|
||||
$nav-submenu-background: #dff5f2;
|
||||
$nav-menu-color: #000;
|
||||
$nav-active-color: transparent;
|
||||
$nav-item-selected-border: 5px solid $primary-color;
|
||||
$nav-item-selected-color: $primary-color;
|
||||
$nav-item-hover-background: #e6f5f7;
|
||||
$nav-button-color: $primary-color;
|
||||
|
||||
$sidebar-position: right;
|
||||
|
||||
$cell-entry-hover-background: transparent;
|
||||
$cell-entry-color: #333;
|
||||
$cell-border: 0;
|
||||
$cell-entry-border-color: transparent;
|
||||
|
||||
$button-background: $primary-color;
|
||||
|
||||
$title-font-size: 145%;
|
||||
$title-weight: bold;
|
||||
|
||||
$link-color: #000;
|
||||
$title-color: #FFF;
|
||||
$title-background: $primary-color;
|
||||
|
||||
$footer-background: $nav-background;
|
||||
$footer-color: #000;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
$(function() {
|
||||
$('div.carrousel-wrapper .menu a').click(function(e) {
|
||||
e.preventDefault();
|
||||
var $selected = $(this).parents('li');
|
||||
$.each($selected.parents('ul').children(), function(index, element) {
|
||||
$(element).removeClass('selected');
|
||||
});
|
||||
$(this).parents('li').addClass('selected');
|
||||
var page_url = this.href;
|
||||
var content_selector = 'div.carrousel-wrapper .content';
|
||||
$(content_selector).fadeTo(100, 0, function() {
|
||||
$(content_selector).load(page_url + ' #main-content', function() {
|
||||
$(content_selector).fadeTo(100, 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
$('div.carrousel-wrapper .menu a:first').click();
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import "vars";
|
||||
@import "../includes/publik";
|
||||
@import "../includes/flexbox_mixins";
|
||||
@import "custom";
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% load combo %}
|
||||
{% if menuitems %}
|
||||
<ul>
|
||||
{% spaceless %}
|
||||
{% for menuitem in menuitems %}
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="menu-{{ menuitem.page.slug }}">
|
||||
<a href="{% page_absolute_url menuitem.page %}"><span>{{ menuitem.page.title }}</span></a>
|
||||
<div class="description">
|
||||
{{ menuitem.page.description }}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endspaceless %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{% load combo %}
|
||||
{% if menuitems %}
|
||||
<ul>
|
||||
{% spaceless %}
|
||||
{% for menuitem in menuitems %}
|
||||
<li data-menu-page-id="{{ menuitem.page.id }}" class="menu-{{ menuitem.page.slug }}">
|
||||
<a href="{% page_absolute_url menuitem.page %}"><span>{{ menuitem.page.title }}</span></a>
|
||||
<div class="description">
|
||||
{{ menuitem.page.description }}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endspaceless %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load i18n combo %}
|
||||
|
||||
{% block combo-content %}
|
||||
<div>
|
||||
<div class="top">
|
||||
<div class="carrousel-wrapper">
|
||||
<div class="menu">
|
||||
{% placeholder "topbanner" name="Carrousel" %}
|
||||
</div>
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar">
|
||||
{% trans "Sidebar" as name %}
|
||||
{% placeholder "sidebar" name=name %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
{% trans "Content" as name %}
|
||||
{% placeholder "content" name=name %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -259,6 +259,14 @@
|
|||
"theme_color": "#007CB5"
|
||||
}
|
||||
},
|
||||
{"id": "meyzieu-2018",
|
||||
"label": "Meyzieu 2018",
|
||||
"variables": {
|
||||
"css_variant": "meyzieu-2018",
|
||||
"theme_color": "#3997a5",
|
||||
"no_extra_js": false
|
||||
}
|
||||
},
|
||||
{"id": "montpellier",
|
||||
"label": "Montpellier",
|
||||
"variables": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue