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

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

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

78
assets/css/style.css
View file

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

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);
}
[data-theme="dark"] {
--color-background: #000;
--color-primary: #ffffff;
@media screen {
[data-theme="dark"] {
--color-background: #000;
--color-primary: #ffffff;
--font-weight-light: 200;
}
[data-theme="light"] {
--color-background: #ffffff;
--color-primary: #000;
--font-weight-light: 200;
}
[data-theme="light"] {
--color-background: #ffffff;
--color-primary: #000;
--color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240;
--color-secondary-rgb: 140, 140, 140;
--font-weight-light: 240;
}
}
@media screen and (min-width: 640px) {

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

@ -10,7 +10,9 @@
function init() {
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 = "dark";
@ -21,9 +23,9 @@
init();
document.addEventListener("DOMContentLoaded", function () {
const togglers = document.querySelectorAll(".theme-toggler");
const togglers = document.querySelectorAll(".toggle-light");
togglers.forEach((toggler) => {
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");
function getUnit(id) {
@ -173,6 +193,10 @@ document.addEventListener("DOMContentLoaded", () => {
fixFootNotes();
document.querySelectorAll(".toggle-light").forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode);
});
window.addEventListener("keyup", (event) => {
if (event.key === "Escape") {
closeAllPanels();

9
site/snippets/header.php
View file

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