themes: add la-baule (#55534)
This commit is contained in:
parent
344c72b3bc
commit
c574c41a66
|
|
@ -0,0 +1,303 @@
|
|||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
%title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
%button {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $fz-h2;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $fz-h1;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// HEADER
|
||||
//
|
||||
h1#logo {
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-top: 0.7em;
|
||||
padding-bottom: 0.7em;
|
||||
padding-left: 0;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
&.has-logo a {
|
||||
height: 100px;
|
||||
display: block;
|
||||
@media ($min-desktop-viewport) {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// NAV
|
||||
// user-infos block is child of #nav-wrapper
|
||||
//
|
||||
$skew-value: 15deg;
|
||||
|
||||
#page {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div#nav {
|
||||
margin-left: 0;
|
||||
flex-grow: 1;
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-right: $columns-gutter;
|
||||
}
|
||||
@media (min-width: $width) {
|
||||
margin-left: calc(50vw - #{$width / 2});
|
||||
}
|
||||
> ul {
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
|
||||
@media (max-width: $mobile-limit) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
// skew in desktop
|
||||
@media ($min-desktop-viewport) {
|
||||
> ul > li > a {
|
||||
transform: skewX(#{ -1 * $skew-value});
|
||||
border-right: 1px solid $nav-active-color;
|
||||
transform-origin: top left;
|
||||
> span {
|
||||
transform: skewX($skew-value);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
// reset
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
position: static;
|
||||
padding: 0;
|
||||
|
||||
background-color: $orange;
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-small;
|
||||
}
|
||||
|
||||
> span::before {
|
||||
content: "\f007";
|
||||
font-family: fontawesome, sans-serif;
|
||||
align-self: center;
|
||||
color: $blue;
|
||||
padding-left: .66em;
|
||||
}
|
||||
|
||||
&, & > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
& > span {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
a {
|
||||
align-items: center;
|
||||
padding: .33em .66em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.sep {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
// skew
|
||||
& {
|
||||
transform: skewX(#{ -1 * $skew-value});
|
||||
transform-origin: bottom right;
|
||||
> span {
|
||||
transform: skewX($skew-value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// MAIN
|
||||
//
|
||||
|
||||
.page-header, .gru-content {
|
||||
padding-top: $columns-gutter;
|
||||
}
|
||||
|
||||
// Page header
|
||||
.page-header {
|
||||
h1, h2, h3 {
|
||||
color: $blue;
|
||||
}
|
||||
div.text-cell {
|
||||
font-size: $fz-h4;
|
||||
color: $orange-dark;
|
||||
font-weight: 500;
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
div.searchcell form {
|
||||
input {
|
||||
margin-right: 0;
|
||||
}
|
||||
button {
|
||||
@extend input;
|
||||
flex: 0 0 auto;
|
||||
color: white;
|
||||
background-color: $orange;
|
||||
font-weight: bold;
|
||||
&:focus {
|
||||
background-color: $blue !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
&::before {
|
||||
content: "Rechercher";
|
||||
font-size: $fz-h4;
|
||||
color: $blue;
|
||||
font-weight: bold;
|
||||
padding-right: .33em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// CELLS
|
||||
//
|
||||
.right-icon {
|
||||
// $image-width: #{$title-font-size + 1.4};
|
||||
$image-width: 3.15rem;
|
||||
@debug($image-width);
|
||||
.gru-content &.cell {
|
||||
// Picture position
|
||||
&.has-asset-picture {
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
> h2:first-child {
|
||||
flex: 1 0 50%;
|
||||
margin-left: calc(-1 * #{$image-width});
|
||||
padding-left: #{$image-width + 1};
|
||||
line-height: 1;
|
||||
}
|
||||
> picture {
|
||||
display: block;
|
||||
order: -1;
|
||||
flex: 0 0 $image-width;
|
||||
height: $image-width;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
background-color: $cyan;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
padding: .66em;
|
||||
|
||||
|
||||
img {
|
||||
padding: 0;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.foldable.folded {
|
||||
> div {
|
||||
h2:first-child {
|
||||
background-color: $gray;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#columns {
|
||||
.wcs-forms-of-category-cell,
|
||||
.link-list-cell {
|
||||
@extend .right-icon;
|
||||
}
|
||||
}
|
||||
|
||||
#main-content div.text-cell > div {
|
||||
> * {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
h1, h2:not(:first-child), h3 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// WCS
|
||||
//
|
||||
|
||||
.wcs-page {
|
||||
.page-header h1 {
|
||||
font-size: $fz-h2;
|
||||
@media ($max-mobile-viewport) {
|
||||
padding: 0 0.7rem;
|
||||
}
|
||||
}
|
||||
#content {
|
||||
padding-top: 0;
|
||||
}
|
||||
#rub_service {
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
// Colors
|
||||
$blue: #15357b;
|
||||
$blue-bright: #00308c;
|
||||
$cyan: #70b8b9;
|
||||
$orange: #ec6539;
|
||||
$orange-light: #fab441;
|
||||
$orange-dark: #6a605e;
|
||||
$gray: #e1e1e6;
|
||||
|
||||
// fonts size
|
||||
$fz-h1: 72px;
|
||||
$fz-h2: 42px;
|
||||
$fz-h3: 36px;
|
||||
$fz-h4: 1.75em;
|
||||
$fz-small: 0.85em;
|
||||
|
||||
$header-width: 1680px;
|
||||
|
||||
// Core vars
|
||||
$font-family: ubuntu, sans-serif;
|
||||
$font-color: #222;
|
||||
|
||||
$primary-color: $blue;
|
||||
$link-color: $orange;
|
||||
|
||||
$width: 1340px;
|
||||
$mobile-limit: 1280px;
|
||||
$columns-gutter: 40px;
|
||||
|
||||
$nav-background: $blue !important;
|
||||
$nav-mobile-menu-background: $blue;
|
||||
$nav-full-width-background: true;
|
||||
$nav-color: white;
|
||||
$nav-mobile-menu-item-color: white;
|
||||
$nav-active-color: $cyan;
|
||||
$nav-button-background: $blue;
|
||||
|
||||
$title-background: $blue;
|
||||
$title-color: white;
|
||||
$title-weight: bold;
|
||||
$title-font-size: $fz-h4;
|
||||
|
||||
$cell-border: none;
|
||||
$cell-title-cover-border: false;
|
||||
$cell-entry-color: $font-color;
|
||||
$cell-entry-hover-background:$orange-light;
|
||||
|
||||
$widget-background: $gray;
|
||||
$widget-border: 1px solid transparent;
|
||||
|
||||
$button-background: $cyan;
|
||||
$button-color: white;
|
||||
|
||||
|
||||
$widget-unique-checkbox-position: left;
|
||||
|
||||
$footer-background: $blue-bright;
|
||||
$footer-color: white;
|
||||
$footer-link-color: white;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"label": "La Baule",
|
||||
"variables": {
|
||||
"pwa_display": "standalone",
|
||||
"theme_color": "#15357b",
|
||||
"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,6 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/fonts/ubuntu';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
|
||||
{# move user infos block #}
|
||||
{% block top-links %}
|
||||
{% endblock %}
|
||||
{% block nav-post %}
|
||||
{% include 'includes/user-info.html' %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{# add page header placeholder #}
|
||||
|
||||
{% block content-pre %}
|
||||
<div class="page-header">
|
||||
{% placeholder "page-header" name="Entête de la page" %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{% extends "wcs/base.html" %}
|
||||
|
||||
{% block placeholder-page-header %}
|
||||
{% if title %}<h1>{{ title }}</h1>{% endif %}
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue