Actualiser layouts/shortcodes/kombucha_en_fut.html

README.md

@@ -8,6 +8,29 @@ Il utilise un générateur de site statique ([Hugo](https://gohugo.io/)) permett
 
 Pour la mise à jour vous, devez vous connecter sur la [forge logiciel](https://git.resilien.fr) de RésiLien. Puis éditer les fichiers en ligne.
 
+### Les dossiers
+
+- Pour modifier [les pages](./content/) et donc le référencement des moteurs de recherche et le nom du menu
+- Pour modifier [le contenu des pages](./layouts/shortcodes/)
+- Pour ajouter [des images](./static/images/)
+
+### Menu
+
+Le menu est gérer directement dans chaque page et son ordre est gérer par un poid _weight_.
+
+### Balise HTML
+
+- Pour créer un paragraphe : `<p> Ceci est un paragraphe </p>`
+- Pour créer un texte en gras : `Ceci est <strong>en gras</strong>`
+- Pour une liste : `<ul><li>un élement</li><li>un second élement</li></ul>`
+
+### Les images
+
+- pour les produits les images sont en 100px par 300px
+- Pour les autres photos en 1024px par 768px ou inversement
+
+Enregirstrer les images directement en webp.
+
 ## Les environnements
 
 Actuellement il y a 3 environnements :

assets/javascripts/main.js

@@ -0,0 +1,23 @@
+const cachecaches = document.getElementsByClassName("cachecache");
+for (const element of cachecaches) {
+  const link = document.createElement("a");
+  const separators = element.dataset.separators;
+  const protocol = element.dataset.param1.split("").reverse().join("");
+  let url = protocol;
+  for (let i = 0; i < separators.length; i++) {
+    url += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
+  }
+  let text = element.dataset.param2.split("").reverse().join("");
+  for (let i = 1; i < separators.length; i++) {
+    text += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
+  }
+  if (!element.dataset.noinner) {
+    link.innerText = url.replace(new RegExp(element.dataset.regex, 'i'), element.dataset.replace);
+  } else {
+    link.innerHTML = element.innerHTML;
+  }
+  link.href = url;
+  link.rel = "nofollow";
+  element.parentElement.insertBefore(link, element);
+}
+while (cachecaches.length > 0) cachecaches[0].remove();

assets/styles/footer.scss

@@ -11,8 +11,12 @@
         font-weight: normal;
         font-style: normal;
 
-        div a {
+        div {
-            margin-left: .5rem;
+            text-align: center;
+            a {
+                margin-left: .5rem;
+                white-space: nowrap;
+            }
         }
     }
 
@@ -28,10 +32,16 @@
 
 @media screen and (max-width: 1024px) {
     .footer .container {
+        margin: 1rem .2rem;
         flex-direction: column-reverse;
 
+        div a {
+            margin-left: .2rem;
+        }
+
         p {
             margin-top: .5rem;
+            text-align: center;
         }
     }
 }

assets/styles/header.scss

@@ -62,6 +62,7 @@
         margin: .6rem;
         padding: .6rem;
         font-size: 1rem;
+        box-shadow: 1px 1px var(--color-red3),-1px -1px var(--color-red3),1px -1px var(--color-red3),-1px 1px var(--color-red3);
     }
 
     h1 {
@@ -72,6 +73,7 @@
 
     a.active {
         text-decoration: underline;
+        box-shadow: 1px 1px var(--color-yellow2),-1px -1px var(--color-yellow2),1px -1px var(--color-yellow2),-1px 1px var(--color-yellow2);
     }
 }
 

assets/styles/main.scss

@@ -2,3 +2,4 @@
 @import "style.scss";
 @import "header.scss";
 @import "footer.scss";
+@import "obfuscates.scss";

assets/styles/obfuscates.scss

@@ -0,0 +1,4 @@
+.cachecache:not([data-noinner="true"]) {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}

assets/styles/style.scss

@@ -50,6 +50,7 @@ body {
     --color-blue1: #3ea1da;
     --color-blue2: #154f8e;
     --color-blue3: #002830;
+    --color-violet1: #713678;
     --color-black: black;
 
     --gutter: 4rem;
@@ -78,6 +79,7 @@ body {
 .-blue1   { --color: var(--color-white); --bg-color: var(--color-blue1) }
 .-blue2   { --color: var(--color-white); --bg-color: var(--color-blue2) }
 .-blue3   { --color: var(--color-white); --bg-color: var(--color-blue3) }
+.-violet1 { --color: var(--color-white); --bg-color: var(--color-violet1) }
 .-black   { --color: var(--color-white); --bg-color: var(--color-black) }
 
 
@@ -171,6 +173,24 @@ body {
     display: flex;
     align-items: center;
     max-width: 500px;
+
+    &:hover img {
+        animation: tiltBottle 1s 1 linear;
+    }
+    @keyframes tiltBottle{
+        20%{
+            transform: rotate(2deg);
+        }
+        40%{
+            transform: rotate(-2deg);
+        }
+        60%{
+            transform: rotate(2deg);
+        }
+        80%{
+            transform: rotate(-2deg);
+        }
+    }
 }
 .gamme img { 
     width: var(--bottle-width); 

content/_index.md

@@ -2,9 +2,16 @@
 # SEO : pour les moteurs de recherche
 title: Takubeh - Kombucha
 description: "Takubeh Kombucha, cette boisson fermentée à base de thé, peu sucrée, subtilement acidulée et naturellement pétillante, est produite de façon artisanale et écoresponsable dans un atelier dans le Pilat. Une gamme variée: Thé vert ou thé noir, chai rooibos chanvre eucalyptus citronnelle hibiscus vanille"
+# Gestion du menu
+menus:
+  main:
+    name: On boit quoi ?
+weight: 1
 ---
 
+<main>
 {{< takubeh_kombucha >}}
 {{< gamme >}}
-<!-- kombucha_en_fut -->
+{{< kombucha_en_fut >}}
 <!-- instagram -->
+</main>

content/a-propos.md

@@ -7,6 +7,8 @@ menus: main
 weight: 30
 ---
 
+<main>
 {{< fondateurs >}}
 <!-- histoire -->
 {{< identite >}}
+</main>

content/engagements.md

@@ -7,6 +7,8 @@ menus: main
 weight: 20
 ---
 
+<main>
 {{< philosophie >}}
 {{< engagement >}}
-<!-- consigne -->
+{{< consigne >}}
+</main>

content/ou-nous-trouver.md

@@ -8,5 +8,7 @@ menus: main
 weight: 10
 ---
 
+<main>
 <!-- {{< reseau >}} -->
 {{< points_de_vente >}}
+</main>

layouts/_default/_markup/render-link.html

@@ -23,13 +23,16 @@
   {{ end }}
   {{- $params = $params | append (string $string) -}}
   <span
-    class="obfuscate{{ if $isMailtoLink }} at{{ end }}"
+    class="cachecache{{ if $isMailtoLink }} at{{ end }}"
     data-separators="{{ $separators }}"
     {{ range $param_index, $param_value := $params }}
       data-param{{add $param_index 1}}="{{ range $index := seq (sub (len $param_value) 1) 0}}{{ substr $param_value $index 1}}{{ end }}"
     {{ end }}
     data-regex="{{ $regex }}"
     data-replace="{{ $replace }}"
-  >
+  >{{ if $isMailtoLink }}
+    {{ $mail := index (split .Destination ":") 1 }}
+    {{ range $index := seq (sub (len $mail) 1) 0}}{{ substr $mail $index 1}}{{ end }}
+  {{ end }}
   </span>
 {{- end -}}

layouts/partials/javascripts.html

@@ -1,4 +1,4 @@
-{{ $js := resources.Get "js/main.js" }}
+{{ $js := resources.Get "javascripts/main.js" }}
 {{ with $js }}
     {{ $secureJS := . | js.Build }}
     {{ if not $.Site.Params.debug }}

layouts/partials/menu.html

@@ -1,7 +0,0 @@
-{{ with site.Menus.main }}
-  <nav class="box container menu color -blue3">
-    {{- range . -}}
-        <a{{ if $.IsMenuCurrent .Menu . }} class="active" aria-current="page"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
-    {{- end -}}
-  </nav>
-{{ end }}

layouts/partials/pied_de_page.html

@@ -3,7 +3,7 @@
         <p>Lieu dit Le Clapeau, 42100 Rochetaillée</p>
         <p>{{ now.Format "2006" }} © Takubeh - <a href="/mentions-legales/">Mentions légales</a></p>
         <div>
-            <a href="mailto:murielle@takubeh.fr" title="E-mail"><img src="/images/tabler/mail-heart.svg"><span> E-mail</span></a>
+            <span class="cachecache at" data-noinner="true" data-separators=":@." data-param1="otliam" data-param2="ahcubmok" data-param3="hebukat" data-param4="rf" data-regex="[a-z]*:(.*)" data-replace="$1"><img src='/images/tabler/mail-heart.svg'> <span>E-mail</span></span>
             <a href="https://www.instagram.com/takubehkombucha/" title="Instagram"><img src="/images/tabler/brand-instagram.svg"><span> Instagram</span></a>
             <a href="https://www.facebook.com/profile.php?id=100076292530719" title="Facebook"><img src="/images/tabler/brand-facebook.svg"><span> Facebook</span></a>
         </div>

layouts/shortcodes/consigne.html

@@ -1 +1,46 @@
-<p>La partie « Consigne » est encore à construire</p>
+<div class="container -c2">
+    <div class="picture">
+        <img src="/images/image-consigne-PAYSAGE3.webp" alt="">
+    </div>
+    <div class="content color -orange3">
+        <h2 id="la-consigne">La consigne</h2>
+        <p>
+            Vous l’aurez compris, la philosophie de Takubeh et les ambitions qui y sont
+            associées résident principalement dans le désir de travailler de façon 
+            éco-responsable.
+        </p>
+        <p>
+            En accord avec les valeurs que nous portons, c’est tout naturellement que nous
+            nous sommes tournés vers la consigne de nos contenants en verre au format 1L.
+        </p>
+        <p>
+            Nous sommes depuis plusieurs années partenaire du collecteur Rebooteille, qui est
+            le principal acteur local dans le réseau du réemploi.
+        </p>
+        <p>
+            Les motivations de notre engagement sont les bénéfices du réemploi :
+        </p>
+        <ul class="chiffre">
+            <li>
+                <img src="/images/eau.png">
+                <h3>- 51%</h3>
+                <p>d’eau</p>
+            </li>
+            <li>
+                <img src="/images/eclair.png">
+                <h3>- 76%</h3>
+                <p>d’énergie</p>
+            </li>
+            <li>
+                <img src="/images/terre.png">
+                <h3>- 79%</h3>
+                <p>de gaz à effet de serre</p>
+            </li>
+        </ul>
+        <p class="right"><small>Source : cabinet Deroche consultant</small></p>
+        <blockquote>
+            « Etablir des modes de consommation et de production durables »,<br>
+            c’est le point de départ de la logique Rebooteille
+        </blockquote>
+    </div>
+</div>

layouts/shortcodes/engagement.html

@@ -1,4 +1,3 @@
-<!-- Une production locale & engagée -->
 <div class="container -c2">
     <div class="content color -yellow1">
         <h2>Une production locale & engagée</h2>
@@ -18,7 +17,7 @@
             </li>
             <li>
                 Un conditionnement durable : consigne sur les bouteilles, étiquettes
-                issues de matières minérales, caisses de transport réutilisables
+                issues de matières minérales, caisses de transport réutilisables
             </li>
             <li>
                 Une empreinte énergétique contrôlée : machines entièrement
@@ -37,6 +36,11 @@
         </blockquote>
     </div>
     <div class="picture">
-        <img src="/images/takubeh-engagement.jpg" alt="">
+        <img
+            srcset="/images/3bouteilles-bleu-portrait.webp 768w, /images/3bouteilles-bleu-paysage.webp 1024w"
+            sizes="(max-width: 768px) 100vw, 45vw"
+            src="/images/3bouteilles-bleu-portrait.webp"
+            alt="Murielle & Grégory"
+        >
     </div>
 </div>

layouts/shortcodes/fondateurs.html

@@ -1,6 +1,11 @@
 <div class="container fondateur -c2">
     <div class="picture">
-        <img src="/images/takubeh-fondateurs.webp" alt="">
+        <img
+            srcset="/images/fondateurs-portrait.webp 768w, /images/fondateurs-paysage.webp 1024w"
+            sizes="(max-width: 768px) 100vw, 45vw"
+            src="/images/fondateurs-portrait.webp"
+            alt="Murielle & Grégory"
+        >
     </div>
     <div class="content color -red2">
         <h2 class="center">Les fondateurs</h2>

layouts/shortcodes/gamme.html

@@ -1,25 +1,40 @@
-<!-- Notre gamme -->
 <div class="container gamme">
     <div class="content color -white">
         <h2>Notre gamme</h2>
         <div class="boxes">
             <div class="box">
-                <img src="/images/bouteilles/chai_rooibos.webp" alt="" width="100" height="300">
+                <img src="/images/bouteilles/tropical.webp" alt="" width="100" height="300">
                 <div class="detail">
                     <div class="title">
-                        <h3 class="tag color -red2">Chai Rooibos</h3>
+                        <h3 class="tag color -violet1">Tropical</h3>
                         <h4>33 cl / 1 L</h4>
                     </div>
                     <p>
-                        Le Rooibos, l’or rouge d’Afrique du Sud,
+                        Kombucha aux sérieux accents de fruit de la
-                        soutenu par les incontournables épices
+                        passion, suivit d’une légère amertume. Aucune
-                        indiennes de cannelle, clou de girofle,
+                        importation de fruits exotiques. À base de
-                        cardamome, gingembre, appelle au voyage.
+                        plantes cultivées localement.
                     </p>
                 </div>
             </div>
             <div class="box">
-                <img src="/images/bouteilles/pu_erh.webp" alt="" width="100" height="300">
+                <img src="/images/bouteilles/chanvre.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -green2">Chanvre</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        Ce kombucha au chanvre est une invitation
+                        à la détente et au lâché prise. Cette plante
+                        à la réputation mystique possède un parfum
+                        atypique et enivrant.
+                    </p>
+                </div>
+            </div>
+            <br>
+            <div class="box">
+                <img src="/images/bouteilles/original.webp" alt="" width="100" height="300">
                 <div class="detail">
                     <div class="title">
                         <h3 class="tag color -green5">L'Original</h3>
@@ -27,9 +42,9 @@
                     </div>
                     <p>
                         Issu de théiers anciens, sauvages et
-                        originels, le thé vert Pu’Erh** est apprécié
+                        originels, le thé vert Pu’Erh** est 
-                        pour ses vertus désaltérante et ses
+                        apprécié pour sa vertu désaltérante 
-                        parfums frais et subtils.
+                        et ses parfums frais et subtils.
                         Sa très faible teneur en théine
                         permet de consommer ce kombucha tout
                         au long de la journée.
@@ -51,6 +66,37 @@
                     </p>
                 </div>
             </div>
+            <div class="box">
+                <img src="/images/bouteilles/eucalyptus.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -blue3">Eucalyptus</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        L’eucalyptus, sans doute une des plantes
+                        les plus désaltérantes !
+                        Ce kombucha servi bien frais est
+                        extrêmement parfumé et parfait
+                        pour étancher les grandes soifs.
+                    </p>
+                </div>
+            </div>
+            <div class="box">
+                <img src="/images/bouteilles/chai_rooibos.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -red2">Chai Rooibos</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        Le Rooibos, l’or rouge d’Afrique du Sud,
+                        soutenu par les incontournables épices
+                        indiennes de cannelle, clou de girofle,
+                        cardamome, gingembre, appelle au voyage.
+                    </p>
+                </div>
+            </div>
             <div class="box">
                 <img src="/images/bouteilles/vanille.webp" alt="" width="100" height="300">
                 <div class="detail">
@@ -68,22 +114,6 @@
                     </p>
                 </div>
             </div>
-            <div class="box">
-                <img src="/images/bouteilles/eucalyptus.webp" alt="" width="100" height="300">
-                <div class="detail">
-                    <div class="title">
-                        <h3 class="tag color -blue3">Eucalyptus</h3>
-                        <h4>33 cl / 1 L</h4>
-                    </div>
-                    <p>
-                        L’eucalyptus, sans doute une des plantes
-                        les plus désaltérantes !
-                        Ce kombucha servi bien frais est
-                        extrêmement parfumé et parfait
-                        pour étancher les grandes soifs.
-                    </p>
-                </div>
-            </div>
         </div>
     </div>
 </div>

layouts/shortcodes/hempalicious.html

@@ -1,4 +1,3 @@
-<!-- Takubeh x Hempalicious -->
 <div class="container -c2">
     <div class="picture">
         <img src="/images/kombucha-cbd.webp" alt="">

layouts/shortcodes/identite.html

@@ -1,4 +1,3 @@
-<!-- L'identité de Takubeh -->
 <div class="container -c2">
     <div class="content color -blue2">
         <h2>L'identité de Takubeh</h2>

layouts/shortcodes/kombucha_en_fut.html

@@ -1 +1,44 @@
-<p>La partie « kombucha en fût » est encore à construire</p>
+<div class="container -c2">
+    <div class="picture">
+        <img
+            srcset="/images/tireuse-portrait.webp 768w, /images/tireuse-paysage.webp 1024w"
+            sizes="(max-width: 768px) 100vw, 45vw"
+            src="/images/tireuse-portrait.webp"
+            alt="matériel pour tirer les fûts de kombucha"
+        >
+    </div>
+    <div class="content color -orange1">
+        <h2>Du kombucha en fût</h2>
+        <p>
+            Les développeurs/euses de festival et autres évènements festifs ou culturels, sont sans cesse en recherche de nouveauté pour
+            émerveiller leur public. Le choix des artistes et des intervenants constitue l’ADN de ces événements. 
+            L’offre de restauration et boisson fait aussi partie des fondamentaux.
+        </p>
+        <p>
+            Se reposant sur notre longue carrière de festivaliers, nous avons remarqué
+            que l’offre en bières et autres boissons alcoolisées artisanales est grandissante,
+            ce qui est réjouissant.
+        </p>
+        <p>
+            En revanche, l’offre en soft drinks est souvent pauvre, ou constituée de jus de fruits ou sodas
+ particulièrement sucrés, ou ne correspondant pas ou plus aux habitudes de consommation des festivaliers. 
+ Cette offre peut largement être améliorée selon nous.</p>
+<p> <strong>Choisir le kombucha Takubeh, c'est profiter d’une boisson bien travaillée, fraichement tirée du fût, 
+    qui a bien d’autres qualités</strong> :
+        </p>
+        <ul class="flower">
+            <li>Soft drink</li>
+            <li>Fermentée et festive</li>
+            <li>Pétillant naturel</li>
+            <li>Originale et tendance</li>
+            <li>Bio</li>
+            <li>Peu sucrée</li>
+            <li>Fraîche et désaltérante</li>
+            <li>Zéro emballage pour une <strong>empreinte carbone réduite</strong></li>
+        </ul>
+        <blockquote>
+            Les enjeux planétaires sont immenses,<br>
+            alors chaque geste compte.
+        </blockquote>
+    </div>
+</div>

layouts/shortcodes/philosophie.html

@@ -1,7 +1,11 @@
-<!-- Notre philosophie -->
 <div class="container -c2">
     <div class="picture">
-        <img src="/images/avion.webp" alt="">
+        <img
+            srcset="/images/avion-portrait.webp 768w, /images/avion-paysage.webp 1024w"
+            sizes="(max-width: 768px) 100vw, 45vw"
+            src="/images/avion-portrait.webp"
+            alt="Murielle boit du Kombucha de Takubeh devant un avion"
+        >
     </div>
     <div class="content color -red1">
         <h2>Notre philosophie</h2>

layouts/shortcodes/takubeh_kombucha.html

@@ -1,9 +1,8 @@
-<!-- Takubeh Kombucha ? -->
 <div class="container -c2">
     <div class="content color -green3">
-        <h2>Takubeh Kombucha ?</h2>
+        <h2>Boisson alternative</h2>
         <p>
-            Takubeh est une jeune entreprise de production artisanale de kombucha, une
+            Takubeh est une entreprise de production artisanale de kombucha, une
             boisson fermentée à base de thé, naturellement pétillante, extrêmement peu
             sucrée, désaltérante et savoureuse.
         </p>