send-button : fix remplissage date et changement de statut à l'envoi

Les appels update() et changeStatus() étaient placés après le return,
donc jamais exécutés. Déplacés avant le return dans le bloc try.

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

.forgejo/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    name: Deploy to Production
+    runs-on: docker
+    steps:
+      - name: Checkout code
+        run: |
+          git clone --depth 1 --branch main https://oauth2:${{ github.token }}@forge.studio-variable.com/${{ github.repository }}.git .
+          ls -la
+
+      - name: Deploy via FTP
+        env:
+          USERNAME: ${{ secrets.USERNAME }}
+          PASSWORD: ${{ secrets.PASSWORD }}
+          HOST: ${{ secrets.HOST }}
+        run: |
+          apt-get update -qq && apt-get install -y -qq lftp
+          cat > /tmp/lftp-script.txt <<SCRIPT
+          set ftp:ssl-allow no
+          open -u $USERNAME,$PASSWORD $HOST
+          mirror --reverse --verbose --ignore-time --parallel=10 -x static/ assets assets
+          mirror --reverse --verbose --ignore-time --parallel=10 -x accounts/ -x cache/ -x sessions/ site site
+          quit
+          SCRIPT
+          lftp -f /tmp/lftp-script.txt

.gitignore

@@ -51,12 +51,20 @@ Icon
 
 /site/config/.license
 
-
+# Local files
+# ---------------
 /0_local
 
+# Managed through composer
+# ---------------
 /kirby
 /vendor
 
 /node_modules
 
 /content
+
+# Claude settings
+# ---------------
+.claude
+

assets/css/panel.css

@@ -8,3 +8,25 @@
 .k-panel-menu-button[aria-current] * {
   color: #000;
 }
+
+.k-panel[data-template="year"]
+  .k-section-name-texts
+  .k-list-items
+  .k-item:first-child {
+  margin-bottom: 2rem;
+}
+.k-panel[data-template="year"] .k-section-name-texts .k-list-items::before {
+  content: "Texte princeps";
+  display: block;
+  padding: 0.5rem;
+  padding-bottom: 0.7rem;
+  border-radius: var(--rounded-md) var(--rounded-md) 0 0;
+  transform: translateY(0.3rem);
+
+  background-color: #000;
+  color: #fff;
+}
+
+.k-block-type-quote-citation {
+  font-style: normal;
+}

assets/css/src/_article.scss

@@ -0,0 +1,88 @@
+[data-template="linear"],
+[data-template="grid"] {
+  article #main-content {
+    scroll-margin-block-start: calc(var(--unit--vertical) * 6);
+    padding-bottom: calc(var(--unit--vertical) * 2);
+    margin-top: calc(2 * var(--unit--vertical));
+  }
+
+  #main-content .texts {
+    margin-top: calc(2 * var(--unit--vertical));
+  }
+
+  #main-content .see-more {
+    margin-top: calc(var(--unit--vertical) * 0.5);
+  }
+
+  [data-template="year"] article > h1 {
+    margin-bottom: 0;
+  }
+
+  article #main-content #chapo::after {
+    content: "";
+    display: block;
+    margin-top: calc(2 * var(--unit--vertical));
+    margin-bottom: calc(4 * var(--unit--vertical));
+
+    width: 100%;
+    height: 1px;
+    background-color: var(--color-background);
+  }
+
+  article #main-content li:not(.text) {
+    list-style-type: inherit;
+  }
+
+  article h3,
+  article h4 {
+    scroll-margin-top: calc(var(--unit--vertical) * 1);
+    margin-bottom: calc(1 * var(--unit--vertical));
+  }
+  article h3 {
+    margin-top: calc(3 * var(--unit--vertical));
+  }
+  article h4 {
+    margin-top: calc(2 * var(--unit--vertical));
+  }
+
+  article li,
+  article ol {
+    margin-left: var(--unit--horizontal);
+  }
+
+  article figure {
+    margin: 4rem 0;
+  }
+
+  article figure img {
+    max-width: 100%;
+  }
+
+  // Quotes
+  // ——————
+  blockquote {
+    border-left: 1px solid #fff;
+    margin: calc(var(--unit--vertical) * 2) 0;
+    padding-left: var(--unit--horizontal);
+  }
+  blockquote footer {
+    margin-top: calc(var(--unit--vertical) / 2);
+    font-size: var(--font-size-m);
+  }
+  blockquote.big {
+    font-weight: var(--font-weight-light);
+    font-size: var(--font-size-l);
+  }
+
+  @media screen and (max-width: 640px) {
+    article h3,
+    article h4 {
+      scroll-margin-top: calc(var(--unit--vertical) * 5);
+    }
+  }
+  @media screen and (min-width: 640px) {
+    article #main-content {
+      max-width: auto;
+    }
+  }
+}

assets/css/src/_footer.scss

@@ -0,0 +1,89 @@
+#main-footer {
+  position: fixed;
+  bottom: 0;
+  box-sizing: border-box;
+  border-bottom: 0;
+  z-index: 2;
+}
+
+[data-template="home"] #main-footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+
+#main-footer li:not(.footer-btn-wrapper) {
+  display: none;
+}
+
+#main-footer li {
+  flex: 1;
+}
+#main-footer li > * {
+  width: calc(100% - var(--unit--vertical) * 2);
+}
+
+#main-footer button.plus {
+  transform: translateY(-2px);
+}
+
+[data-template="home"] .title-wrapper button.plus[data-open-panel] {
+  display: inline-block !important;
+}
+
+@media screen and (max-width: 640px) {
+  #main-footer .footer-btn-wrapper button {
+    display: flex;
+    justify-content: center;
+    outline: none;
+    font-size: var(--font-size-m);
+    background-color: var(--color-background);
+    color: var(--color-primary);
+    line-height: 1;
+    padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
+  }
+
+  #main-footer ul {
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    border-top: 1px solid var(--color-primary);
+    background-color: var(--color-background);
+  }
+}
+
+@media screen and (min-width: 640px) {
+  #main-footer li {
+    display: block !important;
+  }
+  #main-footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: var(--body-padding);
+    background-color: transparent;
+    padding: var(--unit--vertical) var(--unit--horizontal);
+  }
+  #main-footer ul {
+    display: block;
+  }
+
+  #main-footer button.plus {
+    margin-bottom: var(--unit--vertical);
+  }
+
+  [data-template="home"] #main-footer .footer-btn-wrapper {
+    display: none !important;
+  }
+
+  .footer-btn-wrapper {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+  }
+
+  .side-panel-button-wrapper {
+    position: fixed;
+    top: 15vw;
+  }
+}

assets/css/src/_generic.scss

@@ -74,6 +74,18 @@ body {
   opacity: var(--opacity-light);
 }
 
+.footnote::before {
+  content: "[";
+}
+.footnote::after {
+  content: "]";
+}
+
+/* ================= COLORS ================= */
+.texts .text {
+  margin-bottom: var(--unit--vertical);
+}
+
 /* ================= COLORS ================= */
 .color {
   color: var(--color);
@@ -84,7 +96,8 @@ body {
 
 /* ================= BUTTONS ================= */
 .toggle-btn--left::after,
-button.plus::after {
+button.plus::after,
+button.less::after {
   margin-left: var(--unit--horizontal);
 }
 
@@ -92,7 +105,8 @@ button.plus::after {
 button.plus::after {
   content: "+";
 }
-.toggle-btn--left.open::after {
+.toggle-btn--left.open::after,
+button.less::after {
   content: "-";
 }
 .toggle-btn--right::before {
@@ -108,3 +122,19 @@ button.plus::after {
 .transition {
   transition: all 0.5s var(--curve-sine);
 }
+
+.short {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+
+  /* Do not remove : required not to crop letters descenders */
+  padding-bottom: 0.16rem;
+  height: 8.5rem;
+}
+
+.see-more {
+  width: 100%;
+  margin-top: calc(var(--unit--vertical) / 2);
+}

assets/css/src/_grid.scss

@@ -0,0 +1,45 @@
+body.full-width #desktop-nav {
+  height: auto;
+}
+body.full-width #desktop-nav .empty {
+  height: calc(var(--unit--vertical) / 2);
+}
+body.full-width #main-content {
+  position: absolute;
+  left: 0;
+  width: 100vw;
+  padding: 0 var(--unit--horizontal) var(--unit--vertical)
+    var(--unit--horizontal);
+  box-sizing: border-box;
+}
+
+.grid .column {
+  grid-column: span var(--span);
+}
+
+.grid[data-columns="1"] .column {
+  grid-column: 11 / span 20;
+}
+
+[data-template="grid"] main #main-content {
+  margin-left: inherit;
+}
+
+@media screen and (max-width: 640px) {
+  .grid .column:not(:last-child) {
+    margin-bottom: calc(2 * var(--unit--vertical));
+  }
+}
+
+@media screen and (min-width: 640px) {
+  [data-template="grid"] main #main-content {
+    margin-left: calc(0px - calc(4 * var(--unit--horizontal)));
+  }
+
+  [data-template="grid"] .grid {
+    display: grid;
+    grid-template-columns: repeat(39, 1fr);
+    column-gap: var(--unit--horizontal);
+    margin-bottom: calc(var(--unit--vertical) * 2);
+  }
+}

assets/css/src/_header.scss

@@ -0,0 +1,182 @@
+main {
+  pointer-events: none;
+}
+
+main article > div {
+  pointer-events: all;
+}
+
+.page-cover > * {
+  pointer-events: all;
+}
+
+#main-header {
+  position: fixed;
+  z-index: 2;
+  box-sizing: border-box;
+  width: 100vw;
+  padding-top: calc(var(--unit--vertical) / 2);
+}
+
+[data-template="home"] #main-header {
+  pointer-events: none;
+}
+
+#logo * {
+  font-size: 25.3vw;
+  font-weight: var(--font-weight-extra-bold);
+}
+
+#logo span {
+  height: 20vw;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 3vw;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#logo {
+  text-align: right;
+}
+
+#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;
+  transform: translateX(-1px) translateY(-1px);
+}
+
+#main-header.minimized #inactuel:not([data-template="home"] *) {
+  transform: translateX(-1px) translateY(-1px) !important;
+}
+
+.page-cover,
+article > h1 {
+  padding-top: calc(50vw);
+}
+
+.page-cover {
+  position: relative;
+  height: 100svh;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit--vertical);
+}
+
+[data-template="home"] .page-cover {
+  padding-top: calc(42.5vw);
+}
+
+.page-cover .title-wrapper h1 {
+  margin-bottom: calc(0.255 * var(--unit--vertical));
+}
+
+.page-cover .text-wrapper {
+  height: 100%;
+  overflow: auto;
+}
+
+button.toggle.left::after,
+button.toggle.right::before {
+  transition: all 0.5s var(--curve-sine);
+  content: "+";
+}
+
+.page-cover .links {
+  position: absolute;
+  bottom: calc(var(--unit--vertical) / 2);
+  width: 100%;
+  box-sizing: border-box;
+  
+}
+
+.page-cover .links li {
+  display: inline-block;
+  margin-right: var(--unit--horizontal);
+}
+
+[data-template="author"] .page-cover,
+[data-template="category"] .page-cover,
+[data-template="year"] .page-cover,
+[data-template="email"] .page-cover,
+[data-template="error"] .page-cover,
+[data-template="info"] .page-cover {
+  height: initial !important;
+}
+[data-template="author"] .page-cover .links,
+[data-template="category"] .page-cover .links,
+[data-template="year"] .page-cover .links,
+[data-template="email"] .page-cover .links,
+[data-template="error"] .page-cover .links,
+[data-template="info"] .page-cover .links {
+  display: none;
+}
+
+@media screen and (min-width: 640px) {
+  body:not([data-template="home"]) #main-header {
+    width: var(--body-padding);
+  }
+  #logo * {
+    font-size: 26.65vw;
+  }
+  #logo span {
+    padding-right: 1vw;
+  }
+  body:not([data-template="home"]) #logo * {
+    font-size: 5.6vw;
+  }
+  body:not([data-template="home"]) #logo span {
+    height: 5vw;
+    padding-right: calc(var(--unit--horizontal) - 0.3vw);
+  }
+  body:not([data-template="home"]) #main-header.minimized #inactuel {
+    margin-top: -4.9vw;
+    transform: translateX(-2px) translateY(-2px);
+  }
+
+  .page-cover:not(
+      [data-template="author"] .page-cover,
+      [data-template="year"] .page-cover,
+      [data-template="category"] .page-cover
+    ) {
+    height: 100vh;
+  }
+
+  .page-cover,
+  article > h1 {
+    padding-top: 15vw;
+  }
+  .page-cover {
+    min-height: calc(22 * var(--unit--vertical));
+  }
+
+  [data-template="home"] .page-cover {
+    padding-top: calc(42.5vw) !important;
+  }
+
+  .page-cover .links {
+    display: none;
+  }
+}

assets/css/src/_home.scss

@@ -0,0 +1,9 @@
+.main-edito-btn {
+  display: inline-block;
+  margin-right: calc(2 * var(--unit--horizontal));
+}
+
+#main-edito {
+  margin-top: calc(var(--unit--vertical) * 4);
+  scroll-margin-block-start: 25vw;
+}

assets/css/src/_html.scss

@@ -8,15 +8,32 @@ body {
 
 main {
   padding: 0 var(--unit--horizontal);
+  padding-bottom: calc(2 * var(--unit--vertical)) !important;
 }
-[data-template="info"] main {
+/* [data-template="info"] main {
   margin-top: calc(var(--unit--vertical) * 2);
-}
+} */
 
 hr {
-  height: 1px;
   border: none;
-  background-color: var(--color-primary);
+  margin: calc(var(--unit--vertical) * 2) 0;
+}
+
+hr::before,
+hr::after {
+  display: flex;
+  justify-content: center;
+
+  color: #fff;
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-light);
+  line-height: 0.8;
+}
+hr::before {
+  content: "+";
+}
+hr::after {
+  content: "+ +";
 }
 
 nav hr {
@@ -38,7 +55,7 @@ html {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+  scrollbar-color: var(--color-primary) transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -53,11 +70,24 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--color-primary);
   border-radius: 0px;
   border: none;
 }
 
+code {
+  font-family: monospace;
+  font-size: 1rem;
+  padding: 0.1rem 0.4rem;
+  background-color: rgba(255, 255, 255, 0.7);
+  color: #000;
+}
+
+[data-theme="light"] code {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #ffff;
+}
+
 @media screen and (min-width: 640px) {
   body.full-width {
     --padding-body: calc(var(--unit--horizontal) * 10);
@@ -69,6 +99,7 @@ html {
   }
 
   main {
-    padding: 0 var(--body-padding);
+    width: min(60vw, 45rem);
+    padding-left: var(--body-padding);
   }
 }

assets/css/src/_newsletter.scss

@@ -0,0 +1,35 @@
+#subscribe-btn-wrapper {
+  height: 2.5rem;
+  margin-bottom: 0.2rem;
+}
+
+#subscribe-form {
+  position: relative;
+  width: fit-content;
+}
+
+#subscribe-form input {
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  padding-bottom: 0.3rem;
+  padding-right: 2rem;
+  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: var(--color-primary);
+  position: absolute;
+  top: 0;
+  right: 0;
+}

assets/css/src/_print.scss

@@ -0,0 +1,71 @@
+@media print {
+  .side-panel,
+  nav,
+  .toggle-light {
+    display: none;
+  }
+
+  :root,
+  [data-theme="dark"] {
+    --color-background: #ffffff;
+    --color-primary: #000;
+    --color-secondary-rgb: 140, 140, 140;
+    --font-weight-light: 240;
+  }
+  body {
+    padding-top: 8rem;
+    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 {
+    font-size: 7rem !important;
+    line-height: 1 !important;
+  }
+
+  #main-header {
+    position: relative;
+  }
+
+  #entry-btns {
+    display: none;
+  }
+
+  a {
+    text-decoration: none !important;
+  }
+
+  #chapo {
+    page-break-after: always;
+  }
+
+  article #main-content {
+    width: 70%;
+    margin: auto;
+  }
+}

assets/css/src/_reset.scss

@@ -6,7 +6,8 @@ h3,
 h4,
 h5,
 p,
-ul {
+ul,
+figure {
   margin: 0;
   padding: 0;
 }

assets/css/src/_side-panel.scss

@@ -1,8 +1,7 @@
-/* ================= PANELS ================= */
 #nav-overlay {
   position: fixed;
   inset: 0;
-  background-color: #000;
+  background-color: var(--color-background);
   opacity: 0.7;
   z-index: 2;
   cursor: w-resize;
@@ -11,31 +10,31 @@
   display: none;
 }
 
-.panel {
+.side-panel {
   display: none;
   position: fixed;
   overflow: auto;
-  width: 100vw;
   height: 100dvh;
   top: 0;
-  background-color: #000;
-  outline: 1px solid #fff;
+  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;
+  scroll-behavior: smooth;
 
   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;
-  background-color: #000;
+  background-color: var(--color-background);
   padding: var(--unit--vertical) var(--unit--horizontal);
   padding-bottom: 0;
 }
@@ -65,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;
@@ -76,137 +78,148 @@
   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;
 }
 
-.panel__collection {
+.side-panel__collection {
   scroll-behavior: smooth;
   height: 100%;
   overflow: auto;
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
-.panel-close {
+footer {
+  width: 100%;
+}
+.side-panel-close {
   position: fixed;
   box-sizing: border-box;
   bottom: 0;
   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 ================= */
 
-.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-item-content__edito {
+.side-panel__collection .side-panel__item:last-child {
+  margin-bottom: 6rem;
+}
+.side-panel-item-content__edito {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
 
-.panel-item-content__edito.short {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-  overflow: hidden;
+.side-panel-item-content__edito p:not(:last-child) {
+  margin-bottom: var(--unit--vertical);
 }
 
 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 ================= */
-.text {
-  margin-bottom: var(--unit--vertical);
+.side-panel .text:first-child,
+.side-panel .text:last-child {
+  margin-bottom: calc(var(--unit--vertical) * 2);
+}
+
+.side-panel__item > a {
+  scroll-margin-top: 9rem;
+}
+
+.side-panel__collection--years .text:first-child .text__title {
+  display: inline-block;
+  padding-left: var(--unit--horizontal);
+}
+
+.side-panel .text__subtitle {
+  margin-bottom: calc(var(--unit--vertical) / 4);
+}
+
+.side-panel__collection--years .text:first-child .text__infos {
+  padding-left: var(--unit--horizontal);
+}
+.side-panel__collection--years .text:first-child .text__infos::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--color-primary);
 }
 
 @media screen and (min-width: 640px) {
-  nav.panel {
+  .side-panel {
     width: 40rem;
-  }
-  #subscribe-btn-wrapper {
-    height: 2.5rem;
-    margin-bottom: 0.2rem;
-  }
-
-  #subscribe-form {
-    position: relative;
-    width: fit-content;
-  }
-
-  #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;
-  }
-  #subscribe-form input:focus-visible {
-    outline: none;
-  }
-  #subscribe-form button[type="submit"] {
-    color: #fff;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .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/src/_tabs.scss

@@ -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,23 +71,11 @@ button.toggle.right.open::before {
 }
 
 .active-tab::-webkit-scrollbar-thumb {
-  background-color: #fff;
+  background-color: var(--color-background);
   border-radius: 1px;
   border: none;
 }
 
-.texts__year.short .year__edito {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-  overflow: hidden;
-}
-
-.texts__year .see-more {
-  width: 100%;
-  margin-top: calc(var(--unit--vertical) / 2);
-}
-
 @media screen and (min-width: 640px) {
   [data-template="home"] #tabs {
     margin-top: calc(0px - (10 * var(--unit--vertical)));

assets/css/src/_texts.scss

@@ -28,12 +28,14 @@ h4 *,
 h5,
 h5 *,
 p,
-p * {
+p *:not(strong),
+figcaption,
+.toc {
   font-weight: var(--font-weight-light);
   line-height: 1;
 }
 
-h2 {
+h1 {
   font-size: var(--font-size-xl);
 }
 
@@ -43,6 +45,12 @@ h3,
   color: var(--color-primary);
 }
 
+h4,
+.h4 {
+  font-size: var(--font-size-l);
+  color: var(--color-primary);
+}
+
 article h2 {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }
@@ -87,11 +95,11 @@ button,
 }
 .fs-l {
   font-size: var(--font-size-l) !important;
-  line-height: var(--unit--vertical);
+  line-height: calc(var(--unit--vertical) * 1.3);
 }
 .fs-xl {
   font-size: var(--font-size-xl) !important;
-  line-height: calc(var(--unit--vertical) * 1.5) !important;
+  line-height: calc(var(--unit--vertical) * 2) !important;
 }
 .fs-xxl {
   font-size: var(--font-size-xxl) !important;
@@ -137,6 +145,14 @@ button {
   align-items: center;
 }
 
+a {
+  word-break: break-word;
+}
+
+a > * {
+  word-break: normal;
+}
+
 a * {
   transition: font 0.2s ease-in-out;
 }
@@ -160,20 +176,37 @@ a:not(.no-underline) {
   text-decoration-thickness: 0.5px;
 }
 
-article p:not(:last-child) {
+article p:not(:last-child),
+article ul:not(:last-child),
+article figure:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 
 .footnote,
 .footnote * {
+  font-style: normal !important;
   scroll-margin-block-start: calc(var(--unit--vertical) * 6);
-  color: var(--color-secondary);
+  color: var(--color-primary);
   text-decoration: none !important;
   font-weight: var(--font-weight-bold) !important;
 }
 
+.footnote sup {
+  all: unset;
+}
+
+.footnote:focus-visible,
+.footnote:target {
+  text-decoration: underline !important;
+  text-underline-offset: 0.5rem;
+}
+
 @media screen and (min-width: 640px) {
   .title-center {
     margin-left: calc(2 * var(--unit--horizontal));
   }
+
+  .fs-l {
+    line-height: calc(var(--unit--vertical) * 1.5);
+  }
 }

assets/css/src/_toc.scss

@@ -0,0 +1,45 @@
+.toc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.page-cover .toc {
+  flex: 1;
+}
+
+@media (min-width: 1100px) {
+  .page-cover .toc {
+    position: fixed;
+    width: calc(var(--body-padding) - var(--unit--horizontal) * 2);
+    left: 0;
+    top: 15vw;
+    padding-inline: var(--unit--horizontal);
+    padding-top: calc(var(--unit--vertical) / 2);
+  }
+}
+
+.side-panel__view[data-view="toc"] .toc {
+  padding: var(--unit--vertical) var(--unit--horizontal);
+}
+
+.toc_label {
+  font-size: var(--font-size-m);
+  margin-bottom: calc(var(--unit--vertical) / 4);
+}
+
+.toc > ul {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit--vertical) / 4);
+
+  > li {
+    > ul {
+      margin-left: var(--unit--horizontal);
+    }
+  }
+}
+
+.toc li {
+  margin-left: 0;
+}

assets/css/src/_toggle-light-mode.scss

@@ -0,0 +1,34 @@
+.toggle-light {
+  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: 1;
+}
+.toggle-light-icon {
+  width: 1.2rem;
+  height: 1.2rem;
+
+  background-color: var(--color-primary);
+
+  mask-size: cover;
+  -webkit-mask-size: cover;
+
+  mask: var(--icon-toggle-light) no-repeat center;
+  -webkit-mask: var(--icon-toggle-light) no-repeat center;
+}
+@media screen and (max-width: 640px) {
+  .toggle-light {
+    margin-bottom: calc((var(--unit--vertical) / 2) / 2);
+  }
+  .toggle-light-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+}

assets/css/src/_year.scss

@@ -0,0 +1,13 @@
+[data-template="year"] {
+  #main-content {
+    ul.texts {
+      margin-top: calc(var(--unit--vertical) * 2);
+
+      > li:first-child {
+        padding-left: var(--unit--horizontal);
+        border-left: 1px solid #fff;
+        margin-bottom: calc(var(--unit--vertical) * 2);
+      }
+    }
+  }
+}

assets/css/src/article.css

@@ -1,12 +0,0 @@
-article #main-content {
-  max-width: calc(18 * var(--unit--horizontal));
-  scroll-margin-block-start: calc(var(--unit--vertical) * 6);
-  margin-top: calc(var(--unit--vertical) * 2);
-  padding-bottom: calc(var(--unit--vertical) * 2);
-}
-
-@media screen and (min-width: 640px) {
-  article #main-content {
-    max-width: auto;
-  }
-}

assets/css/src/footer.css

@@ -1,36 +0,0 @@
-#main-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--unit--horizontal);
-}
-[data-template="home"] #main-footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-}
-
-#main-footer ul {
-  display: flex;
-  justify-content: center;
-  gap: calc(2 * var(--unit--horizontal));
-}
-
-#main-footer a {
-  text-shadow: 0 0 2px #000;
-  -moz-text-shadow: 0 0 2px #000;
-  -webkit-text-shadow: 0 0 2px #000;
-}
-
-@media screen and (min-width: 640px) {
-  #main-footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: var(--body-padding);
-  }
-  #main-footer ul {
-    display: block;
-  }
-}

assets/css/src/grid.css

@@ -1,29 +0,0 @@
-body.full-width #desktop-nav {
-  height: auto;
-}
-body.full-width #desktop-nav .empty {
-  height: calc(var(--unit--vertical) / 2);
-}
-body.full-width #main-content {
-  position: absolute;
-  left: 0;
-  width: 100vw;
-  padding: 0 var(--unit--horizontal) var(--unit--vertical)
-    var(--unit--horizontal);
-  box-sizing: border-box;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(39, 1fr);
-  column-gap: var(--unit--horizontal);
-  margin-bottom: calc(var(--unit--vertical) * 2);
-}
-
-.grid .column {
-  grid-column: span var(--span);
-}
-
-.grid[data-columns="1"] .column {
-  grid-column: 11 / span 20;
-}

assets/css/src/header.css

@@ -1,142 +0,0 @@
-#main-header {
-  position: fixed;
-  box-sizing: border-box;
-  width: 100vw;
-  padding-top: calc(var(--unit--vertical) / 2);
-}
-
-#logo * {
-  font-size: 26.65vw;
-  font-weight: var(--font-weight-extra-bold);
-}
-
-#logo span {
-  height: 20vw;
-  width: 100%;
-  box-sizing: border-box;
-  padding-right: 1vw;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-#logo {
-  text-align: right;
-}
-
-#logo #actuel,
-#logo #inactuel {
-  mix-blend-mode: difference;
-}
-
-#logo #inactuel {
-  transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
-}
-
-#main-header.minimized #inactuel {
-  margin-top: -20vw;
-  transform: translateX(-2px) translateY(-2px);
-}
-
-#main-header.minimized #inactuel:not([data-template="home"] *) {
-  transform: translateX(-1px) translateY(-1px) !important;
-}
-
-.page-cover {
-  position: relative;
-  height: 100svh;
-  box-sizing: border-box;
-  padding-top: calc(var(--unit--vertical-relative) * 9);
-
-  display: flex;
-  flex-direction: column;
-}
-
-.page-cover .text-wrapper {
-  height: 100%;
-  overflow: auto;
-}
-
-/* ================= ENTRY BTNS ================= */
-#entry-btns {
-  position: sticky;
-  position: -webkit-sticky;
-  top: calc(var(--unit--vertical) * 4);
-  height: var(--entry-btns-height);
-  display: flex;
-  justify-content: space-between;
-}
-[data-template="info"] #entry-btns {
-  top: calc(var(--unit--vertical) * 4);
-}
-
-[data-template="home"] .entry-btn {
-  align-items: start;
-}
-
-button.toggle.left::after,
-button.toggle.right::before {
-  transition: all 0.5s var(--curve-sine);
-  content: "+";
-}
-
-#entry-btns.minimized {
-  color: #000;
-}
-#entry-btns.minimized .entry-btn--left::before,
-#entry-btns.minimized .entry-btn--right::after {
-  background-color: var(--color-secondary);
-}
-
-#entry-btns.minimized .entry-btn::before,
-#entry-btns.minimized .entry-btn::after {
-  font-weight: bold;
-}
-
-#entry-btns.minimized .entry-btn--left {
-  padding-right: 4px;
-  margin-left: calc(-4px - var(--width));
-}
-#entry-btns.minimized .entry-btn--right {
-  padding-left: 4px;
-  margin-right: calc(-4px - var(--width));
-}
-
-@media screen and (min-width: 640px) {
-  body:not([data-template="home"]) #main-header {
-    width: var(--body-padding);
-  }
-  body:not([data-template="home"]) #logo * {
-    font-size: 6vw;
-  }
-  body:not([data-template="home"]) #logo span {
-    height: 5vw;
-  }
-  body:not([data-template="home"]) #main-header.minimized #inactuel {
-    margin-top: -4.9vw;
-    transform: translateX(-2px) translateY(-2px);
-  }
-
-  .page-cover:not(
-      [data-template="author"] .page-cover,
-      [data-template="year"] .page-cover,
-      [data-template="category"] .page-cover
-    ) {
-    height: 100vh;
-    padding: calc(10 * var(--unit--vertical)) 0;
-    padding-top: calc(var(--unit--vertical) * 8);
-  }
-  [data-template="home"] .page-cover {
-    padding-top: calc(42.5vw) !important;
-  }
-
-  [data-template="author"] .page-cover,
-  [data-template="category"] .page-cover,
-  [data-template="year"] .page-cover {
-    height: initial;
-  }
-
-  #entry-btns {
-    display: none;
-  }
-}

assets/css/src/home.css

@@ -1 +0,0 @@
-

assets/css/src/print.css

@@ -1,67 +0,0 @@
-@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;
-    }
-  }
-
-  body {
-    padding-top: 4rem;
-    color: #000;
-  }
-
-  .panel {
-    display: none;
-  }
-
-  .main-title.fs-xxl {
-    font-size: 7rem !important;
-    line-height: 1 !important;
-  }
-
-  #main-header {
-    position: relative;
-  }
-
-  #logo #actuel {
-    color: #000;
-    opacity: 0.8;
-  }
-
-  #logo #inactuel {
-    color: rgb(86, 217, 163);
-  }
-
-  #entry-btns {
-    display: none;
-  }
-
-  a {
-    text-decoration: none !important;
-  }
-
-  article #main-content {
-    width: 60%;
-    margin: auto;
-  }
-}

assets/css/style.scss

@@ -0,0 +1,84 @@
+@import "src/reset";
+@import "src/html";
+@import "src/generic";
+@import "src/texts";
+@import "src/header";
+@import "src/side-panel";
+@import "src/article";
+@import "src/virtual";
+@import "src/home";
+@import "src/grid";
+@import "src/newsletter";
+@import "src/footer";
+@import "src/toggle-light-mode";
+@import "src/print";
+@import "src/toc";
+@import "src/year";
+
+:root {
+  --color-primary--transparent: rgba(255, 255, 255, 0.86);
+  --color-secondary-rgb: 200, 200, 200;
+  --color-secondary: rgba(var(--color-secondary-rgb), 0.86);
+  --color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
+  --color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
+
+  --color-tertiary-rgb: 200, 200, 200;
+  --color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
+  --color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
+  --color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
+
+  --unit--horizontal: 5vw;
+  --unit--vertical: 1.7rem;
+  --unit--vertical-relative: calc(
+    var(--unit--vertical) * var(--window-height-factor)
+  );
+
+  --font-size-s: 0.8rem;
+  --font-size-m: calc(var(--font-size-s) * 1.5);
+  --font-size-l: calc(var(--font-size-m) * 1.5);
+  --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-bold: 400;
+  --font-weight-extra-bold: 550;
+
+  --opacity-light: 0.6;
+
+  --curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+@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;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  :root {
+    --unit--horizontal: 2.5vw;
+    --unit--vertical: 1.7rem;
+
+    --font-size-s: 0.9rem;
+    --font-size-m: calc(var(--font-size-s) * 1.5);
+    --font-size-l: calc(var(--font-size-m) * 1.5);
+    --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-bold: 400;
+    --font-weight-extra-bold: 550; */
+
+    --body-padding: calc(10 * var(--unit--horizontal));
+  }
+}

assets/dist/script.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var remFactor = 16;
-var verticalUnit = 1.3 * remFactor;
-function toggleTab(data, tab) {
-  if (data.activeTab === tab) {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    });
-    setTimeout(function () {
-      data.isOpen = false;
-      data.activeTab = "";
-    }, 500);
-  } else {
-    data.activeTab = tab;
-    data.isOpen = true;
-    scrollToElem(".active-tab");
-  }
-}
-function scrollToElem(selector) {
-  document.querySelector(".active-tab").scrollTop = 0;
-  setTimeout(function () {
-    var yOffset = -7 * verticalUnit;
-    var elem = document.querySelector(selector);
-    var top = elem.getBoundingClientRect().top;
-    window.scrollTo({
-      top: top + window.scrollY + yOffset,
-      behavior: "smooth"
-    });
-  }, 100);
-}
-function setWindowHeightFactor() {
-  var windowHeight = window.innerHeight;
-  var min = 650;
-  var delta = windowHeight - min;
-  var factor = roundToNearestHalf(delta / 300) + 1;
-  var head = document.querySelector("head");
-  var style = document.createElement("style");
-  style.innerText = ":root { --window-height-factor:".concat(factor, " }");
-  head.appendChild(style);
-}
-function roundToNearestHalf(num) {
-  var round = Math.round(num * 2) / 2;
-  return Math.max(round, 0);
-}
-setWindowHeightFactor();
-document.addEventListener("DOMContentLoaded", function () {
-  function toggleLogoState() {
-    var scrollY = window.scrollY || window.pageYOffset;
-    if (scrollY > 10) {
-      document.querySelector("#main-header").classList.add("minimized");
-    } else {
-      document.querySelector("#main-header").classList.remove("minimized");
-    }
-  }
-  window.window.scrollTo({
-    top: 0
-  });
-  window.addEventListener("scroll", function () {
-    toggleLogoState();
-  });
-});

assets/dist/style.css

@@ -1,474 +0,0 @@
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-html,
-p,
-ul {
-  margin: 0;
-  padding: 0;
-}
-button {
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-a,
-button {
-  color: inherit;
-}
-a {
-  text-decoration: none;
-}
-li {
-  list-style-type: none;
-}
-:root {
-  --color-background: #000;
-  --color-primary: #fff;
-  --color-primary--transparent: hsla(0, 0%, 100%, 0.86);
-  --color-secondary: rgba(120, 171, 150, 0.86);
-  --color-secondary--light: rgba(119, 177, 157, 0.2);
-  --color-secondary--x-light: rgba(119, 177, 157, 0.1);
-  --unit--horizontal: 5vw;
-  --unit--vertical: 1.7rem;
-  --unit--vertical-relative: calc(
-    var(--unit--vertical) * var(--window-height-factor)
-  );
-  --font-size-s: 0.8rem;
-  --font-size-m: calc(var(--font-size-s) * 1.5);
-  --font-size-l: calc(var(--font-size-m) * 1.5);
-  --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-bold: 400;
-  --font-weight-extra-bold: 550;
-}
-@media screen and (min-width: 640px) {
-  :root {
-    --color-background: #000;
-    --color-primary: #fff;
-    --color-primary--transparent: hsla(0, 0%, 100%, 0.86);
-    --color-secondary: rgba(120, 171, 150, 0.86);
-    --color-secondary--light: rgba(119, 177, 157, 0.25);
-    --color-secondary--x-light: rgba(119, 177, 157, 0.15);
-    --unit--horizontal: 5vw;
-    --unit--vertical: 1.7rem;
-    --font-size-s: 0.9rem;
-    --font-size-m: calc(var(--font-size-s) * 1.5);
-    --font-size-l: calc(var(--font-size-m) * 1.5);
-    --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-bold: 400;
-    --font-weight-extra-bold: 550;
-  }
-}
-body {
-  box-sizing: border-box;
-  padding: 0 var(--unit--horizontal);
-  background-color: var(--color-background);
-  color: var(--color-primary);
-}
-body,
-main {
-  position: relative;
-}
-hr {
-  height: calc(var(--unit--vertical) / 2);
-  border: none;
-  background-color: var(--color-primary);
-  width: calc(var(--unit--horizontal) * 4);
-  margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal));
-}
-nav hr {
-  background-color: var(--color-background);
-  margin-left: 0;
-}
-body,
-html {
-  scroll-behavior: smooth;
-}
-* {
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 0;
-  border: none;
-}
-@media screen and (min-width: 640px) {
-  body {
-    padding: 0 calc(6 * var(--unit--horizontal));
-  }
-}
-.hidden {
-  display: none;
-}
-.background-grid {
-  background-size: var(--unit--horizontal) var(--unit--vertical);
-  background-image: linear-gradient(
-      90deg,
-      var(--color-secondary--x-light) 1px,
-      transparent 0
-    ),
-    linear-gradient(180deg, var(--color-secondary--light) 1px, transparent 0),
-    linear-gradient(180deg, var(--color-secondary--x-light) 1px, transparent 0);
-  background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2);
-  background-attachment: fixed;
-}
-.left:not(.padding) {
-  margin-left: calc(var(--unit--horizontal) * var(--left));
-}
-.padding.left {
-  padding-left: calc(var(--unit--horizontal) * var(--left));
-}
-.top:not(.padding) {
-  margin-top: calc(var(--unit--vertical) * var(--top));
-}
-.padding.top {
-  padding-top: calc(var(--unit--vertical) * var(--top));
-}
-.right:not(.padding) {
-  margin-right: calc(var(--unit--horizontal) * var(--right));
-}
-.padding.right {
-  padding-right: calc(var(--unit--horizontal) * var(--right));
-}
-.bottom:not(.padding) {
-  margin-bottom: calc(var(--unit--vertical) * var(--bottom));
-}
-.padding.bottom {
-  padding-bottom: calc(var(--unit--vertical) * var(--bottom));
-}
-.full-width {
-  width: 100%;
-}
-.width {
-  width: calc(var(--unit--horizontal) * var(--width));
-}
-.flex {
-  display: flex;
-  justify-content: var(--content);
-  align-items: var(--align);
-  gap: calc(var(--gap) * var(--unit--horizontal));
-}
-.flex.column {
-  flex-direction: column;
-}
-.color {
-  color: var(--color);
-}
-.opacity {
-  opacity: var(--opacity);
-}
-@font-face {
-  font-family: Switzer-Variable;
-  src: url(/assets/fonts/Switzer-Variable.woff2) format("woff2"),
-    url(/assets/fonts/Switzer-Variable.woff) format("woff"),
-    url(/assets/fonts/Switzer-Variable.ttf) format("truetype");
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-}
-.accent {
-  color: var(--color-secondary);
-  font-weight: 400;
-}
-* {
-  font-family: Switzer-Variable, sans-serif;
-}
-#logo * {
-  font-size: 25vw;
-  line-height: 4rem;
-  transform: translate(-2px, -13px);
-  font-weight: var(--font-weight-extra-bold);
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-p {
-  font-weight: var(--font-weight-light);
-  line-height: 1;
-}
-h2 {
-  font-size: var(--font-size-xl);
-}
-article h2 {
-  margin-bottom: calc(var(--unit--vertical) / 2);
-}
-.title-center {
-  --margin-left: calc(4 * var(--unit--horizontal));
-  width: calc(100% - var(--margin-left));
-  margin-left: var(--margin-left);
-  font-size: var(--font-size-l);
-  line-height: var(--unit--vertical);
-}
-.main-title {
-  line-height: calc(var(--unit--vertical) * 2);
-  text-align: left;
-  box-sizing: border-box;
-  font-weight: var(--font-weight-light);
-  margin-bottom: var(--unit--vertical);
-}
-.texts__title {
-  font-size: var(--font-size-l);
-}
-.fs-m,
-button,
-li,
-p {
-  transform: translateY(calc(var(--unit--vertical) * 0.12));
-  font-size: var(--font-size-m);
-  line-height: calc(var(--unit--vertical));
-}
-.fs-s {
-  font-size: var(--font-size-s) !important;
-}
-.fs-m {
-  font-size: var(--font-size-m) !important;
-}
-.fs-l {
-  font-size: var(--font-size-l) !important;
-}
-.fs-xl {
-  font-size: var(--font-size-xl) !important;
-  line-height: calc(var(--unit--vertical) * 1.5) !important;
-}
-.fs-xxl {
-  font-size: var(--font-size-xxl) !important;
-  line-height: calc(var(--unit--vertical) * 2.5) !important;
-}
-.fw-light,
-button,
-li,
-p {
-  font-weight: var(--font-weight-light);
-}
-.fw-bold {
-  font-weight: var(--font-weight-bold);
-}
-.fw-extra-bold {
-  font-weight: var(--font-weight-extra-bold);
-}
-.f-inherit {
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-}
-.ta-center {
-  text-align: center;
-}
-p {
-  transform: translateY(3px);
-}
-button {
-  display: flex;
-  align-items: center;
-}
-a * {
-  transition: font 0.2s ease-in-out;
-}
-a.no-underline:hover * {
-  font-weight: 250;
-}
-a:not(.no-underline):hover {
-  text-decoration: none;
-}
-a:not(.no-underline) {
-  text-decoration: underline;
-  text-decoration-color: inherit;
-  text-decoration-line: underline;
-  text-underline-offset: 0.2rem;
-  text-decoration-thickness: 0.5px;
-}
-article p:not(:last-child) {
-  margin-bottom: var(--unit--vertical);
-}
-@media screen and (min-width: 640px) {
-  .title-center {
-    margin-left: calc(2 * var(--unit--horizontal));
-  }
-}
-#main-header {
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100vw;
-  height: calc(var(--unit--vertical) * 5);
-  padding: var(--unit--vertical) var(--unit--horizontal);
-  transition: height 0.2s ease-in-out;
-}
-#logo {
-  position: relative;
-}
-#main-header.open #actuel {
-  color: var(--color-background);
-}
-#logo #actuel {
-  color: var(--color-primary--transparent);
-  position: relative;
-  z-index: 1;
-}
-#logo #inactuel {
-  position: absolute;
-  z-index: 0;
-  color: var(--color-secondary);
-  bottom: -48%;
-  transition: bottom 0.2s ease-in-out;
-}
-#main-header.minimized #logo #inactuel {
-  bottom: 0;
-}
-.page-cover {
-  position: relative;
-  box-sizing: border-box;
-  height: 100svh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-top: calc(var(--unit--vertical-relative) * 5);
-  padding-bottom: calc(5 * var(--unit--vertical));
-}
-.page-cover.open + * {
-  margin-top: calc(var(--unit--vertical-relative) * 19);
-}
-[data-template="home"] .page-cover {
-  padding-top: calc(var(--unit--vertical-relative) * 6);
-}
-#category .page-cover {
-  height: auto;
-  padding-bottom: 0;
-  margin-bottom: calc(2 * var(--unit--vertical));
-}
-#category .active-tab {
-  max-height: none;
-}
-@media screen and (min-width: 640px) {
-  #main-header {
-    display: flex;
-    justify-content: center;
-  }
-  #logo {
-    width: 37vw;
-  }
-  #logo * {
-    font-size: 11vw;
-  }
-  #main-header.minimized {
-    height: calc(var(--unit--vertical) * 4.3);
-  }
-  .page-cover {
-    padding: calc(10 * var(--unit--vertical)) 0;
-  }
-}
-.toggle-btns {
-  position: sticky;
-}
-button.toggle.open:not(.see-more) {
-  font-weight: 700;
-}
-button.toggle.left:after {
-  margin-left: var(--unit--horizontal);
-}
-button.toggle.left.close:after {
-  content: "+";
-}
-button.toggle.left.open:after {
-  content: "-";
-}
-button.toggle.right:before {
-  margin-right: var(--unit--horizontal);
-}
-button.toggle.right.close:before {
-  content: "+";
-}
-button.toggle.right.open:before {
-  content: "-";
-}
-#tabs {
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  bottom: calc(var(--unit--vertical-relative) * 4);
-}
-.active-tab {
-  position: absolute;
-  max-height: calc(var(--unit--vertical-relative) * 17);
-  overflow: auto;
-  transition: max-height 0.5s ease-in-out;
-  padding: var(--unit--vertical) 0;
-  scrollbar-width: thin;
-  scrollbar-color: #fff transparent;
-}
-.active-tab::-webkit-scrollbar {
-  width: 3px;
-  height: auto;
-}
-.active-tab::-webkit-scrollbar-track {
-  background: transparent;
-}
-.active-tab::-webkit-scrollbar-thumb {
-  background-color: #fff;
-  border-radius: 1px;
-  border: none;
-}
-.texts__year.short .year__edito {
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  overflow: hidden;
-}
-.texts__year .see-more {
-  width: 100%;
-  margin-top: calc(var(--unit--vertical) / 2);
-}
-@media screen and (min-width: 640px) {
-  [data-template="home"] #tabs {
-    margin-top: calc(0px - (10 * var(--unit--vertical)));
-  }
-  button.toggle.left:after {
-    margin-left: calc(var(--unit--horizontal) / 2);
-  }
-  button.toggle.right:before {
-    margin-right: calc(var(--unit--horizontal) / 2);
-  }
-}
-.article-header .title-wrapper {
-  --margin-left: 2;
-  width: calc(100% - (var(--margin-left) * var(--unit--horizontal)));
-  padding-left: calc(var(--margin-left) * var(--unit--horizontal));
-}
-#main-footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: calc(18 * var(--unit--horizontal));
-  padding: var(--unit--horizontal);
-}
-#main-footer a {
-  text-shadow: 0 0 2px #000;
-  -moz-text-shadow: 0 0 2px #000;
-  -webkit-text-shadow: 0 0 2px #000;
-}
-@media screen and (min-width: 640px) {
-  #main-footer {
-    padding: calc(var(--unit--horizontal) / 2) var(--unit--horizontal);
-  }
-}

assets/front-comments/style.css

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

assets/images/icons/circle-half.svg

@@ -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>

assets/js/light-mode.js

@@ -0,0 +1,31 @@
+(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(".toggle-light");
+    togglers.forEach((toggler) => {
+      toggler.addEventListener("click", toggleDarkMode);
+    });
+  });
+})();

assets/js/script.js

@@ -1,3 +1,20 @@
+const root = document.documentElement;
+
+function initTheme() {
+  const storedPreference = localStorage.getItem("theme");
+  const theme = storedPreference || "dark";
+  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) {
@@ -9,16 +26,36 @@ function getUnit(id) {
   return pxUnit;
 }
 
-function throttle(callback, limit) {
-  let waiting = false;
+// Throttle found here : https://gist.github.com/ionurboz/51b505ee3281cd713747b4a84d69f434
+function throttle(func, wait, options) {
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+  if (!options) options = {};
+  var later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
   return function () {
-    if (!waiting) {
-      callback.apply(this, arguments);
-      waiting = true;
-      setTimeout(function () {
-        waiting = false;
-      }, limit);
+    var now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
       }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
   };
 }
 
@@ -47,17 +84,29 @@ function toggleLogoState() {
     document.querySelector("#main-header").classList.remove("minimized");
   }
 }
+function toggleFooterState() {
+  if (scrollY > 90) {
+    document.querySelectorAll(".footer-btn-wrapper").forEach(element => {
+      element.classList.remove("hidden");
+    });
+  } else {
+    document.querySelectorAll(".footer-btn-wrapper").forEach(element => {
+      element.classList.add("hidden");
+    });
+  }
+}
 
 function fixFootNotes() {
   const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
 
   footnotes.forEach((footnote) => {
     const href = footnote.href;
+
     footnote.classList.add("footnote");
+
     if (href.includes("sym")) {
       footnote.id = footnote.hash.replace("sym", "anc").replace("#", "");
-    }
-    if (href.includes("anc")) {
+    } else if (href.includes("anc")) {
       footnote.id = footnote.hash.replace("anc", "sym").replace("#", "");
     }
   });
@@ -76,54 +125,63 @@ function slugify(str) {
   return removeAccents(str.toLowerCase());
 }
 
-const subscribeBtn = document.querySelector("#subscribe-btn");
-function showSubscribeField(event) {
-  event.preventDefault();
-  const button = event.target;
-  const li = button.parentNode;
-  const form = li.querySelector("#subscribe-form");
-  const input = form.querySelector("input");
-
-  form.classList.remove("hidden");
-  button.classList.add("hidden");
-  input.focus();
-}
-
 function subscribe(event) {
   event.preventDefault();
-  const email = document.querySelector("#subscribe-form input");
+  const emailInput = document.querySelector("#subscribe-form input");
 
-  if (email.value.toLowerCase().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+  if (emailInput.value.toLowerCase().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
     const header = {
       method: "POST",
-      body: email.value,
+      body: JSON.stringify(emailInput.value),
     };
 
-    fetch("/subscribe.json");
+    fetch("/subscribe.json", header)
+      .then((res) => res.json())
+      .then((data) => {
+        const formNode = emailInput.parentNode.parentNode;
+        formNode.outerHTML = "<p>" + data.message + "</p>";
+      });
   } else {
-    email.value = "E-mail invalide. Recommencez.";
+    emailInput.value = "E-mail invalide. Recommencez.";
   }
 }
 
-const panelNav = document.querySelector(".panel");
+const panels = document.querySelectorAll(".side-panel[data-panel]");
 const navOverlay = document.querySelector("#nav-overlay");
-const openNavBtn = document.querySelector("button.open-nav");
-const closeNavBtn = document.querySelector(".panel-close");
-function closeNav() {
-  panelNav.classList.remove("panel--visible");
+
+function closeAllPanels() {
+  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(`.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("side-panel--visible");
+    navOverlay.classList.add("nav-overlay--visible");
+    document.body.classList.add("no-scroll");
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
-  ragadjust("h1, h2, h3, h4, h5", ["all"]);
+  ragadjust("h1, h2, h4, h5", ["all"]);
   window.window.scrollTo({
     top: 0,
   });
 
-  window.addEventListener("scroll", () => {
+  const handleScroll = throttle(() => {
     toggleLogoState();
-  });
+    if (window.innerWidth <= 680) {
+      toggleFooterState();
+    }
+  }, 100);
+  window.addEventListener("scroll", handleScroll);
 
   setWindowHeightFactor();
   window.addEventListener("resize", () => {
@@ -132,20 +190,24 @@ document.addEventListener("DOMContentLoaded", () => {
 
   fixFootNotes();
 
+  document.querySelectorAll(".toggle-light").forEach((toggler) => {
+    toggler.addEventListener("click", toggleDarkMode);
+  });
+
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {
-      closeNav();
+      closeAllPanels();
     }
   });
-  document.querySelectorAll(".panel").forEach((panel) => {
+  panels.forEach((panel) => {
     panel.addEventListener("click", (event) => {
       event.stopPropagation();
     });
   });
 
-  const navSortBtns = document.querySelectorAll("nav .sort-btn");
+  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) => {
@@ -154,9 +216,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"));
@@ -169,18 +231,20 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  openNavBtn.addEventListener("click", () => {
-    panelNav.classList.add("panel--visible");
-    navOverlay.classList.add("nav-overlay--visible");
-    document.body.classList.add("no-scroll");
+  document.querySelectorAll("[data-open-panel]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      openPanel(btn.dataset.openPanel, btn.dataset.view);
+    });
   });
 
-  closeNavBtn.addEventListener("click", () => {
-    closeNav();
-  });
-  navOverlay.addEventListener("click", () => {
-    closeNav();
+  document.querySelectorAll(".side-panel-close").forEach((btn) => {
+    btn.addEventListener("click", closeAllPanels);
   });
 
-  subscribeBtn.addEventListener("click", showSubscribeField);
+  navOverlay.addEventListener("click", closeAllPanels);
+
+  // Fermer le panel TOC quand on clique sur un lien
+  document.querySelectorAll('[data-view="toc"] .toc a').forEach((link) => {
+    link.addEventListener("click", closeAllPanels);
+  });
 });

composer.json

@@ -23,11 +23,22 @@
   },
   "require": {
     "php": "~8.1.0 || ~8.2.0 || ~8.3.0",
-    "getkirby/cms": "^4.0"
+    "getkirby/cms": "^4.5",
+    "symfony/http-client": "^7.2",
+    "nyholm/psr7": "^1.8",
+    "php-http/guzzle7-adapter": "^1.1",
+    "mailersend/mailersend": "^0.28.0",
+    "sylvainjule/code-editor": "^1.0",
+    "tobimori/kirby-seo": "^1.1",
+    "moinframe/kirby-loop": "^1.0"
   },
   "config": {
+    "platform": {
+      "php": "8.3.0"
+    },
     "allow-plugins": {
-      "getkirby/composer-installer": true
+      "getkirby/composer-installer": true,
+      "php-http/discovery": true
     },
     "optimize-autoloader": true
   },

gulpfile.mjs

@@ -1,36 +0,0 @@
-import gulp from "gulp"
-const { watch, parallel, src, dest } = gulp
-import cssnano from "gulp-cssnano"
-import autoprefixer from "gulp-autoprefixer"
-import cssimport from "gulp-cssimport"
-import babel from "gulp-babel"
-
-function cssProcess() {
-  return src("assets/css/style.css")
-    .pipe(cssimport())
-    .pipe(
-      autoprefixer({
-        cascade: false,
-      })
-    )
-    .pipe(cssnano())
-    .pipe(dest("assets/dist"))
-}
-
-function jsProcess() {
-  return src("assets/js/script.js")
-    .pipe(
-      babel({
-        presets: ["@babel/env"],
-      })
-    )
-    .pipe(dest("assets/dist"))
-}
-
-function dev() {
-  watch("assets/css/src/*.css", cssProcess)
-}
-
-const build = parallel(cssProcess, jsProcess)
-
-export { dev, build }

package.json

@@ -1,11 +0,0 @@
-{
-  "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^9.0.0",
-    "gulp-babel": "^8.0.0",
-    "gulp-cssimport": "^7.0.0",
-    "gulp-cssnano": "^2.1.3"
-  }
-}

site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "actuel-inactuel",
+  "short_name": "a-i",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}

site/blueprints/blocks/image.yml

@@ -0,0 +1,27 @@
+name: field.blocks.image.name
+icon: image
+preview: image
+fields:
+  image:
+    label: field.blocks.image.name
+    type: files
+    query: model.images
+    multiple: false
+    image:
+      back: black
+    uploads:
+      template: blocks/image
+  alt:
+    label: field.blocks.image.alt
+    type: text
+    icon: title
+    help: Lu par les robots d'indexation, par les lecteurs d'écran et affiché à la place de l'image si celle-ci ne charge pas.
+  caption:
+    label: field.blocks.image.caption
+    type: writer
+    icon: text
+    inline: true
+  link:
+    label: field.blocks.image.link
+    type: text
+    icon: url

site/blueprints/blocks/line.yml

@@ -0,0 +1,4 @@
+name: Séparateur
+icon: divider
+preview: line
+wysiwyg: true

site/blueprints/blocks/quote.yml

@@ -0,0 +1,33 @@
+name: field.blocks.quote.name
+icon: quote
+wysiwyg: true
+preview: quote
+fields:
+  mode:
+    type: toggles
+    default: long
+    options:
+      - value: long
+        text: Longue
+        icon: false
+      - value: big
+        text: Forte
+        icon: false
+  text:
+    label: field.blocks.quote.text.label
+    placeholder: field.blocks.quote.text.placeholder
+    type: writer
+    inline: true
+    icon: quote
+  citation:
+    label: field.blocks.quote.citation.label
+    placeholder: field.blocks.quote.citation.placeholder
+    type: writer
+    inline: true
+    icon: user
+    marks:
+      - bold
+      - italic
+      - underline
+      - link
+      - cite

site/blueprints/fields/body.yml

@@ -0,0 +1,11 @@
+label: Corps
+type: writer
+headings:
+  - 3
+  - 4
+marks:
+  - bold
+  - italic
+  - link
+  - underline
+  - code

site/blueprints/fields/bodyBlocks.yml

@@ -0,0 +1,18 @@
+label: Corps
+type: blocks
+default:
+  - type: heading
+    content:
+      level: h2
+fieldsets:
+  text:
+    name: Texte
+    icon: text
+    wysiwyg: true
+    fields:
+      text:
+        extends: fields/body
+        label: false
+  image: true
+  quote: true
+  line: true

site/blueprints/pages/author.yml

@@ -9,11 +9,16 @@ tabs:
         type: fields
         fields:
           presentation:
+            extends: fields/body
             label: Présentation
-            type: writer
-            help: Optionnelle
+            help: |
+              Optionnelle, sans mention du poste. Peut inclure un lien.
+              Exemple : "Co-fondateur des éditions [Athom](http://www.athom.xyz/)."
       texts:
         label: Textes
         type: pages
         create: false
         query: page.getTexts()
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/authors.yml

@@ -7,3 +7,6 @@ tabs:
         label: Liste
         type: pages
         template: author
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/email.yml

@@ -6,21 +6,47 @@ image:
   back: black
   color: white
   icon: email
-options:
-  changeStatus: false
 
 tabs:
   contentTab:
+    label: Contenu
+    icon: text
+    columns:
+      - width: 1/1
         fields:
-      month:
-        label: Mois
-        type: date
-        display: "mmmm YYYY"
-        default: today
-        width: 1/4
-      sendBtn:
-        type: send-button
-        width: 1/4
-      content:
+          body:
             label: Contenu
             type: writer
+            nodes: false
+            marks:
+              - bold
+              - link
+              - italic
+              - email
+  sendTab:
+    label: Envoi
+    icon: plane
+    columns:
+      - width: 1/4
+        fields:
+          published:
+            label: Date d'envoi
+            type: date
+            help: Automatiquement rempli au moment de l'envoi.
+            disabled: true
+            width: 1/2
+      - width: 1/2
+        fields:
+          testAdressList:
+            label: Liste d'adresses de test
+            type: structure
+            sortBy: email asc
+            help: Le bouton "Tester" ci-dessous tentera d'envoyer l'email aux adresses de cette liste
+            fields:
+              email:
+                type: email
+          sendBtn:
+            type: send-button
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/grid.yml

@@ -18,6 +18,17 @@ tabs:
           fullWidth:
             label: Pleine largeur
             type: toggle
+          subtitle:
+            label: Sous-titre
+            type: writer
+            help: optionnel
+            marks:
+              - italic
+            node: false
+          chapo:
+            label: Chapo
+            extends: fields/body
+            help: optionnel
           body:
             label: Corps
             type: layout
@@ -31,4 +42,9 @@ tabs:
               - image
               - line
               - quote
+
   metaTab: tabs/meta
+
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/info.yml

@@ -15,6 +15,7 @@ tabs:
         label: Corps
         type: fields
         fields:
-          body:
-            label: Corps
-            type: writer
+          body: fields/body
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/linear.yml

@@ -15,7 +15,54 @@ tabs:
         label: Corps
         type: fields
         fields:
-          body:
-            label: Corps
+          subtitle:
+            label: Sous-titre
             type: writer
+            help: optionnel
+            marks:
+              - italic
+            node: false
+          chapo:
+            label: Chapo
+            extends: fields/body
+            help: optionnel
+          isBlockMode:
+            label: Mode blocs
+            type: toggle
+            default: true
+            width: 1/4
+            help: |
+              Actif : éditeur en blocs (texte + médias). Inactif : ancien champ texte sans médias, utile pour éditer d'anciens articles uniquement.
+            when:
+              isHtmlMode: false
+          bodyBlocks:
+            extends: fields/bodyBlocks
+            width: 3/4
+            when:
+              isHtmlMode: false
+              isBlockMode: true
+          body:
+            extends: fields/body
+            help: Anciens champs conservés pour archive (ne pas remplir pour les nouveaux articles). Ce champs ne sera utiliser en front que si le champs "corp" normal est vide.
+            width: 3/4
+            when:
+              isHtmlMode: false
+              isBlockMode: false
+          htmlBody:
+            label: Corps
+            type: textarea
+            buttons:
+              - headlines
+              - bold
+              - italic
+              - link
+            when:
+              isHtmlMode: true
+
+  paramsTab: tabs/params
+
   metaTab: tabs/meta
+
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/newsletter.yml

@@ -3,19 +3,31 @@ title: Liste de diffusion
 tabs:
   content:
     columns:
-      - width: 1/2
+      - width: 1/1
+        fields:
+          body:
+            extends: fields/body
+      - width: 2/3
         fields:
           subscribers:
             label: Abonnés
             type: structure
+            sortBy: inscriptiondate desc
             fields:
               email:
                 type: email
-      - width: 1/2
+              inscriptionDate:
+                label: Date d'inscription
+                type: date
+                display: DD/MM/YYYY
+                disabled: true
+      - width: 1/3
         sections:
           newsletters:
-            label: Emails
+            label: Lettres
             type: pages
             template: email
-            info: "{{ page.month.toDate('M Y') }}"
-            sortBy: month desc
+            info: "{{ page.status == 'listed' ? 'envoyée' : 'brouillon' }}"
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/texts.yml

@@ -1,5 +1,8 @@
 title: texts
 
+tabs:
+  contentTab:
+    label: Contenu
     columns:
       - width: 1/2
         fields:
@@ -12,7 +15,7 @@ columns:
             type: pages
             template: year
             sortBy: title desc
-  - width: 1/1
+      - width: 1/2
         sections:
           allTextsSection:
             label: Tous les textes
@@ -22,3 +25,6 @@ columns:
             query: page.children.children
             info: "{{ page.author.toPage.title }} [{{ page.category }}]"
             sortBy: modified desc
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/pages/year.yml

@@ -4,16 +4,38 @@ image:
   back: black
   color: white
 
+tabs:
+  contentTab:
+    label: Contenu
     columns:
       - width: 1/3
         sections:
+          fieldsSection:
+            type: fields
+            fields:
+              openDate:
+                label: Date d'ouverture
+                type: date
+                display: DD/MM/YYYY
           texts:
             label: Textes
             type: pages
+            help: **Pour réorganiser les textes**, utiliser la poignée ⁝⁝ qui apparait au survol.
             templates:
               - linear
               - grid
+          linkedTextsSection:
+            type: fields
+            fields:
+              linkedTexts:
+                label: Textes liés
+                type: pages
+                query : site.find('textes').grandChildren.not(page.children)
+                help: textes enregistrés à une autre année à inclure aussi dans celle-ci.
       - width: 2/3
         fields:
           edito:
             type: writer
+  seo:
+    extends: seo/page
+    label: Indexation

site/blueprints/site.yml

@@ -9,6 +9,7 @@ tabs:
         type: writer
         nodes: false
         marks: false
-      edito:
-        label: Éditorial
-        type: writer
+      edito: fields/body
+  seo:
+    extends: seo/site
+    label: Indexation

site/blueprints/tabs/meta.yml

@@ -1,8 +1,10 @@
 label: Métadonnées
-sections:
-  metadata:
-    type: fields
+columns:
+  - width: 3/4
     fields:
+      keywords:
+        label: Mots-clés
+        type: tags
       published:
         label: Date de publication
         type: date
@@ -22,3 +24,14 @@ sections:
         multiple: false
         required: true
         width: 1/3
+  - width: 1/4
+    sections:
+      referencedTexts:
+        label: Textes référencés
+        type: pages
+        template: linear
+        help: Les textes ajoutés ici n'apparaissent nulle part dans la navigation du site mais peuvent être référencés via leurs URLs.
+      referencedFiles:
+        label: Fichiers
+        type: files
+        help: Ce champ contient tous les médias stockés par la page, tels que les images intégrées au texte. On peut aussi y ajouter des fichiers (PDFs etc.) pour pouvoir les lier via leurs URLs.

site/blueprints/tabs/params.yml

@@ -0,0 +1,13 @@
+label: Paramètres
+fields:
+  isHtmlMode:
+    label: Mode HTML
+    type: toggle
+    width: 1/3
+    help: |
+      Actif : le code HTML du corps sera exécuté.
+  additionnalCss:
+    label: CSS additionnel
+    type: code-editor
+    help: Le point de rupture mobile / ordinateur se situe à 640px.
+    width: 2/3

site/blueprints/users/author.yml

@@ -1,25 +0,0 @@
-title: Auteur
-description: Droits de lecture et écriture de certaines pages.
-image:
-  icon: pen
-  color: "#FFF"
-
-permissions:
-  access:
-    *: false
-  files:  
-    *: false
-  languages:
-    *: false
-  pages:
-    *: false
-  site:
-    *: false
-  user:
-    *: false
-  users:
-    *: false
-
-fields:
-  presentation:
-    type: writer

site/collections/categories.php

@@ -1,6 +1,7 @@
 <?php
 
-function createEmptyCategories() {    
+function createEmptyCategories()
+{
     $categories = new Pages();
     foreach (page('textes')->categories()->split() as $categoryName) {
         $category = new Page([
@@ -10,7 +11,7 @@ function createEmptyCategories() {
             'content'  => [
                 'title' => $categoryName,
             ],
-            'children' => []
+            'children' => [],
         ]);
 
         $categories->add($category);
@@ -20,7 +21,8 @@ function createEmptyCategories() {
 }
 
 
-function createCategories() {
+function createCategories()
+{
     $emptyCategories = createEmptyCategories();
     foreach (page('textes')->grandChildren() as $text) {
         try {

site/collections/years.php

@@ -1,5 +1,5 @@
 <?php
 
 return function ($site) {    
-    return $site->find('textes')->children();
+    return $site->find('textes')->children()->sort('title', 'desc');
 };

site/config/config.php

@@ -1,25 +1,32 @@
 <?php
 
-return array(
+return [
   'debug' => true,
-  'panel' => array(
+  'panel' => [
     'menu' => require __DIR__ . '/menu.php',
-    'css' => 'assets/css/panel.css'
-  ),
+    'css'  => 'assets/css/panel.css',
+  ],
+  'mailerSendApiKey' => 'mlsn.0a9f20751951e3c2d130b1d6c3749b0a0f5b14f1c52da65a3369d658c736513c',
   'email'            => [
     'transport' => [
       'type'     => 'smtp',
-      'host'      => 'smtp.outlook.com',
+      'host'     => 'smtp.mailersend.net',
       'port'     => 587,
-      'security'  => 'tls',
+      'security' => true,
       'auth'     => true,
-      'username'  => 'adrien.payet@outlook.com',
-      'password'  => 't8nVpxCpEZcqH8y'
-    ]
+      'username' => 'MS_ncQ2K5@actuel-inactuel.fr',
+      'password' => 'mssp.ou3hOyX.z86org8y2kklew13.raOTfvP',
     ],
-  'routes' => array(
-    require __DIR__ . '/routes/virtual-author.php',
+  ],
+  'routes' => [
     require __DIR__ . '/routes/virtual-category.php',
-    require __DIR__ . '/routes/send-newsletter.php',
-  ),
-);
+    require __DIR__ . '/routes/subscribe.php',
+    require __DIR__ . '/routes/virtual-pending.php',
+  ],
+  'hooks' => [
+    'page.create:after' => require __DIR__ . '/hooks/prefill-test-adress-list.php',
+  ],
+
+  'moinframe.loop.language' => 'fr',
+  'thumbs' => require __DIR__ . '/thumbs.php',
+];

site/config/hooks/prefill-test-adress-list.php

@@ -0,0 +1,17 @@
+<?php
+
+return function ($page) {
+    if ($page->template() == 'email') {
+        $list = [
+          ['email' => 'fournelcecile@yahoo.fr'],
+          ['email' => 'payet.adrien@protonmail.com'],
+          ['email' => 'mazet.zaccardelli@free.fr'],
+          ['email' => 'wafaabida@hotmail.com'],
+          ['email' => 'elisegarraud@yahoo.fr'],
+          ['email' => 'pierre-damien.huyghe@univ-paris1.fr'],
+        ];
+        $page->update([
+          'testAdressList' => Yaml::encode($list),
+        ]);
+    }
+};

site/config/menu.php

@@ -6,7 +6,7 @@ return [
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'site');
-    }
+    },
   ],
   'texts' => [
     'icon'    => 'pen',
@@ -15,7 +15,7 @@ return [
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/textes');
-    }
+    },
   ],
   'authors' => [
     'icon'    => 'users',
@@ -24,7 +24,7 @@ return [
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/auteurs');
-  }
+    },
   ],
   '-',
   '-',
@@ -35,16 +35,16 @@ return [
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/a-propos');
-    }
+    },
   ],
-  'newsletter' => [
+  'subscription' => [
     'icon'    => 'email',
     'label'   => 'Liste de diffusion',
-    'link' => 'pages/liste-de-diffusion',
+    'link'    => 'pages/lettre',
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/liste-de-diffusion');
-    }
+    },
   ],
   '-',
   '-',
@@ -57,7 +57,7 @@ return [
     'current' => function ($current) {
         $path = Kirby::instance()->request()->path()->toString();
         return Str::contains($path, 'pages/admin');
-    }
+    },
   ],
   '-',
   '-',

site/config/routes/send-newsletter.php

@@ -1,24 +0,0 @@
-<?php
-
-return [
-  'pattern' => '/send-newsletter.json',
-  'method' => 'POST',
-  'action'  => function () {
-      $jsonRequest = file_get_contents("php://input");
-      $request = json_decode($jsonRequest);
-
-      $kirby = kirby();
-      
-      try {
-          $kirby->email([
-              'from'    => "adrien.payet@outlook.com",
-              'to'      => 'payet.adrien@protonmail.com',
-              'subject' => 'actualités',
-              'body'    => 'Ceci est un test simple.',
-          ]);
-          return json_encode(['status' => 'success', 'message' => 'Email envoyé avec succès.']);
-      } catch (Exception $error) {
-          return json_encode(['status' => 'error', 'message' => $error->getMessage()]);
-      }
-  }
-];

site/config/routes/subscribe.php

@@ -0,0 +1,46 @@
+<?php
+
+return [
+  'pattern' => '/subscribe.json',
+  'method'  => 'POST',
+  'action'  => function () {
+      $jsonRequest = file_get_contents('php://input');
+      $email = Str::lower(json_decode($jsonRequest));
+
+      if (V::email($email)) {
+          kirby()->impersonate('kirby');
+
+          $page = page('lettre');
+          $subscribers = $page->subscribers()->yaml();
+
+          $emailExists = in_array($email, array_column($subscribers, 'email'));
+
+          if ($emailExists) {
+              return [
+                  'status'  => 'error',
+                  'message' => 'Cet email est déjà inscris.',
+              ];
+          }
+
+          $newSubscriber = [
+            'email' => $email,
+            'inscriptiondate' => date('Y-m-d')
+            ];
+          $subscribers[] = $newSubscriber;
+
+          $page->update([
+              'subscribers' => $subscribers,
+          ]);
+
+          return [
+              'status'  => 'success',
+              'message' => 'Inscription réussie.',
+          ];
+      } else {
+          return [
+              'status'  => 'error',
+              'message' => 'Email invalide.',
+          ];
+      }
+  },
+];

site/config/routes/virtual-author.php

@@ -1,25 +0,0 @@
-<?php
-
-use Kirby\Uuid\Uuid;
-
-return [
-  'pattern' => 'auteurs/(:any)',
-  'action'  => function ($slug) {
-      $kirby = kirby();
-      $author = getAuthorBySlug($slug);
-
-      return Page::factory(
-          [
-            'slug' => '',
-            'template' => 'author',
-            'model' => 'authors',
-            'content' => [
-              'title' => $author->name(),
-              'presentation' => $author->presentation(),
-              'author' => $author->name(),
-              'uuid'  => Uuid::generate(),
-            ]
-          ]
-      );
-  }
-];

site/config/routes/virtual-category.php

@@ -5,18 +5,33 @@ use Kirby\Uuid\Uuid;
 return [
   'pattern' => 'categories/(:any)',
   'action'  => function ($category) {
-      $kirby = kirby();
 
-      return Page::factory(
-          [
-            'slug' => '',
-            'template' => 'category',
-            'model' => 'categories',
-            'content' => [
-              'title' => $category,
-              'uuid'  => Uuid::generate(),
-            ]
-          ]
+      $allTexts = page('textes')->grandChildren();
+      $textsInCategory = $allTexts->filter(
+          fn($text) => Str::slug($text->category()) === $category
       );
+
+      $texts = [];
+
+      foreach ($textsInCategory as $text) {
+          $texts[] = (string) $text->uri();
       }
+
+      try {
+          $title = $textsInCategory->first()->category();
+      } catch (\Throwable $th) {
+          go('/erreur');
+      }
+
+      return Page::factory([
+          'slug'     => Str::slug($category) . '-' . Uuid::generate(),
+          'template' => 'category',
+          'model'    => 'category',
+          'content'  => [
+              'title' => $title,
+              'texts' => Yaml::encode($texts),
+              'uuid'  => Uuid::generate(),
+          ],
+      ]);
+  },
 ];