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,8 +40,24 @@
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;
@ -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

3
components/site-header.html
View file

@ -10,6 +10,9 @@
</a>
</h1>
<!-- Note: toujours mettre .title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes -->
<p class="title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
<nav id="nav-highlight">
<ul>

2
list-articles/index.html
View file

@ -33,7 +33,7 @@
<figure>
<img src="/assets/images/Nidal-Khaled-Amirah.png">
</figure>
<h3 class="title"><a href="/page-enquete" target="_blank">L’exécution de Nidal et Khaled ‘Amirah</a></h3>
<h3 class="title"><a href="/page-enquete" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h3>
<p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>

2
page-enquete/index.html
View file

@ -19,7 +19,7 @@
<main class="page-enquete">
<header>
<p class="page-type">Enquête</p>
<h2>L’exécution de Nidal et Khaled ‘Amirah</h2>
<h2>L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
<p class="date-publish"></p>
</header>