meudon-2021: new theme (#57548)
This commit is contained in:
parent
2ec7637087
commit
20d35fabbb
|
|
@ -0,0 +1,531 @@
|
|||
//
|
||||
// TYPO
|
||||
//
|
||||
%title {
|
||||
position: relative;
|
||||
margin-left: 1rem;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 0.2em;
|
||||
background-color: currentColor;
|
||||
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
@extend %title;
|
||||
font-size: $fz-1;
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-2;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
@extend %title;
|
||||
}
|
||||
%button {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
%cancel-button {
|
||||
background-color: $gray;
|
||||
border-color: $gray;
|
||||
&:hover {
|
||||
color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// SITE HEADER
|
||||
//
|
||||
$header-desktop-height: 100px;
|
||||
$logo-width: 310px;
|
||||
|
||||
div#header {
|
||||
max-width: $header-width;
|
||||
#top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
height: $header-desktop-height;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
flex-wrap: wrap;
|
||||
padding: calc(10px + 0.7rem) 10px;
|
||||
.site-nav {
|
||||
order: 1;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Logo
|
||||
#logo {
|
||||
flex: 1 1 $logo-width;
|
||||
@media ($max-mobile-viewport) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: $logo-width;
|
||||
height: 40px;
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User links
|
||||
#toplinks {
|
||||
$icon-size: 38px;
|
||||
position: static;
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0.33em;
|
||||
padding: $fz-small 1rem;
|
||||
padding-left: calc(#{$icon-size} + (#{$fz-small} * 2));
|
||||
background: url(img/account.svg) left $fz-small center no-repeat $green;
|
||||
background-size: $icon-size;
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-right: $nav-menu-side;
|
||||
}
|
||||
.sep {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: $violet-dark;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
&:last-child {
|
||||
font-size: $fz-small;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// NAV
|
||||
// inside header-content
|
||||
//
|
||||
.gru-nav-wrapper {
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-top: calc(-1 * #{$nav-menu-side});
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
text-transform: uppercase;
|
||||
> ul {
|
||||
margin: 0;
|
||||
> li {
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
&.selected > a,
|
||||
a:hover, a:focus {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
$header-gutter: '(10px + 0.7em)';
|
||||
text-align: right;
|
||||
.gru-nav-button {
|
||||
display: inline-block;
|
||||
border: 5px solid transparent;
|
||||
.icon-bar {
|
||||
border-width: 3px;
|
||||
}
|
||||
+ ul {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
border-top: 0;
|
||||
margin-left: calc(-1 * #{$header-gutter});
|
||||
margin-right: calc(-1 * #{$header-gutter});
|
||||
}
|
||||
&.toggled + ul {
|
||||
border-top: 10px solid white;
|
||||
overflow: visible;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 10px solid transparent;
|
||||
border-bottom-color: $green;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: calc(#{$nav-menu-side / 2} - 10px + #{$header-gutter});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// PAGE HEADER
|
||||
//
|
||||
|
||||
%page-title {
|
||||
background-color: $violet-dark;
|
||||
background-image: var(--page-picture);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding : 4em 0;
|
||||
color: white;
|
||||
> div, > h1 {
|
||||
max-width: $width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.theme-page-header {
|
||||
max-width: $header-width;
|
||||
margin: 0 auto 2rem;
|
||||
|
||||
.text-cell {
|
||||
@extend %page-title;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: calc(360em / 15);
|
||||
@media ($max-mobile-viewport) {
|
||||
min-height: calc(240em / 15);
|
||||
}
|
||||
> div {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
div.carrousel-content {
|
||||
min-height: calc(360em / 15);
|
||||
@media ($max-mobile-viewport) {
|
||||
min-height: calc(240em / 15);
|
||||
}
|
||||
input + div div.carrousel-item {
|
||||
padding-bottom: $carrousel-navigation-bullet-size + 20;
|
||||
div.carrousel-item-content{
|
||||
flex: 0 1 $width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
> a {
|
||||
max-width: 40rem;
|
||||
strong {
|
||||
@extend h1;
|
||||
margin-left: 0;
|
||||
color: white;
|
||||
display: block;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.carrousel-nav {
|
||||
max-width: $width;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
label {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// MAIN
|
||||
//
|
||||
div#main-content-wrapper {
|
||||
position: static;
|
||||
}
|
||||
// home page template
|
||||
.page-template-homepage {
|
||||
.gru-content {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#theme-top-section {
|
||||
flex: 0 0 100%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
// 3 cols layout
|
||||
@media ($min-desktop-viewport) {
|
||||
#columns {
|
||||
display: flex;
|
||||
.column {
|
||||
flex: 1 1 0;
|
||||
|
||||
.cell {
|
||||
margin-left: #{$columns-gutter / 2};
|
||||
margin-right: #{$columns-gutter / 2};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// CELLS
|
||||
//
|
||||
|
||||
.gru-content div.cell {
|
||||
margin-bottom: $columns-gutter;
|
||||
}
|
||||
|
||||
// cells custom style
|
||||
.shadowed-cell {
|
||||
overflow: hidden;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
> div {
|
||||
box-shadow: 0 0 1.9em -0.8em #000;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.shadowed-cell-top {
|
||||
@extend .shadowed-cell;
|
||||
padding-bottom: 0;
|
||||
> div {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shadowed-cell-bottom {
|
||||
@extend .shadowed-cell;
|
||||
padding-top: 0;
|
||||
> div {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-of-forms-cell {
|
||||
$image-size: 2.5rem;
|
||||
.gru-content &.cell {
|
||||
color: white;
|
||||
background-color: $red-dark;
|
||||
h2:first-child {
|
||||
color: inherit;
|
||||
font-size: $fz-5;
|
||||
text-align: left;
|
||||
min-height: 5em;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
padding-right: 3rem;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
background-color: $red;
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
&.foldable.folded {
|
||||
h2:first-child {
|
||||
background-color: $violet-dark;
|
||||
}
|
||||
}
|
||||
// Picture position
|
||||
&.has-asset-picture {
|
||||
h2:first-child {
|
||||
padding-left: $image-size + 2;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
> h2:first-child {
|
||||
flex: 1 0 50%;
|
||||
margin-left: -1 * ($image-size + 1);
|
||||
}
|
||||
> picture {
|
||||
display: block;
|
||||
order: -1;
|
||||
flex: 0 0 $image-size;
|
||||
align-self: center;
|
||||
margin-left: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
img {
|
||||
padding: 0;
|
||||
height: $image-size;
|
||||
width: $image-size;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul > li {
|
||||
border-bottom: none;
|
||||
color: inherit;
|
||||
> *, a::after {
|
||||
color: inherit !important;
|
||||
}
|
||||
> a:hover {
|
||||
background-color: $red-xdark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#theme-top-section {
|
||||
.tracking-code-input-cell {
|
||||
@extend .shadowed-cell-bottom;
|
||||
.wcs-tracking-code-input {
|
||||
@media ($min-desktop-viewport) {
|
||||
&, & form {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
h2 {
|
||||
flex: 1 0 auto;
|
||||
& + div {
|
||||
padding-top: 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
form {
|
||||
p {
|
||||
flex: 1 1 50%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
button {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-cell {
|
||||
.combo-search--button::before {
|
||||
content: "\f002"; // search icon
|
||||
font-family: FontAwesome;
|
||||
font-size: $fz-5;
|
||||
}
|
||||
.combo-search--button-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-forms-of-category-cell {
|
||||
@extend .list-of-forms-cell;
|
||||
}
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
label {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
//
|
||||
// WCS
|
||||
//
|
||||
.wcs-steps {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: $fz-5;
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $fz-4;
|
||||
}
|
||||
}
|
||||
|
||||
div#gauche {
|
||||
padding: 0.5rem;
|
||||
div#tracking-code {
|
||||
@extend .shadowed-cell;
|
||||
h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: $red;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme-form-title {
|
||||
@extend %page-title;
|
||||
padding-left: calc(0.7rem + 0.5rem);
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
div#rub_service {
|
||||
h3 {
|
||||
@extend h2;
|
||||
margin-left: 0;
|
||||
}
|
||||
h4 {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// FOOTER
|
||||
//
|
||||
#theme-gray-footer-wrapper {
|
||||
background-color: $gray-light;
|
||||
}
|
||||
#theme-gray-footer {
|
||||
max-width: $width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#footer-wrapper {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#theme-gray-footer,
|
||||
#footer {
|
||||
padding: 3rem 0.7rem 2rem;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-top: 4.5rem;
|
||||
padding-bottom: 3.5rem;
|
||||
}
|
||||
.cell {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
// colors
|
||||
$violet-dark: #22104b;
|
||||
$red: #ec234f;
|
||||
$red-dark: #ac1a3a;
|
||||
$red-xdark: #84142d;
|
||||
$green: #bcf157;
|
||||
$gray-light: #e3e3e3;
|
||||
$gray: #ccc;
|
||||
$gray-dark: #999;
|
||||
|
||||
// font-size
|
||||
$fz-1: 55em / 15;
|
||||
$fz-2: 35em / 15;
|
||||
$fz-3: 30em / 15;
|
||||
$fz-4: 25em / 15;
|
||||
$fz-5: 19em / 15;
|
||||
$fz-small: 13em / 15;
|
||||
|
||||
$header-width: 1440em / 15;
|
||||
|
||||
// Core vars
|
||||
$primary-color: $violet-dark;
|
||||
$font-family: Roboto, sans-serif !default;
|
||||
$font-color: $violet-dark;
|
||||
$font-size: 15px;
|
||||
$link-color: $red;
|
||||
$width: 1220rem / 15;
|
||||
$mobile-limit: 64em;
|
||||
$very-small-limit: 35em;
|
||||
$columns-gutter: 2rem;
|
||||
$sidebar-width: 20rem;
|
||||
|
||||
$nav-background: transparent;
|
||||
$nav-active-color: transparent;
|
||||
$nav-color: $font-color;
|
||||
$nav-menu-color: $nav-color;
|
||||
$nav-submenu-background: $green;
|
||||
$nav-mobile-menu-background: $green;
|
||||
$nav-after-image: false;
|
||||
$nav-menu-side: 4rem;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-color: $violet-dark;
|
||||
$title-font-size: $fz-2;
|
||||
$title-weight: 800;
|
||||
$title-transform: uppercase;
|
||||
$title-padding: 0 0 0.33em 0;
|
||||
|
||||
$cell-background: transparent;
|
||||
$cell-border: none;
|
||||
$cell-title-cover-border: false;
|
||||
|
||||
$carrousel-arrows: none;
|
||||
$carrousel-text-position: middle left;
|
||||
$carrousel-item-mask-color: false;
|
||||
|
||||
$button-background: $red;
|
||||
$button-border: 1px solid $red;
|
||||
$button-color: white;
|
||||
$button-hover-background: white;
|
||||
$button-hover-color: $red;
|
||||
$buttons-order: cancel, previous, submit;
|
||||
|
||||
$widget-border: 1px solid $gray;
|
||||
$widget-focus-border: 1px solid $font-color;
|
||||
$widget-unique-checkbox-position: left;
|
||||
|
||||
$form-sidebar-position: right;
|
||||
$form-sidebar-width: $sidebar-width;
|
||||
$form-sidebar-gutter: $columns-gutter;
|
||||
|
||||
$wcs-steps-spacing: 0.7em;
|
||||
$wcs-step-color: $gray;
|
||||
$wcs-step-border-bottom: none;
|
||||
$wcs-step-marker-background: $wcs-step-color;
|
||||
$wcs-step-marker-color: white;
|
||||
$wcs-step-current-marker-background: $red;
|
||||
$wcs-step-current-marker-color: white;
|
||||
|
||||
|
||||
$footer-background: $violet-dark;
|
||||
$footer-link-color: $green;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"label": "Meudon 2021",
|
||||
"variables": {
|
||||
"pwa_display": "standalone",
|
||||
"theme_color": "#22104b",
|
||||
"email_header_asset": "emails:logo"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"emails:logo": {"label": "Emails : logo"}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#22104B;}
|
||||
</style>
|
||||
<path class="st0" d="M256,0C114.5,0,0,114.5,0,256c0,140.2,113.5,256,256,256c141.9,0,256-115.1,256-256C512,114.5,397.5,0,256,0z
|
||||
M87.4,406.5c89.8-100.7,247.4-100.7,337.2,0C334.5,507.3,177.5,507.3,87.4,406.5z M196,234v-30c0-33.1,26.9-60,60-60s60,26.9,60,60
|
||||
v30c0,33.1-26.9,60-60,60S196,267.1,196,234z M309.2,306.6c22.3-16.4,36.8-42.8,36.8-72.5v-30c0-49.6-40.4-90-90-90s-90,40.4-90,90
|
||||
v30c0,29.7,14.5,56.1,36.8,72.5c-49.6,10.5-96.7,35.8-134.1,76C43.6,345.4,30,301.6,30,256C30,131.4,131.4,30,256,30
|
||||
s226,101.4,226,226c0,45.6-13.6,89.4-38.7,126.5C406,342.4,358.9,317.1,309.2,306.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/fonts/roboto';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
{% load combo i18n %}
|
||||
|
||||
|
||||
{% block content-top %}
|
||||
<div id="theme-top-section">
|
||||
{% placeholder "top-section" name="Haut de page" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block columns %}
|
||||
<div class="column">
|
||||
{% trans "Left column" as name %}
|
||||
{% placeholder "content" name=name %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% placeholder "center" name="Colonne du milieu" %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% trans "Right column" as name %}
|
||||
{% placeholder "right" name=name %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{% extends "theme.html" %}
|
||||
{% load combo %}
|
||||
|
||||
{# Move nav block into header-content block #}
|
||||
{% block header-content %}
|
||||
{% block nav %}{% endblock %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
{% block after-header %}{% endblock %}
|
||||
|
||||
{# add Page title #}
|
||||
{% block before-main-content %}
|
||||
<div class="theme-page-header--wrapper">
|
||||
<header class="theme-page-header">
|
||||
{% placeholder "page-header" name="Entête de la page" %}
|
||||
</header>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer-pre %}
|
||||
<div id="theme-gray-footer-wrapper">
|
||||
<div id="theme-gray-footer" class="clearfix">
|
||||
{% placeholder "gray-footer" name="Pied de page gris" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{% extends "wcs/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
|
||||
{% block page-header %}
|
||||
{% if title %}
|
||||
<div class="theme-form-title">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# remove default title #}
|
||||
{% block content %}
|
||||
{% with title=false %}
|
||||
{{ block.super }}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue