noyelles-godault: create theme (#62483)
This commit is contained in:
parent
5e13975e27
commit
3523eb0181
|
|
@ -0,0 +1,155 @@
|
|||
header {
|
||||
box-shadow: 0px 0px 15px #666;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
@media ($max-mobile-viewport) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div#top {
|
||||
@media ($min-desktop-viewport) {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-top: 1.5rem;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h1#logo.has-logo {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
height: 75px;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 0 1 222px;
|
||||
max-width: 100%;
|
||||
min-width: 160px;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
flex-basis: 160px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav > ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@supports (position: sticky) {
|
||||
div.gru-nav .gru-nav-button + ul {
|
||||
@media ($max-mobile-viewport) {
|
||||
border-top: none;
|
||||
max-height: calc(100vh - 75px - 1.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// align items center to logo but border on bottom
|
||||
@media ($min-desktop-viewport) {
|
||||
.gru-nav-wrapper,
|
||||
div.gru-nav,
|
||||
div.gru-nav > ul,
|
||||
div.gru-nav > ul > li,
|
||||
div.gru-nav > ul > li > a {
|
||||
height: 100%;
|
||||
}
|
||||
div.gru-nav > ul > li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.gru-nav > ul > li a {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
border-bottom-color: #dfdfdf;
|
||||
}
|
||||
|
||||
div#toplinks {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
position: static;
|
||||
text-align: right;
|
||||
align-self: center;
|
||||
border-bottom: $nav-item-selected-border;
|
||||
border-color: transparent;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content--title {
|
||||
font-size: 1.5em;
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
div.cell.text-cell {
|
||||
padding: 0.1rem 2rem;
|
||||
h1, h2, h3, h4 {
|
||||
font-family: $poppins;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div#rub_service {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 1em;
|
||||
background: white;
|
||||
border-radius: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
div.links-list > ul > li:last-child a:only-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
%button {
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
$light-green: #136a30;
|
||||
$bright-green: #b2d15f;
|
||||
$purple: #6a134d;
|
||||
$poppins: Poppins;
|
||||
$open-sans: 'Open Sans';
|
||||
|
||||
$font-color: #777777;
|
||||
$body-background: #f0f0f0;
|
||||
$header-background: #f8f9fa;
|
||||
$primary-color: $light-green;
|
||||
$width: 1400px;
|
||||
$mobile-limit: 1023px;
|
||||
$link-color: $primary-color;
|
||||
|
||||
$nav-full-width-background: true;
|
||||
|
||||
$font-family: 'Open Sans';
|
||||
|
||||
$header-full-width-background: true;
|
||||
$header-background-color: $header-background;
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-background: $header-background;
|
||||
$nav-border-color: transparent;
|
||||
$nav-color: rgba(0, 0, 0, .5);
|
||||
$nav-item-selected-border: 5px solid $bright-green;
|
||||
$nav-menu-color: $nav-color;
|
||||
$nav-mobile-menu-item-color: $font-color;
|
||||
$nav-mobile-menu-item-hover-background: white;
|
||||
$nav-after-image: false;
|
||||
|
||||
$nav-active-color: transparent;
|
||||
$nav-full-width-background: false;
|
||||
$nav-submenu-color: black;
|
||||
$nav-submenu-background: $body-background;
|
||||
$nav-mobile-menu-item-hover-background: $body-background;
|
||||
$nav-mobile-menu-item-background: $body-background;
|
||||
$nav-mobile-menu-background: $body-background;
|
||||
|
||||
$toplinks-style: none;
|
||||
$toplinks-padding: 15px;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-font-family: $poppins;
|
||||
$cell-background: white;
|
||||
$cell-entry-hover-background: $bright-green;
|
||||
$cell-entry-hover-color: black;
|
||||
$cell-border-radius: 0 10px 10px 10px;
|
||||
$cell-border-bottom-left-radius: 10px;
|
||||
$cell-border-bottom-right-radius: 10px;
|
||||
$cell-border: none;
|
||||
|
||||
$button-border-radius: .3rem;
|
||||
$button-background: #136a30;
|
||||
$button-hover-background: $purple;
|
||||
|
||||
$footer-background: $primary-color;
|
||||
$footer-color: white;
|
||||
$footer-link-color: white;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"label": "Noyelles Godault",
|
||||
"variables": {
|
||||
"theme_color": "#136a30"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/fonts/opensans';
|
||||
@import '../includes/fonts/poppins';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import '_custom';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{% 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 %}
|
||||
Loading…
Reference in New Issue