This commit is contained in:
isUnknown
parent
522d975a3a
commit
48e7f21c71
37 changed files with 2595 additions and 1348 deletions
12
assets/css/partials/_main-layout.scss
Normal file
12
assets/css/partials/_main-layout.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
body {
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
94
assets/css/partials/_site-footer.scss
Normal file
94
assets/css/partials/_site-footer.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
#site-footer{
|
||||
|
||||
background-color: var(--dark);
|
||||
padding: calc(var(--padding-body)*2) var(--padding-body);
|
||||
|
||||
|
||||
.logo {
|
||||
margin-top: calc(var(--spacing)*0.25);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
svg{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
margin: calc(var(--spacing)*0.5) 0;
|
||||
a{
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p__small{
|
||||
font-size: var(--fs-xsmall);
|
||||
color: var(--grey-600);
|
||||
}
|
||||
|
||||
.footer__mentions{
|
||||
p{
|
||||
font-size: var(--fs-small);
|
||||
color: var(--color-txt)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$small}{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
|
||||
|
||||
.footer__socials{
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
border-top: var(--border-light);
|
||||
|
||||
.list-socials{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*0.75);
|
||||
}
|
||||
}
|
||||
.footer__mentions{
|
||||
|
||||
border-top: var(--border-light);
|
||||
padding-top: calc(var(--spacing)*0.25);
|
||||
p{
|
||||
font-size: var(--fs-small);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
|
||||
.site-footer__container{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: calc(var(--spacing)*2);
|
||||
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__socials .container{
|
||||
max-width: 400px;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.footer__mentions{
|
||||
grid-column: span 2;
|
||||
p{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,110 +1,150 @@
|
|||
#site-header{
|
||||
@keyframes add-border {
|
||||
from {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
to {
|
||||
border-bottom: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 100000;
|
||||
#site-header {
|
||||
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
padding: 0 var(--padding-body);
|
||||
z-index: 900;
|
||||
--gap: 3ch;
|
||||
|
||||
background-color: transparent;
|
||||
border-bottom: var(--border);
|
||||
border-color: transparent;
|
||||
width: 100vw;
|
||||
height: var(--header-h);
|
||||
background-color: var(--color-bg);
|
||||
padding: 0 var(--padding-body);
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--gap);
|
||||
}
|
||||
|
||||
.burger svg{
|
||||
fill: var(--color-txt);
|
||||
width: 40px;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
color: var(--grey-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#site-title {
|
||||
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;
|
||||
align-items: center;
|
||||
gap: var(--gap);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
button:disabled{ color: var(--color-txt-light); }
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
cursor: pointer;
|
||||
svg{
|
||||
width: 30px;
|
||||
}
|
||||
.close{ display: none; }
|
||||
|
||||
}
|
||||
|
||||
.site-title{
|
||||
display: flex;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
svg{
|
||||
fill: var(--color-txt);
|
||||
|
||||
}
|
||||
button{
|
||||
|
||||
&:hover{
|
||||
svg{ fill: var(--grey-200)!important; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
#site-header.is-visible{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
nav{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
.site-header__inner{
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
#nav-highlight li:not(.soutenir){
|
||||
display: none;
|
||||
}
|
||||
nav ul{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2ch;
|
||||
list-style: 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{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-left, .header-right{
|
||||
width: 100px;
|
||||
}
|
||||
@media #{$medium}{
|
||||
#nav-highlight{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-center{
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#go-to-panier{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
#go-to-panier__nbr{
|
||||
|
||||
min-width: 2.6ch;
|
||||
height: 2.6ch;
|
||||
border-radius: 1.3ch;
|
||||
border: var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-shrinked{
|
||||
background-color: var(--color-bg);
|
||||
height: var(--header-h-shrinked);
|
||||
transition: ease-in .3s;
|
||||
border-color: var(--color-txt);
|
||||
|
||||
nav{
|
||||
height: var(--h-block);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.site-title{
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
108
assets/css/partials/_site-menu.scss
Normal file
108
assets/css/partials/_site-menu.scss
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
#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);
|
||||
right: calc(var(--menu-w)*-1);
|
||||
transition: right .3s ease-in;
|
||||
background-color: var(--color-bg);
|
||||
border-left: var(--border-light);
|
||||
padding: var(--padding-body);
|
||||
z-index: 1000;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// display: none;
|
||||
|
||||
// .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-normal);
|
||||
a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 0;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
// color: var(--grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.menu-open{
|
||||
overflow: hidden;
|
||||
main, footer, #nav-highlight{
|
||||
transition: opacity .3s ease-in;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#site-menu{
|
||||
right: 0;
|
||||
|
||||
}
|
||||
|
||||
#menu-toggle{
|
||||
.open{ display: none; }
|
||||
.close{ display: block!important; }
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue