Actualiser layouts/shortcodes/kombucha_en_fut.html

.drone.yml

@@ -0,0 +1,64 @@
+---
+# drone encrypt Weko/Takubeh $AWS_ACCESS_KEY_ID
+kind: secret
+name: PRODUCTION_AWS_ACCESS_KEY_ID
+data: Sfbb990+qmAzkZ+UGyj7TLcmCt2gg3jkRBYhZu1eb5CTuum47kMvO/GuSgtiLhZXsx9uDue1
+
+---
+# drone encrypt Weko/Takubeh $AWS_SECRET_ACCESS_KEY
+kind: secret
+name: PRODUCTION_AWS_SECRET_ACCESS_KEY
+data: Vhe3xjkJBekUUQGo73/tcEKGn2IumJFvDOiicPgecKCTjIP/kgv2rtLFmXehF+DYmObFc00Iw/2P+z6C211A0D76rBZZTi9pUevHmkd7WmGGZhycR3aI/rf6uYc=
+
+---
+kind: pipeline
+type: docker
+name: prod
+
+# clone:
+#   disable: true
+
+steps:
+# - name: clone
+#   image: alpine/git
+#   commands:
+#   - git clone --recursive $DRONE_REPO_LINK .
+
+# - name: install npm
+#   image: node:current-alpine
+#   commands:
+#   - (cd themes/hugo-theme-lowtech && npm i)
+
+- name: build website
+  image: hugomods/hugo:base-0.121.1
+  commands:
+    - hugo --minify --environment production
+
+# - name: typo
+#   image: node:current-alpine
+#   volumes:
+#   - name: hugo-theme-lowtech_node_modules
+#     path: /drone/src/themes/hugo-theme-lowtech/node_modules
+#   commands:
+#   - node themes/hugo-theme-lowtech/scripts/typo
+
+- name: deploy
+  image: hugomods/hugo:base-0.121.1
+  environment:
+    AWS_ACCESS_KEY_ID:
+      from_secret: PRODUCTION_AWS_ACCESS_KEY_ID
+    AWS_SECRET_ACCESS_KEY:
+      from_secret: PRODUCTION_AWS_SECRET_ACCESS_KEY
+  commands:
+    - hugo deploy --environment production
+
+- name: notify
+  image: plugins/matrix@sha256:f1affb31b0c86963c97c6f976fa0dcb3cc84272057fd8558d609d28b3064bd7f
+  settings:
+    homeserver: https://converser.eu
+    roomid: "QwOITmkKxRJJyCSDOZ:converser.eu"
+    userid: "resilien:converser.eu"
+    accesstoken:
+      from_secret: MATRIX_ACCESSTOKEN
+  when:
+    status: [ failure ]

.gitignore

@@ -1,2 +1,3 @@
 .hugo_build.lock
-resources
+resources
+public

README.md

@@ -6,7 +6,30 @@ Il utilise un générateur de site statique ([Hugo](https://gohugo.io/)) permett
 
 ## Mettre à jour le site
 
-Pour la mise à jour vous, devez vous connecter sur la forge logiciel de RésiLien. Puis éditer les fichiers en ligne.
+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
 
@@ -15,3 +38,19 @@ Actuellement il y a 3 environnements :
 - développement, permettant d'afficher le site web localement et d'avancer dans le développement
 - [staging](https://staging.takubeh.fr), permettant d'afficher l'avancement du développement
 - [production](https://takubeh.fr) qui est le site officiel
+
+## Instagram
+
+Nous aimerions importer des images d'instagram directement sur le site internet
+
+https://github.com/instaloader/instaloader permet de télécharger le profile public
+
+```
+cd static
+instaloader -F takubehkombucha
+cd takubehkombucha
+unxz *.xz
+```
+https://codepen.io/GeorgePark/pen/VXrwOP
+
+https://github.com/alrayyes/instagram-hugo-demo-theme

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

@@ -1,14 +1,47 @@
-.footer, .footer .content {
+.footer {
     min-height: inherit;
     width: inherit;
+
+    .container {
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin: 1rem;
+        font-family: 'Tox Typewriter';
+        font-weight: normal;
+        font-style: normal;
+
+        div {
+            text-align: center;
+            a {
+                margin-left: .5rem;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    img {
+        display: inline;
+        vertical-align: middle;
+    }
+
+    p {
+        padding: 0;
+    }
 }
 
-.footer p {
+@media screen and (max-width: 1024px) {
-    padding: 0;
+    .footer .container {
-}
+        margin: 1rem .2rem;
+        flex-direction: column-reverse;
 
-.footer a {
+        div a {
-    font-family: 'Tox Typewriter';
+            margin-left: .2rem;
-    font-weight: normal;
+        }
-    font-style: normal;
+
+        p {
+            margin-top: .5rem;
+            text-align: center;
+        }
+    }
 }

assets/styles/header.scss

@@ -2,10 +2,37 @@
     height: var(--header-height);
     /* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
     background-image: url(/images/fond.webp);
-    background-repeat: none;
+    background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     text-align: center;
+    position: relative;
+
+    a {
+        text-decoration: none
+    }
+
+    .title {
+        padding: calc(var(--h1-size) / 4 / 2);
+        background-color: var(--color-red3);
+        color: var(--color-white);
+        line-height: .5;
+        text-align: right;
+        font-size: calc(var(--h1-size) / 2);
+        font-family: 'Tox Typewriter';
+        font-weight: normal;
+        font-style: normal;
+        margin-bottom: 2rem;
+
+        small {
+            color: var(--color-yellow2);
+            font-size: calc(var(--h1-size) / 2 / 2);
+        }
+    }
+}
+
+.home .header {
+    height: var(--header-home-height);
 
     .title {
         padding: calc(var(--h1-size) / 4);
@@ -13,6 +40,11 @@
         color: var(--color-white);
         line-height: .5;
         text-align: right;
+        font-size: var(--h1-size);
+        font-family: 'Tox Typewriter';
+        font-weight: normal;
+        font-style: normal;
+        margin-bottom: 0;
 
         small {
             color: var(--color-yellow2);
@@ -20,3 +52,65 @@
         }
     }
 }
+
+.menu {
+    position: absolute;
+    bottom: .6rem;
+    font-family: 'Tox Typewriter';
+
+    a {
+        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 {
+        font-size: 1rem;
+        margin: 0;
+        padding: 0;
+    }
+
+    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);
+    }
+}
+
+@media screen and (max-width: 480px) {
+
+    .header .menu {
+        bottom: .3rem;
+        a {
+            margin: .3rem;
+            padding: .3rem;
+            font-size: .8rem;
+        }
+
+        h1 {
+            font-size: .8rem;
+        }
+    }
+}
+
+@media screen and (max-height: 480px) and (orientation: landscape) {
+    .home .header {
+        height: 80vh;
+    }
+    .header {
+        height: 40vh;
+    }
+
+    .header .menu {
+        bottom: .3rem;
+        a {
+            margin: .3rem;
+            padding: .3rem;
+            font-size: .8rem;
+        }
+
+        h1 {
+            font-size: .8rem;
+        }
+    }
+}

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

@@ -5,10 +5,20 @@
     font-size: 17px;
 }
 
+h1, h2, h3, h4, h5 {
+    line-height: 1;
+}
+
 h1, h2, h3, h4, h5, figure, p, ol, ul {
     margin: 0;
 }
 
+h1 {
+    text-align: center;
+    padding: 2rem;
+    font-size: 2rem;
+}
+
 /* ol, ul {
     list-style: none;
     padding-inline: 0;
@@ -36,19 +46,22 @@ body {
     --color-yellow3: #dac161;
     --color-orange1: #d88250;
     --color-orange2: #bb5c46;
+    --color-orange3: #e26f31;
     --color-blue1: #3ea1da;
     --color-blue2: #154f8e;
     --color-blue3: #002830;
+    --color-violet1: #713678;
     --color-black: black;
 
     --gutter: 4rem;
-    --header-height: 60vh;
+    --header-home-height: 60vh;
+    --header-height: 40vh;
 
     --bottle-width: 100px;
     --bottle-height: 300px;
 }
 
-.-white   { --color: var(--color-black); --bg-color: var(--color-white) }
+.-white   { --color: var(--color-black); --bg-color: var(--color-white); a { color: var(--color-black) }}
 .-green1  { --color: var(--color-white); --bg-color: var(--color-green1) }
 .-green2  { --color: var(--color-white); --bg-color: var(--color-green2) }
 .-green3  { --color: var(--color-white); --bg-color: var(--color-green3) }
@@ -62,9 +75,11 @@ body {
 .-yellow3 { --color: var(--color-white); --bg-color: var(--color-yellow3) }
 .-orange1 { --color: var(--color-white); --bg-color: var(--color-orange1) }
 .-orange2 { --color: var(--color-white); --bg-color: var(--color-orange2) }
+.-orange3 { --color: var(--color-white); --bg-color: var(--color-orange3) }
 .-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) }
 
 
@@ -158,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); 
@@ -212,7 +245,7 @@ h1, h2, h3, h4, h5, .scribe, blockquote {
 }
 
 h1 { font-size: var(--h1-size) }
-h2 { font-size: var(--h2-size); padding-bottom: 3rem; }
+h2 { font-size: var(--h2-size); padding-top: 1.5rem; padding-bottom: 1.5rem; line-height: 1; }
 h3 { font-size: var(--h3-size) }
 h4 { font-size: var(--h4-size) }
 h5 { font-size: var(--h5-size) }
@@ -306,7 +339,8 @@ Les media query permettent d'adapter le design selon la largeur des appareils :
         --h3-size: 1rem;
         --h4-size: .75rem;
         --h5-size: .5rem;
-        --header-height: 50vh;
+        --header-home-height: 50vh;
+        --header-height: 30vh;
         --gutter: 1rem;
         --bottle-width: 50px;
         --bottle-height: 150px;
@@ -314,3 +348,56 @@ Les media query permettent d'adapter le design selon la largeur des appareils :
     h2 { text-align: center }
     .boxes { flex-wrap: wrap }
 }
+
+p:empty, p:-moz-only-whitespace {
+    display:none;
+}
+
+.simple {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 1rem;
+
+    --h1-size: 4rem;
+    --h2-size: 2rem;
+}
+
+.chiffre {
+    display: flex;
+    list-style: none;
+    justify-content: space-between;
+    font-family: 'Tox Typewriter';
+    font-weight: normal;
+    font-style: normal;
+    margin: 0;
+    padding: 0;
+
+    h3 {
+        font-size: 3rem;
+    }
+
+    p {
+        font-size: 1.5rem;
+    }
+
+    li {
+        text-align: center;
+        flex: 1
+    }
+
+    img {
+        margin: 0 auto;
+    }
+}
+
+.right {
+    text-align: right;
+    font-family: 'Tox Typewriter';
+    font-weight: normal;
+    font-style: normal;
+}
+
+.carte {
+    width: 80%;
+    margin: 1rem auto;
+}

content/_index.html

@@ -1,8 +0,0 @@
----
-type: 'single'
----
-
-{{< takubeh_kombucha >}}
-{{< gamme >}}
-{{< kombucha_en_fut >}}
-{{< instagram >}}

content/_index.md

@@ -0,0 +1,17 @@
+---
+# 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.html

@@ -1,8 +0,0 @@
----
-title: À propos
-description: [A COMPLETER PAR TAKUBEH]
----
-
-{{< fondateurs >}}
-{{< histoire >}}
-{{< identite >}}

content/a-propos.md

@@ -0,0 +1,14 @@
+---
+# SEO : pour les moteurs de recherche
+title: À propos
+description: Takubeh est une marque dont les valeurs sont portées par Greg et Murielle, un couple engagé dans des luttes liées à l’écologie et l’humain. Ils partagent leur passion dans des lieux comme les boutiques, magasins, bars, cafés et restaurants, mais aussi des evenements comme festivals, foires, salons.
+# Gestion du menu
+menus: main
+weight: 30
+---
+
+<main>
+{{< fondateurs >}}
+<!-- histoire -->
+{{< identite >}}
+</main>

content/engagements.html

@@ -1,8 +0,0 @@
----
-title: Engagements
-description: [A COMPLETER PAR TAKUBEH]
----
-
-{{< philosophie >}}
-{{< engagement >}}
-{{< consigne >}}

content/engagements.md

@@ -0,0 +1,14 @@
+---
+# SEO : pour les moteurs de recherche
+title: Engagements
+description: La philosophie de Takubeh réside dans la volonté proposer un kombucha de qualité tout en essayant de réduire au maximum son impact environnemental. Ont été décidé dès le début le choix du bio, la consigne des bouteilles (partenaire Rebooteille), le compostage, le processus mécanisé de la production.
+# Gestion du menu
+menus: main
+weight: 20
+---
+
+<main>
+{{< philosophie >}}
+{{< engagement >}}
+{{< consigne >}}
+</main>

content/mentions-legales.md

@@ -1,6 +1,10 @@
 ---
-title: RésiLien, Mentions légales
+# SEO : pour les moteurs de recherche
-description: Les mentions légales de RésiLien
+title: Mentions légales du site Takubeh - Kombucha
+description: Vous retrouverez l'ensemble des mentions légales du site Takubeh - Kombucha ainsi que son hébergeur.
+# Gestion du menu
+menus: footer
+# template
 layout: simple
 ---
 
@@ -8,25 +12,37 @@ layout: simple
 
 ## Édition du site web
 
-Édité par Weko
+Le site WEB https://takubeh.fr est édité par la SAS Takubeh.
 
-### Weko
+- Siège social : 18 Route Du Gouffre d'Enfer 42100 Saint-Étienne  
+- SIRET : 881 969 430 00019  
+- Code APE : 11.07B (Production de boissons rafraîchissantes)  
+- TVA Intracommunautaire : FR17 881 969 430
 
-Simon Constans - Weko  
+## Développement et Maintenance
-Entrepreneur titulaire d’un contrat CAPE au sein de la Coopérative d’Activités et d’Emploi CAP Services.  
+
-Siège social : 11 rue Duphot 69003 Lyon  
+Le site WEB https://takubeh.fr a été réalisé de façon éco-responsable par Weko, pour un numérique responsable de proximité, une marque de la Coopérative d’Activité et d’Emploi CAP Services.
-Site Web : weko.io  
+
-SIRET : 402 636 757 00039  
+- Siège social : 11 rue Duphot 69003 Lyon
-Code APE : 8299Z  
+- Site Web : https://weko.io
-TVA Intracommunautaire : FR32 402 636 757
+- SIRET : 402 636 757 00039
+- Code APE : 82.99Z (Autres activités de soutien aux entreprises n.c.a.)
+- TVA Intracommunautaire : FR32 402 636 757
 
 ## Hébergement
 
-Services et données actives hébergés sur micro-ordinateurs dans les locaux de Weko à Crémeaux (42).  
+Le site WEB https://takubeh.fr est hébergé avec sobriété par RésiLien une marque de la Coopérative d’Activité et d’Emploi CAP Services.
-Siège social : 11 rue Duphot 69003 Lyon
 
-Service de VPN et de surveillance des services à usage interne pour l'infrastructure décentralisée de RésiLien hébergé par [Hetzner](https://hetzner.com/)  
+- Siège social : 11 rue Duphot 69003 Lyon
-Siège social : Hetzner Online GmbH, Industriestr. 25, 91710 Gunzenhausen, Allemagne
+- Site Web : https://resilien.fr
+- SIRET : 402 636 757 00039
+- Code APE : 82.99Z (Autres activités de soutien aux entreprises n.c.a.)
+- TVA Intracommunautaire : FR32 402 636 757
 
-Sauvegardes des données chiffrées par mot de passe hébergées par [Scaleway](https://www.scaleway.fr).  
+## Liens hypertextes
-Siège social : Scaleway, 8 rue de la Ville l’Evêque, 75008 Paris, France
+
+Les liens hypertextes mis en œuvre en direction d’autres sites WEB ne sauraient engager la responsabilité de Takubeh, car nous n’exerçons aucun contrôle sur le contenu des sites auxquels ces liens renvoient.
+
+## Cookie
+
+Ce site n’installe aucun cookie, c’est pourquoi il n’y a aucun bandeau spécifique. Nous respectons la vie privée de nos visiteurs.

content/ou-nous-trouver.html

@@ -1,7 +0,0 @@
----
-title: Où nous trouver ?
-description: [A COMPLETER PAR TAKUBEH]
----
-
-{{< reseau >}}
-{{< points_de_vente >}}

content/ou-nous-trouver.md

@@ -0,0 +1,14 @@
+---
+draft: false
+# SEO : pour les moteurs de recherche
+title: Où nous trouver ?
+description: Takubeh kombucha est distribué en Rhône-Alpes en bouteille en verre et fût inox de manière locale à Saint-Etienne, Roanne et dans toute la Loire, le Pilat, à Lyon, Villefranche-sur-Saône et dans le Rhône, à Macon et en Saône-et-Loire, dans l’Ain, à Vienne et en l’Isère, à Annonay et en l’Ardèche.
+# Gestion du menu
+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/_default/baseof.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>Takubeh - Kombucha</title>
+    <title>{{ .Title }}</title>
+    <meta name="description" content="{{ .Description }}" />
 
     <link rel="canonical" href="{{ .Permalink }}" />
     {{ with .OutputFormats.Get "RSS" }}<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" />{{ end }}
@@ -14,7 +15,7 @@
     {{ if ne hugo.Environment "production" }}<meta name="robots" content="noindex">{{ end }}
     {{ partial "styles.html" . }}
   </head>
-  <body>
+  <body{{ if .IsHome }} class="home"{{ end }}>
     {{ partial "en_tete.html" . }}
 
     {{ block "main" . }}{{ end }}

layouts/page/simple.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div style="max-width: 800px; margin: 0 auto">
+<div class="simple color -white">
     {{ .Content }}
 </div>
 {{ end }}

layouts/partials/en_tete.html

@@ -1,7 +1,22 @@
 <header class="box header">
-    {{ $tag := cond .IsHome "h1" "div" }}
+    <a href="/">
-    {{ printf "<%s class=\"title\">" $tag | safeHTML }}
+        {{ $tag := cond .IsHome "h1" "div" }}
-        Takubeh<br>
+        {{ printf "<%s class=\"title\">" $tag | safeHTML }}
-        <small>Kombucha</small>
+            Takubeh<br>
-    {{ printf "</%s>" $tag | safeHTML }}
+            <small>Kombucha</small>
+        {{ printf "</%s>" $tag | safeHTML }}
+    </a>
+    {{ with site.Menus.main }}
+        <nav class="box container menu ">
+            {{- range . -}}
+                <a class="color -blue3{{ if $.IsMenuCurrent .Menu . }} active{{ end }}" href="{{ .URL }}">
+                    {{ if $.IsMenuCurrent .Menu . }}
+                    <h1>{{ .Name }}</h1>
+                    {{ else }}
+                    {{ .Name }}
+                    {{ end }}
+                </a>
+            {{- end -}}
+        </nav>
+    {{ end }}
 </header>

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/pied_de_page.html

@@ -1,10 +1,11 @@
 <footer class="box footer color -red3">
-    <div class="content">
+    <div class="container">
-        <p>
+        <p>Lieu dit Le Clapeau, 42100 Rochetaillée</p>
-            E-mail : <a href="mailto:murielle@takubeh.fr">murielle@takubeh.fr</a><br>
+        <p>{{ now.Format "2006" }} © Takubeh - <a href="/mentions-legales/">Mentions légales</a></p>
-            Site web : <a href="https://takubeh.fr/">takubeh.fr</a><br>
+        <div>
-            Instagram : <a href="https://www.instagram.com/takubehkombucha/">www.instagram.com/takubehkombucha/</a><br>
+            <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>
-            Facebook : <a href="https://www.facebook.com/profile.php?id=100076292530719">Takubeh Kombucha</a><br>
+            <a href="https://www.instagram.com/takubehkombucha/" title="Instagram"><img src="/images/tabler/brand-instagram.svg"><span> Instagram</span></a>
-        </p>
+            <a href="https://www.facebook.com/profile.php?id=100076292530719" title="Facebook"><img src="/images/tabler/brand-facebook.svg"><span> Facebook</span></a>
+        </div>
     </div>
 </footer>

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/points_de_vente.html

@@ -1 +1,3 @@
-<p>La partie « Les points de vente » est encore à construire</p>
+<div class="carte">
+    <iframe width="100%" height="600" src="https://takubeh.gogocarto.fr/map?iframe=1&noheader=1#/carte/@45.63,4.56,9z?cat=all" frameborder="0" marginheight="0" marginwidth="0"></iframe>
+</div>

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>

static/images/tabler/brand-facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>

static/images/tabler/brand-instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16.5 7.5l0 .01" /></svg>

static/images/tabler/mail-heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.5 19h-5.5a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" /><path d="M3 7l9 6l2.983 -1.989l6.017 -4.011" /><path d="M18 22l3.35 -3.284a2.143 2.143 0 0 0 .005 -3.071a2.242 2.242 0 0 0 -3.129 -.006l-.224 .22l-.223 -.22a2.242 2.242 0 0 0 -3.128 -.006a2.143 2.143 0 0 0 -.006 3.071l3.355 3.296z" /></svg>