From 47a80997de881c9210eec4a83d96574326750cdf Mon Sep 17 00:00:00 2001 From: Agate Berriot Date: Tue, 6 Sep 2022 11:43:42 +0200 Subject: [PATCH] =?UTF-8?q?mnhn:=20int=C3=A9gration=20graphique=20initiale?= =?UTF-8?q?=20(#68742)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/mnhn/_custom.scss | 226 +++++++++++++++++++++++++++++ static/mnhn/_vars.scss | 97 +++++++++++++ static/mnhn/config.json | 14 ++ static/mnhn/style.scss | 6 + templates/variants/mnhn/theme.html | 9 ++ 5 files changed, 352 insertions(+) create mode 100644 static/mnhn/_custom.scss create mode 100644 static/mnhn/_vars.scss create mode 100644 static/mnhn/config.json create mode 100644 static/mnhn/style.scss create mode 100644 templates/variants/mnhn/theme.html diff --git a/static/mnhn/_custom.scss b/static/mnhn/_custom.scss new file mode 100644 index 00000000..bce7d9e9 --- /dev/null +++ b/static/mnhn/_custom.scss @@ -0,0 +1,226 @@ +$toplink-separator: 1px solid rgba(34, 34, 34, 0.3); +$required-label-color: #ff0000; + +%button { + box-shadow: none; + text-transform: uppercase; + &:hover { + box-shadow: none; + } +} + +%inverted-button { + background-color: $white; + color: $carbon; + border: 2px solid $button-background; + &:hover { + border: 2px solid $button-hover-background; + background: $gray-light-2; + color: $carbon; + } +} + +%title { + text-transform: uppercase; +} + +main { + line-height: 1.5em; +} +// header and navigation + +div#header { + background: $white; + max-width: 100%; + box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 10%); + padding: $space-small $space-medium; + @media screen and ($min-desktop-viewport) { + padding: $space-large; + } +} +#logo { + @media screen and ($max-mobile-viewport) { + padding-left: unset; + } +} +#logo.has-logo a::before { + @media screen and ($min-desktop-viewport) { + z-index: 3; + width: 100px; + height: 62.5px + } +} +.site-nav { + z-index: 2; + margin-bottom: $space-xlarge; + @media screen and ($min-desktop-viewport) { + margin-top: -$space-xlarge * 1.75; + } +} +div#nav { + max-width: 100%; + padding: 0 $space-large 0 $space-small; + +} +div.gru-nav { + @media screen and ($min-desktop-viewport) { + text-align: right; + } + @media screen and ($max-mobile-viewport) { + .gru-nav-button { + right: $space-medium; + left: unset; + & + ul::before { + display: none; + } + } + &.togglable .menu { + box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 10%); + & > li { + border-bottom: 1px solid $gray-light-3; + } + } + } + li .menu--label, li .submenu--label { + text-transform: uppercase; + font-size: $fz-small; + &:hover { + padding-bottom: $space-small; + border-bottom: 2px solid $carbon; + } + } + li.selected .menu--label { + padding-bottom: $space-small; + border-bottom: 2px solid $carbon; + } + .submenu { + @media screen and ($min-desktop-viewport) { + box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 10%); + font-size: $fz-xsmall; + z-index: 101; + } + } +} +#toplinks { + text-transform: uppercase; + font-size: $fz-xxsmall; + font-weight: 700; + right: $space-xlarge; + @media screen and ($max-mobile-viewport) { + margin-right: $nav-menu-side; + background: transparent; + } + a { + color: $carbon; + @media screen and ($max-mobile-viewport) { + padding: $space-medium 0; + margin-left: $space-large; + } + @media screen and ($min-desktop-viewport) { + padding: $space-xsmall; + &:not(:first-child) { + padding-left: $space-medium; + border-left: $toplink-separator; + } + } + } +} + +div#main-content-wrapper { + z-index: 1; +} + + +a#publik-portal-agent { + right: 45%; + left: 45%; + text-align: center; +} + +// forms + +.title label { + text-transform: uppercase; + font-weight: 700; +} + +#side { + font-size: 90%; + border: $wcs-step-border-bottom; + @media screen and ($min-desktop-viewport) { + box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 10%); + } +} +[role="radiogroup"] { + margin-top: $space-medium; +} +.previous-button button { + @extend %inverted-button; +} + +label .required { + color: $required-label-color; +} +// cells + +.cell { + h1, h2, h3, h4, h5, h6 { + text-transform: uppercase; + text-align: center; + } + h1 { + font-size: 52px; + } + h2 { + font-size: 36px; + } +} + +// links / underline expand/collapse animation +main a:not(.links-list *, .categories-cell *, .carrousel-content *, .pk-button, .pk-big-button, .account-management *) { + background-size: 100% 2px; + background-repeat: no-repeat; + background-position: center 100%; + background-image: linear-gradient(120deg, lighten($epicea, 15%), lighten($epicea, 15%)); + transition: background-size .2s ease-in-out; + &:hover { + background-image: linear-gradient(120deg, lighten($epicea, 35%), lighten($epicea, 35%)); + background-size: 100% 100%; + } +} +// other content + +hr { + margin: $space-large 0; + border: none; + border-bottom: 1px solid $gray-light-3; + +} + +// footers + +.dark-footer { + background: $carbon; + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + padding: $space-large; + + img { + margin-right: $space-large; + } + a { + font-weight: 400; + color: $white; + &::after { + font-family: FontAwesome; + content: "\f061"; + margin-left: $space-small; + + } + } +} +#footer-wrapper { + margin-top: 0; +} \ No newline at end of file diff --git a/static/mnhn/_vars.scss b/static/mnhn/_vars.scss new file mode 100644 index 00000000..a3af451f --- /dev/null +++ b/static/mnhn/_vars.scss @@ -0,0 +1,97 @@ +$carbon: #222222; +$white: #ffffff; +$epicea: #5d7b84; + +$gray-secondary: #666666; +$gray-light-1: #f5f5f5; +$gray-light-2: #f0f0f0; +$gray-light-3: #d8d8d8; +$gray-secondary: #656565; + +$primary-color: $epicea; + +$space-xsmall: 0.25em; +$space-small: 0.5em; +$space-medium: 1em; +$space-large: 2em; +$space-xlarge: 3em; + +// typo +$font-color: $carbon; +$font-family: Montserrat, Arial, sans-serif; +$font-size: 18px; +$font-line-height: 3.1em; +$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: 890px; +$link-color: $carbon; +$link-decoration: none; +$link-hover-decoration: none; + +$header-logo-size: 59px 37px; +$responsive-menu: left-to-right; +$nav-color: $carbon; +$nav-background: transparent; +$nav-button-background: $white; +$nav-button-color: $carbon; + +$nav-mobile-menu-background: $white; + +$nav-item-background: transparent; +$nav-item-selected-background: $white; +$nav-item-selected-color: $carbon; + +$nav-item-hover-background: transparent; +$nav-item-hover-color: $nav-color; +$nav-item-hover-border: 2px solid $carbon; + +$nav-submenu-background: $gray-light-1; +$nav-submenu-color: $gray-secondary; + +$toplinks-border-radius: 0; +$toplinks-background: $gray-light-2; +$toplinks-box-shadow: none; +$toplinks-padding: $space-medium; +$toplinks-border: none; + +$cell-border: none; +$cell-background: $gray-light-1; +$cell-entry-hover-background: $epicea; +$cell-entry-hover-color: $white; + +$title-color: $carbon; +$title-transform: uppercase; +$title-font-size: $fz-2; +$title-weight: 700; +$title-background: transparent; +$title-padding: $space-medium; + +$button-background: $epicea; +$button-border-radius: 2px; +$button-border: none; +$button-hover-background: darken($button-background, 20%); +$button-focus-outline: 2px solid $carbon; +$button-focus-outline-offset: 2px; +$cancel-button-style: '%inverted-button'; +$buttons-order: previous, cancel (grow), submit; + +$form-sidebar-width: 30%; +$form-sidebar-position: right; + +$widget-background: lighten($gray-light-1, 2%); +$widget-focus-border: 1px solid $primary-color; +$widget-focus-outline: 1px solid $primary-color; + +$wcs-step-color: $carbon; +$wcs-step-border-bottom: 1px solid $gray-light-3; + +$footer-background: $epicea; +$footer-color: $white; +$footer-link-color: $white; diff --git a/static/mnhn/config.json b/static/mnhn/config.json new file mode 100644 index 00000000..43a2d6bd --- /dev/null +++ b/static/mnhn/config.json @@ -0,0 +1,14 @@ +{ + "label": "Muséum National d'Histoire Naturelle", + "variables": { + "theme_color": "#5d7b84" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "header:logo": { "label": "Têtière : logo" }, + "footer:logo": { "label": "Pied de page : logo" } + } + } + } +} diff --git a/static/mnhn/style.scss b/static/mnhn/style.scss new file mode 100644 index 00000000..cf7cc33e --- /dev/null +++ b/static/mnhn/style.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; +@import '../includes/fonts/montserrat'; + +@import 'vars'; +@import '../includes/publik'; +@import 'custom'; diff --git a/templates/variants/mnhn/theme.html b/templates/variants/mnhn/theme.html new file mode 100644 index 00000000..12a01033 --- /dev/null +++ b/templates/variants/mnhn/theme.html @@ -0,0 +1,9 @@ +{% extends "theme.html" %} +{% block footer-pre %} +
+ Muséum National d'Histoire Naturelle - Logo +

+ Retourner sur le site institutionnel du Muséum +

+
+{% endblock %} \ No newline at end of file -- 2.37.2