Merge pull request 'feat: Add theme variables' (#12) from theme into main

## Détails

- Ajout du theme https://www.happyhues.co/palettes/10

## Pourquoi

- Pour faciliter le choix de notre theme et rendre notre site tout beau.

## Liens

- [ticket](https://tree.taiga.io/project/killiankemps-resilien/us/345)

Reviewed-on: https://git.weko.io/resilien/resilien.fr/pulls/12

assets/styles/main.sass

@@ -1,31 +1,175 @@
 $line-height: 1.15
 $size-small: 600px
+$layout-size: 960px
+
+// COLOR
+
+$color-darkest: #001e1d
+$color-darken: #0f3433
+$color-dark: #004643
+$color-main: #abd1c6
+$color-light: #e8e4e6
+$color-lightest: #fffffe
+$color-secondary: #f9bc60
+$color-tertiary: #A61A07
+
+@mixin theme
+  // https://www.happyhues.co/palettes/10
+  --color-stroke: #{$color-darkest}
+  --color-main: #{$color-light}
+  --color-highlight: #{$color-secondary}
+  --color-secondary: #{$color-main}
+  --color-tertiary: #{$color-tertiary}
+
+  --color-background: #{$color-dark}
+  --color-headline: var(--color-highlight)
+  --color-paragraph: var(--color-main)
+  --color-link: var(--color-highlight)
+  --color-button: var(--color-highlight)
+  --color-button-text: var(--color-stroke)
+
+  --color-card-background: var(--color-main)
+  --color-card-headline: var(--color-stroke)
+  --color-card-paragraph: #{$color-darken}
+  --color-card-link: var(--color-background)
+  --color-card-button: var(--color-background)
+  --color-card-button-text: #{$color-lightest}
+
+
+  --color-secondary-background: var(--color-secondary)
+  --color-secondary-headline: var(--color-stroke)
+  --color-secondary-paragraph: #{$color-darken}
+
+  --color-secondary-link: var(--color-tertiary)
+  --color-secondary-button: var(--color-highlight)
+  --color-secondary-button-text: var(--color-stroke)
+
+  --color-secondary-card-background: var(--color-background)
+  --color-secondary-card-headline: var(--color-headline)
+  --color-secondary-card-paragraph: var(--color-paragraph)
+  --color-secondary-card-link: var(--color-link)
+  --color-secondary-card-button: var(--color-button)
+  --color-secondary-card-button-text: var(--color-button-text)
+
+@mixin theme-primary
+  color: var(--color-paragraph)
+  background: var(--color-background)
+  h1, h2, h3, h4, h5, h6
+    color: var(--color-headline)
+  button, .button
+    background: var(--color-button)
+    color: var(--color-button-text)
+  a
+    color: var(--color-link)
+  .card, .cards > *, .footnotes
+    color: var(--color-card-paragraph)
+    background: var(--color-card-background)
+    h1, h2, h3, h4, h5, h6
+      color: var(--color-card-headline)
+    button, .button
+      background: var(--color-card-button)
+      color: var(--color-card-button-text)
+    a
+      color: var(--color-card-link)
+
+  .quote
+    color: var(--color-paragraph)
+
+    h1, h2, h3, h4, h5, h6
+      color: var(--color-paragraph)
+
+    strong
+        color: var(--color-link)
+
+@mixin theme-secondary
+  --color-link: var(--color-secondary-link)
+  --color-headline: var(--color-secondary-headline)
+  color: var(--color-secondary-paragraph)
+  background: var(--color-secondary-background)
+  h1, h2, h3, h4, h5, h6
+    color: var(--color-secondary-headline)
+  button, .button
+    background: var(--color-secondary-button)
+    color: var(--color-secondary-button-text)
+  a
+    color: var(--color-secondary-link)
+  .card, .cards > *, .footnotes
+    color: var(--color-secondary-card-paragraph)
+    background: var(--color-secondary-card-background)
+    border-radius: var(--border-radius)
+    h1, h2, h3, h4, h5, h6
+      color: var(--color-secondary-card-headline)
+    button, .button
+      background: var(--color-secondary-card-button)
+      color: var(--color-secondary-card-button-text)
+    a
+      color: var(--color-secondary-card-link)
+
+// HTML TAG
 
 html
   font-size: 1.25rem
   line-height: $line-height
 
+body
+  @include theme
+  @include theme-primary
+
 p, li
-  line-height: 1.4
+  line-height: 1.6
+
+.cards
+  display: grid
+  grid-auto-columns: 1fr
+  grid-template-columns: 1fr 1fr
+  grid-template-rows: auto auto auto
+  column-gap: var(--tile)
+  row-gap: var(--tile)
+  margin: 0
+  padding: 0
+  list-style-type: none
+
+  @media screen and (max-width: 800px)
+    grid-template-columns: 1fr
+
+.cards > *, .card
+    padding: calc(var(--tile))
+    border-radius: var(--border-radius)
+
+    header
+      display: grid
+      column-gap: 1rem
+      grid-template-columns: 70px auto
+      align-items: center
+      margin-bottom: 1rem
+
+      p
+        display: inline-block
+
+      img
+        width: 70px
+        height: 70px
+
+      p, h1, h2, h3
+        margin: 0
+        padding: 0
+
+    @media screen and (max-width: 800px)
+      text-align: center
 
 body
-  --color-background: #fff8eb
-  --color-paragraph: #2d3824
-  --color-highlight: #c14508
+  --tile: 2rem
 
   --border-style: dashed
   --border-size: 4px
+  --border-radius: calc(var(--tile)/2)
   --link-style: dotted
 
-  --tile: 2rem
-
   font-size: 1.125rem
   font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
-  color: var(--color-paragraph)
-  background: var(--color-background)
-  margin: 0 auto
-  padding: 0 var(--tile)
-  max-width: 800px
+
+  margin: 0
+  padding: 0
   overflow-y: scroll
 
   @media screen and (max-width: $size-small)
@@ -33,26 +177,37 @@ body
     --tile: 1rem
     font-size: .9rem
 
-img
-  max-width: 100%
-  @media screen and (max-width: $size-small)
-    max-width: calc(100% + 1rem)
-    margin-left: -.5rem
-
-hr
-  border: 0
-  border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
-  margin: var(--tile) auto
-  @media screen and (max-width: $size-small)
-    margin: calc(var(--tile)*2) calc(var(--tile)*-1)
-
-.center
+h1
+  margin: 0 auto calc(var(--tile)*2)
+  padding: calc(var(--tile)*2.5) 0 0
   text-align: center
 
-p + ol, p + ul
-  margin: 0
-  > li:first-child
-    padding-top: 0
+h2
+  margin: 0 auto calc(var(--tile)*1.5)
+  padding: calc(var(--tile)*2) 0 0
+
+h3
+  margin: 0 auto var(--tile)
+  padding: calc(var(--tile)*1.5) 0 0
+
+h1 + h2, h2 + h3, h3 + h4
+  padding-top: 0
+
+a
+  text-decoration: none
+  border-bottom: 2px var(--link-style)
+  &:hover
+    border-bottom: 2px solid
+
+  &:active, &:visited
+    border-bottom: 2px dashed
+
+a[href^="http"]::after
+  content: "\2197"
+  font-size: .8rem
+  display: inline-block
+  position: relative
+  margin-left: .2em
 
 ol, ul
   padding-left: 1.2rem
@@ -68,35 +223,124 @@ ul.no-style
 
   li
     padding: 0
-    line-height: $line-height
 
-a, h1, h2, h3
-  color: var(--color-highlight)
+img
+  max-width: 100%
+  @media screen and (max-width: $size-small)
+    max-width: calc(100% + 1rem)
+    margin-left: -.5rem
 
-a
-  text-decoration: underline var(--link-style)
-  &:hover
-    text-decoration: underline
+hr
+  border: 0
+  border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
+  margin: var(--tile) auto
+  @media screen and (max-width: $size-small)
+    margin: calc(var(--tile)*2) calc(var(--tile)*-1)
 
-.header .title
-  font-size: 2.25rem
-  font-weight: 700
-  margin: 1.5rem 0
+.theme-primary
+  @include theme-primary
 
-h2
-  margin: calc(var(--tile)*1.5) auto
+.theme-secondary
+  @include theme-secondary
 
-h3
-  // display: inline-block
-  margin: calc(var(--tile)*1.5) auto var(--tile)
+.half
+  max-width: 50%
+  margin: 0 auto
 
-.frame
+.center
+  text-align: center
+
+.header
+  justify-content: space-between
+
+  .title
+    font-size: 2.25rem
+    font-weight: 700
+    margin: 0
+    padding: 0
+    a
+      border: none
+      text-align: center
+
+    img
+      height: 120px
+      max-width: 100%
+      margin: 0 auto
+
+  @media screen and (max-width: $size-small)
+    flex-direction: column
+    justify-content: space-around
+
+    .title
+      a
+        display: block
+        width: 100%
+
+.menu
+  ul
+    margin: 0
+    padding: 0
+    list-style-type: none
+
+  li
+    padding: 0
+    margin-top: .3rem
+
+  a
+    padding: .3rem calc(var(--tile)/4)
+
+  @media screen and (max-width: $size-small)
+    ul
+      display: flex
+      flex-direction: row-reverse
+    li
+      display: inline
+      margin: var(--tile) auto
+
+.quote
   border: var(--border-size) var(--border-style) var(--color-highlight)
+  border-radius: var(--border-radius)
   padding: var(--tile)
+  margin: calc(1.5 * var(--tile)) 0
+  position: relative
+  text-align: center
+
+  h2
+    margin: 0
+    padding: 0
+
+    strong
+      font-size: 130%
+
+.content
+  max-width: $layout-size
+  padding: var(--tile)
+  margin: 0 auto
+
+  .blogDate:first-child + h1
+    padding-top: var(--tile)
+
+  h1:first-child
+    padding-top: 0
+
+  .quote:first-child
+    margin-top: 0
+
+.footnotes
+  font-size: .8rem
+  padding: var(--tile)
+
+  hr
+    border: none
+    margin: 0
+  p
+    margin: 0
 
 .footer
   font-size: 0.8rem
   padding-bottom: calc(var(--tile)/2)
+  font-family: monospace
+  line-height: 1.2
 
   @media screen and (max-width: $size-small)
     .cell, .cell.-right
@@ -104,60 +348,21 @@ h3
       flex: 0 0 100%
       padding-bottom: calc(var(--tile)/2)
 
-.flex
-  --margin-tile: calc(var(--tile)/2)
-  margin: calc(var(--margin-tile) * -1)
-  padding: 0
-  list-style-type: none
-  width: calc(100% + 2 * var(--margin-tile))
-  display: flex
-  flex-wrap: wrap
-  li
-    text-align: center
-    padding: var(--margin-tile)
-    flex: 0 0 50%
-    box-sizing: border-box
-
-  img
-    max-width: 100%
-    width: 40%
-
-  @media screen and (max-width: $size-small)
-    margin: 0
-    width: 100%
-    li
-      flex: 0 0 100%
-
-.quote
-  border: var(--border-size) var(--border-style) var(--color-highlight)
-  padding: var(--tile)
-  margin: calc(1.5 * var(--tile)) 0
-  position: relative
-  text-align: center
-
-  h2
-    color: var(--color-paragraph)
-    margin: 0
-
-    strong
-      color: var(--color-highlight)
-      font-size: 130%
+    ul + ul
+      border-top: 2px dotted
+      padding-top: var(--tile)
+      margin-top: var(--tile)
 
 .blogDate
   font-style: italic
   font-size: 0.9rem
   display: block
   margin-top: 1.5rem
-
-.footnotes
-  font-size: .8rem
-  p
-    margin: 0
+  text-align: center
 
 // Grid
 
 .grid            { display: flex; flex-wrap: wrap; }
-.grid.\-middle   { align-items: center; }
 .grid.\-bottom   { align-items: end; }
 .cell            { flex: 1; box-sizing: border-box; }
 .cell.\-left   { text-align: left ;}

config/_default/config.yml

@@ -15,8 +15,8 @@ permalinks:
   blog: /blog/:title/
 
 params:
-  FaviconFile: logo.svg
-  ImageSize: 800x
+  FaviconFile: /favicon.svg
+  ImageSize: 960x
 
 minify:
   tdewolff:

content/_index.md

@@ -3,7 +3,10 @@ title: RésiLien, Hébergeur de services numériques Open Source
 description: RésiLien est un hébergeur de services numériques localisé en France dont l'infrastructure est décentralisée.
 ---
 
-> ## **Accompagner** <br>les organisations <br>qui ont une **conscience sociétale** <br>vers la réappropriation de<br>leurs **outils numériques**.
+<div class="theme-primary">
+<div class="content">
+
+  > ## **Accompagner** <br>les organisations <br>qui ont une **conscience sociétale** <br>vers la réappropriation de<br>leurs **outils numériques**.
 {.quote}
 
 **RésiLien** est un hébergeur de services numériques localisé en France 🇫🇷 dont l'infrastructure est décentralisée. Nous respectons [la charte](https://www.chatons.org/charte) du [Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires](https://chatons.org/) et sommes membres du collectif depuis [décembre 2021](https://www.chatons.org/chatons/resilien).
@@ -16,43 +19,77 @@ Si vous avez une connexion Internet suffisante, hébergez dans votre local votre
 
 RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale et Solidaire**. Aujourd'hui, ce collectif est composé de **[Weko](https://weko.io)** et de **[Libenume](https://libenume.fr)**.
 
-### Quels services propose RésiLien ?
-{.center .frame}
+</div>
+</div>
+<div class="theme-secondary">
+<div class="content">
 
-- ![Collaboration sur un document](/icons/writting.svg)
-  #### Prise de notes collaborative
+## Quels services propose RésiLien ?
+{.center}
+
+- <header>
+
+    ![Collaboration sur un document](/icons/writting.svg)
+    ### Prise de notes collaborative
+
+  </header>
   Avec le logiciel libre Hedgedoc, prenez des notes à plusieurs au format Markdown.
-- ![Partager ses fichiers avec son équipe](/icons/share-file.svg)
-  #### Partage de fichiers
-  Avec le logiciel libre Nextcloud, stockez vos fichiers sur un serveur pour les partager à d'autres personnes ou avec votre équipe.
-- ![Partage de calendriers et contacts](/icons/calendar-contacts.svg)
-  #### Calendriers et contacts partagés
-  Avec le logiciel libre Nextcloud, partagez votre calendrier et vos contacts avec les membres de votre organisation.
-- ![Éco-conception de site internet](/icons/website.svg)
-  #### Site web statique
-  Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure.
-{ .flex .services }
+- <header>
 
-### Comment bénéficier des services de RésiLien ?
-{.center .frame}
+    ![Partager ses fichiers avec son équipe](/icons/share-file.svg)
+    ### Partage de fichiers
+
+  </header>
+  Avec le logiciel libre Nextcloud, stockez vos fichiers sur un serveur pour les partager à d'autres personnes ou avec votre équipe.
+- <header>
+
+    ![Partage de calendriers et contacts](/icons/calendar-contacts.svg)
+    ### Calendriers et contacts partagés
+
+  </header>
+  Avec le logiciel libre Nextcloud, partagez votre calendrier et vos contacts avec les membres de votre organisation.
+- <header>
+
+    ![Éco-conception de site internet](/icons/website.svg)
+    ### Site web statique
+
+  </header>
+  Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure.
+{ .cards }
+
+</div>
+</div>
+<div class="theme-primary">
+<div class="content">
+
+## Comment bénéficier des services de RésiLien ?
+{.center}
 
 Pour tous les services hébergés par RésiLien, ce sera l'entreprise Weko (département de la Loire) ou Libenume (département des Côtes d'Armor) votre interlocutrice principale selon votre proximité géographique.
 
-- #### [Weko](https://weko.io)
+- ### [Weko](https://weko.io)
   [simon@weko.io](mailto:simon@weko.io)  
   [07 57 18 01 68](tel:0757180168)
-- #### [Libenume](https://libenume.fr/)
+- ### [Libenume](https://libenume.fr/)
   [contact@libenume.fr](mailto:contact@libenume.fr)  
   [07 64 70 62 94](tel:0764706294)
-{ .flex }
+{ .cards }
 
 Ayant à cœur d'avoir une **relation de proximité**, nous vous conseillons de contacter l'entreprise la plus proche. Celle-ci vous enverra une proposition commerciale en fonction de vos besoins. Chaque prestation inclut une **période d'accompagnement pour l'utilisation des services**.
 
-### Blog
-{.center .frame}
+</div>
+</div>
+<div class="theme-secondary">
+<div class="content">
 
-Voici nos derniers articles de blog :
+## Blog
+{.center}
+
+Voici nos derniers articles de blog :
 
 {{< blog-article-last >}}
 
 [Voir tous les articles](/blog/)
+
+</div>
+</div>

content/blog/2021/2021-12-20-lancement-de-resilien.md

@@ -1,5 +1,5 @@
 ---
-title: Lancement de RésiLien, hébergeur d’un numérique responsable !
+title: Lancement de RésiLien, hébergeur d’un numérique responsable !
 description: RésiLien est un projet fondé par Simon Constans et Killian Kemps, sous le nom de nos entreprises respectivement Weko et Libenume, dans le but de proposer une offre commerciale alternative aux services de collaboration en ligne déjà existants tels que Google Drive et Dropbox pour n'en citer que quelques uns.
 date: 2021-12-20
 ---

content/blog/2021/2021-12-21-integration-des-chatons.md

@@ -8,6 +8,9 @@ date: 2021-12-21
 
 RésiLien a déposé sa candidature le 25 octobre 2021 afin d'intégrer la portée n°13 des [CHATONS](https://www.chatons.org). Les résultats des votes ont été publiés ce 21 décembre 2021 et [RésiLien fait officiellement partie des CHATONS](https://www.chatons.org/chatons/resilien) !
 
+![Logo des CHATONS](/logo_chatons_v3.1.svg)
+{.half}
+
 ## CHATONS ? Késako ?
 
 Avec un tel nom, on éveille souvent la curiosité ! Le collectif des CHATONS, dont l'acronyme CHATONS signifie « Collectif des Hébergeurs Alternatifs Transparents Ouverts Neutres et Solidaires », a été initié par l'association française [Framasoft](https://framasoft.org). Il regroupe des entités de toutes formes (associations, entreprises, personnes en nom propres) qui sont liées par une même [charte](https://www.chatons.org/charte). Tel que détaillé dans ce [manifeste](https://www.chatons.org/manifeste), toutes ces entités pensent que la direction générale que prend le numérique ne sert pas les intérêts des citoyennes et des citoyens. Le but de ce collectif est de réunir toutes les personnes qui souhaitent proposer une forme alternative du numérique qui sert les intérêts de toutes et tous.

content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/index.md

@@ -14,7 +14,7 @@ Mais que savons-nous de l'impact du numérique ? Son impact est-il « virtuel »
 
 Tout d'abord, nous proposons de débuter cet article par un rappel sur le réchauffement climatique. L'enjeu autour de celui-ci est critique car plus le réchauffement est important moins le comportement de notre planète est prédictible. Il est avéré que la montée des eaux s'accélère, que les feux de forêts s'intensifient et que les récoltes agricoles sont moins abondantes à cause des sécheresses plus fréquentes pour citer quelques unes des multiples conséquences [^impact-rechauffement-france][^wwf-impact-rechauffement]. L'habitabilité de la planète pour les humains devient de plus en plus difficile et nous avons besoin de nous adapter à ces changements de plus en plus vite.
 
-L'UNEP, un programme des Nations Unies, a publié un rapport en décembre 2020 illustrant plusieurs scénarios de réchauffement climatique en fonction de la quantité d'émission de gaz à effet de serre. Il ne s'agit pas du premier rapport de ce type et certainement pas du dernier mais il a le mérite de proposer un beau graphique récapitulatif. Avant de lire le graphique, nous précisons que le CO~2~e est une unité de mesure qui permet de mesurer l'impact de l'ensemble des gaz à effet de serre (par exemple le méthane, le dioxyde de carbone et l'eau) comme s'il ne s'agissait que de CO~2~ (le dioxyde de carbone). En continuant nos activités humaines avec les politiques actuelles, les scientifiques prédisent que nous émettrons environ 60 GtCO~2~e en 2030. Ce qui correspondrait à un réchauffement climatique global largement au dessus de 2°C.
+L'UNEP, un programme des Nations Unies, a publié un rapport en décembre 2020 illustrant plusieurs scénarios de réchauffement climatique en fonction de la quantité d'émission de gaz à effet de serre. Il ne s'agit pas du premier rapport de ce type et certainement pas du dernier mais il a le mérite de proposer un beau graphique récapitulatif. Avant de lire le graphique, nous précisons que le CO<sub>2</sub>e est une unité de mesure qui permet de mesurer l'impact de l'ensemble des gaz à effet de serre (par exemple le méthane, le dioxyde de carbone et l'eau) comme s'il ne s'agissait que de CO<sub>2</sub> (le dioxyde de carbone). En continuant nos activités humaines avec les politiques actuelles, les scientifiques prédisent que nous émettrons environ 60 GtCO<sub>2</sub>e en 2030. Ce qui correspondrait à un réchauffement climatique global largement au dessus de 2°C.
 
 D'après les accords de Paris de la COP21 en 2015, les pays se sont engagés à conserver le réchauffement global à « bien en dessous » de 2°C et à « mener des efforts encore plus poussés pour limiter l’augmentation de la température à 1,5°C au-dessus des niveaux pré-industriels »[^accords-de-paris]. Nous sommes aujourd'hui encore loin des objectifs annoncés et il est très improbable que nous puissions respecter l'objectif de +1,5°C.
 
@@ -49,7 +49,7 @@ Certes les secteurs des transports et de l'agricultures représentent la plus gr
 
 Nous tenons à vous faire remarquer que dans cet article, nous n'avons considéré que les émissions de GES qui agissent directement sur le réchauffement climatique. Nous n'avons pas détaillé la pollution liée directement à l'exploitation de mines et à la fabrication de cartes électroniques. Le sujet de l'impact environnemental du numérique est encore à ses débuts et nous n'avons pas connaissance de tous les détails.
 
-En revanche une chose est sûre, le numérique, de même que toutes les autres activités humaines, doit s'adapter pour réduire sa participation au réchauffement climatique et nous permettre de conserver l'habitabilité de la planète pour les humains. 
+En revanche une chose est sûre, le numérique, de même que toutes les autres activités humaines, doit s'adapter pour réduire sa participation au réchauffement climatique et nous permettre de conserver l'habitabilité de la planète pour les humains.
 
 Chez RésiLien nous expérimentons des solutions afin de réduire l'empreinte du numérique sur l'environnement et rendre le numérique plus résilient. Nous détaillerons nos travaux dans de prochains articles.
 

layouts/_default/single.html

@@ -0,0 +1,7 @@
+{{ define "main" }}
+<div class="theme-secondary">
+  <div class="content">
+  {{ .Content }}
+  </div>
+</div>
+{{ end }}

layouts/blog/list.html

@@ -1,8 +1,12 @@
 {{ define "main" }}
+<div class="theme-secondary">
+<div class="content">
   {{ .Content }}
   <ul>
   {{ range .Pages }}
     <li>{{ .Date | time.Format ":date_medium" }} - {{ partial "article-link" . }}</li>
   {{ end }}
   </ul>
+</div>
+</div>
 {{ end }}

layouts/blog/single.html

@@ -1,15 +1,19 @@
 {{ define "main" }}
+<div class="theme-secondary">
+<div class="content">
   <p class="blogDate">
     Publié le <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date | time.Format ":date_full" }}</time>{{ if isset .Params "auteur" }} - {{ .Params.auteur }}{{ end }}
   </p>
   {{ .Content }}
-  <aside>
-    <hr>
+</div>
+</div>
+<div class="theme-secondary">
+  <aside class="content">
     <p>Lire les articles précédents et suivants :</p>
     <ul>
       <li>Suivant : {{ with .NextInSection }}{{ partial "article-link" . }}{{ else }}Vous êtes sur notre article le plus récent 😇{{ end }}</li>
       <li>Précédent : {{ with .PrevInSection }}{{ partial "article-link" . }}{{ else }}Vous êtes sur notre premier article 😇{{ end }}</li>
     </ul>
   </aside>
-
+</div>
 {{ end }}

layouts/partials/footer.html

@@ -1,16 +1,17 @@
-<hr>
-<footer class="footer grid -bottom">
+<footer class="content footer grid -bottom">
   <ul class="cell no-style">
+    <li><img src="/logo_chatons_v3.1.svg" alt="Logo des CHATONS" height="100"></li>
     <li>Membre du <a href="https://chatons.org/">collectif CHATONS</a></li>
     <li>Site web alimenté par <a href="https://www.enercoop.fr/" rel="noopener">Enercoop</a> ⚡</li>
     <li>Réalisé avec ❤️ de façon éco-responsable,</li>
     <li>il <a href="https://www.websitecarbon.com/website/resilien-fr/" rel="noopener">émet seulement 0.01g de CO<sub>2</sub></a> à chaque visite.</li>
   </ul>
   <ul class="cell -right no-style">
-      <li><a href="/politique/">Politique de protection des données</a></li>
-      <li><a href="/mentions-legales/">Mentions légales</a> - <a href="/cgv/">CGV</a> - <a href="/cgu/">CGU</a></li>
-      <li><a href="/infrastructure/">Infrastructure</a> - <a href="/sous-traitance">Sous-traitance</a></li>
-      <li><a href="https://notes.resilien.fr/s/R%C3%A9silien.md">Documentation générale</a></li>
-      <li><a rel="me" href="https://mastodon.qowala.org/@resilien">Mastodon</a></li>
+    <li><a rel="me" href="https://mastodon.qowala.org/@resilien">Mastodon 💬</a></li>
+    <li><a href="https://notes.resilien.fr/s/R%C3%A9silien.md">Documentation générale</a></li>
+    <li><a href="/infrastructure/">Infrastructure</a> <a href="/sous-traitance">Sous&#8209;traitance</a></li>
+    <li> </li>
+    <li><a href="/mentions-legales/">Mentions légales</a> <a href="/cgv/">CGV</a> <a href="/cgu/">CGU</a></li>
+    <li><a href="/politique/">Politique de protection des données</a></li>
     </ul>
 </footer>

layouts/partials/header.html

@@ -1,13 +1,15 @@
-<header class="header grid -middle">
-  {{ if .IsHome }}
-    <h1 class="cell -left title"><a href="/">RésiLien</a></h1>
-  {{ else }}
-    <div class="cell -left title"><a href="/">RésiLien</a></div>
-  {{ end }}
+<header class="content header grid">
+  {{ $tag := cond .IsHome "h1" "div" }}
+
+  {{ printf "<%s class=\"cell -left title\" title=\"RésiLien\">" $tag | safeHTML }}
+    <a title="RésiLien" href="/">
+      <img src="/logo.svg" title="RésiLien">
+    </a>
+  {{ printf "</%s>" $tag | safeHTML }}
   <nav class="menu cell -right">
-    <ul class="no-style">
-      <li><a href="#comment-bénéficier-des-services-de-résilien-">Contact</a></li>
-      <li><a href="#quels-services-propose-résilien">Services</a></li>
+    <ul>
+      <li><a href="/#comment-bénéficier-des-services-de-résilien-">Contact</a></li>
+      <li><a href="/#quels-services-propose-résilien">Services</a></li>
       <li><a href="/blog/">Blog</a></li>
     </ul>
   </nav>

static/favicon.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Calque_2" x="0" y="0" xml:space="preserve" width="100" height="100" xmlns="http://www.w3.org/2000/svg"><style type="text/css" id="style2">.st1{fill:#f9bc60}</style><g id="layer4" display="inline"><circle id="path1731" cy="50" cx="50" fill="#0f3433" fill-opacity="1" fill-rule="evenodd" stroke="none" stroke-width="1.035" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="2.721" r="49.482"/></g><g id="g2890" display="inline"><path class="st1" d="M39.203 34.884c2.248 1.124 4.495 2.248 6.743 2.81 2.81.561 5.058 1.123 7.868 1.123 3.934 0 6.743-.562 8.991-2.247 2.248-1.686 3.372-4.496 3.372-8.43 0-2.248-.562-3.934-1.686-5.62-1.124-1.685-2.81-3.371-5.058-5.057-2.247-1.686-4.495-2.81-6.743-3.372-2.248-.562-4.496-1.124-6.744-1.124-2.81 0-4.495 0-7.305 1.686-3.372 2.248-4.496 3.934-5.058 5.62-.562 2.247-1.124 4.495-1.124 6.743 0 1.124.562 2.248 1.686 3.372 1.686 2.248 2.81 3.372 5.058 4.496z" id="path2888" fill="#f9bc60" fill-opacity="1" stroke-width="5.62"/></g><g id="layer3" display="inline"><path class="st1" d="M32.65 236.506c-1.106-1.662-2.214-3.876-2.214-6.091 0-7.198.554-23.809.554-33.775.554-12.181 1.66-26.023 2.768-41.526 3.322-37.097 4.43-36.544 4.43-53.154 0-5.537 0-11.074-.554-16.61 0-4.43-.554-8.86-.554-12.736 0-1.66.554-3.322 2.215-4.43 2.215-1.66 4.983-2.214 8.305-2.214 8.306 0 13.289 3.322 14.95 9.413 0 2.215.554 12.18.554 14.95 0 8.858 0 18.825-.554 29.345-.554 6.644-3.322 39.311-3.876 51.493-.553 12.18-.553 22.7-.553 31.56v13.288c0 1.108 1.107 2.215 2.214 2.215 9.413-1.661 35.99-9.413 38.758-9.966 2.769-.554 4.984-.554 6.09-.554 4.43 0 7.752 1.66 9.414 5.537 1.107 2.768 1.66 3.876 2.214 6.09.554 2.215.554 4.983-2.214 6.09l-25.47 9.413c-11.627 4.984-43.188 13.289-44.849 13.289-3.322 0-6.09-2.215-8.859-6.09z" id="path14" display="inline" fill="#f9bc60" fill-opacity="1" stroke-width="5.537"/></g></svg>

static/icons/calendar-contacts.svg

@@ -1,7 +1,7 @@
 <svg
-  height='300px'
-  width='300px'
-  fill="#2d3824"
+  height='70px'
+  width='70px'
+  fill="#f9bc60"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 60 60"
   x="0px"

static/icons/share-file.svg

@@ -1,7 +1,7 @@
 <svg
-  height='300px'
-  width='300px'
-  fill="#2d3824"
+  height='70px'
+  width='70px'
+  fill="#f9bc60"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"

static/icons/website.svg

@@ -1,7 +1,7 @@
 <svg
-  height='300px'
-  width='300px'
-  fill="#2d3824"
+  height='70px'
+  width='70px'
+  fill="#f9bc60"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 100 100"
   x="0px"

static/icons/writting.svg

@@ -1,7 +1,7 @@
 <svg
-  height='300px'
-  width='300px'
-  fill="#2d3824"
+  height='70px'
+  width='70px'
+  fill="#f9bc60"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xml:space="preserve"
@@ -15,7 +15,7 @@
 >
   <defs>
     <style type="text/css">
-      .fil0 {fill:#2d3824;fill-rule:nonzero}
+      .fil0 {fill:#f9bc60;fill-rule:nonzero}
     </style>
   </defs>
   <g>