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

print style
All checks were successful
Deploy / Deploy to Production (push) Successful in 9s
Details

Browse source
This commit is contained in:
isUnknown 2026-03-28 10:23:58 +01:00
parent 6c1a8c8850
commit a2e65635fb
8 changed files with 98 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

54
assets/css/src/_print.scss
View file

@ -1,66 +1,42 @@
@media print { @media print {
/* Hide header / footer infos. */ .panel,
nav,
@page { .toggle-light {
margin: 0;
size: auto;
@top-left {
content: none;
}
@top-right {
content: none;
}
@top-center {
content: none;
}
@bottom-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-center {
content: none;
}
}
.panel, nav {
display: none; display: none;
} }
/* regle du light mode dupliqué*/ :root,
:root { [data-theme="dark"] {
--color-background: #ffffff; --color-background: #ffffff;
--color-primary: #000; --color-primary: #000;
--color-secondary-rgb: 140, 140, 140; --color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240; --font-weight-light: 240;
} }
body { body {
padding-top: 4rem; padding-top: 8rem;
background-image: none; background-image: none;
background-color: var(--color-background) !important; background-color: var(--color-background) !important;
} }
.minimized #inactuel{ .minimized #inactuel {
transform: none !important; transform: none !important;
margin: 0 !important; margin: 0 !important;
} }
#logo h1{ #logo h1 {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto; grid-template-rows: auto;
} }
#logo #actuel, #logo #inactuel{ #logo #actuel,
#logo #inactuel {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
#logo #actuel { #logo #actuel {
font-weight: 550; font-weight: 550;
color: rgb(254, 250, 254) !important; 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); 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; z-index: 100;
} }
#logo #inactuel { #logo #inactuel {
@ -84,8 +60,12 @@
text-decoration: none !important; text-decoration: none !important;
} }
#chapo {
page-break-after: always;
}
article #main-content { article #main-content {
width: 60%; width: 70%;
margin: auto; margin: auto;
} }
} }

12
assets/css/src/_toggle-light-mode.scss
View file

@ -1,4 +1,4 @@
.theme-toggler { .toggle-light {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -11,7 +11,7 @@
); );
z-index: 1; z-index: 1;
} }
.theme-toggler-icon { .toggle-light-icon {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
@ -20,14 +20,14 @@
mask-size: cover; mask-size: cover;
-webkit-mask-size: cover; -webkit-mask-size: cover;
mask: var(--icon-theme-toggler) no-repeat center; mask: var(--icon-toggle-light) no-repeat center;
-webkit-mask: var(--icon-theme-toggler) no-repeat center; -webkit-mask: var(--icon-toggle-light) no-repeat center;
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.theme-toggler { .toggle-light {
margin-bottom: calc((var(--unit--vertical) / 2) / 2); margin-bottom: calc((var(--unit--vertical) / 2) / 2);
} }
.theme-toggler-icon { .toggle-light-icon {
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
} }

78
assets/css/style.css
View file

@ -1,4 +1,3 @@
@charset "UTF-8";
html, html,
body, body,
h1, h1,
@ -1155,7 +1154,7 @@ body.full-width #main-content {
background-color: transparent; background-color: transparent;
} }
} }
.theme-toggler { .toggle-light {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -1165,61 +1164,40 @@ body.full-width #main-content {
z-index: 1; z-index: 1;
} }
.theme-toggler-icon { .toggle-light-icon {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
background-color: var(--color-primary); background-color: var(--color-primary);
mask-size: cover; mask-size: cover;
-webkit-mask-size: cover; -webkit-mask-size: cover;
mask: var(--icon-theme-toggler) no-repeat center; mask: var(--icon-toggle-light) no-repeat center;
-webkit-mask: var(--icon-theme-toggler) no-repeat center; -webkit-mask: var(--icon-toggle-light) no-repeat center;
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.theme-toggler { .toggle-light {
margin-bottom: calc(var(--unit--vertical) / 2 / 2); margin-bottom: calc(var(--unit--vertical) / 2 / 2);
} }
.theme-toggler-icon { .toggle-light-icon {
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
} }
} }
@media print { @media print {
/* Hide header / footer infos. */ .panel,
@page { nav,
margin: 0; .toggle-light {
size: auto;
@top-left {
content: none;
}
@top-right {
content: none;
}
@top-center {
content: none;
}
@bottom-left {
content: none;
}
@bottom-right {
content: none;
}
@bottom-center {
content: none;
}
}
.panel, nav {
display: none; display: none;
} }
/* regle du light mode dupliqué*/ :root,
:root { [data-theme=dark] {
--color-background: #ffffff; --color-background: #ffffff;
--color-primary: #000; --color-primary: #000;
--color-secondary-rgb: 140, 140, 140; --color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240; --font-weight-light: 240;
} }
body { body {
padding-top: 4rem; padding-top: 8rem;
background-image: none; background-image: none;
background-color: var(--color-background) !important; background-color: var(--color-background) !important;
} }
@ -1232,7 +1210,8 @@ body.full-width #main-content {
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto; grid-template-rows: auto;
} }
#logo #actuel, #logo #inactuel { #logo #actuel,
#logo #inactuel {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
@ -1258,8 +1237,11 @@ body.full-width #main-content {
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
#chapo {
page-break-after: always;
}
article #main-content { article #main-content {
width: 60%; width: 70%;
margin: auto; margin: auto;
} }
} }
@ -1332,19 +1314,19 @@ body.full-width #main-content {
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
} }
[data-theme=dark] { @media screen {
--color-background: #000; [data-theme=dark] {
--color-primary: #ffffff; --color-background: #000;
--font-weight-light: 200; --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;
}
} }
[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) { @media screen and (min-width: 640px) {
:root { :root {
--unit--horizontal: 2.5vw; --unit--horizontal: 2.5vw;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

22
assets/css/style.scss
View file

@ -47,18 +47,20 @@
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
} }
[data-theme="dark"] { @media screen {
--color-background: #000; [data-theme="dark"] {
--color-primary: #ffffff; --color-background: #000;
--color-primary: #ffffff;
--font-weight-light: 200; --font-weight-light: 200;
} }
[data-theme="light"] { [data-theme="light"] {
--color-background: #ffffff; --color-background: #ffffff;
--color-primary: #000; --color-primary: #000;
--color-secondary-rgb: 140, 140, 140; --color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240; --font-weight-light: 240;
}
} }
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {

6
assets/js/light-mode.js
View file

@ -10,7 +10,9 @@
function init() { function init() {
const storedPreference = localStorage.getItem("theme"); const storedPreference = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const systemPrefersDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const theme = storedPreference || (systemPrefersDark ? "dark" : "light"); const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
// const theme = "dark"; // const theme = "dark";
@ -21,7 +23,7 @@
init(); init();
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const togglers = document.querySelectorAll(".theme-toggler"); const togglers = document.querySelectorAll(".toggle-light");
togglers.forEach((toggler) => { togglers.forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode); toggler.addEventListener("click", toggleDarkMode);
}); });

24
assets/js/script.js
View file

@ -1,3 +1,23 @@
const root = document.documentElement;
function initTheme() {
const storedPreference = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
root.setAttribute("data-theme", theme);
}
function toggleDarkMode() {
const currentTheme = root.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
root.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
}
initTheme();
const verticalUnit = getUnit("--unit--vertical"); const verticalUnit = getUnit("--unit--vertical");
function getUnit(id) { function getUnit(id) {
@ -173,6 +193,10 @@ document.addEventListener("DOMContentLoaded", () => {
fixFootNotes(); fixFootNotes();
document.querySelectorAll(".toggle-light").forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode);
});
window.addEventListener("keyup", (event) => { window.addEventListener("keyup", (event) => {
if (event.key === "Escape") { if (event.key === "Escape") {
closeAllPanels(); closeAllPanels();

9
site/snippets/header.php
View file

@ -22,9 +22,6 @@ $entryTopPos ??= 20;
</script> </script>
<script defer src="<?= url('assets/js/ragadjust.js') ?>"> <script defer src="<?= url('assets/js/ragadjust.js') ?>">
</script> </script>
<script defer src="<?= url('assets/js/light-mode.js') ?>">
</script>
<meta name="robots" content="noindex, nofollow, noarchive"> <meta name="robots" content="noindex, nofollow, noarchive">
<?php if ($page->template() == 'linear' || $page->template() == 'grid'): ?> <?php if ($page->template() == 'linear' || $page->template() == 'grid'): ?>
@ -69,7 +66,7 @@ $entryTopPos ??= 20;
:root { :root {
--icon-search: url("<?= url('assets/images/icons/search.svg') ?>"); --icon-search: url("<?= url('assets/images/icons/search.svg') ?>");
--icon-close: url("<?= url('assets/images/icons/close.svg') ?>"); --icon-close: url("<?= url('assets/images/icons/close.svg') ?>");
--icon-theme-toggler: url("<?= url('assets/images/icons/circle-half.svg') ?>"); --icon-toggle-light: url("<?= url('assets/images/icons/circle-half.svg') ?>");
} }
</style> </style>
@ -86,8 +83,8 @@ $entryTopPos ??= 20;
class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>"
data-has-toc="<?= $page->hasToc() ? 'true' : 'false' ?>" data-has-toc="<?= $page->hasToc() ? 'true' : 'false' ?>"
data-template="<?= $page->template() ?>"> data-template="<?= $page->template() ?>">
<button class="theme-toggler" data-theme-toggler> <button class="toggle-light" data-toggle-light>
<span class="theme-toggler-icon"></span> <span class="toggle-light-icon"></span>
</button> </button>
<header id="main-header"> <header id="main-header">
<a id="logo" <a id="logo"