Actualiser layouts/shortcodes/kombucha_en_fut.html

README.md

@@ -14,6 +14,16 @@ Pour la mise à jour vous, devez vous connecter sur la [forge logiciel](https://
 - 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

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 {
-            margin-left: .5rem;
+        div {
+            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

@@ -173,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 >}}
 <!-- 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:kombucha@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,6 +1,6 @@
 <div class="container -c2">
     <div class="picture">
-        <img src="/images/avion.webp" alt="">
+        <img src="/images/image-consigne-PAYSAGE3.webp" alt="">
     </div>
     <div class="content color -orange3">
         <h2 id="la-consigne">La consigne</h2>

layouts/shortcodes/engagement.html

@@ -38,7 +38,7 @@
     <div class="picture">
         <img
             srcset="/images/3bouteilles-bleu-portrait.webp 768w, /images/3bouteilles-bleu-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/3bouteilles-bleu-portrait.webp"
             alt="Murielle & Grégory"
         >

layouts/shortcodes/fondateurs.html

@@ -2,7 +2,7 @@
     <div class="picture">
         <img
             srcset="/images/fondateurs-portrait.webp 768w, /images/fondateurs-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/fondateurs-portrait.webp"
             alt="Murielle & Grégory"
         >

layouts/shortcodes/gamme.html

@@ -3,7 +3,7 @@
         <h2>Notre gamme</h2>
         <div class="boxes">
             <div class="box">
-                <img src="/images/bouteilles/Tropical-detouré-200px.webp" alt="" width="200" height="650">
+                <img src="/images/bouteilles/tropical.webp" alt="" width="100" height="300">
                 <div class="detail">
                     <div class="title">
                         <h3 class="tag color -violet1">Tropical</h3>
@@ -12,13 +12,13 @@
                     <p>
                         Kombucha aux sérieux accents de fruit de la
                         passion, suivit d’une légère amertume. Aucune
-                        importation de fruits exotiques. A base de
+                        importation de fruits exotiques. À base de
                         plantes cultivées localement.
                     </p>
                 </div>
             </div>
             <div class="box">
-                <img src="/images/bouteilles/chanvre-detouré-100*326px.webp" alt="" width="100" height="326">
+                <img src="/images/bouteilles/chanvre.webp" alt="" width="100" height="300">
                 <div class="detail">
                     <div class="title">
                         <h3 class="tag color -green2">Chanvre</h3>
@@ -26,7 +26,7 @@
                     </div>
                     <p>
                         Ce kombucha au chanvre est une invitation
-                        à la détente et au laché prise. Cette plante 
+                        à la détente et au lâché prise. Cette plante
                         à la réputation mystique possède un parfum
                         atypique et enivrant.
                     </p>
@@ -34,7 +34,7 @@
             </div>
             <br>
             <div class="box">
-                <img src="/images/bouteilles/pu_erh.webp" alt="" width="100" height="300">
+                <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>
@@ -82,7 +82,6 @@
                     </p>
                 </div>
             </div>
-            <br>
             <div class="box">
                 <img src="/images/bouteilles/chai_rooibos.webp" alt="" width="100" height="300">
                 <div class="detail">

layouts/shortcodes/kombucha_en_fut.html

@@ -2,7 +2,7 @@
     <div class="picture">
         <img
             srcset="/images/tireuse-portrait.webp 768w, /images/tireuse-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/tireuse-portrait.webp"
             alt="matériel pour tirer les fûts de kombucha"
         >
@@ -10,8 +10,8 @@
     <div class="content color -orange1">
         <h2>Du kombucha en fût</h2>
         <p>
-            Les développeurs/euses de festival sont sans cesse en recherche de nouveauté pour
-            émerveiller leur public. Le choix des artistes et des intervenants constitue l’ADN des événements. 
+            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>
@@ -23,8 +23,8 @@
             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> 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 :
+<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>

layouts/shortcodes/philosophie.html

@@ -2,7 +2,7 @@
     <div class="picture">
         <img
             srcset="/images/avion-portrait.webp 768w, /images/avion-paysage.webp 1024w"
-            sizes="(max-width: 1400px) 768px, 1024px"
+            sizes="(max-width: 768px) 100vw, 45vw"
             src="/images/avion-portrait.webp"
             alt="Murielle boit du Kombucha de Takubeh devant un avion"
         >