Ajout de l'intégration graphique pour Malakoff (en attente de validation client)
This commit is contained in:
Michael Bideau
parent
128893f97b
commit
0ba8ffc25f
|
|
@ -0,0 +1,459 @@
|
|||
@import '../../publik-base-theme/static/includes/font-din';
|
||||
@import 'font/font-dosis';
|
||||
@import 'font/font-raleway';
|
||||
@import 'font/font-playfairdisplay';
|
||||
|
||||
#header-wrapper {
|
||||
background: transparent;
|
||||
padding-left: 10px;
|
||||
|
||||
div#header {
|
||||
padding-left: 0;
|
||||
padding-top: 10px;
|
||||
|
||||
#logo {
|
||||
a {
|
||||
display: block;
|
||||
background: url(img/logo_malakoff.png) bottom left no-repeat;
|
||||
background-size: 462px;
|
||||
height: 78px;
|
||||
line-height: 100px;
|
||||
font-weight: normal;
|
||||
padding-left: 500px;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
ul.social-links {
|
||||
margin: -30px 0 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 2px 0;
|
||||
padding: 0;
|
||||
background: url('img/sprite-networks.png') no-repeat;
|
||||
background-position-x: 0%;
|
||||
background-position-y: 0%;
|
||||
}
|
||||
}
|
||||
li.facebook a {
|
||||
background-position: 0 0;
|
||||
}
|
||||
li.twitter a {
|
||||
background-position: -25px 0;
|
||||
}
|
||||
li.instagram a {
|
||||
background-position: -50px 0;
|
||||
}
|
||||
li.snapchat a {
|
||||
background-position: -75px 0;
|
||||
}
|
||||
li.youtube a {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
#nav {
|
||||
margin: 25px auto;
|
||||
border-top: 2px solid #d8d8d8;
|
||||
border-bottom: 2px solid #d8d8d8;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
transition-property: background;
|
||||
transition-duration: 500ms;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
font-size: 1.6em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #000000;
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
border: none;
|
||||
}
|
||||
a:hover {
|
||||
border: none;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
a::after {
|
||||
display: none;
|
||||
}
|
||||
> ul {
|
||||
background: #d8d8d8;
|
||||
padding: 20px 20px 20px 30px;
|
||||
|
||||
> li {
|
||||
padding: 0;
|
||||
margin: 20px 0 0;
|
||||
|
||||
> a {
|
||||
display: inline;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
letter-spacing: 0.04em;
|
||||
transition: none;
|
||||
text-transform: uppercase;
|
||||
color: #363333;
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
> a:hover {
|
||||
padding-right: 0;
|
||||
}
|
||||
> a:hover::after {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
content: " → ";
|
||||
font-family: 'raleway_light',Arial,Verdana,sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1.5em;
|
||||
color: $primary-color;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
> li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* custommization des titres avec un soulignage */
|
||||
div#tracking-code h3,
|
||||
div#rub_service h2,
|
||||
div#rub_service div.category h3,
|
||||
.gru-content div.a2-block h2,
|
||||
.gru-content div.block h2,
|
||||
div.links-list h2,
|
||||
div#services > ul > li > strong > a,
|
||||
.gru-content div.textcell h2,
|
||||
.gru-content div.textcell h2:first-child,
|
||||
.gru-content div.cell h2:first-child {
|
||||
background: transparent;
|
||||
color: $font-color;
|
||||
}
|
||||
|
||||
#content {
|
||||
h1 {
|
||||
color: #641d55;
|
||||
font-family: 'playfairdisplay_italic',Arial,Verdana,sans-serif;
|
||||
font-size: 3em;
|
||||
line-height: 40px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
color: #641d55;
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.2em;
|
||||
margin: 20px 5px 15px;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-weight: normal;
|
||||
font-size: 0.85em;
|
||||
color: #363333;
|
||||
margin: 0 0 17px 0;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.cell.titre-menu {
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.2em;
|
||||
background: #d8d8d8;
|
||||
padding: 15px 20px 8px 20px;
|
||||
margin: 0;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
.cell.menucell {
|
||||
margin-top: 0;
|
||||
padding: 14px 20px;
|
||||
border: 1px solid #d8d8d8;
|
||||
|
||||
> div > ul > li {
|
||||
margin-bottom: 7px;
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
transition-property: color;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
a:hover {
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
> a {
|
||||
text-transform: uppercase;
|
||||
color: #363333;
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin-bottom: 10px;
|
||||
|
||||
> li {
|
||||
margin: 7px 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
color: #363333;
|
||||
font-family: 'raleway_light',Arial,Verdana,sans-serif;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
a::before {
|
||||
display: inline-block;
|
||||
content: " → ";
|
||||
font-family: 'raleway_light',Arial,Verdana,sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 2.4em;
|
||||
color: #626569;
|
||||
vertical-align: -4px;
|
||||
transition-property: color;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
a:hover::before {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#columns {
|
||||
padding: 21px 54px 50px 54px;
|
||||
border: 1px solid #d8d8d8;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
min-height: 130px;
|
||||
padding: 20px 0px 10px 0px;
|
||||
border-top: 1px solid #d8d8d8;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
|
||||
.col-container {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
color: #363333;
|
||||
font-size: 0.8em;
|
||||
margin: 0;
|
||||
font-family: 'raleway_regular',Arial,Verdana,sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
.col.left {
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: 'dosis_semibold',Arial,Verdana,sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 2.3em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
margin: 1ex 0.5rem;
|
||||
}
|
||||
a {
|
||||
color: #626569;
|
||||
}
|
||||
a::after {
|
||||
content: " → ";
|
||||
font-family: 'raleway_light',Arial,Verdana,sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 2.4em;
|
||||
color: #626569;
|
||||
vertical-align: sub;
|
||||
transition-property: color;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
a:hover::after {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
.col.middle {
|
||||
margin: auto;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.col.right {
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
|
||||
text-align: right;
|
||||
line-height: 1em;
|
||||
font-size: 0.8em;
|
||||
|
||||
.cell {
|
||||
display: inline-flex;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0 5px;
|
||||
color: #363333;
|
||||
font-family: 'raleway_light',Arial,Verdana,sans-serif;
|
||||
transition-property: color;
|
||||
transition-duration: 500ms;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.01em;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
a:hover {
|
||||
background: transparent;
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
.cell::after {
|
||||
content: "/";
|
||||
}
|
||||
.cell:last-child::after {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
min-height: 50px;
|
||||
min-width: 290px;
|
||||
background-image: url('img/ville_de_malakoff.jpg');
|
||||
background-size: contain;
|
||||
background-position: top right;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ajustements petits écrans (mobiles) */
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
|
||||
#header-wrapper {
|
||||
|
||||
div#header {
|
||||
|
||||
#logo {
|
||||
padding-left: 0;
|
||||
|
||||
a {
|
||||
padding-left: 0;
|
||||
max-width: 90%;
|
||||
background-size: contain;
|
||||
background-position: bottom left;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
border-right: 1px solid $primary-color;
|
||||
right: 1em;
|
||||
max-width: 90%;
|
||||
text-align: right;
|
||||
border-bottom-right-radius: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
ul.social-links {
|
||||
margin: 20px auto 0;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
margin-top: 0;
|
||||
|
||||
#nav {
|
||||
border-top: 0;
|
||||
/*border-bottom: 0;*/
|
||||
background: #641d55;
|
||||
|
||||
> ul {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 0.8em;
|
||||
|
||||
li {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> li:first-child a {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-button::after {
|
||||
content: "Menu";
|
||||
text-transform: uppercase;
|
||||
font-size: 1.6em;
|
||||
margin-left: 60px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding-top: 14px;
|
||||
vertical-align: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
.col-container .col.middle {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.logo {
|
||||
min-width: 260px;
|
||||
max-width: 90%;
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* fin ajustement petits écrans */
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
$primary-color: #641d55;
|
||||
$secondary-color: #07a2ba;
|
||||
|
||||
$width: 1200px;
|
||||
$font-color: black;
|
||||
$font-family: raleway_light,Arial,Verdana,Helvetica,sans-serif;
|
||||
$font-size: 16px;
|
||||
|
||||
$nav-background: transparent;
|
||||
$nav-submenu-background: #eee;
|
||||
$nav-submenu-color: #333;
|
||||
$nav-color: $font-color;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-item-selected-background: transparent;
|
||||
$nav-item-hover-background: transparent;
|
||||
$nav-item-selected-color: $primary-color;
|
||||
$nav-item-hover-color: $nav-item-selected-color;
|
||||
|
||||
$border-radius: 0px;
|
||||
|
||||
$title-background: $primary-color;
|
||||
$title-color: white;
|
||||
|
||||
$footer-background: white;
|
||||
$footer-color: black;
|
||||
|
||||
$cell-border: 1px solid transparent;
|
||||
$widget-border-radius: 3px;
|
||||
$link-color: #07a2ba;
|
||||
|
||||
$button-background: $primary-color;
|
||||
$button-color: white;
|
||||
$button-border-radius: 5px;
|
||||
$button-border: 2px solid $link-color;
|
||||
$button-background: $link-color;
|
||||
$button-hover-background: white;
|
||||
$button-hover-color: $link-color;
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"label": "Malakoff",
|
||||
"module": "publik-base",
|
||||
"overlay": "atreal",
|
||||
"variables": {
|
||||
"favicon": "malakoff/img/favicon-32x32.png",
|
||||
"theme_color": "#641d55",
|
||||
"no_extra_js": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
$dosis-font-path: 'font' !default;
|
||||
|
||||
@font-face {
|
||||
font-family: 'dosis_semibold';
|
||||
src: url('#{$dosis-font-path}/dosis-semibold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
$playfairdisplay-font-path: 'font' !default;
|
||||
|
||||
@font-face {
|
||||
font-family: 'playfairdisplay_italic';
|
||||
src: url('#{$playfairdisplay-font-path}/playfairdisplay-italic-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
$raleway-font-path: 'font' !default;
|
||||
|
||||
@font-face {
|
||||
font-family: 'raleway_light';
|
||||
src: url('#{$raleway-font-path}/raleway-light-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'raleway_regular';
|
||||
src: url('#{$raleway-font-path}/raleway-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'raleway_semibold';
|
||||
src: url('#{$raleway-font-path}/raleway-semibold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
/*@import '../includes/publik';*/
|
||||
@import '../../publik-base-theme/static/includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load static i18n combo gadjo pwa %}
|
||||
|
||||
|
||||
{% block header-bottom %}
|
||||
<ul class="social-links">
|
||||
<li class="facebook"><a href="https://www.facebook.com/villedemalakoff/" target="_blank" rel="noopener, noreferrer" title="La ville de Malakoff sur Facebook (nouvelle fenêtre)"></a></li>
|
||||
<li class="twitter"><a href="https://twitter.com/villedemalakoff" target="_blank" rel="noopener, noreferrer" title="La ville de Malakoff sur Twitter (nouvelle fenêtre)"></a></li>
|
||||
<li class="instagram"><a href="https://www.instagram.com/villedemalakoff/" target="_blank" rel="noopener, noreferrer" title="La ville de Malakoff sur Instagram (nouvelle fenêtre)"></a></li>
|
||||
<li class="snapchat"><a href="https://www.snapchat.com/add/villedemalakoff" target="_blank" rel="noopener, noreferrer" title="La ville de Malakoff sur Snapchat (nouvelle fenêtre)"></a></li>
|
||||
<li class="youtube"><a href="https://www.youtube.com/user/VilledeMalakoff" target="_blank" rel="noopener, noreferrer" title="La ville de Malakoff sur Youtube (nouvelle fenêtre)"></a></li>
|
||||
</ul>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<div class="col-container">
|
||||
<div class="col left">
|
||||
{% trans "Pied de page - colonne gauche" as name %}
|
||||
{% placeholder "footer-left" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="col middle">
|
||||
{% trans "Pied de page" as name %}
|
||||
{% placeholder "footer" acquired=True name=name %}
|
||||
</div>
|
||||
<div class="col right"><div class="logo"> </div></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
{% trans "Pied de page - bas - liens" as name %}
|
||||
{% placeholder "footer-bottom" acquired=True name=name %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue