add main edito to home

assets/css/src/header.css

@@ -37,7 +37,7 @@ body {
   --entry-btns-height: 10svh;
 }
 body[data-template="home"] {
-  --entry-btns-height: 30svh;
+  --entry-btns-height: 15svh;
 }
 
 .page-cover {
@@ -49,6 +49,14 @@ body[data-template="home"] {
   display: flex;
   flex-direction: column;
 }
+.page-cover .edito {
+  max-height: 43svh;
+  overflow: auto;
+  margin-top: var(--unit--vertical);
+  box-sizing: border-box;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+}
 
 .page-cover .text-wrapper {
   height: 100%;
@@ -76,8 +84,8 @@ body[data-template="home"] {
   align-items: start;
 }
 
-.entry-btn--left::after,
+button.toggle.left::after,
-.entry-btn--right::before {
+button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }

assets/css/src/reset.css

@@ -12,13 +12,8 @@ ul {
 }
 
 button {
-  background: none;
+  all: unset;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
   cursor: pointer;
-  outline: inherit;
 }
 
 a {

assets/css/src/texts.css

@@ -55,11 +55,14 @@ article h2 {
 }
 
 .title-center {
-  --margin-left: calc(4 * var(--unit--horizontal));
+  --margin-left: calc(3 * 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);
+  font-size: var(--font-size-l);
+}
+.title-center h2 {
+  font-size: var(--font-size-l);
 }
 
 .main-title {

site/snippets/cover.php

@@ -16,11 +16,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
 </header>
 <div id="entry-btns">
   <button
-    class="entry-btn entry-btn--left"
+    class="entry-btn entry-btn--left toggle left"
     onclick="togglePanel('left')"
   >années</button>
   <button
-    class="entry-btn entry-btn--right"
+    class="entry-btn entry-btn--right toggle right"
     onclick="togglePanel('right')"
   >categories</button>
 </div>

site/templates/home.php

@@ -1,12 +1,23 @@
 <?php snippet('header') ?>
 
-<main>
+<main x-data="{ isEditoOpen: false }">
   <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
-    <h2 class="title-center">
+    <div class="title-center">
+      <button @click="isEditoOpen = !isEditoOpen">
+        <h2>
           critique des arts<br>
           et des techniques<br>
         </h2>
+        <button 
+          class="main-edito-btn | toggle left"
+          :class="isEditoOpen ? 'open': ''"
+        >édito</button>
+      </button>
+    </div>
+    <div x-show="isEditoOpen" class="edito">
+      <?= $site->edito() ?>
+    </div>
     <?php endslot() ?>
   <?php endsnippet() ?>
   <?php snippet('nav') ?>