initialisation du site

.gitignore

@@ -0,0 +1,2 @@
+.hugo_build.lock
+resources

README.md

@@ -0,0 +1,17 @@
+# Source du site web Takubeh
+
+Le site web de Takubeh a été créé de façon éco-responsable par l'association RésiLien pour présenter la coopérative Takubeh.
+
+Il utilise un générateur de site statique ([Hugo](https://gohugo.io/)) permettant un faible impact énergétique.
+
+## 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.
+
+## Les environnements
+
+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

assets/styles/main.scss

@@ -0,0 +1,2 @@
+@import "reset.scss";
+@import "style.scss";

assets/styles/reset.scss

@@ -0,0 +1,274 @@
+/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+html {
+	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+	font-family:
+		system-ui,
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
+	line-height: 1.15; /* 1. Correct the line height in all browsers. */
+	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+	-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
+	tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+
+body {
+	margin: 0; /* Remove the margin in all browsers. */
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+	height: 0; /* 1 */
+	color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+	text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	text-indent: 0; /* 1 */
+	border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+	text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+	box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}

assets/styles/style.scss

@@ -0,0 +1,353 @@
+/* RESET */
+
+:root {
+    line-height: 1.25;
+    font-size: 17px;
+}
+
+h1, h2, h3, h4, h5, figure, p, ol, ul {
+    margin: 0;
+}
+
+/* ol, ul {
+    list-style: none;
+    padding-inline: 0;
+} */
+
+img {
+    display: block;
+    max-inline-size: 100%;
+}
+
+/* COLOR */
+
+body {
+    --color-white: white;
+    --color-green1: #739761;
+    --color-green2: #3a7f44;
+    --color-green3: #336f5f;
+    --color-green4: #3f6463;
+    --color-green5: #92c83e;
+    --color-red1: #d43e45;
+    --color-red2: #69282f;
+    --color-red3: #f36561;
+    --color-yellow1: #d39734;
+    --color-yellow2: #fac247;
+    --color-yellow3: #dac161;
+    --color-orange1: #d88250;
+    --color-orange2: #bb5c46;
+    --color-blue1: #3ea1da;
+    --color-blue2: #154f8e;
+    --color-blue3: #002830;
+    --color-black: black;
+
+    --gutter: 4rem;
+    --header-height: 90vh;
+
+    --bottle-width: 100px;
+    --bottle-height: 300px;
+}
+
+.-white   { --color: var(--color-black); --bg-color: var(--color-white) }
+.-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) }
+.-green4  { --color: var(--color-white); --bg-color: var(--color-green4) }
+.-green5  { --color: var(--color-white); --bg-color: var(--color-green5) }
+.-red1    { --color: var(--color-white); --bg-color: var(--color-red1) }
+.-red2    { --color: var(--color-white); --bg-color: var(--color-red2) }
+.-red3    { --color: var(--color-white); --bg-color: var(--color-red3) }
+.-yellow1 { --color: var(--color-white); --bg-color: var(--color-yellow1) }
+.-yellow2 { --color: var(--color-white); --bg-color: var(--color-yellow2) }
+.-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) }
+.-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) }
+.-black   { --color: var(--color-white); --bg-color: var(--color-black) }
+
+
+.color {
+    background-color: var(--bg-color);
+    color: var(--color);
+}
+
+/* FONTS */
+
+@font-face {
+    font-family: 'Tox Typewriter';
+    src: url('../fonts/ToxTypewriter.woff2') format('woff2'),
+        url('../fonts/ToxTypewriter.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* DESIGN */
+
+.header {
+    height: var(--header-height);
+    /* background-image: url(https://source.unsplash.com/random/1080x720/?Kombucha); */
+    background-image: url(../images/fond.webp);
+    background-repeat: none;
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+}
+
+.header h1 {
+    padding: calc(var(--h1-size) / 4);
+    background-color: var(--color-red3);
+    color: var(--color-white);
+    line-height: .5;
+    text-align: right;
+}
+.header h1 small {
+    color: var(--color-yellow2);
+    font-size: calc(var(--h1-size) / 2);
+}
+
+.container, header, footer {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.container {
+    align-items: stretch;
+}
+
+.-c2 > div {
+    width: 50%;
+}
+
+.-c2 > div.picture {
+    width: 45%;
+}
+
+.-c2 > div.content {
+    width: 55%;
+}
+
+.content {
+    padding: var(--gutter); 
+    width: 100%;
+}
+
+.boxes {
+    display: flex;
+    justify-content: center;
+    gap: var(--gutter);
+}
+
+.tag {
+    text-align: center;
+    margin: 0 auto 2rem;
+    width: fit-content;
+}
+.tag h3 {
+    padding: 0.5rem 1.5rem;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+.picture {
+    position: relative;
+    padding: 3rem;
+    color: var(--color-white);
+}
+
+.picture img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
+
+.footer, .footer .content {
+    min-height: inherit;
+    width: inherit;
+}
+
+.footer p {
+    padding: 0;
+}
+
+.footer a {
+    font-family: 'Tox Typewriter';
+    font-weight: normal;
+    font-style: normal;
+}
+
+.gamme h2 { text-align: center }
+.gamme .boxes { flex-wrap: wrap; gap: calc(var(--gutter) * 2) var(--gutter); max-width: 1400px; margin: 0 auto; }
+.gamme .box { 
+    width: calc(33% - var(--gutter) + 1rem);
+    display: flex;
+    align-items: center;
+    max-width: 500px;
+}
+.gamme img { 
+    width: var(--bottle-width); 
+    height: var(--bottle-height); 
+    display: inline-block;
+}
+.gamme .detail {
+    --detail-gutter: 1rem;
+    width: calc(100% - (var(--bottle-width) + var(--detail-gutter))); 
+    display: inline-block;
+    margin-left: var(--detail-gutter);
+}
+.gamme .title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+.gamme .title h3, .gamme .title h4, .gamme .detail p { display: inline; margin: 0; margin: 0 }
+.gamme h3 {
+    padding: .1rem .5rem;
+    font-size: 1.2rem;
+}
+.gamme h4 {
+    font-size: .8rem;
+}
+
+.ombre {
+    text-shadow: 2px 2px 4px #444,-2px -2px 4px #444,-2px 2px 4px #444,2px -2px 4px #444;
+}
+
+/* GENERAL */
+
+body {
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+    font-weight: 300;
+    --h1-size: 8rem;
+    --h2-size: 4rem;
+    --h3-size: 2rem;
+    --h4-size: 1.5rem;
+    --h5-size: 1.1rem;
+}
+
+a { color: var(--color-white); } 
+
+h1, h2, h3, h4, h5, .scribe, blockquote {
+    font-family: 'Tox Typewriter';
+    font-weight: normal;
+    font-style: normal;
+}
+
+h1 { font-size: var(--h1-size) }
+h2 { font-size: var(--h2-size); padding-bottom: 3rem; }
+h3 { font-size: var(--h3-size) }
+h4 { font-size: var(--h4-size) }
+h5 { font-size: var(--h5-size) }
+
+p, ul { padding-bottom: 1.5rem; }
+
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    text-align: right;
+    font-size: 1.2rem;
+    border-right: 3px solid white;
+    padding-right: 1rem;
+    margin: 1rem 1rem 1rem 0;
+}
+
+.center { text-align: center }
+.flower { list-style: none; padding: 0 }
+.flower li {
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.5,12A3.5,3.5 0 0,0 22,8.5A6.5,6.5 0 0,0 15.5,2A3.5,3.5 0 0,0 12,5.5A3.5,3.5 0 0,0 8.5,2A6.5,6.5 0 0,0 2,8.5A3.5,3.5 0 0,0 5.5,12A3.5,3.5 0 0,0 2,15.5A6.5,6.5 0 0,0 8.5,22A3.5,3.5 0 0,0 12,18.5A3.5,3.5 0 0,0 15.5,22A6.5,6.5 0 0,0 22,15.5A3.5,3.5 0 0,0 18.5,12M12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16M14.5,12A2.5,2.5 0 0,1 12,14.5A2.5,2.5 0 0,1 9.5,12A2.5,2.5 0 0,1 12,9.5A2.5,2.5 0 0,1 14.5,12Z'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E") no-repeat left top;
+    background-size: 1rem;
+    padding: 0 0 .5rem 1.5rem;
+}
+
+/* MOBILE
+
+Les media query permettent d'adapter le design selon la largeur des appareils :
+    320px — 480px: Mobile devices
+    481px — 768px: iPads, Tablets
+    769px — 1024px: Small screens, laptops
+    1025px — 1200px: Desktops, large screens
+    1201px and more —  Extra large screens, TV
+*/
+@media screen and (max-width: 1200px) {
+    body {
+        /* background-color: yellow; */
+        --h1-size: 7rem;
+        --h2-size: 3.5rem;
+        --h3-size: 1.75rem;
+        --h4-size: 1.5rem;
+        --h5-size: 1.1rem;
+        --gutter: 3rem;
+    }
+}
+@media screen and (max-width: 1024px) {
+    body {
+        /* background-color: green; */
+        --h1-size: 6rem;
+        --h2-size: 3rem;
+        --h3-size: 1.5rem;
+        --h4-size: .75rem;
+        --h5-size: .5rem;
+        --gutter: 2rem;
+    }
+    .gamme .box {
+        width: calc(50% - var(--gutter) / 2);
+    }
+}
+@media screen and (max-width: 768px) {
+    body {
+        /* background-color: red; */
+        --h1-size: 5rem;
+        --h2-size: 2.5rem;
+        --h3-size: 1.75rem;
+        --h4-size: 1.5rem;
+        --h5-size: 1.1rem;
+        --gutter: 1.5rem;
+
+
+        --bottle-width: 75px;
+        --bottle-height: 225px;
+    }
+    .gamme .box {
+        width: 100%;
+    }
+    .container { flex-wrap: wrap ;}
+    .container .picture { min-height: 80vh; }
+    .container .picture { order: 2 }
+    .container .content { order: 1 }
+    .-c2 > div, .-c2 > div.picture, .-c2 > div.content {
+        width: 100%;
+    }
+}
+@media screen and (max-width: 480px) {
+    body {
+        /* background-color: blue; */
+        --h1-size: 4rem;
+        --h2-size: 2rem;
+        --h3-size: 1rem;
+        --h4-size: .75rem;
+        --h5-size: .5rem;
+        --header-height: 50vh;
+        --gutter: 1rem;
+        --bottle-width: 50px;
+        --bottle-height: 150px;
+    }
+    h2 { text-align: center }
+    .boxes { flex-wrap: wrap }
+}

config/_default/config.yml

@@ -0,0 +1,29 @@
+languageCode: fr-fr
+defaultContentLanguage: fr
+
+title: Takubeh
+
+disableKinds:
+  - taxonomy
+  - term
+
+params:
+  description: Site officiel de la commune de Crémeaux qui fait partie de la communauté de communes du Pays d'Urfé (CCPU) dans la Loire (42)
+  Keywords: Crémeaux, commune, Pays d'Urfé, CCPU, Loire, Site officiel, 42
+
+markup:
+  goldmark:
+    renderer:
+      unsafe: true
+    parser:
+      attribute:
+        block: true
+        title: true
+  tableOfContents:
+    endLevel: 3
+    ordered: false
+    startLevel: 2
+
+disableHugoGeneratorInject: true
+
+enableRobotsTXT: true

config/development/config.yml

@@ -0,0 +1 @@
+baseURL: http://localhost:1313/

config/production/config.yml

@@ -0,0 +1,7 @@
+baseURL: https://takubeh.fr/
+
+deployment:
+  targets:
+    - name: production
+      URL: >-
+        s3://takubeh.fr?endpoint=https://s3.garage.resilien.cloud&disableSSL=true&s3ForcePathStyle=true&region=garage

config/staging/config.yml

@@ -0,0 +1,7 @@
+baseURL: https://staging.takubeh.fr/
+
+deployment:
+  targets:
+    - name: staging
+      URL: >-
+        s3://staging.takubeh.fr?endpoint=https://s3.garage.resilien.cloud&disableSSL=true&s3ForcePathStyle=true&region=garage

content/_index.html

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

content/a-propos.html

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

content/engagements.html

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

content/mentions-legales.md

@@ -0,0 +1,32 @@
+---
+title: RésiLien, Mentions légales
+description: Les mentions légales de RésiLien
+layout: simple
+---
+
+# Mentions légales
+
+## Édition du site web
+
+Édité par Weko
+
+### Weko
+
+Simon Constans - Weko  
+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  
+Site Web : weko.io  
+SIRET : 402 636 757 00039  
+Code APE : 8299Z  
+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).  
+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 : Hetzner Online GmbH, Industriestr. 25, 91710 Gunzenhausen, Allemagne
+
+Sauvegardes des données chiffrées par mot de passe hébergées par [Scaleway](https://www.scaleway.fr).  
+Siège social : Scaleway, 8 rue de la Ville l’Evêque, 75008 Paris, France

content/ou-nous-trouver.html

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

layouts/_default/_markup/render-image.html

@@ -0,0 +1,11 @@
+{{/*
+  S'il n'y a pas de / dans l'url d'une image alors on ajoute le path de l'article
+*/}}
+{{ $path := cond (in .Destination "/") .Destination (path.Join "/" .Page.File.Dir .Destination) }}
+{{ $image := .Page.Resources.GetMatch (printf "*%s*" .Destination) }}
+{{ with $image }}
+  {{ $width := cond (gt .Width 960) 960 .Width }}
+  {{ $resized := $image.Resize (printf "%sx q100 webp" (string $width)) }}
+  {{ $path = $resized.RelPermalink }}
+{{ end }}
+<img src="{{ $path | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} loading="lazy" />

layouts/_default/_markup/render-link.html

@@ -0,0 +1,35 @@
+{{/*
+  S'il n'y a pas de / dans l'url d'un lien alors on ajoute le path du répertoire
+*/}}
+{{ $isExternalLink := strings.HasPrefix .Destination "http" }}
+{{ $isWebLink := or $isExternalLink (eq 0 (.Destination | strings.Count ":")) }}
+{{ $isTelLink := strings.HasPrefix .Destination "tel:" }}
+{{ $isMailtoLink := strings.HasPrefix .Destination "mailto:" }}
+{{ $hasSlash := in .Destination "/" }}
+{{- if $isWebLink -}}
+  {{ $link := cond (and $isWebLink (and (not $hasSlash) (not $isExternalLink))) (path.Join "/" .Page.File.Dir .Destination) .Destination }}
+  <a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternalLink }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
+{{- else -}}
+  {{- $separators := cond $isMailtoLink ":@." ":" -}}
+  {{- $regex := cond $isMailtoLink "[a-z]*:(.*)" "[a-z]*:([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})"}}
+  {{- $replace := cond $isMailtoLink "$1" "$1 $2 $3 $4 $5" -}}
+  {{- $string := .Destination -}}
+  {{- $params := slice -}}
+
+  {{- range split $separators "" }}
+    {{ $parts := split $string . }}
+    {{ $params = $params | append (index $parts 0) }}
+    {{ $string = index $parts 1 }}
+  {{ end }}
+  {{- $params = $params | append (string $string) -}}
+  <span
+    class="obfuscate{{ 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 }}"
+  >
+  </span>
+{{- end -}}

layouts/_default/baseof.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Takubeh - Kombucha</title>
+
+    <link rel="canonical" href="{{ .Permalink }}" />
+    {{ with .OutputFormats.Get "RSS" }}<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" />{{ end }}
+
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    {{ if ne hugo.Environment "production" }}<meta name="robots" content="noindex">{{ end }}
+    {{ partial "styles.html" . }}
+  </head>
+  <body>
+    {{ partial "en_tete.html" . }}
+
+    {{ block "main" . }}{{ end }}
+
+    {{ partial "pied_de_page.html" . }}
+    {{ partial "javascripts.html" . }}
+  </body>
+</html>

layouts/_default/home.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ .Content }}
+{{ end }}

layouts/_default/list.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <div class="container">
+    <h1>{{ .RenderString .Title }}</h1>
+    <div class="container md">
+      {{ .Content }}
+      <ul>
+        {{ block "list" . }}
+        {{ range .Pages }}
+        <li><a href="{{ .Permalink }}">{{ .RenderString .Title }}</a></li>
+        {{ end }}
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ .Content }}
+{{ end }}

layouts/page/simple.html

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

layouts/partials/en_tete.html

@@ -0,0 +1,3 @@
+<header class="header">
+    <h1>Takubeh<br><small>Kombucha</small></h1>
+</header>

layouts/partials/javascripts.html

@@ -0,0 +1,9 @@
+{{ $js := resources.Get "js/main.js" }}
+{{ with $js }}
+    {{ $secureJS := . | js.Build }}
+    {{ if not $.Site.Params.debug }}
+        {{ $secureJS = $secureJS | minify }}
+    {{ end }}
+    {{ $secureJS = $secureJS | fingerprint }}
+    <script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
+{{ end }}

layouts/partials/pied_de_page.html

@@ -0,0 +1,10 @@
+<footer class="footer color -red3">
+    <div class="content">
+        <p>
+            E-mail : <a href="mailto:murielle@takubeh.fr">murielle@takubeh.fr</a><br>
+            Site web : <a href="https://takubeh.fr/">takubeh.fr</a><br>
+            Instagram : <a href="https://www.instagram.com/takubehkombucha/">www.instagram.com/takubehkombucha/</a><br>
+            Facebook : <a href="https://www.facebook.com/profile.php?id=100076292530719">Takubeh Kombucha</a><br>
+        </p>
+    </div>
+</footer>

layouts/partials/styles.html

@@ -0,0 +1,9 @@
+{{ $style := resources.Get "styles/main.scss" }}
+{{ with $style }}
+    {{ $styleCSS := . | toCSS }}
+    {{ if not $.Site.Params.debug }}
+      {{ $styleCSS = $styleCSS | minify }}
+    {{ end }}
+    {{ $styleCSS = $styleCSS | fingerprint }}
+    <link rel="stylesheet" href="{{ $styleCSS.Permalink }}" integrity="{{ $styleCSS.Data.Integrity }}">
+{{ end }}

layouts/shortcodes/consigne.html

@@ -0,0 +1 @@
+<p>La partie « Consigne » est encore à construire</p>

layouts/shortcodes/engagement.html

@@ -0,0 +1,42 @@
+<!-- Une production locale & engagée -->
+<div class="container -c2">
+    <div class="content color -yellow1">
+        <h2>Une production locale & engagée</h2>
+        <p>
+            Takubeh Kombucha, ce n’est pas seulement une boisson artisanale produite
+            dans un petit atelier.
+        </p>
+        <p>
+            Ce qui rend Takubeh unique, c’est le soin tout particulier apporté à chaque
+            bouteille, mais aussi notre engagement éthique et responsable dans cette
+            aventure :
+        </p>
+        <ul class="flower">
+            <li>
+                Utilisation de produits <strong>biologiques</strong> et <strong>responsables</strong>, pour une boisson
+                100% naturelle et respectueuse de l’environnement
+            </li>
+            <li>
+                Un conditionnement durable : consigne sur les bouteilles, étiquettes
+                issues de matières minérales, caisses de transport réutilisables
+            </li>
+            <li>
+                Une empreinte énergétique contrôlée : machines entièrement
+                mécaniques, électricité issue d’énergies renouvelables, atelier semi-
+                enterré et tempéré, distribution à moins de 150 km, pas d’envoi
+            </li>
+            <li>
+                Une ambition: toujours faire mieux, comme développer une production
+                locale d’ingrédients pour de nouvelles recettes, ou encore déployer
+                une distribution de kombucha en fûts inox lavables
+            </li>
+        </ul>
+        <blockquote>
+            Takubeh Kombucha, c'est plus qu'une boisson.<br>
+            C'est un mode de vie.
+        </blockquote>
+    </div>
+    <div class="picture">
+        <img src="/images/takubeh-engagement.jpg" alt="">
+    </div>
+</div>

layouts/shortcodes/fondateurs.html

@@ -0,0 +1,85 @@
+<div class="container fondateur -c2">
+    <div class="picture">
+        <img src="/images/takubeh-fondateurs.webp" alt="">
+    </div>
+    <div class="content color -red2">
+        <h2 class="center">Les fondateurs</h2>
+        <div class="boxes -c2">
+            <div>
+                <div class="tag color -orange1">
+                    <h3>Grégory</h3>
+                </div>
+                <p>
+                    Originaire de Saint-Paul-de-Vence (06),
+                    Grégory est un amoureux des beaux paysages.
+                </p>
+                <p>
+                    Engagé depuis toujours dans la cause
+                    environnementale et le respect de la nature,
+                    il a co-créé une association à but non lucratif
+                    ayant pour objectif de nettoyer les fôrets et
+                    rivières de sa région.
+                </p>
+                <p>
+                    Après une période de sa vie où il jonglait entre
+                    différentes activités, dont la comptabilité,
+                    il décide de partir à l’étranger, explorer le
+                    monde.
+                </p>
+                <p>
+                    De la Thaïlande jusqu’au Chili, en passant par
+                    l’Inde, le Brésil et la Bolivie, Grégory découvre
+                    d’autres cultures, d’autres populations, et
+                    même d’autres boissons, puisque ce sera
+                    lors d’un voyage en Amérique du Nord qu’il
+                    découvrira, avec Murielle, le Kombucha.
+                </p>
+            </div>
+            <div>
+                <div class="tag color -orange1">
+                    <h3>Murielle</h3>
+                </div>
+                <p>
+                    Attachée à la Loire, Murielle a grandi à Saint-
+                    Étienne, et y est restée jusqu’à ses études de
+                    gestion.
+                </p>
+                <p>
+                    Désireuse de perfectionner son anglais et en
+                    quête d’aventure, elle décide de partir en Australie
+                    en mettant une parenthèse à ses études : elle
+                    y restera près de trois ans.
+                </p>
+                <p>
+                    Après plusieurs expériences dans la 
+                    restauration, elle croisera la route de
+                    Gregory lors d’une escale professionnelle
+                    en Suisse avant de continuer de
+                    voyager à ses cotés.
+                </p>
+                <p>
+                    Ayant un véritable coup de coeur pour la
+                    région de l’Oregon aux États-Unis, Murielle et
+                    Grégory feront plusieurs allers-retours entre la
+                    France et les États-Unis, jusqu’à la naissance
+                    de leur fils Zadig, dans la vallée de Takubeh,
+                    d’où le nom de leur entreprise.
+                </p>
+            </div>
+        </div>
+        <p>
+            <strong>
+                Partageant les mêmes valeurs, Murielle et Grégory décident de lancer leur production de
+                Kombucha, dans un premier temps pour eux-mêmes, avant d’en faire leur quotidien en créant
+                une entreprise et en y consacrant tout leur temps.
+            </strong>
+        </p>
+        <p>
+            <strong>
+                Au-delà de produire une boisson, Murielle et Grégory ont lancé cette activité pour partager
+                leur passion, mais aussi une certaine idée d’un retour à une consommation de produits
+                locaux, raisonnés et biologiques.
+            </strong>
+        </p>
+    </div>
+</div>

layouts/shortcodes/gamme.html

@@ -0,0 +1,89 @@
+<!-- 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">
+                <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/pu_erh.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -green5">L'Original</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        Issu de théiers anciens, sauvages et
+                        originels, le thé vert Pu’Erh** est apprécié
+                        pour ses vertus désaltérante 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.
+                    </p>
+                </div>
+            </div>
+            <div class="box">
+                <img src="/images/bouteilles/citronelle_hibiscus.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -red1">Citronnelle Hibiscus</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        Un kombucha légèrement acidulé plus que
+                        séduisant, mêlant les parfums bien connus
+                        de la citronnelle à la gourmandise de la
+                        fleur d’hibiscus.
+                    </p>
+                </div>
+            </div>
+            <div class="box">
+                <img src="/images/bouteilles/vanille.webp" alt="" width="100" height="300">
+                <div class="detail">
+                    <div class="title">
+                        <h3 class="tag color -yellow3">Vanille</h3>
+                        <h4>33 cl / 1 L</h4>
+                    </div>
+                    <p>
+                        Au parfum subtil de châtaignes grillées, de
+                        fleurs et rehaussé d’une note liquoreuse, le
+                        thé Lien Son FOP** regorge d’arômes.
+                        Ce kombucha est la rencontre des saveurs
+                        des forêts du Vietnam et de la douceur de
+                        la vanille Bourbon**.
+                    </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

@@ -0,0 +1,49 @@
+<!-- Takubeh x Hempalicious -->
+<div class="container -c2">
+    <div class="picture">
+        <img src="/images/kombucha-cbd.webp" alt="">
+    </div>
+    <div class="content color -green2">
+        <h2>Takubeh x Hempalicious</h2>
+        <p>
+            La philosophie de Takubeh et les ambitions qui y sont associées résident aussi
+            dans le désir de travailler avec des acteurs locaux partageant leurs valeurs.
+        </p>
+        <p>
+            C’est notamment le cas de la collaboration entre Takubeh et Les Botanistes, une
+            entreprise de production de chanvre installée dans la Drôme, ayant une chaîne de
+            production et de distribution entièrement française, naturelle et biologique, sous
+            la marque Hempalicious.
+        </p>
+        <p>
+            Créée par deux amis, l’entreprise Hempalicious est née de deux reconversions
+            professionnelles : Ben, venant de l’univers de la haute gastronomie, et Alex, étant
+            auparavant directrice artistique. Leurs envies respectives et leurs expériences ont
+            donc permises à Hempalicious de voir le jour.
+        </p>
+        <p>
+            Une amitié de longue date entre les fondateurs de Hempalicious et Murielle et
+            Greg a permis aux deux univers de se rencontrer : le Kombucha et le chanvre riche
+            en CBD.
+        </p>
+        <p>
+            Suite à de nombreux essais pour trouver l’accord parfait entre la fraîcheur du
+            Kombucha et le goût subtil du chanvre, la balance est trouvée en 2021 pour aboutir
+            à une boisson entièrement naturelle et biologique.
+        </p>
+        <p>
+            Cette boisson est aujourd’hui distribuée sous la marque Hempalicious, avec la
+            mention «Brassée par Takubeh», chaque acteur de ce projet étant conscient de
+            l’implication de l’autre dans l’aboutissement de cette boisson, et par conséquent,
+            de la nécessité de mettre chaque producteur en avant.
+        </p>
+        <div class="boxes">
+            <div class="box">
+                <a href="https://www.hempalicious.fr/">hempalicious.fr</a>
+            </div>
+            <div class="box">
+                <a href="https://www.lesbotanistes.fr/">lesbotanistes.fr</a>
+            </div>
+        </div>
+    </div>
+</div>

layouts/shortcodes/histoire.html

@@ -0,0 +1,7 @@
+<!-- L'histoire de Takubeh
+<div class="container">
+    <div class="content color -green4">
+        <h2>L'histoire de Takubeh</h2>
+    </div>
+</div> -->
+<p>La partie « L'histoire de Takubeh » est encore à construire</p>

layouts/shortcodes/identite.html

@@ -0,0 +1,44 @@
+<!-- L'identité de Takubeh -->
+<div class="container -c2">
+    <div class="content color -blue2">
+        <h2>L'identité de Takubeh</h2>
+        <p>
+            Comment représenter tout l’esprit de Takubeh dans une identité graphique ?
+        </p>
+        <p>
+            Tous les créateurs d’entreprise se sont posés cette question. Pas facile d’y répondre
+            seul. Pourtant c’est une étape cruciale ! Une identité qui nous ressemble, assez
+            originale pour être unique, et en même temps facilement reconnaissable.
+        </p>
+        <p>
+            C’est à ce moment que notre amie Clara Rival, une artiste-peintre argentine, fait son
+            entrée. On a travaillé ensemble pour trouver le design parfait, celui qui collerait au
+            plus près à notre projet. Pas facile.. jusqu’à ce qu’elle remonte dans ses archives
+            pour nous dégoter LA toile. Celle qui nous a mis d’accord en un coup d’oeil.
+        </p>
+        <p>
+            Nous sommes tombés immédiatement sous le charme : le mélange de couleurs,
+            l’aspect nature de la toile avec sa végétation luxuriante, ainsi que la gaieté que
+            dégage ce tableau étaient une évidence.
+        </p>
+        <p>
+            Ainsi, cette toile est devenue l’identité graphique de Takubeh, déclinée sur tous
+            les supports (packaging, communication, transport...). C’est simple, ce design est
+            devenu la marque de fabrique de Takubeh !
+        </p>
+        <p>
+            Pour en savoir plus sur Clara :
+        </p>
+        <div class="boxes">
+            <div class="box">
+                <a href="https://clararival.com/">clararival.com</a>
+            </div>
+            <div class="box">
+                <a href="https://www.instagram.com/claririval/">instagram.com/claririval/</a>
+            </div>
+        </div>
+    </div>
+    <div class="picture">
+        <img src="/images/clara-rival.webp" alt="">
+    </div>
+</div>

layouts/shortcodes/instagram.html

@@ -0,0 +1 @@
+<p>La partie « Instagram » est encore à construire</p>

layouts/shortcodes/kombucha_en_fut.html

@@ -0,0 +1 @@
+<p>La partie « kombucha en fût » est encore à construire</p>

layouts/shortcodes/philosophie.html

@@ -0,0 +1,46 @@
+<!-- Notre philosophie -->
+<div class="container -c2">
+    <div class="picture">
+        <img src="/images/avion.webp" alt="">
+    </div>
+    <div class="content color -red1">
+        <h2>Notre philosophie</h2>
+        <p>
+            Takubeh est une entreprise relativement jeune, mais d’ores et déjà bien ancrée
+            dans son territoire (Loire, Rhône, Nord Ardèche, Ouest Isère, Beaujolais) et ne
+            cesse d’innover pour développer son activité.
+        </p>
+        <p>
+            Lors de la création de l’entreprise, l’objectif était de distribuer la production de
+            kombucha en fûts en inox, notamment lors de festivals, mais également dans les
+            bars et les restaurants. Pratique et écologique, le fût devait être le fer de lance
+            de l’activité. Mais la crise sanitaire est passée par là. Ayant contraint tous les
+            évènements à être reportés, ce modèle de distribution n’était plus adapté à la
+            situation, d’où le modèle de distribution actuel : en bouteilles (33cl et 1 litre), mais
+            toujours dans le respect de l’environnement et sans perdre de vue notre objectif
+            de limiter l’impact sur la biodiversité. Le choix du verre s’est donc simplement
+            imposé à nous.
+        </p>
+        <p>
+            La distribution est réalisée par nous même, sans envoi.
+        </p>
+        <p>
+            Au-delà de la production, Takubeh est une entreprise avec un véritable esprit de
+            famille, considérant chaque partenaire comme un maillon essentiel de l’activité et
+            de la réussite de ce projet.
+        </p>
+        <p>
+            Une consommation raisonnée, locale et conviviale sont les maîtres-mots de notre
+            philosophie de vie, que nous avons tout naturellement appliquée à notre
+            entreprise.
+        </p>
+        <p>
+            Nous produisons notre kombucha comme nous le ferions pour nous-même, avec
+            passion et dévouement.
+        </p>
+        <blockquote>
+            Toute cette philosophie se ressent dans nos boissons :<br>
+            simple, authentique, faite avec amour et passion.
+        </blockquote>
+    </div>
+</div>

layouts/shortcodes/points_de_vente.html

@@ -0,0 +1 @@
+<p>La partie « Les points de vente » est encore à construire</p>

layouts/shortcodes/reseau.html

@@ -0,0 +1,7 @@
+<!-- Notre réseau
+<div class="container -c2">
+    <div class="content">
+        <h2>Notre réseau</h2>
+    </div>
+</div> -->
+<p>La partie « Notre réseau » est encore à construire</p>

layouts/shortcodes/takubeh_kombucha.html

@@ -0,0 +1,49 @@
+<!-- Takubeh Kombucha ? -->
+<div class="container -c2">
+    <div class="content color -green3">
+        <h2>Takubeh Kombucha ?</h2>
+        <p>
+            Takubeh est une jeune 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>
+        <p>
+            Cette boisson, dont les origines restent floues, est utilisée depuis des
+            millénaires en Asie, où la consommation de thé y est ancestrale.
+        </p>
+        <p>
+            Le kombucha est probablement apparu dans cette région du monde, que ce
+            soit grâce à l’Humain, ou alors, comme le raconte la légende, grâce à une
+            tasse de thé sucré oubliée sur le rebord d’une fenêtre.
+        </p>
+        <p>
+            Amoureux de cette boisson et désireux de faire perdurer son histoire,
+            nous avons fondé Takubeh en 2020 à Rochetaillée, un petit village
+            près de Saint-Étienne (42), afin d’y produire un kombucha local, biologique
+            et responsable.
+        </p>
+        <div class="boxes scribe center">
+            <div class="box">
+                <img src="" alt="">
+                <p>
+                    Boisson<br>vivante
+                </p>
+            </div>
+            <div class="box">
+                <img src="" alt="">
+                <p>
+                    Finement<br>pétillante
+                </p>
+            </div>
+            <div class="box">
+                <img src="" alt="">
+                <p>
+                    Délicieusement<br>peu sucrée
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="picture">
+        <img src="/images/takubeh-kombucha.jpg" alt="Un verre avec la bouteille de Kombucha de Takubeh">
+    </div>
+</div>