refactor : merge light-mode into script.js, rename panel to side-panel, fix print styles

Integrate light-mode.js into script.js, unify .panel/.side-panel classes
into .side-panel, scope theme variables to @media screen for proper
print light mode, and add page-break after chapo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/src/_print.scss

@@ -1,5 +1,5 @@
 @media print {
-  .panel,
+  .side-panel,
   nav,
   .toggle-light {
     display: none;

assets/css/src/_side-panel.scss

@@ -10,11 +10,10 @@
   display: none;
 }
 
-.panel {
+.side-panel {
   display: none;
   position: fixed;
   overflow: auto;
-  width: 100vw;
   height: 100dvh;
   top: 0;
   background-color: var(--color-background);
@@ -26,11 +25,11 @@
   flex-direction: column;
 }
 
-.panel.panel--visible {
+.side-panel.side-panel--visible {
   display: flex;
 }
 
-.panel header {
+.side-panel header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -110,7 +109,7 @@ button.search__icon {
   cursor: pointer;
 }
 
-.panel__collection {
+.side-panel__collection {
   scroll-behavior: smooth;
   height: 100%;
   overflow: auto;
@@ -120,7 +119,7 @@ button.search__icon {
 footer {
   width: 100%;
 }
-.panel-close {
+.side-panel-close {
   position: fixed;
   box-sizing: border-box;
   bottom: 0;
@@ -138,27 +137,27 @@ footer {
 
 /* ================= LISTS ================= */
 
-.panel__toggle-btn {
+.side-panel__toggle-btn {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--unit--vertical);
 }
 
-.panel__toggle-icon {
+.side-panel__toggle-icon {
   color: var(--color-secondary);
   font-size: var(--font-size-xl);
 }
 
 /* ================= YEARS ================= */
-.panel__collection .panel__item:last-child {
+.side-panel__collection .side-panel__item:last-child {
   margin-bottom: 6rem;
 }
-.panel-item-content__edito {
+.side-panel-item-content__edito {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
 
-.panel-item-content__edito p:not(:last-child) {
+.side-panel-item-content__edito p:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 
@@ -166,29 +165,29 @@ button.see-more {
   margin-bottom: var(--unit--vertical);
 }
 
-.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
+.side-panel-item-content__texts:not(.side-panel__collection .side-panel-item-content__texts) {
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 /* ================= TEXT ITEM ================= */
-.panel .text:first-child,
-.panel .text:last-child {
+.side-panel .text:first-child,
+.side-panel .text:last-child {
   margin-bottom: calc(var(--unit--vertical) * 2);
 }
 
-.panel__collection--years .text:first-child .text__title {
+.side-panel__collection--years .text:first-child .text__title {
   display: inline-block;
   padding-left: var(--unit--horizontal);
 }
 
-.panel .text__subtitle {
+.side-panel .text__subtitle {
   margin-bottom: calc(var(--unit--vertical) / 4);
 }
 
-.panel__collection--years .text:first-child .text__infos {
+.side-panel__collection--years .text:first-child .text__infos {
   padding-left: var(--unit--horizontal);
 }
-.panel__collection--years .text:first-child .text__infos::before {
+.side-panel__collection--years .text:first-child .text__infos::before {
   content: "";
   position: absolute;
   left: 0;
@@ -201,23 +200,19 @@ button.see-more {
 @media screen and (min-width: 640px) {
   .side-panel {
     width: 40rem;
-  }
-
-  .panel {
     z-index: 4;
-    width: var(--padding-body);
   }
 
-  .panel-close {
+  .side-panel-close {
     display: none;
   }
 
-  .panel--right {
+  .side-panel--right {
     right: auto;
     left: calc(-100vw - 1px);
   }
 
-  .panel--right.open {
+  .side-panel--right.open {
     left: 0;
   }
 }

assets/css/style.css

@@ -664,11 +664,10 @@ button.toggle.right::before {
   display: none;
 }
 
-.panel {
+.side-panel {
   display: none;
   position: fixed;
   overflow: auto;
-  width: 100vw;
   height: 100dvh;
   top: 0;
   background-color: var(--color-background);
@@ -679,11 +678,11 @@ button.toggle.right::before {
   flex-direction: column;
 }
 
-.panel.panel--visible {
+.side-panel.side-panel--visible {
   display: flex;
 }
 
-.panel header {
+.side-panel header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -773,7 +772,7 @@ button.search__icon {
   cursor: pointer;
 }
 
-.panel__collection {
+.side-panel__collection {
   scroll-behavior: smooth;
   height: 100%;
   overflow: auto;
@@ -784,7 +783,7 @@ footer {
   width: 100%;
 }
 
-.panel-close {
+.side-panel-close {
   position: fixed;
   box-sizing: border-box;
   bottom: 0;
@@ -801,28 +800,28 @@ footer {
 }
 
 /* ================= LISTS ================= */
-.panel__toggle-btn {
+.side-panel__toggle-btn {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--unit--vertical);
 }
 
-.panel__toggle-icon {
+.side-panel__toggle-icon {
   color: var(--color-secondary);
   font-size: var(--font-size-xl);
 }
 
 /* ================= YEARS ================= */
-.panel__collection .panel__item:last-child {
+.side-panel__collection .side-panel__item:last-child {
   margin-bottom: 6rem;
 }
 
-.panel-item-content__edito {
+.side-panel-item-content__edito {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
 
-.panel-item-content__edito p:not(:last-child) {
+.side-panel-item-content__edito p:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 
@@ -830,30 +829,30 @@ button.see-more {
   margin-bottom: var(--unit--vertical);
 }
 
-.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
+.side-panel-item-content__texts:not(.side-panel__collection .side-panel-item-content__texts) {
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 /* ================= TEXT ITEM ================= */
-.panel .text:first-child,
-.panel .text:last-child {
+.side-panel .text:first-child,
+.side-panel .text:last-child {
   margin-bottom: calc(var(--unit--vertical) * 2);
 }
 
-.panel__collection--years .text:first-child .text__title {
+.side-panel__collection--years .text:first-child .text__title {
   display: inline-block;
   padding-left: var(--unit--horizontal);
 }
 
-.panel .text__subtitle {
+.side-panel .text__subtitle {
   margin-bottom: calc(var(--unit--vertical) / 4);
 }
 
-.panel__collection--years .text:first-child .text__infos {
+.side-panel__collection--years .text:first-child .text__infos {
   padding-left: var(--unit--horizontal);
 }
 
-.panel__collection--years .text:first-child .text__infos::before {
+.side-panel__collection--years .text:first-child .text__infos::before {
   content: "";
   position: absolute;
   left: 0;
@@ -866,19 +865,16 @@ button.see-more {
 @media screen and (min-width: 640px) {
   .side-panel {
     width: 40rem;
-  }
-  .panel {
     z-index: 4;
-    width: var(--padding-body);
   }
-  .panel-close {
+  .side-panel-close {
     display: none;
   }
-  .panel--right {
+  .side-panel--right {
     right: auto;
     left: calc(-100vw - 1px);
   }
-  .panel--right.open {
+  .side-panel--right.open {
     left: 0;
   }
 }
@@ -1184,7 +1180,7 @@ body.full-width #main-content {
   }
 }
 @media print {
-  .panel,
+  .side-panel,
   nav,
   .toggle-light {
     display: none;

assets/js/script.js

@@ -149,24 +149,24 @@ function subscribe(event) {
   }
 }
 
-const panels = document.querySelectorAll(".panel[data-panel]");
+const panels = document.querySelectorAll(".side-panel[data-panel]");
 const navOverlay = document.querySelector("#nav-overlay");
 
 function closeAllPanels() {
-  panels.forEach(panel => panel.classList.remove("panel--visible"));
+  panels.forEach(panel => panel.classList.remove("side-panel--visible"));
   navOverlay.classList.remove("nav-overlay--visible");
   document.body.classList.remove("no-scroll");
 }
 
 function openPanel(name, view) {
-  const panel = document.querySelector(`.panel[data-panel="${name}"]`);
+  const panel = document.querySelector(`.side-panel[data-panel="${name}"]`);
   if (panel) {
     if (view) {
       panel.querySelectorAll('[data-view]').forEach(v => v.classList.add('hidden'));
       const target = panel.querySelector(`[data-view="${view}"]`);
       if (target) target.classList.remove('hidden');
     }
-    panel.classList.add("panel--visible");
+    panel.classList.add("side-panel--visible");
     navOverlay.classList.add("nav-overlay--visible");
     document.body.classList.add("no-scroll");
   }
@@ -210,7 +210,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const navSortBtns = document.querySelectorAll(".side-panel .sort-btn");
   const navSections = document.querySelectorAll(
-    ".panel__all-texts, .panel__collection"
+    ".side-panel__all-texts, .side-panel__collection"
   );
 
   navSortBtns.forEach((sortBtn) => {
@@ -219,9 +219,9 @@ document.addEventListener("DOMContentLoaded", () => {
       sortBtn.classList.add("active");
 
       const sections = {
-        "sort-btn--all": ".panel__all-texts",
-        "sort-btn--years": ".panel__collection--years",
-        "sort-btn--categories": ".panel__collection--categories",
+        "sort-btn--all": ".side-panel__all-texts",
+        "sort-btn--years": ".side-panel__collection--years",
+        "sort-btn--categories": ".side-panel__collection--categories",
       };
 
       navSections.forEach((navSection) => navSection.classList.add("hidden"));
@@ -240,7 +240,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  document.querySelectorAll(".panel-close").forEach((btn) => {
+  document.querySelectorAll(".side-panel-close").forEach((btn) => {
     btn.addEventListener("click", closeAllPanels);
   });
 

site/snippets/nav__texts--all.php

@@ -1,4 +1,4 @@
-<ul class="texts panel__all-texts panel-item-content__texts hidden">
+<ul class="texts side-panel__all-texts side-panel-item-content__texts hidden">
   <?php foreach(page('textes')->grandChildren()->sortBy('published', 'desc') as $article): ?>
   <?php
       $author = $article->author()->toPage() == null ? 'inconnu' : $article->author()->toPage()->title();

site/snippets/nav__texts--collection.php

@@ -1,23 +1,23 @@
 <ul
-  class="panel__collection panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>">
+  class="side-panel__collection side-panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>">
   <?php foreach($kirby->collection($collection) as $section): ?>
-  <li class="panel__item " x-data='{ isOpen: false }'>
+  <li class="side-panel__item " x-data='{ isOpen: false }'>
     <a class="no-underline" href="#<?= $section->slug() ?>"
       id="<?= $section->slug() ?>">
-      <button class="panel__toggle-btn" @click="isOpen = !isOpen">
+      <button class="side-panel__toggle-btn" @click="isOpen = !isOpen">
         <h3><?= $section->title() ?></h3>
-        <div class="panel__toggle-icon" x-text="isOpen || search.length > 0 ? '-' : '+'"></div>
+        <div class="side-panel__toggle-icon" x-text="isOpen || search.length > 0 ? '-' : '+'"></div>
       </button>
     </a>
-    <div class="panel-item-content" x-show="isOpen || search.length > 0" x-data='{ edito: false }'>
+    <div class="side-panel-item-content" x-show="isOpen || search.length > 0" x-data='{ edito: false }'>
       <?php if ($collection === 'years'): ?>
-      <div class="panel-item-content__edito" :class="edito ? '' : 'short'" x-show="search.length === 0">
+      <div class="side-panel-item-content__edito" :class="edito ? '' : 'short'" x-show="search.length === 0">
         <?= $section->edito() ?>
       </div>
       <button :class="edito ? 'open' : 'close'" x-show="search.length === 0"
         class="see-more toggle-btn toggle-btn--left" @click="edito = !edito">Lire</button>
       <?php endif ?>
-      <ul class="panel-item-content__texts texts">
+      <ul class="side-panel-item-content__texts texts">
         <?php $articles = method_exists($section, 'allTexts') ? $section->allTexts() : $section->children(); ?>
         <?php foreach($articles as $article): ?>
         <?php

site/snippets/side-panel.php

@@ -1,4 +1,4 @@
-<div class="side-panel panel" data-panel="side-panel">
+<div class="side-panel" data-panel="side-panel">
   <div class="side-panel__view" data-view="nav" x-data="{search: ''}">
     <header>
       <p class="sort-btns">
@@ -27,5 +27,5 @@
   </div>
   <?php endif ?>
 
-  <button class="less panel-close">fermer</button>
+  <button class="less side-panel-close">fermer</button>
 </div>