adrien-payet/actuel-inactuel
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

début implémentation light-mode avec son script : remplacement de tout les valeur de couleur par varriable corespondante, text-shadow autour de du logo pour le contour, changement de fonctionnement pour que svg puisse changer de couleur

Browse source
This commit is contained in:
antonin gallon 2025-11-20 17:31:26 +01:00
parent 8f9e75126e
commit 0585421854
56 changed files with 492 additions and 6978 deletions
Download patch file Download diff file Expand all files Collapse all files

39
assets/css/src/nav.css
View file

@ -1,7 +1,7 @@
#nav-overlay {
position: fixed;
inset: 0;
background-color: #000;
background-color: var(--color-background);
opacity: 0.7;
z-index: 2;
cursor: w-resize;
@ -16,9 +16,9 @@
overflow: auto;
width: 100vw;
height: 100dvh;
top: 0;
background-color: #000;
outline: 1px solid #fff;
top: 0;
background-color: var(--color-background);
outline: 1px solid var(--color-primary);
transition: all 0.5s var(--curve-sine);
z-index: 3;
box-sizing: border-box;
@ -34,7 +34,7 @@
position: sticky;
top: 0;
z-index: 1;
background-color: #000;
background-color: var(--color-background);
padding: var(--unit--vertical) var(--unit--horizontal);
padding-bottom: 0;
}
@ -64,10 +64,13 @@
position: relative;
width: 100%;
margin-top: var(--unit--vertical);
background-color: #000;
background-color: var(--color-background);
z-index: 1;
top: 0;
box-sizing: border-box;
border-bottom: 1px solid var(--color-primary);
display: flex;
align-items: center;
}
.search__input {
all: unset;
@ -75,23 +78,31 @@
background-color: transparent;
padding: calc(var(--unit--vertical) / 4) 0;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
border-bottom: 1px solid var(--color-background);
color: var(--color-background);
font-size: var(--font-size-m);
font-weight: var(--font-weight-light);
}
.search__input::placeholder {
font-size: var(--font-size-sm);
letter-spacing: 1px;
color: var(--color-primary);
opacity: 0.55;
}
.search__icon {
all: unset;
position: absolute;
width: 1.2rem;
height: 1.2rem;
width: 0.2rem;
height: 0.2rem;
padding: 0.5rem;
right: 0;
transform: translateX(0.5rem) translateY(0.2rem);
/* transform: translateY(0.2rem); */
background-color: var(--color-primary);
mask: var(--icon-search) no-repeat center;
mask-size: contain;
-webkit-mask: var(--icon-search) no-repeat center;
-webkit-mask-size: contain;
}
button.search__icon {
cursor: pointer;
@ -114,9 +125,9 @@ footer {
justify-content: center;
width: 100%;
outline: none;
border-top: 1px solid #fff;
border-top: 1px solid var(--color-background);
font-size: var(--font-size-m);
background-color: #000;
background-color: var(--color-primary);
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
}
@ -180,7 +191,7 @@ button.see-more {
top: 0;
height: 100%;
width: 1px;
background-color: #fff;
background-color: var(--color-background);
}
@media screen and (min-width: 640px) {