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

menu

Browse source
This commit is contained in:
Julie Blanc 2025-12-16 18:36:28 +01:00
parent a23a54c862
commit 8c604d12c9
11 changed files with 140 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/base/_var.scss
View file

@ -45,6 +45,7 @@
--color-accent: #00ff00;
--color-accent-50: #e9ffe9;
--color-accent-100: #d8fdd8;
--dark: black;

18
assets/css/components/_buttons.scss
View file

@ -19,6 +19,24 @@ button:disabled{
}
.soutenir{
a{
color: var(--color-accent);
&:hover{
color: var(--color-accent)!important;
text-decoration: underline!important;
}
}
}
// DELETE ?
.btn__default{

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

@ -1,6 +1,6 @@
#site-footer{
background-color: black;
background-color: var(--dark);
padding: calc(var(--padding-body)*2) var(--padding-body);

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

@ -17,7 +17,7 @@
width: calc(100vw - var(--padding-body)*2);
height: var(--header-h);
background-color: var(--color-bg);
border-bottom: var(--border-light);
// border-bottom: var(--border-light);
display: flex;
align-items: center;
@ -44,17 +44,6 @@
display: flex;
align-items: center;
gap: var(--gap);
}
#btn--soutenir{
color: var(--color-accent);
a:hover{
color: var(--color-accent);
text-decoration: underline;
}
}
ul, #btn--soutenir{
text-transform: uppercase;
}

86
assets/css/partials/_site-menu.scss Normal file
View file

@ -0,0 +1,86 @@
#site-menu{
position: fixed;
width: 420px;
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
top: var(--header-h);
right: 0;
background-color: var(--color-bg);
border-left: var(--border-light);
padding: var(--padding-body);
// background-color: red;
display: flex;
flex-direction: column;
.baseline{
font-size: var(--fs-medium);
}
form{
margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*1);
--icon: 40px;
display: grid;
grid-template-columns: var(--icon) 1fr;
input{
grid-column: 1/3;
grid-row: 1;
height: calc(var(--h-block) * 1.5);
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-txt);
padding-left: var(--icon);
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
padding-top: 3px;
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
}
&:focus{
border-color: var(--color-accent);
outline: none;
}
}
.icon{
grid-column: 1;
grid-row: 1;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
svg{
width: 20px;
}
}
}
nav{
flex-grow: 1;
ul{
list-style-type: none;
text-transform: uppercase;
li{
font-size: var(--fs-medium);
a{
display: block;
text-decoration: none;
padding: 0.5em 0;
&:hover{
color: var(--grey-200);
}
}
}
.highlight{
text-transform: uppercase;
}
}
}
}

1
assets/css/style.scss
View file

@ -14,6 +14,7 @@
@import 'partials/site-header';
@import 'partials/site-menu';
@import 'partials/site-footer';
@import 'partials/main-layout';

1
assets/icons/search.svg Normal file
View file

@ -0,0 +1 @@
<svg style="fill: var(--color-txt)" width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 624 B

8
components/site-footer.html
View file

@ -46,13 +46,7 @@
<div class="footer__socials">
<p>Suivez Index sur les réseaux sociaux</p>
<div class="container" w3-include-html="/components/socials.html">
</div>
<div class="container" w3-include-html="/components/socials.html"></div>
</div>
<div class="footer__mentions">

5
components/site-header.html
View file

@ -13,13 +13,10 @@
<ul>
<li><a href="#">Enquêtes</a></li>
<li><a href="#">Impact</a></li>
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
</ul>
</nav>
<button id="btn--soutenir">
<a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a>
</button>

24
components/site-menu.html Normal file
View file

@ -0,0 +1,24 @@
<p class="baseline">Index est une ONG d’investigation numérique au service du public,
de la vérité et de la justice.</p>
<form aria-label="Formulaire de recherche">
<span class="icon" w3-include-html="/assets/icons/search.svg"></span>
<input type="text" id="search" class="input" placeholder="Rechercher" w3-include-html="/icons/search.svg">
</form>
<nav>
<ul>
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
<li class="highlight"><a href="#">Enquêtes</a></li>
<li class="highlight"><a href="#">Impact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Mentions légales</a></li>
</ul>
</nav>
<div class="socials" w3-include-html="/components/socials.html"></div>

5
index.html
View file

@ -12,7 +12,8 @@
</head>
<body>
<header id="site-header" w3-include-html="components/site-header.html"></header>
<header id="site-header" w3-include-html="/components/site-header.html"></header>
<div id="site-menu" w3-include-html="/components/site-menu.html"></div>
<main>
@ -24,7 +25,7 @@
</main>
<footer id="site-footer" w3-include-html="components/site-footer.html"></footer>
<footer id="site-footer" w3-include-html="/components/site-footer.html"></footer>
</body>
</html>