entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

manche: create theme (#88587) #546

Merged
csechet merged 1 commits from wip/83773-theme-manche into main 2024-04-02 15:57:33 +02:00
Conversation 3 Commits 1 Files Changed 5 +373
5 changed files with 373 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
static/manche/_custom.scss Normal file
View File

@ -0,0 +1,260 @@
div#header {
@media($min-desktop-viewport) {
padding-left: 0;
}
}
#top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: $space-medium;
@media($max-mobile-viewport) {
padding: $space-small 0;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
}
#logo.has-logo {
@media($max-mobile-viewport) {
padding-left: 0;
}
a::before {
margin-right: 0;
}
}
#toplinks {
position: static;
@media($max-mobile-viewport) {
max-width: unset;
grid-area: 2 / 1 / 3 / 3;
.toplinks{
&--list {
display: flex;
justify-content: space-around;
gap: $space-large;
}
&--item {
text-align: center;
}
}
}
}
nav.site-nav {
@media($max-mobile-viewport) {
grid-area: 1 / 2 / 2 / 3;
}
}
.gru-nav-wrapper {
@media($max-mobile-viewport) {
margin-top: 0;
}
}
div.gru-nav {
.menu {
margin: 0;
@media($min-desktop-viewport) {
padding-left: $space-xlarge;
}
&--link {
tjund commented 2024-03-25 17:41:20 +01:00
Outdated
Review
Copy Link

vide, à supprimer

vide, à supprimer
border-right: 1px solid $blue-dark;
padding: 0 $space-large !important;
@media($max-mobile-viewport) {
margin: $space-medium 0;
}
}
&--label {
text-transform: uppercase;
font-weight: 900 !important;
&:hover {
text-decoration: underline;
}
}
}
.gru-nav-button {
top: $space-medium;
right: $space-medium;
left: auto;
border-radius: 100%;
border: 9px solid transparent;
&.toggled {
background: $yellow;
tjund commented 2024-03-19 15:54:57 +01:00
Outdated
Review
Copy Link

Pour faire un bouton rond en modifiant l'espace entre le bord du bouton et les barres, regarde du côté de l'ajout simplement d'un border transparent au bouton, c'est beaucoup plus simple. Inutile de repositionner la position des barres.

Pour faire un bouton rond en modifiant l'espace entre le bord du bouton et les barres, regarde du côté de l'ajout simplement d'un border transparent au bouton, c'est beaucoup plus simple. Inutile de repositionner la position des barres.
& .icon-bar {
background: $blue-dark;
}
}
@media($max-mobile-viewport) {
+ ul {
width: 100vw;
}
}
tjund commented 2024-03-25 17:42:26 +01:00
Outdated
Review
Copy Link

ça s'applique en desktop et surement ça qui chasse les toplinks hors viewport

ça s'applique en desktop et surement ça qui chasse les toplinks hors viewport
}
tjund commented 2024-03-19 15:57:26 +01:00
Outdated
Review
Copy Link

peut-être qu'utiliser $responsive-menu: left-to-right; comme base et le transformer un right-to-left (voir thème caen par exemple) sera plus simple et plus safe ?

peut-être qu'utiliser `$responsive-menu: left-to-right;` comme base et le transformer un right-to-left (voir thème caen par exemple) sera plus simple et plus safe ?
.submenu {
@media($min-desktop-viewport) {
border: 1px solid white;
}
&--link {
@media($max-mobile-viewport) {
padding: $space-small 3rem;
}
}
&--label {
color: white;
&:hover {
color: $yellow;
text-decoration: underline;
}
}
}
}
%title {
background-image: linear-gradient(#{$yellow}, #{$yellow});
background-size: 60px 7px;
background-position: 0 100%;
background-repeat: no-repeat;
margin: $space-small 0;
@media ($max-mobile-viewport) {
font-size: $fz-3;
}
}
%button {
background: var(--background);
color: var(--color);
box-shadow: none;
font-weight: 700;
overflow: clip;
position: relative;
z-index: 1;
transition: 0;
padding: $space-large $space-xlarge;
&:hover {
box-shadow: none;
background: $button-background;
}
&::before {
top: 0;
left: 0;
width: 0;
height: 100%;
z-index: -1;
position: absolute;
background: var(--hover-background);
content: "";
transition: .2s ease;
}
&:hover::before {
width: 100%;
}
}
.pk-button-cancel {
tjund commented 2024-03-19 16:03:15 +01:00
Outdated
Review
Copy Link

Tu as essayé simplement ?

%cancel-button {
		-- background: $blue-dark;
		-- color: white;
		border: 1px solid white;
}
Tu as essayé simplement ? ``` %cancel-button { -- background: $blue-dark; -- color: white; border: 1px solid white; } ```
&, #footer-wrapper & {
@extend %button;
background: $blue-dark;
color: white;
border: 1px solid white;
}
}
.form-content {
&--title {
background: transparent;
font-size: $fz-1;
@media($max-mobile-viewport) {
font-size: $fz-2;
}
color: $blue-dark;
font-weight: 900;
padding-top: 1rem;
}
}
.field {
&--label {
font-weight: 700;
color: $blue-dark;
}
}
.wcs-steps {
border-radius: 5px;
padding: $space-large;
box-shadow: 0 0 16px 0 rgba(0,0,0,.33)
}
input, textarea, .godo--editor, select, div.select2-container, span.select2-container {
border-bottom: 1px solid $blue-dark;
}
.select2-results {
border: 1px solid $blue-dark;
}
#footer {
padding: 3rem 0;
div.cell {
@media($max-mobile-viewport) {
display: flex;
justify-content: center;
}
}
.menu {
display: flex;
flex-direction: column;
&--label {
display: flex;
align-items: center;
text-transform: uppercase;
font-weight: 700;
&:hover {
color: $yellow;
text-decoration: underline;
}
&::before {
content: '\f054'; // chevron-right
font-family: FontAwesome;
color: $yellow;
font-weight: normal;
margin-right: 0.5em;
font-size: 0.7rem;
}
&:hover::before {
text-decoration: none;
}
}
}
}

79
static/manche/_vars.scss Normal file
View File

@ -0,0 +1,79 @@
@import '../includes/fonts/raleway';
$blue: #496BAE;
$blue-dark: #0B1E4D;
$yellow: #FFCA60;
$beige: #EEEBE8;
$font-family: Raleway, sans-serif;
$scale: 1rem;
$space-small: 5px;
$space-medium: 10px;
$space-large: 18px;
$space-xlarge: 35px;
// Typo
$fz-1: 55 / 16 * $scale;
$fz-2: 36 / 16 * $scale;
$fz-3: 28 / 16 * $scale;
$font-size: 18 / 16 * $scale;
$fz-small: 14 / 16 * $scale;
$title-color: $blue;
$title-font-size: $fz-2;
$title-transform: uppercase;
$title-weight: 700;
$title-padding: $space-small 0;
// Layout
$width: 1140px;
// Header
$header-background-color: $yellow;
$header-full-width-background: true;
$header-logo-size: 200px 50px;
$toplinks-style: none;
$responsive-menu: left-to-right;
$nav-active-color: $blue-dark;
$nav-background: $yellow;
$nav-item-background: transparent;
$nav-item-selected-background: transparent;
$nav-menu-color: $blue-dark;
$nav-submenu-background: $blue-dark;
$nav-mobile-menu-background: $blue-dark;
$nav-mobile-menu-item-color: white;
$nav-mobile-menu-item-hover-color: $yellow;
$nav-button-color: $yellow;
$nav-button-bar-height: 4px;
$nav-after-image: false;
// Widgets
$widget-focus-outline: 2px solid $blue;
$widget-border: 0;
$button-background: $yellow;
$button-color: $blue-dark;
$button-hover-background: $blue;
$button-hover-color: white;
$button-border: 0;
$button-border-radius: 2.375rem;
$buttons-order: previous, cancel (grow), submit;
$cancel-button-style: ".pk-button-cancel";
// cells
$cell-border: none;
// w.c.s
$wcs-steps-background: $beige;
// Step
$wcs-step-color: $blue-dark;
$wcs-step-current-color: $blue;
// Footer
$footer-background: $blue-dark;

17
static/manche/config.json Normal file
View File

@ -0,0 +1,17 @@
{
"label": "Manche",
"variables": {
"theme_color": "#0b1e4d",
"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" }
}
}
}
}

5
static/manche/style.scss Normal file
View File

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

12
templates/variants/manche/theme.html Normal file
View File

@ -0,0 +1,12 @@
{% extends 'theme.html' %}
{# move nav #}
{% block header-content %}
{% block nav %}{% endblock %}
{% block top-links %}{% endblock %}
{% endblock %}
{% block after-header %}
{% endblock %}