From b95bcb9f374753a417280b8a3e9775edfe2c2a04 Mon Sep 17 00:00:00 2001 From: Agate Berriot Date: Tue, 4 Oct 2022 16:39:37 +0200 Subject: [PATCH 1/4] saumur: new theme (#69791) --- static/saumur/_custom.scss | 231 ++++++++++++++++++ static/saumur/_vars.scss | 92 +++++++ static/saumur/config.json | 14 ++ static/saumur/style.scss | 6 + .../variants/saumur/combo/page_template.html | 10 + 5 files changed, 353 insertions(+) create mode 100644 static/saumur/_custom.scss create mode 100644 static/saumur/_vars.scss create mode 100644 static/saumur/config.json create mode 100644 static/saumur/style.scss create mode 100644 templates/variants/saumur/combo/page_template.html diff --git a/static/saumur/_custom.scss b/static/saumur/_custom.scss new file mode 100644 index 00000000..eaa3a19b --- /dev/null +++ b/static/saumur/_custom.scss @@ -0,0 +1,231 @@ +$logo-height: 140px; +$banner-height: 300px; + +%button { + box-shadow: none; + text-transform: uppercase; + &:hover { + box-shadow: none; + } +} + +%title { + text-transform: uppercase; +} + +// golbal layout + +main { + background: $gray-light-2; + padding: $space-large 0; +} + + +// header and navigation + +#logo { + @media screen and ($max-mobile-viewport) { + padding: 0 $space-xsmall; + + } +} + +#logo.has-logo a { + z-index: 2; + height: $logo-height / 2; + min-width: $logo-height; + @media screen and ($min-desktop-viewport) { + height: $logo-height; + min-width: $logo-height * 2; + } +} + +.site-nav { + z-index: 101; +} +.gru-nav-wrapper { + margin-top: -$logo-height * 0.85; +} +div#nav { + text-transform: uppercase; +} +div.gru-nav { + background: transparent; + @media screen and ($min-desktop-viewport) { + > ul { + text-align: right; + float: right; + } + } + & > ul > li:first-child > a { + border-radius: $border-radius-1; + } + & > ul > li a { + font-weight: 500; + } + .menu--link { + border-radius: $border-radius-1; + + } + @media screen and ($max-mobile-viewport) { + .gru-nav-button { + top: $space-small; + right: $space-small; + left: unset; + & + ul::before { + display: none; + } + } + &.togglable .menu { + box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1); + & > li { + border-bottom: 1px solid $gray-light-3; + } + } + } +} + +#toplinks { + @media screen and ($max-mobile-viewport) { + margin-top: $space-small; + margin-right: $nav-menu-side; + background: transparent; + } +} + +// banner + +.banner { + background-image: url(/assets/banner:background); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: $banner-height / 1.5; + @media screen and ($min-desktop-viewport) { + height: $banner-height; + } +} +// content and cells + +h1, h2, h3, h4, h5, h6 { + @extend %title; +} +h1 { + font-size: $fz-1; +} +h2 { + font-size: $fz-2; +} +h3 { + font-size: $fz-3; +} + +.search-cell.transparent { + border: none; + background: transparent; + form { + padding: 0; + } +} + + +#sidebar { + div#rub_service div.category h3, + div.a2-block h2, + .block h2, + div.links-list h2, + div#services > ul > li > strong > a, + div.textcell h2:first-child, + div.cell h2:first-child { + background-color: $gray-dark-1; + color: $white; + font-weight: 600; + &::before { + content: '\f054'; + font-family: FontAwesome; + margin-right: 0.6em; + font-size: 0.6em; + display: inline-block; + vertical-align: middle; + } + } +} + +%orange-border { + content: " "; + display: block; + margin: $space-small auto; + border-bottom: 3px solid $orange; +} + +#columns-wrapper { + div#rub_service div.category h3, + div.a2-block h2, + .block h2, + div.links-list h2, + div#services > ul > li > strong > a, + div.textcell h2:first-child, + div.cell:not(.has-asset-picture) h2:first-child { + &::after { + @extend %orange-border + } + } +} + +.gru-content div.cell.has-asset-picture { + & > div { + position: relative; + } + h2:first-child { + padding-left: $space-large * 1.75; + width: 100%; + } + img { + position: absolute; + width: $space-large * 1.5; + top: $space-xsmall; + left: $space-small; + } + &.foldable:not(.folded) picture::after { + @extend %orange-border; + margin: 0 1rem; + } + &:not(.foldable) picture::after { + @extend %orange-border; + margin: 0 1rem; + } +} + +// forms +.form-content, .form-content--sidebox, .form-content--body { + @extend %cell; +} + +.form-previous { + &::before { + content: '\f100'; + font-family: FontAwesome; + margin-right: 0.6em; + font-size: 0.6em; + display: inline-block; + vertical-align: middle; + } +} +.form-next { + &::after { + content: '\f101'; + font-family: FontAwesome; + margin-left: 0.6em; + font-size: 0.6em; + display: inline-block; + vertical-align: middle; + } +} + +// footer +#footer-wrapper { + margin-top: 0; +} +footer { + text-align: center; +} diff --git a/static/saumur/_vars.scss b/static/saumur/_vars.scss new file mode 100644 index 00000000..86c127ce --- /dev/null +++ b/static/saumur/_vars.scss @@ -0,0 +1,92 @@ +$orange: #EA5625; +$pink: #F4A7A8; +$light-green: #C5DED1; +$black: black; +$white: white; + + +// $carbon: #222222; +// $white: #ffffff; +// $epicea: #5d7b84; + +// $gray-secondary: #666666; +$gray-light-1: #EEEEEE; +$gray-light-2: #EAECE8; +$gray-light-3: #A9A9A9; +$gray-dark-1: #596E80; + +$primary-color: $orange; + +$space-xsmall: 0.25em; +$space-small: 0.5em; +$space-medium: 1em; +$space-large: 2em; +$space-xlarge: 3em; + +$border-radius-1: 15px; + +// // typo +$font-color: $black; +$font-family: Manrope, sans-serif; +$font-size: 18px; +$font-line-height: 1.4; +$base-font: 16; +$fz-1: 30em / $base-font; +$fz-2: 24em / $base-font; +$fz-3: 21em / $base-font; +$fz-4: 18em / $base-font; +$fz-small: 14em / $base-font; +$fz-xsmall: 12em / $base-font;; +$fz-xxsmall: 11em / $base-font;; + +$width: 1200px; +$link-color: inherit; +$link-decoration: underline; +$link-hover-decoration: none; + +$responsive-menu: left-to-right; +$nav-button-background: $white; +$nav-button-color: $black; + +$nav-mobile-menu-background: $white; + +$nav-item-selected-background: $orange; +$nav-item-selected-color: $white; + +$nav-item-hover-background: $white; +$nav-item-hover-color: $orange; +$nav-item-hover-border: 1px solid $orange; + +$nav-submenu-background: $orange; +$nav-submenu-color: $white; + +$toplinks-border-radius: 0; +$toplinks-background: transparent; +$toplinks-box-shadow: none; +$toplinks-padding: $space-medium; +$toplinks-border: none; + +$cell-border: 1px solid $gray-dark-1; +$cell-entry-border: 2px dotted $gray-dark-1; +$cell-title-cover-border: false; +$title-color: $gray-dark-1; +$title-transform: uppercase; + +$button-background: $light-green; +$button-color: $gray-dark-1; +$button-border-radius: $border-radius-1; +$button-box-shadow: none; +$button-hover-background: $orange; +$button-hover-color: $white; +$button-focus-outline: 2px solid $orange; +$button-focus-outline-offset: 2px; +$buttons-order: previous, cancel (grow), submit; + +$widget-background: $gray-light-1; +$widget-border: 1px solid $gray-dark-1; +$widget-focus-border: 1px solid $orange; +$widget-focus-background: $white; + +$footer-background: $orange; +$footer-color: $white; +$footer-link-color: $white; diff --git a/static/saumur/config.json b/static/saumur/config.json new file mode 100644 index 00000000..c95536a7 --- /dev/null +++ b/static/saumur/config.json @@ -0,0 +1,14 @@ +{ + "label": "Saumur Agglomération", + "variables": { + "theme_color": "#EA5625" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "header:logo": { "label": "Têtière : logo" }, + "banner:background": {"label": "Bannière : image de fond"} + } + } + } +} diff --git a/static/saumur/style.scss b/static/saumur/style.scss new file mode 100644 index 00000000..c36657d0 --- /dev/null +++ b/static/saumur/style.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; +@import '../includes/fonts/manrope'; + +@import 'vars'; +@import '../includes/publik'; +@import 'custom'; diff --git a/templates/variants/saumur/combo/page_template.html b/templates/variants/saumur/combo/page_template.html new file mode 100644 index 00000000..9f38c805 --- /dev/null +++ b/templates/variants/saumur/combo/page_template.html @@ -0,0 +1,10 @@ +{% extends 'combo/page_template.html' %} +{% load assets combo i18n %} + +{% block before-main-content %} + {{ block.super }} + {% get_asset "banner:background" as banner_background %} + {% if banner_background %} + + {% endif %} +{% endblock %} -- 2.37.2