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

Merge branch 'light_mod' of https://forge.studio-variable.com/Adrien/actuel-inactuel into light_mod

Browse source
This commit is contained in:
antonin gallon 2026-02-16 11:23:12 +01:00
commit e82ad2f4a8
78 changed files with 3918 additions and 6986 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) {

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

@ -32,11 +32,13 @@
justify-content: center;
width: 100%;
outline: none;
border-top: 1px solid #fff;
border-top: 1px solid var(--color-primary);
font-size: var(--font-size-m);
background-color: #000;
background-color: var(--color-background);
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
color: var(--color-primary);
line-height: 1;
}
}

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

@ -138,3 +138,5 @@ button.less::after {
width: 100%;
margin-top: calc(var(--unit--vertical) / 2);
}

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

@ -44,15 +44,22 @@ main article > div {
#logo #actuel {
font-weight: 550;
}
[data-theme="light"] #logo #actuel {
font-weight: 550;
color: white;
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 {
mix-blend-mode: difference;
}
#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;
@ -98,9 +105,10 @@ button.toggle.right::before {
.page-cover .links {
position: absolute;
bottom: 8px;
bottom: calc(var(--unit--vertical) / 2);
width: 100%;
box-sizing: border-box;
}
.page-cover .links li {

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;
}

43
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,33 @@
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-primary);
font-size: var(--font-size-m);
font-weight: var(--font-weight-light);
caret-color: var(--color-primary);
}
.search__input::placeholder {
color: var(--color-primary);
font-size: var(--font-size-sm);
letter-spacing: 1px;
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,11 +127,13 @@ footer {
justify-content: center;
width: 100%;
outline: none;
border-top: 1px solid #fff;
border-top: 1px solid var(--color-primary);
font-size: var(--font-size-m);
background-color: #000;
background-color: var(--color-background);
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
color: var(--color-primary);
line-height: 1;
}
/* ================= LISTS ================= */
@ -180,7 +195,7 @@ button.see-more {
top: 0;
height: 100%;
width: 1px;
background-color: #fff;
background-color: var(--color-primary);
}
@media screen and (min-width: 640px) {

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

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

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

@ -1,5 +1,6 @@
@media print {
/* Hide header / footer infos. */
@page {
margin: 0;
size: auto;
@ -25,13 +26,45 @@
}
}
body {
padding-top: 4rem;
color: #000;
.panel, nav {
display: none;
}
.panel {
display: none;
/* regle du light mode dupliqué*/
:root {
--color-background: #ffffff;
--color-primary: #000;
--color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240;
}
body {
padding-top: 4rem;
background-image: none;
background-color: var(--color-background) !important;
}
.minimized #inactuel{
transform: none !important;
margin: 0 !important;
}
#logo h1{
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
}
#logo #actuel, #logo #inactuel{
grid-column: 1;
grid-row: 1;
}
#logo #actuel {
font-weight: 550;
color: rgb(254, 250, 254) !important;
text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary),0 1px var(--color-primary);
z-index: 100;
}
#logo #inactuel {
z-index: 0;
}
.main-title.fs-xxl {
@ -43,15 +76,6 @@
position: relative;
}
#logo #actuel {
color: #000;
opacity: 0.8;
}
#logo #inactuel {
color: rgb(86, 217, 163);
}
#entry-btns {
display: none;
}

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;
}

31
assets/css/src/toggle-light-mode.css Normal file
View file

@ -0,0 +1,31 @@
.theme-toggler{
position: fixed;
right: 0;
bottom: 0;
padding: calc((var(--unit--vertical) / 2) / 2) calc(var(--unit--horizontal) / 2);
margin: calc((var(--unit--vertical) / 2) / 2) calc(var(--unit--horizontal) / 2);
margin-bottom: calc(var(--unit--vertical) - ((var(--unit--vertical) / 2) / 2));
z-index: 100;
}
.theme-toggler-icon {
width: 1.2rem;
height: 1.2rem;
background-color: var(--color-primary);
mask-size: cover;
-webkit-mask-size: cover;
mask: var(--icon-theme-toggler) no-repeat center;
-webkit-mask: var(--icon-theme-toggler) no-repeat center;
}
@media screen and (max-width: 640px) {
.theme-toggler{
margin-bottom: calc((var(--unit--vertical) / 2) / 2);
}
.theme-toggler-icon {
width: 1.1rem;
height: 1.1rem;
}
}

25
assets/css/style.css
View file

@ -10,10 +10,13 @@
@import url("src/grid.css");
@import url("src/newsletter.css");
@import url("src/footer.css");
@import url("src/toggle-light-mode.css");
@import url("src/print.css");
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
/* --color-secondary-rgb: 120, 171, 150;
@ -56,6 +59,20 @@
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-theme="dark"] {
--color-background: #000;
--color-primary: #ffffff;
--font-weight-light: 200;
}
[data-theme="light"] {
--color-background: #ffffff;
--color-primary: #000;
--color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240;
}
@media screen and (min-width: 640px) {
:root {
--unit--horizontal: 2.5vw;
@ -67,9 +84,9 @@
--font-size-xl: calc(var(--font-size-l) * 1.5);
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
--font-weight-light: 200;
/* --font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
--font-weight-extra-bold: 550; */
--body-padding: calc(10 * var(--unit--horizontal));
}