save broken

assets/css/src/footer.css

@@ -4,7 +4,6 @@
   bottom: 0;
   width: calc(18 * var(--unit--horizontal));
   padding: var(--unit--horizontal);
-  padding-top: var();
 }
 
 #main-footer a {
@@ -12,3 +11,9 @@
   -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/css/src/generic.css

@@ -42,10 +42,10 @@
   padding-right: calc(var(--unit--horizontal) * var(--right));
 }
 .bottom:not(.padding) {
-  margin-bottom: calc(var(--unit--horizontal) * var(--bottom));
+  margin-bottom: calc(var(--unit--vertical) * var(--bottom));
 }
 .padding.bottom {
-  padding-bottom: calc(var(--unit--horizontal) * var(--bottom));
+  padding-bottom: calc(var(--unit--vertical) * var(--bottom));
 }
 
 .full-width {
@@ -59,6 +59,7 @@
 .flex {
   display: flex;
   justify-content: var(--content);
+  align-items: var(--align);
   gap: calc(var(--gap) * var(--unit--horizontal));
 }
 .flex.column {

assets/css/src/header.css

@@ -23,7 +23,6 @@
   color: var(--color-primary--transparent);
   position: relative;
   z-index: 1;
-  margin-left: calc(var(--unit--horizontal) * 2);
 }
 #logo #inactuel {
   position: absolute;
@@ -42,12 +41,27 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: calc(7 * var(--unit--vertical)) 0;
+  padding-top: calc(8 * var(--unit--vertical));
-  margin-bottom: 0rem;
+  padding-bottom: calc(5 * var(--unit--vertical));
-
-  transition: margin-bottom 0.5s ease-in-out;
 }
 
-.page-cover.open {
+@media screen and (min-width: 640px) {
-  margin-bottom: calc(100vh - 10 * var(--unit--vertical));
+  #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;
+  }
 }

assets/css/src/html.css

@@ -49,3 +49,9 @@ html {
   border-radius: 0px;
   border: none;
 }
+
+@media screen and (min-width: 640px) {
+  body {
+    padding: 0 calc(6 * var(--unit--horizontal));
+  }
+}

assets/css/src/tabs.css

@@ -1,7 +1,7 @@
 .toggle-btns {
   position: sticky;
 }
-button.toggle.open {
+button.toggle.open:not(.see-more) {
   font-weight: bold;
 }
 
@@ -26,17 +26,49 @@ button.toggle.right.open::before {
 }
 
 #tabs {
+  --mg: 4;
   position: relative;
+  margin-top: calc(0px - (2 * var(--unit--vertical)));
+  margin-bottom: calc((var(--mg) / 2) * var(--unit--vertical));
+}
+#tabs.safari {
+  margin-top: calc(-60px - (3 * var(--unit--vertical)));
+}
+#home #tabs {
+  margin-top: calc(0px - (6 * var(--unit--vertical)));
 }
 
 .active-tab {
-  position: absolute;
+  max-height: 70vh;
   overflow: auto;
-  margin-top: calc(var(--unit--vertical) * 0.5);
+  margin-top: calc((var(--unit--vertical) * 0.5));
-  height: 0px;
   transition: height 0.5s ease-in-out;
 }
 
 .page-cover.open .active-tab {
   height: calc(100vh - 7.5 * var(--unit--vertical));
 }
+
+.texts__year.short .year__edito {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.texts__year .see-more {
+  width: 100%;
+  margin-top: calc(var(--unit--vertical) / 2);
+}
+
+@media screen and (min-width: 640px) {
+  #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);
+  }
+}

assets/css/src/texts.css

@@ -52,8 +52,8 @@ button,
 .title-center {
   font-size: var(--font-size-m);
   font-weight: var(--font-weight-light);
-  text-align: center;
   width: 100%;
+  margin-left: calc(5 * var(--unit--horizontal));
 }
 
 .main-title {
@@ -108,3 +108,9 @@ a:not(.no-line) {
 article p {
   margin-bottom: var(--unit--vertical);
 }
+
+@media screen and (min-width: 640px) {
+  .title-center {
+    margin-left: calc(2 * var(--unit--horizontal));
+  }
+}

assets/css/src/variables.css

@@ -19,3 +19,27 @@
   --font-weight-bold: 400;
   --font-weight-extra-bold: 550;
 }
+
+@media screen and (min-width: 640px) {
+  :root {
+    --color-background: #000;
+    --color-primary: #ffffff;
+    --color-primary--transparent: rgba(255, 255, 255, 0.86);
+    --color-secondary: rgb(120, 171, 150, 0.86);
+    --color-secondary--light: rgb(119, 177, 157, 0.25);
+    --color-secondary--x-light: rgb(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;
+  }
+}

assets/dist/style.css

@@ -308,20 +308,20 @@ button.toggle.right.open:before {
 #organize {
   margin-bottom: calc(var(--unit--vertical));
 }
-.article {
+.texts {
   position: relative;
   margin-bottom: calc(var(--unit--vertical) * 2);
   box-sizing: border-box;
 }
-.article__infos,
+.texts__infos,
-.article__labels {
+.texts__labels {
   transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1)));
 }
-.article__infos,
+.texts__infos,
-.article__labels {
+.texts__labels {
   display: flex;
 }
-.article .label {
+.texts .label {
   margin-right: var(--unit--horizontal);
   text-decoration: underline;
   text-decoration-style: dotted;

assets/js/script.js

@@ -42,4 +42,11 @@ document.addEventListener("DOMContentLoaded", () => {
   window.addEventListener("scroll", () => {
     toggleLogoState();
   });
+
+  if (
+    navigator.userAgent.toLowerCase().includes("safari") &&
+    window.innerWidth < 800
+  ) {
+    document.querySelector("#tabs").classList.add("safari");
+  }
 });

site/plugins/front-comments

@@ -1 +1 @@
-Subproject commit d1a5d28580d8705f80460197fbd0be77039a5e47
+Subproject commit cc9b03f63b02c0b461fbdbf419c224a96288abb1

site/snippets/cover.php

@@ -3,14 +3,10 @@ $isOpen = isset($isOpen) ? $isOpen : false;
 ?>
 
 <header 
-  x-data="{
-    isOpen: <?= $isOpen ?>
-  }"
   class="page-cover"
-  :class="isOpen ? 'open' : 'close'"
 >
   <div class="title-wrapper">
     <?= $slots->title() ?>
   </div>
-  <?= $slots->tabs() ?>
 </header>
+<?= $slots->tabs() ?>

site/snippets/header.php

@@ -2,13 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
     <link rel="stylesheet" href="<?= url('assets') ?>/css/style.css?version-cache-prevent<?= rand(0, 1000)?>" />
-    <script src="<?= url('assets') ?>/js/script.js" defer></script>
+    <script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <meta name="robots" content="noindex">
-
-    
   </head>
   <body class="grid">
+  <header id="main-header">
+    <div id="logo" >
+      <a href="/" class="no-line">
+        <h2 id="actuel">actuel</h2>
+        <h2 id="inactuel">inactuel</h2>
+      </a>
+    </div>
+  </header>

site/snippets/tabs.php

@@ -4,7 +4,7 @@ $authorFilter = isset($authorFilter) ? $authorFilter : false;
 $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
 ?>
 
-<div id="tabs" x-data="{
+<nav id="tabs" x-data="{
     activeTab: '<?= $activeTab ?>'
   }">
     <div class="toggle-btns | flex space-between" style="
@@ -18,6 +18,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
       <button
         class="toggle right"
         :class="activeTab === 'texts' ? 'open' : 'close'"
+        title="Voir tous les textes"
         @click="toggleTab($data, 'texts')"
       >textes</button>
     </div>
@@ -29,26 +30,45 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
       <ul 
       x-show="activeTab === 'texts'">
       <?php foreach($kirby->collection('years') as $year): ?>
-          <div class="article__year | full-width flex  bottom" style="--content: center;--bottom:2">
+          <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>
         <?php foreach($year->children() as $article): ?>
           <?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
-            <li class="article | bottom" style="--bottom:3">
+            <li class="texts | bottom" style="--bottom:3">
-              <a href="<?= $article->url() ?>" class="article__title no-line">
+              <a href="<?= $article->url() ?>" class="texts__title no-line">
                 <h3><?= $article->title() ?></h3>
               </a>
-              <div class="article__infos">
+              <div class="texts__infos">
                 <p>
                   <?php if (!$authorFilter): ?>
                     <span class="opacity" style="--opacity:.5">par</span>
-                    <a class="author no-line" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a>,
+                    <a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a>,
                     <span class="opacity" style="--opacity:.5">le</span> 
                   <?php endif ?>
                   <?= $article->published()->toDate('d/m/Y') ?>
                 </p>
               </div>
-              <!-- <div class="article__labels">
+              <!-- <div class="texts__labels">
                 <button class="label label--category">[ <?= $article->category() ?> ]</button>
               </div> -->
             </li>
@@ -57,4 +77,4 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
       <?php endforeach ?>
       </ul>
     </div>
-  </div>
+  </nav>

site/templates/author.php

@@ -1,25 +1,20 @@
 <?php snippet('header'); ?>
-<header id="header" class="minimized">
-  <div id="logo" >
-    <a href="/" class="no-line">
-      <h2 id="actuel">actuel</h2>
-      <h2 id="inactuel">inactuel</h2>
-    </a>
-  </div>
-</header>
 
 <main id="<?= $page->template() ?>">
 <article>
-  <div class="article-header">
+  <?php snippet('cover', slots: true) ?>
-    <h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
+    <?php slot('title') ?>
-    <p></p>
+      <h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
-  </div>
+    <?php endslot() ?>
-  <?php snippet('tabs', [
+    <?php slot('tabs') ?>
-    'left' => [
+      <?php snippet('tabs', [
-      'label' => 'Présentation',
+      'left' => [
-      'content' => $page->presentation()
+        'label' => 'Présentation',
-    ],
+        'content' => $page->presentation()
-    'authorFilter' => $page->author()
+      ],
-  ]) ?>
+      'authorFilter' => $page->author()
+    ]) ?>
+    <?php endslot() ?>
+  <?php endsnippet() ?>
 </article>
 </main>

site/templates/home.php

@@ -1,12 +1,4 @@
 <?php snippet('header') ?>
-<header id="main-header">
-  <div id="logo">
-    <a href="/" class="no-line">
-      <h1 id="actuel">actuel</h1>
-      <h1 id="inactuel">inactuel</h1>
-    </a>
-  </div>
-</header>
 
 <main id="<?= $page->template() ?>">
   <?php snippet('cover', slots: true) ?>

site/templates/linear.php

@@ -1,18 +1,20 @@
 <?php snippet('header') ?>
-<header id="main-header" class="minimized">
-  <div id="logo" >
-    <a href="/" class="no-line">
-      <h2 id="actuel">actuel</h2>
-      <h2 id="inactuel">inactuel</h2>
-    </a>
-  </div>
-</header>
 <main id="<?= $page->template() ?>">
 <article>
   <?php snippet('cover', ['isOpen' => true], slots: true) ?>
     <?php slot('title') ?>
     <h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
-      <p><span class="opacity" style="--opacity:.5">par</span> <a class="author no-line" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"><?= $page->author()->toUser()->name() ?></a></p>
+      <p>
+        <span class="opacity" style="--opacity:.6">par </span>
+        <a 
+          class="author" 
+          href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>" 
+          title="Voir les articles d'<?= $page->author()->toUser()->name() ?>"
+        >
+          <?= $page->author()->toUser()->name() ?>
+        </a><br>
+        <span class="opacity" style="--opacity:.6">le <?= $page->published()->toDate('d/m/Y') ?></span>
+      </p>
     <?php endslot() ?>
     <?php slot('tabs') ?>
     <?php snippet('tabs', [
@@ -20,12 +22,9 @@
         'label' => 'édito ' . $page->parent()->title(),
         'content' => $page->parent()->edito()
       ],
-      'activeTab' => 'édito ' . $page->parent()->title()
     ]) ?>    
     <?php endslot() ?>
   <?php endsnippet() ?>
   <?= $page->body() ?>
 </article>
 </main>
-
-<?php snippet('footer') ?>