From 3a75810d6bfe9f258df1d86c65c297e27306a377 Mon Sep 17 00:00:00 2001 From: Paul Marillonnet Date: Tue, 2 May 2023 17:00:39 +0200 Subject: [PATCH] ehess: add initial theme (#76923) --- static/ehess/_custom.scss | 108 ++++++++++++++++++++++++++++ static/ehess/_vars.scss | 74 +++++++++++++++++++ static/ehess/config.json | 14 ++++ static/ehess/style.scss | 8 +++ templates/variants/ehess/theme.html | 9 +++ 5 files changed, 213 insertions(+) create mode 100644 static/ehess/_custom.scss create mode 100644 static/ehess/_vars.scss create mode 100644 static/ehess/config.json create mode 100644 static/ehess/style.scss create mode 100644 templates/variants/ehess/theme.html diff --git a/static/ehess/_custom.scss b/static/ehess/_custom.scss new file mode 100644 index 00000000..4aee39cb --- /dev/null +++ b/static/ehess/_custom.scss @@ -0,0 +1,108 @@ +@media($min-desktop-viewport) { + #top { + display: flex; + } +} + +#logo a { + height: 100px; + line-height: 100px; + color: $primary-color; + text-transform: uppercase; + font-weight: normal; + @media screen and ($min-desktop-viewport) { + margin-top: .5em; + } +} + +#toplinks { + a { + color: white; + } +} + +#nav-wrapper { + margin-bottom: 10px; + + @media($min-desktop-viewport) { + background: $nav-background; + } + + div#nav > ul > li > a { + border-radius: $border-radius; + } + + div.gru-nav ul li { + border-right: 1px solid $misc-blue; + &:last-child { + border-right: none; + } + } + @media screen and ($min-desktop-viewport) { + margin-top: 5em; + } +} + +@media ($max-mobile-viewport) { + div.gru-nav .gru-nav-button + ul { + border: none; + } +} + +main { + margin-top: 2em; + %button { + box-shadow: none; + } + %button:hover { + border: 1px solid #dcdcdc;; + box-shadow: none; + } + h1.form-content--title { + font-family: 'Work Sans', sans-serif; + text-transform: uppercase; + color: $secondary-color; + font-size: 1.3em; + font-weight: 500; + } +} + +#rub_service { + h2 { + font-size: 1.8em; + } + h3 { + font-size: 1.6em; + } + h4 { + font-size: 1.4em; + } + h2, h3, h4 { + color: $primary-color; + } +} + +#profile .field .label { + color: $tertiary-color; +} + +@media screen and ($max-mobile-viewport) { + #logo a { + display: block; + height: 75px; + overflow: hidden; + } +} + +#footer-wrapper { + a:hover { + color: $primary-color; + } +} + +%inverted-button { + box-shadow: none; + &:hover { + box-shadow: none; + } +} diff --git a/static/ehess/_vars.scss b/static/ehess/_vars.scss new file mode 100644 index 00000000..e0e752fa --- /dev/null +++ b/static/ehess/_vars.scss @@ -0,0 +1,74 @@ +$primary-color: #00B9AF; +$secondary-color: #0A1C66; +$tertiary-color: #5A6473; + +$clay-white: #FAF7ED; +$minium-orange: #EB5E45; +$nickel-yellow: #FFF26B; +$misc-blue: #4c8da6; + +$width: 1160px; +$border-radius: 0px; +$box-shadow: none; +$notification_error_color: $minium-orange; +$notification_warning_color: $nickel-yellow; +$link-color: $primary-color; +$link-decoration: none; + +$font-color: $secondary-color; +$font-size: 0.938em; +$font-family: 'Public Sans', sans-serif; + +$title-background: white; +$title-color: $primary-color; +$title-font-family: 'Butler Stencil'; +$title-font-size: 1.5em; +$title-weight: 700; + +$toplinks-background: $primary-color; +$toplinks-border-radius: 0; +$toplinks-box-shadow: none; + +$nav-background: white; +$nav-submenu-background: #eee; +$nav-submenu-color: #333; +$nav-button-background: $primary-color; +$nav-border-color: transparent; +$nav-color: $misc-blue; +$nav-active-color: $misc-blue; +$nav-item-selected-color: $misc-blue; +$nav-item-selected-background: white; +$nav-item-hover-color: white; +$nav-item-hover-background: $misc-blue; +$nav-item-transform: uppercase; +$nav-after-image: true; +$responsive-menu: top-to-bottom; +$nav-font-family: 'Public Sans', sans-serif; +$nav-font-size: 1em; +$nav-font-style: normal; +$nav-font-weight: 400; + +$widget-focus-border: 1px solid $misc-blue; +$widget-focus-box-shadow: 0 0 4px $misc-blue; +$widget-focus-outline: none; +$widget-border: 1px solid $misc-blue; +$widget-box-shadow: none; +$widget-border-radius: 5px; + +$button-background: $primary-color; +$button-focus-outline-offset: 1px; +$button-box-shadow: none; +$button-hover-background: white; +$button-hover-color: $primary-color; +$button-border-radius: 5px; +$cancel-button-style: "%inverted-button"; + +$cell-image-position: top; +$cell-image-padding: none; +$cell-border: none; +$cell-entry-hover-background: $clay-white; +$cell-entry-hover-color: $primary-color; +$cell-entry-border: 1px solid $tertiary-color; + +$footer-background: $misc-blue; +$footer-link-color: white; diff --git a/static/ehess/config.json b/static/ehess/config.json new file mode 100644 index 00000000..a3ea4d6d --- /dev/null +++ b/static/ehess/config.json @@ -0,0 +1,14 @@ +{ + "label": "École des hautes études en sciences sociales", + "variables": { + "theme_color": "#00B9AF" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "header:background": { "label": "Têtière : fond" }, + "header:logo": { "label": "Têtière : logo" } + } + } + } +} diff --git a/static/ehess/style.scss b/static/ehess/style.scss new file mode 100644 index 00000000..4dbb4f4a --- /dev/null +++ b/static/ehess/style.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; +@import '../includes/fonts/butler-stencil'; +@import '../includes/fonts/publicsans'; +@import '../includes/fonts/worksans'; + +@import 'vars'; +@import '../includes/publik'; +@import 'custom'; diff --git a/templates/variants/ehess/theme.html b/templates/variants/ehess/theme.html new file mode 100644 index 00000000..c88268d2 --- /dev/null +++ b/templates/variants/ehess/theme.html @@ -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 %}