feat: Avancement du jour

.gitignore

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

README.md

@@ -6,7 +6,7 @@ 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 environnements
 
@@ -15,3 +15,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/styles/footer.scss

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

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,63 @@
         }
     }
 }
+
+.menu {
+    position: absolute;
+    bottom: .6rem;
+    font-family: 'Tox Typewriter';
+
+    a {
+        margin: .6rem;
+        padding: .6rem;
+        font-size: 1rem;
+    }
+
+    h1 {
+        font-size: 1rem;
+        margin: 0;
+        padding: 0;
+    }
+
+    a.active {
+        text-decoration: underline;
+    }
+}
+
+@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/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;
@@ -42,13 +52,14 @@ body {
     --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) }
@@ -212,7 +223,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 +317,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 +326,16 @@ 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;
+}

content/_index.html

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

content/_index.md

@@ -0,0 +1,10 @@
+---
+# 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"
+---
+
+{{< takubeh_kombucha >}}
+{{< gamme >}}
+<!-- kombucha_en_fut -->
+<!-- instagram -->

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,12 @@
+---
+# 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
+---
+
+{{< fondateurs >}}
+<!-- histoire -->
+{{< identite >}}

content/engagements.html

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

content/engagements.md

@@ -0,0 +1,12 @@
+---
+# 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
+---
+
+{{< philosophie >}}
+{{< engagement >}}
+<!-- consigne -->

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,12 @@
+---
+draft: true
+# 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
+---
+
+{{< reseau >}}
+{{< points_de_vente >}}

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">
+    <a href="/">
         {{ $tag := cond .IsHome "h1" "div" }}
         {{ printf "<%s class=\"title\">" $tag | safeHTML }}
             Takubeh<br>
             <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/menu.html

@@ -0,0 +1,7 @@
+{{ 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

@@ -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>
+            <a href="mailto:murielle@takubeh.fr" title="E-mail"><img src="/images/tabler/mail-heart.svg"><span> E-mail</span></a>
-            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>

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>