Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 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

2
assets/css/src/article.css
View file

@ -24,7 +24,7 @@ article #main-content #chapo::after {
width: 100%;
height: 1px;
background-color: #fff;
background-color: var(--color-background);
}
article #main-content li:not(.text) {

4
assets/css/src/footer.css
View file

@ -32,9 +32,9 @@
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);
}

13
assets/css/src/header.css
View file

@ -44,6 +44,16 @@ main article > div {
#logo #actuel {
font-weight: 550;
}
[data-theme="light"] #logo #actuel {
font-weight: 550;
color: white;
/*diag*/
/* text-shadow: -1px -1px var(--color-primary), 1px 1px var(--color-primary); */
/*difus*/
/* text-shadow: -2px 0 5px var(--color-primary), 2px 0 5px var(--color-primary); */
/*partout*/
text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary),0 1px var(--color-primary);
}
#logo #actuel,
#logo #inactuel {
@ -53,6 +63,9 @@ main article > div {
#logo #inactuel {
transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
}
[data-theme="light"] #logo #inactuel {
mix-blend-mode: difference;
}
#main-header.minimized #inactuel {
margin-top: -20vw;

4
assets/css/src/html.css
View file

@ -39,7 +39,7 @@ html {
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255) transparent;
scrollbar-color: var(--color-primary) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -54,7 +54,7 @@ html {
}
*::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255);
background-color: var(--color-primary);
border-radius: 0px;
border: none;
}

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

6
assets/css/src/newsletter.css
View file

@ -11,18 +11,18 @@
#subscribe-form input {
background-color: transparent;
border: none;
border-bottom: 1px solid #fff;
border-bottom: 1px solid var(--color-background);
box-sizing: border-box;
padding-bottom: 0.3rem;
padding-right: 2rem;
color: #fff;
color: var(--color-background);
width: 15rem;
}
#subscribe-form input:focus-visible {
outline: none;
}
#subscribe-form button[type="submit"] {
color: #fff;
color: var(--color-background);
position: absolute;
top: 0;
right: 0;

4
assets/css/src/print.css
View file

@ -27,7 +27,7 @@
body {
padding-top: 4rem;
color: #000;
color: var(--color-primary);
}
.panel {
@ -44,7 +44,7 @@
}
#logo #actuel {
color: #000;
color: var(--color-primary);
opacity: 0.8;
}

4
assets/css/src/tabs.css
View file

@ -56,7 +56,7 @@ button.toggle.right.open::before {
.active-tab {
scrollbar-width: thin;
scrollbar-color: #fff transparent;
scrollbar-color: var(--color-background) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -71,7 +71,7 @@ button.toggle.right.open::before {
}
.active-tab::-webkit-scrollbar-thumb {
background-color: #fff;
background-color: var(--color-background);
border-radius: 1px;
border: none;
}