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

32
assets/front-comments/style.css
View file

@ -1,5 +1,5 @@
:root {
--fc-border: 2px solid #000;
--fc-border: 2px solid var(--color-primary);
--fc-border-light: 1px solid #999;
--fc-font-size-m: 1.2rem;
--fc-font-size-s: calc(var(--fc-font-size-m) / 1.3);
@ -91,7 +91,7 @@
.fc__edition-panel textarea {
position: relative !important;
resize: none !important;
color: #000 !important;
color: var(--color-primary) !important;
font-family: sans-serif !important;
font-weight: 100 !important;
@ -108,14 +108,14 @@
.fc__edition-panel__btns {
display: flex;
background-color: #fff;
background-color: var(--color-background);
margin-top: 0.5rem;
}
.fc__edition-panel__btns button {
all: initial;
color: #000;
color: var(--color-primary);
font-family: sans-serif;
font-weight: 100;
text-align: center;
@ -124,7 +124,7 @@
width: 100%;
padding: 0.5rem;
border: var(--fc-border) !important;
background-color: #fff;
background-color: var(--color-background);
cursor: pointer;
}
.fc__edition-panel__btns button:first-child {
@ -145,7 +145,7 @@
height: 2.9rem;
scroll-margin-top: 6rem;
color: #000;
color: var(--color-primary);
font-family: sans-serif;
font-size: var(--fc-font-size-m);
font-weight: 500;
@ -162,12 +162,12 @@
width: 20rem;
padding: 1rem;
background-color: #fff;
background-color: var(--color-background);
border: var(--fc-border) !important;
}
.fc__comment * {
color: #000 !important;
color: var(--color-primary) !important;
font-family: sans-serif !important;
font-weight: 100 !important;
}
@ -248,20 +248,20 @@
.fc__context-item:not(:last-child) {
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px dotted #000;
border-bottom: 1px dotted var(--color-primary);
}
.fc__open-window {
background-color: transparent;
border: 1px solid #000;
border: 1px solid var(--color-primary);
border-radius: 0;
cursor: pointer;
margin-left: 1rem;
}
.fc__open-window:hover {
background-color: #000;
color: #fff !important;
background-color: var(--color-primary);
color: var(--color-background) !important;
}
/* ================= END CONTEXT ================= */
@ -281,8 +281,8 @@
border: var(--fc-border);
}
.fc__suggestion:hover {
color: #fff;
background-color: #000;
color: var(--color-background);
background-color: var(--color-primary);
}
.fc__suggestion--edit {
background-color: rgba(0, 0, 0, 0.1) !important;
@ -292,8 +292,8 @@
position: absolute;
z-index: 999;
width: 20vw;
background-color: #fff;
color: #000;
background-color: var(--color-background);
color: var(--color-primary);
border: var(--fc-border);
padding: 1rem;
left: -0.1rem;

3
assets/images/icons/circle-half.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 181 B

29
assets/js/light-mode.js Normal file
View file

@ -0,0 +1,29 @@
(function () {
const root = document.documentElement;
function toggleDarkMode() {
const currentTheme = root.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
root.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
}
function init() {
const storedPreference = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
// const theme = "dark";
root.setAttribute("data-theme", theme);
}
init();
document.addEventListener("DOMContentLoaded", function () {
const togglers = document.querySelectorAll(".theme-toggler");
togglers.forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode);
});
});
})();