mobile : center text button. homogenize close / open nav btns

assets/css/src/article.css

@@ -15,7 +15,8 @@ article #main-content {
 article #main-content #chapo::after {
   content: "";
   display: block;
-  margin: calc(2 * var(--unit--vertical)) 0;
+  margin-top: calc(2 * var(--unit--vertical));
+  margin-bottom: calc(4 * var(--unit--vertical));
 
   width: 100%;
   height: 1px;

assets/css/src/footer.css

@@ -5,12 +5,7 @@
 
   border-bottom: 0;
 }
-.open-nav-wrapper {
+
-  border-top: 1px solid #eee;
-  border-right: 1px solid #eee;
-  background-color: #000;
-  padding: 3px var(--unit--horizontal) 6px var(--unit--horizontal);
-}
 [data-template="home"] #main-footer {
   position: fixed;
   left: 0;
@@ -25,6 +20,22 @@
   transform: translateY(-1px);
 }
 
+@media screen and (max-width: 640px) {
+  .open-nav {
+    box-sizing: border-box;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    outline: none;
+    border-top: 1px solid #fff;
+    font-size: var(--font-size-m);
+    background-color: #000;
+    padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
+    margin-bottom: env(safe-area-inset-bottom);
+  }
+}
+
 @media screen and (min-width: 640px) {
   #main-footer li {
     display: block !important;

assets/css/src/generic.css

@@ -107,7 +107,8 @@ body {
 
 /* ================= BUTTONS ================= */
 .toggle-btn--left::after,
-button.plus::after {
+button.plus::after,
+button.less::after {
   margin-left: var(--unit--horizontal);
 }
 
@@ -115,7 +116,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 {

assets/css/src/nav.css

@@ -1,7 +1,3 @@
-button.open-nav {
-  display: inline-block;
-}
-
 #nav-overlay {
   position: fixed;
   inset: 0;
@@ -108,6 +104,9 @@ button.search__icon {
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
+footer {
+  width: 100%;
+}
 .panel-close {
   position: fixed;
   box-sizing: border-box;

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,5 @@ tabs:
               - image
               - line
               - quote
+
   metaTab: tabs/meta

site/blueprints/pages/linear.yml

@@ -41,19 +41,6 @@ tabs:
             when:
               isHtmlMode: true
 
-  paramsTab:
+  paramsTab: tabs/params
-    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
 
   metaTab: tabs/meta

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/snippets/nav.php

@@ -1,8 +1,4 @@
-
+<nav class="panel" x-data="{search: ''}">
-<nav 
-  class="panel"
-  x-data="{search: ''}"
->
   <header>
     <p class="sort-btns">
       <button class="sort-btn sort-btn--years active">années</span></button>
@@ -10,30 +6,20 @@
       <button class="sort-btn sort-btn--all">voir tout</button>
     </p>
     <div class="search">
-      <input 
+      <input class="search__input" type="text" placeholder="Chercher" x-model="search">
-        class="search__input" 
+      <img x-show="search.length === 0"
-        type="text" 
+        src="<?= url('assets/images/icons/search.svg') ?>"
-        placeholder="Chercher" 
+        class="search__icon" alt="Icône loupe indiquant le champ de recherche.">
-        x-model="search"
+      <button x-show="search.length > 0" @click="search = ''" class="search__icon">
-      >
+        <img
-      <img 
+          src="<?= url('assets/images/icons/close.svg') ?>"
-        x-show="search.length === 0"
+          alt="">
-        src="<?= url('assets/images/icons/search.svg') ?>" 
-        class="search__icon"
-        alt="Icône loupe indiquant le champ de recherche."
-      >
-      <button 
-        x-show="search.length > 0"
-        @click="search = ''"
-        class="search__icon"
-      >
-        <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
       </button>
     </div>
   </header>
   <?php snippet('nav__texts--all') ?>
-  <?php snippet('nav__texts--collection', ["collection" => "categories"]) ?>
+  <?php snippet('nav__texts--collection', ['collection' => 'categories']) ?>
-  <?php snippet('nav__texts--collection', ["collection" => "years"]) ?>
+  <?php snippet('nav__texts--collection', ['collection' => 'years']) ?>
-  <button class="panel-close">fermer</button>
+  <button class="less panel-close">textes</button>
 </nav>
 <div id="nav-overlay"></div>

site/templates/grid.php

@@ -1,20 +1,36 @@
 <?php snippet('header') ?>
 <main id="<?= $page->template() ?>">
   <article>
-    <?php snippet('cover', array('isOpen' => true), slots: true) ?>
+    <?php snippet('cover', ['isOpen' => true], slots: true) ?>
-      <?php slot('title') ?>
+    <?php slot('title') ?>
-      <h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
+    <h2
-      <p>
+      class="main-title <?= setTitleFontSizeClass($page->title()) ?>">
-        <span class="light">par</span>
+      <?= $page->title() ?></h2>
-        <a class="author" href="/auteurs/<?= Str::slug($page->author()->toPage()->title()) ?>"><?= $page->author()->toPage()->title() ?></a><br>
+    <p>
-        <span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?><br>
+      <span class="light">par</span>
-        <span class="light">dans</span> <a href="<?= $page->parent()->url() ?>"><?= $page->parent()->title() ?></a> / <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
+      <a class="author"
-      </p>
+        href="/auteurs/<?= Str::slug($page->author()->toPage()->title()) ?>"><?= $page->author()->toPage()->title() ?></a><br>
-      <?php endslot() ?>
+      <span class="light">publié le
+      </span><?= $page->published()->toDate('d/m/Y') ?><br>
+      <span class="light">dans</span> <a
+        href="<?= $page->parent()->url() ?>"><?= $page->parent()->title() ?></a>
+      / <a
+        href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
+    </p>
+    <?php endslot() ?>
     <?php endsnippet() ?>
+    
     <div id="main-content">
+
+      <?php if ($page->chapo()->isNotEmpty()): ?>
+      <div id="chapo">
+        <?= $page->chapo() ?>
+      </div>
+      <?php endif ?>
+
       <?php foreach ($page->body()->toLayouts() as $layout): ?>
-      <section class="grid" id="<?= $layout->id() ?>" data-columns="<?= $layout->columns()->count() ?>">
+      <section class="grid" id="<?= $layout->id() ?>"
+        data-columns="<?= $layout->columns()->count() ?>">
         <?php foreach ($layout->columns() as $column): ?>
         <div class="column" style="--span:<?= $column->span(32) ?>">
           <div class="blocks">
@@ -24,6 +40,7 @@
         <?php endforeach ?>
       </section>
       <?php endforeach ?>
+    
     </div>
   </article>
 </main>