toulouse-2022: new theme (#67803)
gitea-wip/publik-base-theme/pipeline/head Build started... Details

This commit is contained in:
Thomas Jund 2022-07-25 17:12:24 +02:00
parent c8570ae018
commit 373460ac64
9 changed files with 730 additions and 0 deletions

View File

@ -0,0 +1,516 @@
@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
width: 100vw;
margin-left: calc(-50vw + 50%);
padding-right: calc(50vw - 50% + #{$add-padding-right});
padding-left: calc(50vw - 50% + #{$add-padding-left});
}
//
// Typo
//
html {
@media ($max-mobile-viewport) {
font-size: 100% / (16 / $base-font-m);
}
overflow-x: hidden;
}
h1 {
font-size: $fz-1m;
font-weight: 900;
line-height: 1.5;
color: $font-color;
@media ($min-desktop-viewport) {
font-size: $fz-1;
}
}
h2, .h2 {
font-size: $fz-2m;
font-weight: 700;
line-height: 1.5;
color: $salmon-dark;
@media ($min-desktop-viewport) {
font-size: $fz-2;
}
}
h3, .h3 {
font-size: $fz-3m;
font-weight: 700;
line-height: 1.5;
@media ($min-desktop-viewport) {
font-size: $fz-3;
}
}
.chapo {
font-size: 21em / $base-font-m;
font-weight: 300;
line-height: 1.25;
margin: 0;
@media ($min-desktop-viewport) {
font-size: 24em / $base-font;
}
}
a {
text-decoration: underline;
}
// button
%button {
box-shadow: none !important;
text-decoration: none;
}
.rounded-button {
border-radius: 2em;
}
.salmon-button {
@extend %button;
background-color: $salmon;
border-color: transparent;
&:hover {
background-color: $salmon-dark;
color: white;
}
}
.rounded-salmon-button {
@extend .salmon-button;
@extend .rounded-button;
padding: .1em .66em;
}
.gray-button {
@extend %button;
background-color: $gray-6;
border-color: $gray-6;
&:hover {
background-color: $gray-1;
border-color: $gray-1;
color: white;
}
}
//
// GLOBAL LAYOUT
//
#page {
@media ($max-mobile-viewport) {
// keep space for user-links
padding-top: $topbar-mobile-height;
}
}
// move nav on top
.site-nav {
@media ($min-desktop-viewport) {
order: -1;
}
}
div#header, div#nav {
max-width: $header-width;
}
// header sticky
.site-header {
@media ($max-mobile-viewport) {
position: sticky;
top: 0;
z-index: 1000;
}
}
//
// HEADER
//
.site-header {
border-bottom: 1px solid $gray-5;
}
#top {
display: flex;
align-items: center;
justify-content: space-between;
@media ($max-mobile-viewport) {
justify-content: flex-start;
height: $header-mobile-height;
}
@media ($min-desktop-viewport) {
padding-top: 27px;
padding-bottom: 27px;
}
}
#logo {
display: block;
&, & a {
line-height: 0;
}
@media ($max-mobile-viewport) {
&.has-logo {
padding-left: 0;
a::before {
width: 100px;
height: 27px;
margin-right: 1rem;
}
}
}
}
.theme-header-title h2 {
font-weight: 300;
text-transform: uppercase;
margin: 0;
color: $font-color;
@media ($max-mobile-viewport) {
font-size: $fz-small;
line-height: 1.3;
border-left: 1px solid $gray-5;
padding-left: 1em;
}
}
//
// NAV
//
div.gru-nav {
@media ($min-desktop-viewport) {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
margin: 0;
> li > a {
font-weight: 500;
font-size: $fz-xsmall;
}
}
.gru-nav-button {
right: 0.7rem;
left: auto;
top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2 + #{$topbar-mobile-height});
body.scrolled & {
top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2);
}
}
}
// toplinks moved inside .gru-nav element
#toplinks {
font-size: $fz-xsmall;
font-weight: 500;
max-width: none;
padding: 0.3rem 0.7rem;
word-spacing: 1em;
@media ($max-mobile-viewport) {
width: 100%;
}
@media ($min-desktop-viewport) {
position: static;
}
a {
color: white;
text-decoration: none;
&:hover {
color: $salmon;
}
&.login-link {
@extend .rounded-salmon-button;
margin-right: 0;
}
}
}
//
// MAIN
//
main {
padding-top: 3rem;
@media ($min-desktop-viewport) {
padding-left: 0.7rem;
padding-right: 0.7rem;
}
}
// Page header
.theme-page-header {
display: flow-root;
padding: 0 0.7em;
h1:first-child {
margin-top: 0;
}
.cell + .ô-header {
display: none;
}
}
.theme-page-header .text-cell:first-child,
.ô-header {
position: relative;
margin-top: 30px;
margin-bottom: 60px;
@media ($max-mobile-viewport) {
margin-left: 0;
}
&::before {
content: "";
display: block;
width: 105px;
height: 130px;
position: absolute;
top: -38px;
left: -49px;
z-index: -1;
background: url("img/ô.svg") no-repeat;
background-size: contain;
@media ($max-mobile-viewport) {
left: -0.7rem;
}
}
}
//
// CELLS
//
%cell-links-list {
& > li > a {
text-decoration: none;
}
}
.gru-content div.cell div.cell-items-pagination button {
border-radius: 50%;
padding: 0;
width: 2.7em;
height: 2.7em;
float: none !important;
}
div.list-of-forms span.form-status {
color: $gray-2;
font-weight: 300;
font-size: $fz-small;
}
.errornotice,
.warningnotice,
.successnotice,
.infonotice {
padding-top: 2rem;
padding-right: 2rem;
padding-bottom: 2rem;
color: $font-color;
&::before {
top: 1.9rem;
}
}
.errornotice::before {
color: $error-color;
}
.warningnotice::before {
color: $color-warning;
}
.successnotice::before {
color: $color-success;
}
.infonotice::before {
color: $color-info;
}
//
// WCS / Forms
//
.wcs-page {
.theme-page-header {
display: none;
}
.ô-header {
margin-bottom: 0;
@media ($min-desktop-viewport) {
width: calc(75% - 25px);
}
}
}
.form-content--title {
@extend h1;
padding: 0;
@media ($min-desktop-viewport) {
float: left;
}
}
div#side {
@media ($max-mobile-viewport) {
flex-direction: row;
}
}
div#gauche {
div#tracking-code {
min-width: 0;
font-size: 1rem;
order: 0;
text-align: left;
flex-grow: 1;
@media ($min-desktop-viewport) {
width: 25%;
text-align: right;
float: right;
}
h3 {
color: $font-color;
display: block;
padding: 0;
font-size: $fz-xsmall;
font-weight: 300;
margin-bottom: 0.33em;
}
a {
display: block;
font-size: $fz-4;
font-weight: bold;
color: $salmon-dark;
padding: 0;
&:not(:hover) {
text-decoration: none;
}
}
.form-discard-draft {
@extend .rounded-salmon-button;
font-size: $fz-xsmall;
margin-right: 0;
}
}
}
.wcs-steps {
clear: both;
}
.wcs-step {
&--marker {
border: 1px solid $gray-5;
font-weight: bold;
}
&.current &--marker {
border-color: $wcs-step-color;
}
}
@media ($mq-max--wcs-steps-small-layout) {
.wcs-steps {
margin-left: 1rem;
}
.wcs-step.current {
.wcs-step--marker {
height: 40px;
border-radius: 20px !important;
background-color: $salmon-dark;
border-color: $salmon-dark;
> * {
transform: none;
}
&::before {
transform: rotate(15deg);
height: 1.2em;
margin: 0.2em;
}
}
.wcs-step--label {
font-size: $fz-small;
font-weight: normal;
}
}
}
@media ($mq-min--wcs-steps-horizontal-layout) {
$label-width: 6rem;
.wcs-steps {
font-size: 1rem;
padding-right: $label-width / 2;
padding-top: 2rem;
}
.wcs-steps--list {
flex-wrap: nowrap;
justify-content: center;
}
.wcs-step {
position: relative;
flex: 0 1 15rem;
&.last {
flex: 0 0 auto;
}
}
.wcs-step--marker, .wcs-step::after {
transform: translateX(calc( (#{$label-width} - #{$wcs-step-marker-size}) / 2 ));
}
.wcs-step--label {
display: block !important;
font-size: $fz-xsmall;
top: calc(100% + .5em);
width: $label-width;
}
}
label {
font-size: $fz-small;
font-weight: bold;
}
div#rub_service {
clear: both;
padding-top: 2rem;
h3 {
@extend .h2;
}
h4 {
@extend .h3;
}
div.error {
font-weight: normal;
font-size: $fz-small;
color: $error-color;
}
.submit-button button::after {
content: " \2002\2192";
}
.previous-button button::before {
content: "\2190\2002";
}
}
//
// FOOTER
//
$footer-padding-bottom: 2rem;
#footer-wrapper {
padding-bottom: $footer-padding-bottom;
}
#footer {
.menu-cell {
@include fill-viewport;
padding: 1rem 0;
background-color: #fff;
ul li a {
color: $gray-1;
text-transform: uppercase;
font-size: $fz-xsmall;
font-weight: bold;
&:hover {
color: $primary-color;
}
}
// Put .menu-cell only in last position on footer
transform: translateY(#{$footer-padding-bottom});
}
}

View File

@ -0,0 +1,121 @@
// Colors
$salmon: #FFA58A;
$salmon-dark: #D8522A;
$salmon-light: #F9EEE3;
$gray-1: #212121;
$gray-2: #4A4A4A;
$gray-3: #757575;
$gray-5:#BFBFBF;
$gray-6: #E2E2E2;
$color-info: #036DCF;
$color-success: #00840D;
$color-warning: #FA4C02;
// Typo
$base-font: 17;
$base-font-m: 16;
$fz-1: 52em / $base-font;
$fz-1m: 30em / $base-font-m;
$fz-2: 36em / $base-font;
$fz-2m: 26em / $base-font-m;
$fz-3: 26em / $base-font;
$fz-3m: 22em / $base-font-m;
$fz-4: 20em / $base-font;
$fz-small: 15em / $base-font;
$fz-xsmall: 13em / $base-font;
// layout
$header-width: 1440em / $base-font;
$header-mobile-height: 57px;
$topbar-mobile-height: 2rem;
// Core vars
$primary-color: $salmon-dark;
$font-family: roboto, sans-serif;
$font-size: 100% / ( 16 / $base-font );
$font-color: $gray-1;
$link-color: $primary-color;
$width: 1210em / $base-font;
$mobile-limit: 1023px;
$very-small-limit: 35em;
$columns-gutter: 3rem;
$header-logo-size: 201px 54px;
$header-background-color: white;
$toplinks-style: none;
$toplinks-background: $gray-1;
$nav-background: $gray-1;
$nav-full-width-background: true;
$nav-color: white;
$nav-active-color: $salmon;
$nav-border-color: none;
$nav-menu-side: 28px;
$nav-after-image: false;
$nav-item-selected-background: transparent;
$nav-item-selected-color: $nav-active-color;
$nav-mobile-menu-background: $nav-background;
$nav-mobile-menu-item-color: $nav-color;
$nav-button-background: transparent;
$nav-button-color: $salmon-dark;
$nav-mobile-bottom-bar-color: $nav-color;
$nav-mobile-bottom-bar-background: $nav-background;
$nav-mobile-bottom-bar-hover-color: $nav-active-color;
$responsive-menu: left-to-right;
$title-background: transparent;
$title-color: $primary-color;
$title-font-size: $fz-2;
$title-weight: bold;
$cell-border: none;
$cell-background: transparent;
$cell-entry-color: $gray-2;
$cell-entry-border-color: $gray-6;
$cell-entry-hover-color: $primary-color;
$cell-entry-hover-background: white;
$button-background: white;
$button-color: $font-color;
$button-border: 2px solid $salmon;
$button-hover-background: $salmon;
$title-background: transparent;
$error-color: #D00000;
$form-sidebar-position: top;
$wcs-step-color: $font-color;
$wcs-step-current-color: $wcs-step-color;
$wcs-step-border-bottom: none;
$wcs-step-marker-size: 50px;
$wcs-step-marker-background: white;
$wcs-step-current-marker-color: white;
$wcs-step-current-marker-background: $wcs-step-color;
$wcs-step-marker-type: disc tied;
$wcs-step-marker-tie-width: 1px;
$wcs-step-marker-tie-color: $gray-5;
$wcs-steps-small-layout-limit: $mobile-limit;
$widget-border: 1px solid $gray-6;
$widget-focus-border: 1px solid $gray-3;
$widget-unique-checkbox-position: left;
$form-accent-color: $primary-color;
$buttons-order: cancel, previous, submit;
$buttons-alignment: center;
$cancel-button-style: ".gray-button";
$notification-icon-size: 28px;
$notification_error_color: rgba($error-color, 0.15);
$notification_warning_color: rgba($color-warning, 0.15);
$notification_success_color: rgba($color-success, 0.15);
$notification_info_color: rgba($color-info, 0.15);
$footer-background: black;
$footer-color: white;

View File

@ -0,0 +1,15 @@
{
"label": "Toulouse 2022",
"variables": {
"theme_color": "#FFA58A",
"email_header_asset": "emails:logo"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"emails:logo": {"label": "Emails : logo"}
}
}
}
}

View File

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140" height="174" version="1.1" viewBox="0 0 37 46" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<defs>
<filter id="filter2723" x="-.000348" y="-.00177" width="1" height="1" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.010918563"/>
</filter>
<filter id="filter2719" x="-.000579" y="-.000584" width="1" height="1" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0.025314456"/>
</filter>
</defs>
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="matrix(.352 0 0 -.354 -100 1047)">
<g transform="translate(299 2944)" filter="url(#filter2723)">
<path d="m73.1 14.8h-70.8c-1.26 0-2.29-1.01-2.29-2.26v-10.3c0-1.25 1.02-2.26 2.29-2.26h70.8c1.26 0 2.29 1.01 2.29 2.26v10.3c0 1.25-1.02 2.26-2.29 2.26z" fill="#f9eee3"/>
</g>
<g transform="translate(284 2827)" filter="url(#filter2719)">
<path d="m89.7 17.1c-7.38-7.23-16.8-12.1-26.9-14.1-10.2-1.97-20.7-0.916-30.3 3.03-9.59 3.95-17.8 10.6-23.5 19.2-5.76 8.55-8.84 18.6-8.84 28.9 0 10.3 3.07 20.3 8.84 28.9 5.76 8.55 14 15.2 23.5 19.2 9.59 3.95 20.1 5.01 30.3 3.03 10.2-1.97 19.6-6.88 26.9-14.1 9.83-9.84 15.3-23.1 15.3-36.9 0-13.8-5.51-27.1-15.3-36.9zm-56.5 17.4c2.5-2.52 5.5-4.5 8.8-5.82 3.31-1.32 6.86-1.95 10.4-1.85 3.58-0.0938 7.14 0.538 10.5 1.86 3.32 1.32 6.34 3.3 8.86 5.81 4.98 5.3 7.75 12.3 7.75 19.5s-2.77 14.2-7.75 19.5c-2.52 2.52-5.53 4.51-8.86 5.83-3.33 1.32-6.89 1.96-10.5 1.86-3.57 0.0995-7.12-0.533-10.4-1.86-3.31-1.32-6.3-3.31-8.8-5.84-4.93-5.32-7.67-12.3-7.67-19.5 0-7.22 2.74-14.2 7.67-19.5z" fill="#f9eee3"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,6 @@
@charset "UTF-8";
@import '../includes/fonts/roboto';
@import 'vars';
@import '../includes/publik';
@import 'custom';

View File

@ -0,0 +1,15 @@
{% extends "combo/page_template.html" %}
{% load combo %}
{% block content-pre %}
<header class="theme-page-header gru-content">
{% placeholder "page_header" name="En-tête de la page" optional=False acquired=False %}
<div class="ô-header">
{% block default_page_header_content %}
<h1>
{{ page.title }}
</h1>
{% endblock %}
</div>
</header>
{% endblock %}

View File

@ -0,0 +1,6 @@
{% extends "includes/nav.html" %}
{% block nav-bottom %}
{% include "includes/user-info.html" %}
{% endblock %}

View File

@ -0,0 +1,11 @@
{% extends "theme.html" %}
{# Remove header user infos block & add header title #}
{% block header-content %}
<div class="theme-header-title">
<h2>{{ toulouse_site_title|safe }}</h2>
</div>
<div class="gru-content header-button desktop-only">
<a class="pk-button" href="{{ portal_url }}{{ header_button_url }}">{{ header_button_label }}</a>
</div>
{% endblock %}

View File

@ -0,0 +1,12 @@
{% extends "wcs/base.html" %}
{% block wcs-form-title %}
{% if title %}
<div class="ô-header">
{% if global_context.category_name %}
<p class="chapo">{{ global_context.category_name }}</p>
{% endif %}
{{ block.super }}
</div>
{% endif %}
{% endblock %}