finistere: add theme (#74747) #177

Merged
csechet merged 1 commits from wip/74747-finistere-integration-graphique into main 2023-02-28 16:23:45 +01:00
4 changed files with 177 additions and 0 deletions

View File

@ -0,0 +1,78 @@
body.has-picture .site-nav::after {
top: 0;
}
h1#logo.has-logo {
a {
margin-top: 20px;
@media(max-width: $very-small-limit) {
margin-top: 60px;
}
}
}
aberriot marked this conversation as resolved Outdated

Possiblement un problème de z-index ici, chez moi un survol sur le menu ne marche pas bien car c'est le logo qui récupère plutôt que le menu. Possiblement parce que j'ai un logo aux mauvaises dimensions, mais sans logo j'ai le même pépin.

z-index: 500; sur cet élément semble résoudre le souci.

Possiblement un problème de z-index ici, chez moi un survol sur le menu ne marche pas bien car c'est le logo qui récupère plutôt que le menu. Possiblement parce que j'ai un logo aux mauvaises dimensions, mais sans logo j'ai le même pépin. `z-index: 500;` sur cet élément semble résoudre le souci.

Bien vu, c'est fait.

Bien vu, c'est fait.
@media($min-desktop-viewport) {
.site-nav {
margin-top: -50px;
z-index: 500;
}
}
.gru-nav {
.menu, .submenu {
&--link {
font-weight: 500;
font-size: 1.2rem;
}
}
@media($min-desktop-viewport) {
display: flex;
justify-content: center;
.menu, .submenu {
background: white;
&--link {
font-weight: 500;
font-size: 1.2rem;
}
}
.menu {
&--link {
text-transform: uppercase;
}
}
.submenu {
border: 2px solid $blue-3;
&--item{
margin: 0 10px;
&:not(:last-child) {
border-bottom: 1px solid $blue-3;
}
}
}
}
}
input, input[type="search"], textarea, select {
&:not([readonly]) {
&:hover, &:focus {
background: white;
}
}
}
%inverted-button {
background: $blue-3;
color: black;
border: none;
&:hover {
background: $blue-2;
color: black;
}
}

View File

@ -0,0 +1,78 @@
@import '../includes/fonts/ubuntu';
// colors / typo
$blue-1: #2E496B;
$blue-2: #2699d6;
$blue-3: #8DA3B0;
$blue-4: #88BCE7;
$gray-1: #F1F1F1;
$yellow: #ffdc00;
$primary-color: $blue-1;
$font-size: 1rem;
$font-family: Ubuntu, sans-serif;
$link-color: $blue-1;
$header-logo-size: 180px 60px;
$nav-background: transparent;
$nav-color: black;
$nav-active-color: $blue-1;
$nav-border-color: none;
$nav-height: auto !default;
aberriot marked this conversation as resolved Outdated

Quand il y a des sous-menu, le dropdown est en fond blanc et pas très visible par rapport au reste de la page. Est-ce qu'on peut lui mettre une bordure ou quelque chose ?

Quand il y a des sous-menu, le dropdown est en fond blanc et pas très visible par rapport au reste de la page. Est-ce qu'on peut lui mettre une bordure ou quelque chose ?

Ajouté une bordure.

Ajouté une bordure.
$nav-menu-side: 50px !default;
$nav-menu-color: black;
$nav-full-width-background: true;
$nav-item-selected-border: none;
$nav-item-selected-background: $yellow;
$nav-item-selected-color: black;
$nav-item-hover-color: $blue-2;
$nav-item-hover-background: transparent;
$nav-mobile-menu-background: white;
$nav-mobile-menu-item-hover-background: none;
$title-background: transparent;
aberriot marked this conversation as resolved Outdated

Je ne vois pas d'autres police définie pour le reste, peut-être que ça vaudrait le coup de définir quelque chose pour éviter trop d'incohérences d'un device à l'autre ? Je vois du roboto utilisé sur https://www.finistere.fr/Le-Conseil-departemental/Le-President-du-Conseil-departemental

Je ne vois pas d'autres police définie pour le reste, peut-être que ça vaudrait le coup de définir quelque chose pour éviter trop d'incohérences d'un device à l'autre ? Je vois du roboto utilisé sur https://www.finistere.fr/Le-Conseil-departemental/Le-President-du-Conseil-departemental

J'ai utilisé Ubuntu partout, je ne sais pas pourquoi je l'avais mise uniquement sur les titres.

J'ai utilisé Ubuntu partout, je ne sais pas pourquoi je l'avais mise uniquement sur les titres.
$title-color: black;
$title-font-size: 1.6rem;
$title-weight: 500;
$title-border-radius: 0;
$title-border-bottom: 1px dotted black;
$cell-background: white;
$cell-border: none;
$cell-border-radius: 4px;
$cell-title-cover-border: true;
$cell-entry-hover-background: $blue-1;
$cell-entry-hover-color: white;
$cell-entry-border: none;
$button-background: $blue-1;
$button-color: white;
$button-border: none;
$button-hover-background: $blue-4;
$button-hover-color: black;
$button-border-radius: 2px;
$nav-button-background: $blue-4;
$widget-background: $gray-1;
$widget-color: black;
$widget-border-radius: 2px;
$widget-focus-outline: none;
$cancel-button-style: "%inverted-button";
$cell-entry-hover-color: black;
$cell-entry-hover-background: $blue-4;
$wcs-step-color: $blue-3;
$wcs-step-border-bottom: 1px solid $wcs-step-color;
$wcs-step-current-border-bottom: 1px solid $primary-color;
$wcs-step-marker-size: 1.8em;
$buttons-order: previous, cancel (grow), submit;
$footer-background: $blue-3;
$footer-color: black;
$footer-link-color: black;

View File

@ -0,0 +1,16 @@
{
"label": "Finistère",
"variables": {
"theme_color": "#2E496B",
"email_header_asset": "emails:logo"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:background": { "label": "Têtière : fond" },
"header:logo": { "label": "Têtière : logo" },
"emails:logo": { "label": "Courriels : logo" }
}
}
}
}

View File

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