design virtual pages

assets/css/src/article.css

@@ -1,2 +1,3 @@
 article .content {
+  margin-top: calc(var(--unit--vertical) * 2);
 }

assets/css/src/header.css

@@ -33,18 +33,26 @@
   bottom: 0%;
 }
 
-.page-cover {
+body {
-  position: relative;
+  --entry-btns-height: 10svh;
-  height: 80svh;
+}
-  box-sizing: border-box;
+body[data-template="home"] {
-  display: flex;
+  --entry-btns-height: 30svh;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-top: calc(var(--unit--vertical-relative) * 5);
 }
 
-.page-cover.open + * {
+.page-cover {
-  margin-top: calc(var(--unit--vertical-relative) * 19);
+  position: relative;
+  height: calc(100svh - var(--entry-btns-height));
+  box-sizing: border-box;
+  padding-top: calc(var(--unit--vertical-relative) * 5);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.page-cover .text-wrapper {
+  height: 100%;
+  overflow: auto;
 }
 
 [data-template="home"] .page-cover {
@@ -56,7 +64,7 @@
   position: sticky;
   position: -webkit-sticky;
   top: calc(var(--unit--vertical) * 3);
-  height: 20svh;
+  height: var(--entry-btns-height);
   display: flex;
   justify-content: space-between;
 }

assets/css/src/html.css

@@ -37,7 +37,7 @@ html {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -52,7 +52,7 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.25);
   border-radius: 0px;
   border: none;
 }

assets/css/src/texts.css

@@ -38,6 +38,12 @@ h2 {
   font-size: var(--font-size-xl);
 }
 
+h3,
+.h3 {
+  font-size: var(--font-size-xl);
+  color: var(--color-secondary);
+}
+
 article h2 {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }

assets/css/src/virtual.css

@@ -0,0 +1,4 @@
+/* ================= SPECIFIC TO VIRTUAL PAGES ================= */
+[data-template="year"] .edito {
+  margin-bottom: var(--unit--vertical);
+}

assets/css/style.css

@@ -5,6 +5,7 @@
 @import url("src/header.css");
 @import url("src/nav.css");
 @import url("src/article.css");
+@import url("src/virtual.css");
 @import url("src/home.css");
 @import url("src/footer.css");
 :root {

site/snippets/cover.php

@@ -8,6 +8,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
   <div class="title-wrapper">
     <?= $slots->title() ?>
   </div>
+  <?php if ($slots->text()): ?>  
+    <div class="text-wrapper">
+      <?= $slots->text() ?>
+    </div>
+  <?php endif ?>
 </header>
 <div id="entry-btns">
   <button

site/snippets/panels.php

@@ -36,7 +36,7 @@
           :class="isOpen ? '' : 'short'"
           @click="isOpen = !isOpen" 
         >
-          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
+          <h3><?= $year->title() ?></h3>
           <div 
             class="panel__toggle-icon" 
             x-text="isOpen || search.length > 0 ? '-' : '+'"
@@ -79,7 +79,7 @@
               "
             >
               <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h3><?= $article->title() ?></h3>
+                <h4><?= $article->title() ?></h4>
               </a>
               <div class="text__infos">
                 <p>
@@ -143,7 +143,7 @@
           :class="isOpen ? '' : 'short'"
           @click="isOpen = !isOpen" 
         >
-          <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $category['title'] ?></h3>
+          <h3><?= $category['title'] ?></h3>
           <div 
             class="panel__toggle-icon" 
             x-text="isOpen || search.length > 0 ? '-' : '+'"
@@ -174,7 +174,7 @@
               "
             >
               <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h3><?= $article->title() ?></h3>
+                <h4><?= $article->title() ?></h4>
               </a>
               <div class="text__infos">
                 <p>

site/templates/author.php

@@ -4,16 +4,32 @@
 <article>
   <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
-      <h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
+      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
     <?php endslot() ?>
-    <?php slot('tabs') ?>
+    <?php slot('text') ?>
-      <?php snippet('tabs', [
+      <?= $page->presentation() ?>
-      'left' => [
+      <p class="h3">textes :</p>
-        'label' => 'Présentation',
+      <ul class="texts">
-        'content' => $page->presentation()
+      <?php foreach($site->index()->filterBy('template', 'in', array('linear', 'grid')) as $article): ?>
-      ],
+          <?php if ($article->author()->isNotEmpty() && $article->author()->toUser()->name() == $page->title()->value()): ?>
-      'authorFilter' => $page->author()
+            <li 
-    ]) ?>
+              class="text"
+            >
+              <a href="<?= $article->url() ?>" class="text__title no-line">
+                <h4><?= $article->title() ?></h4>
+              </a>
+              <div class="text__infos">
+                <p>
+                    <span class="light">par</span>
+                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+                </p>
+              </div>
+            </li>
+          <?php endif ?>
+        </ul>
+      <?php endforeach ?>
     <?php endslot() ?>
   <?php endsnippet() ?>
 </article>

site/templates/category.php

@@ -4,55 +4,33 @@
 <article>
   <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
-      <h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
+      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
-      <p class="light">catégorie</p>
+    <?php endslot() ?>
+    <?php slot('text') ?>
+      <ul class="texts">
+      <?php foreach($kirby->collection('categories') as $category): ?>
+          <?php if ($category['title'] == $page->title()->value()): ?>
+            <?php foreach($category['texts'] as $article): ?>
+              <li 
+                class="text"
+              >
+                <a href="<?= $article->url() ?>" class="text__title no-line">
+                  <h4><?= $article->title() ?></h4>
+                </a>
+                <div class="text__infos">
+                  <p>
+                      <span class="light">par</span>
+                      <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+                      <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+                      <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+                  </p>
+                </div>
+              </li>
+            <?php endforeach ?>
+          <?php endif ?>
+        </ul>
+      <?php endforeach ?>
     <?php endslot() ?>
   <?php endsnippet() ?>
-  <div 
-      class="active-tab"
-    >
-      <ul>
-      <?php foreach($kirby->collection('years') as $year): ?>
-        <?php if (A::some($year->children()->toArray(), function ($text) use ($page) {
-            return $text['content']['category'] == $page->title()->value();
-        })): ?>
-        <li>
-          <div 
-            x-data='{
-              isOpen: false
-            }'
-            :class="isOpen ? '' : 'short'"
-            class="
-              texts__year 
-              | full-width 
-              flex column 
-              bottom"
-            style="
-              --content: center; 
-              --bottom: 2;"
-          >
-            <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
-            <div class="year__edito">
-              <?= $year->edito() ?>
-            </div>
-            <button 
-              :class="isOpen ? 'open' : 'close'"
-              class="see-more toggle left" @click="isOpen = !isOpen"
-            >
-              Lire
-            </button>
-          </div>
-          <ul>
-          <?php foreach($year->children() as $article): ?>
-            <?php if ($article->category() == $page->title()->value()) : ?>
-              <?php snippet('text-item', array('article' => $article)) ?>
-            <?php endif ?>
-          <?php endforeach ?>
-          </ul>
-        </li>
-        <?php endif ?>
-      <?php endforeach ?>
-      </ul>
-    </div>
 </article>
 </main>

site/templates/linear.php

@@ -7,16 +7,10 @@
       <?php slot('title') ?>
       <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
       <p>
-        <span class="light">par </span>
+        <span class="light">par</span>
-        <a 
+        <a class="author" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>"><?= $page->author()->toUser()->name() ?></a><br>
-          class="author" 
+        <span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?><br>
-          href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
+        <span class="light">dans</span> <a href="<?= $page->parent()->url() ?>"><?= $page->parent()->title() ?></a> / <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
-          title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"
-        >
-          <?= $page->author()->toUser()->name() ?>
-        </a><br>
-        <span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?> 
-        <span class="light">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
       </p>
       <?php endslot() ?>
     <?php endsnippet() ?>

site/templates/year.php

@@ -0,0 +1,34 @@
+<?php snippet('header'); ?>
+
+<main id="<?= $page->template() ?>">
+<article>
+  <?php snippet('cover', slots: true) ?>
+    <?php slot('title') ?>
+      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
+    <?php endslot() ?>
+    
+    <?php slot('text') ?>
+    <div class="edito"><?= $page->edito() ?></div>
+    <ul class="texts">
+    <?php foreach($page->children() as $article): ?>
+      <li 
+        class="text"
+      >
+        <a href="<?= $article->url() ?>" class="text__title no-line">
+          <h4><?= $article->title() ?></h4>
+        </a>
+        <div class="text__infos">
+          <p>
+              <span class="light">par</span>
+              <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
+              <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+              <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+          </p>
+        </div>
+      </li>
+    <?php endforeach ?>
+    </ul>
+    <?php endslot() ?>
+  <?php endsnippet() ?>
+</article>
+</main>