studio-variable/index-website-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

header & menu small
All checks were successful
Deploy / Deploy to pre-production (push) Successful in 6s
Details

Browse source
This commit is contained in:
Julie Blanc 2025-12-24 17:04:37 +01:00
parent 32f45ceeca
commit aea4e557dc
8 changed files with 165 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/base/_body.scss
View file

@ -33,10 +33,6 @@ body{
overflow-x: hidden;
}
// main{
// overflow-x: hidden;
// }
img{
max-width: 100%;
}

52
assets/css/partials/_site-header.scss
View file

@ -40,9 +40,25 @@
flex-grow: 2;
svg{
width: 100px;
@media #{$small}{
width: 80px;
}
}
}
.title-page{
display: none;
flex-grow: 2;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: var(--fs-small);
line-height: 2;
}
ul{
list-style-type: none;
display: flex;
@ -52,6 +68,20 @@
}
#theme-toggle{
width: var(--h-block);
height: var(--h-block);
display: flex;
align-items: center;
justify-content: center;
svg{
width: 18px;
position: relative;
top: -2px;
}
}
#lang-toggle{
display: flex;
gap: 1ch;
@ -83,6 +113,26 @@
.site-header__inner{
border-bottom: var(--border-light);
#nav-highlight li:not(.soutenir){
display: none;
}
#site-title {
@media #{$small-up}{
flex-grow: 0;
width: calc((100vw - var(--max-w-content))/2 - var(--padding-body)*2);
}
@media #{$medium}{
width: calc(var(--banner-medium) - var(--padding-body));
}
}
.title-page{
@media #{$small-up}{
display: block;
}
flex-grow: 2;
}
}
& ~ main{
@ -96,3 +146,5 @@
display: none;
}
}

2
assets/css/partials/_site-menu.scss
View file

@ -1,6 +1,7 @@
#site-menu{
position: fixed;
width: var(--menu-w);
@media #{$small}{ width: 100vw; }
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
top: var(--header-h);
@ -96,6 +97,7 @@ body.menu-open{
}
#site-menu{
right: 0;
}
#menu-toggle{

105
assets/css/style.css
View file

@ -135,6 +135,22 @@ img {
#site-header #site-title svg {
width: 100px;
}
@media screen and (max-width: 768px) {
#site-header #site-title svg {
width: 80px;
}
}
#site-header .title-page {
display: none;
flex-grow: 2;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: var(--fs-small);
line-height: 2;
}
#site-header ul {
list-style-type: none;
display: flex;
@ -142,6 +158,18 @@ img {
gap: var(--gap);
text-transform: uppercase;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);
display: flex;
align-items: center;
justify-content: center;
}
#site-header #theme-toggle svg {
width: 18px;
position: relative;
top: -2px;
}
#site-header #lang-toggle {
display: flex;
gap: 1ch;
@ -169,6 +197,28 @@ img {
#site-header.is-visible .site-header__inner {
border-bottom: var(--border-light);
}
#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) {
display: none;
}
@media screen and (min-width: 768px) {
#site-header.is-visible .site-header__inner #site-title {
flex-grow: 0;
width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2);
}
}
@media screen and (max-width: 1080px) {
#site-header.is-visible .site-header__inner #site-title {
width: calc(var(--banner-medium) - var(--padding-body));
}
}
#site-header.is-visible .site-header__inner .title-page {
flex-grow: 2;
}
@media screen and (min-width: 768px) {
#site-header.is-visible .site-header__inner .title-page {
display: block;
}
}
#site-header.is-visible ~ main {
margin-top: var(--header-h);
}
@ -710,6 +760,22 @@ button:disabled {
#site-header #site-title svg {
width: 100px;
}
@media screen and (max-width: 768px) {
#site-header #site-title svg {
width: 80px;
}
}
#site-header .title-page {
display: none;
flex-grow: 2;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: var(--fs-small);
line-height: 2;
}
#site-header ul {
list-style-type: none;
display: flex;
@ -717,6 +783,18 @@ button:disabled {
gap: var(--gap);
text-transform: uppercase;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);
display: flex;
align-items: center;
justify-content: center;
}
#site-header #theme-toggle svg {
width: 18px;
position: relative;
top: -2px;
}
#site-header #lang-toggle {
display: flex;
gap: 1ch;
@ -744,6 +822,28 @@ button:disabled {
#site-header.is-visible .site-header__inner {
border-bottom: var(--border-light);
}
#site-header.is-visible .site-header__inner #nav-highlight li:not(.soutenir) {
display: none;
}
@media screen and (min-width: 768px) {
#site-header.is-visible .site-header__inner #site-title {
flex-grow: 0;
width: calc((100vw - var(--max-w-content)) / 2 - var(--padding-body) * 2);
}
}
@media screen and (max-width: 1080px) {
#site-header.is-visible .site-header__inner #site-title {
width: calc(var(--banner-medium) - var(--padding-body));
}
}
#site-header.is-visible .site-header__inner .title-page {
flex-grow: 2;
}
@media screen and (min-width: 768px) {
#site-header.is-visible .site-header__inner .title-page {
display: block;
}
}
#site-header.is-visible ~ main {
margin-top: var(--header-h);
}
@ -768,6 +868,11 @@ button:disabled {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 768px) {
#site-menu {
width: 100vw;
}
}
#site-menu form {
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 1);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long