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

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);