Import initial.

2022-04-04 18:30:08 +02:00 · 2022-04-04 18:30:08 +02:00 · 57deaaaf34
commit 57deaaaf34
46 changed files with 16985 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,6 @@
+module.exports = {
+  extends: 'standard',
+  plugins: [
+    'standard'
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+dist
+node_modules
--- a/README.md
+++ b/README.md
@ -0,0 +1,30 @@
+# Code source du site internet de Ti Nuage
+
+L'association Ti Nuage offre une palette des services numériques pour ses adhérents et les internautes, et promeut les logiciels libres et un usage éclairé et raisonné d'Internet.
+Le site de l'association doit décrire ses missions et fournir un aperçu des services qu'elle propose, ainsi que de leurs conditions d'usage.
+
+## Technologie
+
+Le site est créé à l'aide du logiciel libre [MetalSmith](http://www.metalsmith.io). Il s'agit d'un outil de tansformation de fichiers qui permet en particulier la génération de sites statiques. L'intérêt de tels sites est leur facilité de déploiement, le peu d'usage qu'ils font en terme de ressources et leur robustesse. L'inconvénient est la nécessité de connaître quelques rudiments sur l'usage d'une ligne de comande pour re-générer et re-déployer le site à chaque modification.
+
+## Sources
+
+**Metalsmith** requiert la disponibilité de **NodeJS** et **npm**.
+
+Pour installer les sources du site sur votre machine :
+
+    git clone gitea@apps.ti-nuage.fr:ti-nuage/site.git
+
+Le projet s'appuie sur un certain nombre de dépendances, utiles au developpement ou à la génération du site lui-même. Pour installer ces dépendances :
+
+    npm install
+
+## Commandes
+
+Le script `package.json` comprend une série de commandes utiles au développement et à la génération du site. Les plus utiles sont :
+
+- pour générer le site : `npm run build`,
+
+- pour le servir localement et le tester sur son navigateur : `npm run server`.
+
+La liste des dommandes existantes est disponible avec `npm run`.
--- a/assets/dev
+++ b/assets/dev
@ -0,0 +1 @@
+production/
--- a/assets/production/css/style.css
+++ b/assets/production/css/style.css
@ -0,0 +1,236 @@
+body {
+  background: url("/images/background.webp");
+  background-size: cover;
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  color: #373d3f;
+  margin: 0;
+  padding: 0;
+}
+
+.Container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Calluna';
+  line-height: 150%;
+  margin: 0;
+}
+
+h1 {
+  font-size: 39.06px;
+}
+
+h2 {
+  font-size: 31.25px;
+  margin: 1em 0 0.2em 0;
+}
+
+h3 {
+  font-size: 25px;
+  margin: 0.6em 0 0.2em 0;
+}
+
+h4 {
+  font-size: 20.83px;
+  margin-bottom: 16px;
+}
+
+h5 {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+p + h5 {
+  margin-top: 32px;
+}
+
+p {
+  margin: 0;
+}
+
+p + p {
+  margin-top: 16px;
+}
+
+abbr {
+  border-bottom: 1px dotted #373d3f;
+}
+
+.meta-published {
+  color: #999;
+  margin-bottom: 1em;
+}
+
+.Button {
+  padding: 8px 24px;
+  background: #373d3f;
+  color: #fff;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-size: 12.8px;
+  font-weight: bold;
+  border-radius: 24px;
+  line-height: 24px;
+  display: inline-block;
+}
+
+.button-members {
+  padding: 8px 24px;
+  background: #05b;
+  color: #fff;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-size: 12.8px;
+  font-weight: bold;
+  border-radius: 0 0 24px 24px;
+  line-height: 24px;
+  display: inline-block;
+}
+
+.tac {
+  text-align: center;
+}
+
+.mt192 {
+  margin-top: 192px;
+}
+
+.mt64 {
+  margin-top: 64px;
+}
+
+.mt32 {
+  margin-top: 32px;
+}
+
+.mb64 {
+  margin-bottom: 64px;
+}
+
+.Logo {
+  display: block;
+  margin: 6em auto 0;
+  height: 25vh;
+}
+
+.logo-small {
+  width: 3em;
+  display: inline-block;
+  margin: 0.4em;
+}
+
+menu {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+}
+
+.LogoContainer,
+.Menu-Items {
+  height: 30%;
+  display: inline-block;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.Menu-Items {
+  float: right;
+}
+
+.Hero {
+  height: calc(75vh - 6em);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.Services-Title {
+  position: relative;
+  padding-left: 64px;
+  line-height: 48px;
+}
+
+.Services-Title:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  background-color: #b9daf6;
+  border-radius: 50%;
+}
+
+.Services-Title--Cloud::before {
+  background: #b9daf6 url(/images/icon-cloud.svg) center center no-repeat;
+}
+
+.Services-Title--Share::before {
+  background: #b9daf6 url(/images/icon-share.svg) center center no-repeat;
+}
+
+.Services-Title--Email::before {
+  background: #b9daf6 url(/images/icon-email.svg) center center no-repeat;
+}
+
+.Services-Title--List::before {
+  background: #b9daf6 url(/images/icon-list.svg) center center no-repeat;
+}
+
+.Two-cols-One-row,
+.Two-cols-Two-rows {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 64px 0;
+}
+
+.Article-Title {
+  margin-top: 64px;
+  margin-bottom: 32px;
+}
+
+.footer {
+  padding: 64px 0;
+}
+
+.footer ul,
+.footer li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.footer .Two-cols-One-row {
+  grid-row-gap: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  h1 {
+    font-size: 48.33px;
+  }
+
+  .Two-cols-One-row {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 64px;
+    grid-row-gap: 0;
+  }
+
+  .Two-cols-Two-rows {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 64px;
+    grid-row-gap: 64px;
+  }
+}
--- a/assets/production/fonts/Calluna/Calluna-Bold.ttf
+++ b/assets/production/fonts/Calluna/Calluna-Bold.ttf
--- a/assets/production/fonts/Calluna/Calluna-Bold.woff
+++ b/assets/production/fonts/Calluna/Calluna-Bold.woff
--- a/assets/production/fonts/Calluna/Calluna-Bold.woff2
+++ b/assets/production/fonts/Calluna/Calluna-Bold.woff2
--- a/assets/production/fonts/Calluna/Calluna-Regular.ttf
+++ b/assets/production/fonts/Calluna/Calluna-Regular.ttf
--- a/assets/production/fonts/Calluna/Calluna-Regular.woff
+++ b/assets/production/fonts/Calluna/Calluna-Regular.woff
--- a/assets/production/fonts/Calluna/Calluna-Regular.woff2
+++ b/assets/production/fonts/Calluna/Calluna-Regular.woff2
--- a/assets/production/fonts/Calluna/font.css
+++ b/assets/production/fonts/Calluna/font.css
@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Calluna';
+  src:
+    url('Calluna-Regular.woff2') format('woff2'),
+    url('Calluna-Regular.woff') format('woff'),
+    url('Calluna-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Calluna';
+  src:
+    url('Calluna-Bold.woff2') format('woff2'),
+    url('Calluna-Bold.woff') format('woff'),
+    url('Calluna-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
--- a/assets/production/fonts/Lato/Lato-Bold.ttf
+++ b/assets/production/fonts/Lato/Lato-Bold.ttf
--- a/assets/production/fonts/Lato/Lato-Bold.woff
+++ b/assets/production/fonts/Lato/Lato-Bold.woff
--- a/assets/production/fonts/Lato/Lato-Bold.woff2
+++ b/assets/production/fonts/Lato/Lato-Bold.woff2
--- a/assets/production/fonts/Lato/Lato-Light.ttf
+++ b/assets/production/fonts/Lato/Lato-Light.ttf
--- a/assets/production/fonts/Lato/Lato-Light.woff
+++ b/assets/production/fonts/Lato/Lato-Light.woff
--- a/assets/production/fonts/Lato/Lato-Light.woff2
+++ b/assets/production/fonts/Lato/Lato-Light.woff2
--- a/assets/production/fonts/Lato/Lato-Regular.ttf
+++ b/assets/production/fonts/Lato/Lato-Regular.ttf
--- a/assets/production/fonts/Lato/Lato-Regular.woff
+++ b/assets/production/fonts/Lato/Lato-Regular.woff
--- a/assets/production/fonts/Lato/Lato-Regular.woff2
+++ b/assets/production/fonts/Lato/Lato-Regular.woff2
--- a/assets/production/fonts/Lato/font.css
+++ b/assets/production/fonts/Lato/font.css
@ -0,0 +1,32 @@
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('Lato-Regular.woff2') format('woff2'),
+    url('Lato-Regular.woff') format('woff'),
+    url('Lato-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('Lato-Light.woff2') format('woff2'),
+    url('Lato-Light.woff') format('woff'),
+    url('Lato-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('Lato-Bold.woff2') format('woff2'),
+    url('Lato-Bold.woff') format('woff'),
+    url('Lato-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
--- a/assets/production/images/background.webp
+++ b/assets/production/images/background.webp
--- a/assets/production/images/icon-cloud.svg
+++ b/assets/production/images/icon-cloud.svg
@ -0,0 +1,15 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_663)">
+<path d="M3.75 16.25L6.75 13.25L9.75 16.25" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.75 13.25V19.25C6.75 19.6478 6.90804 20.0294 7.18934 20.3107C7.47064 20.592 7.85218 20.75 8.25 20.75H11.25" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.75 17V22.25C21.75 22.6478 21.592 23.0294 21.3107 23.3107C21.0294 23.592 20.6478 23.75 20.25 23.75H15.75C15.3522 23.75 14.9706 23.592 14.6893 23.3107C14.408 23.0294 14.25 22.6478 14.25 22.25V17" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.25 18.5L18.53 13.781C18.4604 13.7114 18.3778 13.6561 18.2869 13.6184C18.1959 13.5807 18.0984 13.5613 18 13.5613C17.9016 13.5613 17.8041 13.5807 17.7131 13.6184C17.6222 13.6561 17.5396 13.7114 17.47 13.781L12.75 18.5" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9998 4.24996C11.5615 4.25138 11.1288 4.34943 10.7326 4.53714C10.3365 4.72485 9.98656 4.9976 9.70784 5.33596C9.62545 4.46969 9.29306 3.64603 8.75111 2.96522C8.20915 2.2844 7.48101 1.77578 6.65527 1.50124C5.82953 1.2267 4.94179 1.19808 4.10008 1.41886C3.25837 1.63963 2.49897 2.10029 1.91429 2.74478C1.32961 3.38927 0.944848 4.1898 0.806828 5.04897C0.668808 5.90814 0.783477 6.7889 1.13688 7.58409C1.49029 8.37928 2.0672 9.0546 2.79741 9.5279C3.52762 10.0012 4.37966 10.2521 5.24984 10.25H11.9998C12.7955 10.25 13.5585 9.93389 14.1212 9.37128C14.6838 8.80867 14.9998 8.04561 14.9998 7.24996C14.9998 6.45431 14.6838 5.69125 14.1212 5.12864C13.5585 4.56603 12.7955 4.24996 11.9998 4.24996Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 23.75V20.75" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_45_663">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/production/images/icon-email.svg
+++ b/assets/production/images/icon-email.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.25 12C17.25 13.0384 16.9421 14.0534 16.3652 14.9167C15.7883 15.7801 14.9684 16.453 14.0091 16.8504C13.0498 17.2477 11.9942 17.3517 10.9758 17.1491C9.95738 16.9465 9.02192 16.4465 8.28769 15.7123C7.55347 14.9781 7.05345 14.0426 6.85088 13.0242C6.64831 12.0058 6.75227 10.9502 7.14963 9.99091C7.54699 9.0316 8.2199 8.21166 9.08326 7.63478C9.94662 7.05791 10.9617 6.75 12 6.75C13.3924 6.75 14.7277 7.30312 15.7123 8.28769C16.6969 9.27226 17.25 10.6076 17.25 12Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.25 12V14.25C17.25 15.0456 17.566 15.8087 18.1286 16.3713C18.6913 16.9339 19.4543 17.25 20.25 17.25C21.0456 17.25 21.8087 16.9339 22.3713 16.3713C22.9339 15.8087 23.25 15.0456 23.25 14.25V12C23.2499 9.46596 22.3942 7.00621 20.8215 5.01924C19.2489 3.03227 17.0515 1.63448 14.5852 1.05234C12.119 0.470197 9.52842 0.737804 7.23326 1.8118C4.93811 2.8858 3.0728 4.70328 1.93956 6.96977C0.806309 9.23626 0.471513 11.819 0.989408 14.2995C1.5073 16.78 2.84755 19.013 4.79301 20.6368C6.73846 22.2605 9.17516 23.1797 11.7083 23.2457C14.2415 23.3116 16.7227 22.5203 18.75 21" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/production/images/icon-list.svg
+++ b/assets/production/images/icon-list.svg
@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_698)">
+<path d="M2.7587 15.629C2.39739 15.629 2.0459 15.5114 1.75735 15.294C1.46879 15.0765 1.25884 14.7711 1.15922 14.4238C1.05961 14.0765 1.07574 13.7062 1.20517 13.3689C1.33461 13.0315 1.57033 12.7455 1.8767 12.554L20.3597 0.999993C20.6339 0.828404 20.9522 0.7405 21.2756 0.747045C21.5989 0.75359 21.9134 0.854301 22.1804 1.03684C22.4474 1.21939 22.6554 1.47584 22.7789 1.77479C22.9024 2.07374 22.936 2.40222 22.8757 2.71999L19.2757 21.893C19.216 22.2102 19.0652 22.5032 18.8419 22.7362C18.6186 22.9693 18.3324 23.1324 18.018 23.2056C17.7037 23.2788 17.3748 23.2591 17.0715 23.1487C16.7681 23.0383 16.5035 22.8421 16.3097 22.584L11.0997 15.629H2.7587Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.0996 15.629H8.59961V20.8C8.59959 21.1025 8.68208 21.3993 8.8382 21.6584C8.99432 21.9175 9.21815 22.1291 9.4856 22.2704C9.75305 22.4118 10.054 22.4775 10.356 22.4605C10.658 22.4435 10.9497 22.3445 11.1996 22.174L14.3776 20.008L11.0996 15.629Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.0986 15.6289L22.1786 1.03894" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_45_698">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/production/images/icon-share.svg
+++ b/assets/production/images/icon-share.svg
@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 20.25C14.7426 20.25 15.75 19.2426 15.75 18C15.75 16.7574 14.7426 15.75 13.5 15.75C12.2574 15.75 11.25 16.7574 11.25 18C11.25 19.2426 12.2574 20.25 13.5 20.25Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 23.25C22.2426 23.25 23.25 22.2426 23.25 21C23.25 19.7574 22.2426 18.75 21 18.75C19.7574 18.75 18.75 19.7574 18.75 21C18.75 22.2426 19.7574 23.25 21 23.25Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 15.75C22.2426 15.75 23.25 14.7426 23.25 13.5C23.25 12.2574 22.2426 11.25 21 11.25C19.7574 11.25 18.75 12.2574 18.75 13.5C18.75 14.7426 19.7574 15.75 21 15.75Z" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4248 16.845L19.0748 14.655" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5879 18.835L18.9119 20.165" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.25 20.25H2.25C1.85218 20.25 1.47064 20.092 1.18934 19.8107C0.908035 19.5294 0.75 19.1478 0.75 18.75V2.25C0.75 1.85218 0.908035 1.47064 1.18934 1.18934C1.47064 0.908035 1.85218 0.75 2.25 0.75H12.879C13.2765 0.750085 13.6578 0.907982 13.939 1.189L16.811 4.061C17.092 4.3422 17.2499 4.72345 17.25 5.121V8.25" stroke="#373D3F" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/production/images/logo.svg
+++ b/assets/production/images/logo.svg
@ -0,0 +1,10 @@
+<svg width="105" height="75" viewBox="0 0 105 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.92081 36.9139V46.0719C4.92081 46.4364 5.03016 46.728 5.24886 46.9467C5.46756 47.1654 5.89584 47.2748 6.53371 47.2748H7.81857V49.1064C7.21715 49.1611 6.69774 49.1884 6.26034 49.1884C5.16685 49.1884 4.30117 48.9788 3.6633 48.5596C3.04365 48.1222 2.73383 47.3568 2.73383 46.2633V36.9139H0.410156V35.0003H2.73383V31.0091H4.92081V35.0003H7.81857V36.9139H4.92081Z" fill="#373D3F"/>
+<path d="M10.0478 30.189H12.3715V32.868H10.0478V30.189ZM10.1298 35.0003H12.3168V49.1064H10.1298V35.0003Z" fill="#373D3F"/>
+<path d="M8.14661 54.0532C9.73218 54.0532 10.9532 54.4815 11.8098 55.3381C12.6846 56.1764 13.122 57.3793 13.122 58.9466V68.4873H10.935V59.1653C10.935 58.0718 10.6525 57.279 10.0876 56.787C9.52259 56.2767 8.72981 56.0215 7.70922 56.0215C7.25359 56.0215 6.78886 56.1126 6.31501 56.2949C5.85939 56.4589 5.44933 56.7232 5.08484 57.0877C4.72034 57.4522 4.41963 57.9169 4.1827 58.4819C3.94578 59.0468 3.82732 59.7212 3.82732 60.5048V68.4873H1.64033V54.3813H3.71797V56.4863C4.19182 55.7755 4.80235 55.1923 5.54957 54.7367C6.29679 54.281 7.16247 54.0532 8.14661 54.0532Z" fill="#373D3F"/>
+<path d="M27.3513 54.3813V68.4873H25.2736V66.3824C24.7998 67.0931 24.1893 67.6763 23.442 68.132C22.6948 68.5876 21.8291 68.8154 20.845 68.8154C19.2594 68.8154 18.0293 68.3962 17.1545 67.5579C16.2979 66.7013 15.8696 65.4893 15.8696 63.922V54.3813H18.0566V63.7033C18.0566 64.7968 18.3391 65.5987 18.9041 66.109C19.469 66.6011 20.2618 66.8471 21.2824 66.8471C21.738 66.8471 22.1936 66.7651 22.6493 66.6011C23.1231 66.4188 23.5423 66.1454 23.9068 65.7809C24.2713 65.4164 24.572 64.9517 24.8089 64.3867C25.0458 63.8218 25.1643 63.1474 25.1643 62.3638V54.3813H27.3513Z" fill="#373D3F"/>
+<path d="M42.962 66.7104V68.4873C42.6157 68.542 42.2147 68.5693 41.7591 68.5693C40.9754 68.5693 40.3923 68.4053 40.0095 68.0773C39.645 67.731 39.4354 67.2207 39.3808 66.5464C38.3966 68.059 36.8657 68.8154 34.7881 68.8154C33.239 68.8154 32.0179 68.46 31.1249 67.7492C30.2501 67.0385 29.8127 66.0179 29.8127 64.6874C29.8127 64.1407 29.9038 63.6213 30.0861 63.1292C30.2683 62.6371 30.5599 62.1998 30.9609 61.817C31.3801 61.4343 31.9177 61.1154 32.5738 60.8602C33.2481 60.6051 34.0682 60.4228 35.0341 60.3135L37.0571 60.0948C37.7679 60.0037 38.3146 59.8214 38.6973 59.548C39.0801 59.2564 39.2714 58.7917 39.2714 58.1538C39.2714 57.4066 39.0436 56.8508 38.588 56.4863C38.1324 56.1218 37.3031 55.9395 36.1003 55.9395C34.8974 55.9395 34.0227 56.14 33.4759 56.5409C32.9292 56.9419 32.6193 57.6709 32.5464 58.7279H30.3595C30.3959 58.0354 30.5235 57.4066 30.7422 56.8416C30.9609 56.2767 31.2889 55.7846 31.7263 55.3654C32.1819 54.9463 32.7651 54.6273 33.4759 54.4086C34.1867 54.1717 35.0615 54.0532 36.1003 54.0532C37.0844 54.0532 37.9137 54.1535 38.588 54.3539C39.2623 54.5544 39.8091 54.8369 40.2282 55.2014C40.6474 55.5659 40.9481 56.0033 41.1304 56.5136C41.3126 57.0057 41.4037 57.5524 41.4037 58.1538V66.027C41.4037 66.4826 41.6589 66.7104 42.1692 66.7104H42.962ZM34.8974 66.9564C35.426 66.9564 35.9454 66.8744 36.4557 66.7104C36.9842 66.5464 37.458 66.3004 37.8772 65.9723C38.2964 65.6443 38.6335 65.2251 38.8887 64.7148C39.1438 64.2045 39.2714 63.6031 39.2714 62.9105V61.2429C38.8522 61.571 38.2326 61.7715 37.4125 61.8444L35.3622 62.0904C34.0864 62.2362 33.2208 62.5278 32.7651 62.9652C32.3095 63.3844 32.0817 63.9402 32.0817 64.6328C32.0817 65.3253 32.3004 65.8903 32.7378 66.3277C33.1934 66.7469 33.9133 66.9564 34.8974 66.9564Z" fill="#373D3F"/>
+<path d="M57.4157 54.3813V67.9406C57.4157 68.8518 57.279 69.6902 57.0056 70.4556C56.7505 71.2211 56.3495 71.8772 55.8028 72.4239C55.2561 72.9706 54.5726 73.3989 53.7525 73.7088C52.9324 74.0186 51.9665 74.1735 50.8547 74.1735C49.0323 74.1735 47.6107 73.7543 46.5901 72.916C45.5695 72.0959 44.9863 71.0024 44.8405 69.6355H47.0275C47.1733 70.5285 47.5652 71.1937 48.203 71.6311C48.8591 72.0867 49.743 72.3146 50.8547 72.3146C52.2763 72.3146 53.3607 71.9501 54.1079 71.2211C54.8551 70.5103 55.2287 69.4168 55.2287 67.9406V66.5737C54.7002 67.2845 54.035 67.8404 53.2331 68.2413C52.4312 68.624 51.52 68.8154 50.4994 68.8154C49.5152 68.8154 48.6131 68.6422 47.793 68.296C46.9911 67.9497 46.2985 67.4576 45.7153 66.8198C45.1504 66.1819 44.713 65.4073 44.4031 64.4961C44.0933 63.5848 43.9384 62.5642 43.9384 61.4343C43.9384 60.3044 44.0933 59.2838 44.4031 58.3725C44.713 57.4613 45.1504 56.6867 45.7153 56.0489C46.2985 55.411 46.9911 54.9189 47.793 54.5726C48.6131 54.2264 49.5152 54.0532 50.4994 54.0532C51.5564 54.0532 52.495 54.2628 53.3151 54.682C54.1352 55.0829 54.8095 55.6661 55.3381 56.4316V54.3813H57.4157ZM50.7727 66.8471C52.1396 66.8471 53.2331 66.3732 54.0532 65.4256C54.8916 64.4779 55.3107 63.1474 55.3107 61.4343C55.3107 59.7212 54.8916 58.3908 54.0532 57.4431C53.2331 56.4954 52.1396 56.0215 50.7727 56.0215C49.4059 56.0215 48.3033 56.5136 47.4649 57.4977C46.6448 58.4637 46.2347 59.7758 46.2347 61.4343C46.2347 63.0928 46.6448 64.4141 47.4649 65.3982C48.3033 66.3641 49.4059 66.8471 50.7727 66.8471Z" fill="#373D3F"/>
+<path d="M72.995 62.1998H62.2788C62.3881 63.8035 62.8255 64.979 63.5909 65.7263C64.3746 66.4553 65.3861 66.8198 66.6254 66.8198C67.6277 66.8198 68.4388 66.5828 69.0584 66.109C69.678 65.6351 70.1154 64.9973 70.3706 64.1954H72.6396C72.4756 64.8515 72.2204 65.462 71.8741 66.027C71.5461 66.5919 71.1269 67.084 70.6166 67.5032C70.1063 67.9041 69.514 68.2231 68.8397 68.46C68.1654 68.6969 67.409 68.8154 66.5707 68.8154C65.6048 68.8154 64.7209 68.6514 63.919 68.3233C63.1171 67.977 62.4245 67.485 61.8414 66.8471C61.2582 66.2092 60.8025 65.4347 60.4745 64.5234C60.1647 63.6122 60.0098 62.5825 60.0098 61.4343C60.0098 60.3226 60.1647 59.3202 60.4745 58.4272C60.7843 57.516 61.2217 56.7414 61.7867 56.1035C62.3699 55.4474 63.0533 54.9463 63.837 54.6C64.6389 54.2355 65.5319 54.0532 66.516 54.0532C67.5731 54.0532 68.5025 54.2537 69.3044 54.6547C70.1063 55.0374 70.7807 55.5659 71.3274 56.2402C71.8741 56.8963 72.2842 57.6709 72.5576 58.5639C72.8492 59.4569 72.995 60.4137 72.995 61.4343V62.1998ZM66.516 56.0489C65.4043 56.0489 64.4748 56.3951 63.7276 57.0877C62.9804 57.7802 62.5157 58.8281 62.3334 60.2315H70.644C70.5893 59.6483 70.4617 59.1015 70.2612 58.5912C70.0608 58.0809 69.7874 57.6435 69.4411 57.279C69.0949 56.8963 68.6757 56.5956 68.1836 56.3769C67.7098 56.1582 67.1539 56.0489 66.516 56.0489Z" fill="#373D3F"/>
+<path d="M23.3685 33.0291C24.0691 30.2959 25.4202 27.7727 27.3065 25.6744C29.1928 23.5761 31.5585 21.965 34.2019 20.9784C36.8454 19.9918 39.6881 19.6589 42.488 20.0082C45.2878 20.3575 47.9617 21.3785 50.2817 22.9843C51.2274 17.9515 53.5867 13.292 57.0836 9.551C60.5804 5.80998 65.0703 3.14211 70.028 1.85948C74.9856 0.576854 80.206 0.732514 85.0784 2.30825C89.9509 3.88399 94.2738 6.81464 97.5416 10.7574C100.809 14.7001 102.887 19.4918 103.531 24.572C104.175 29.6523 103.359 34.8109 101.179 39.4443C98.9984 44.0778 95.5436 47.9946 91.2186 50.7365C86.8936 53.4783 81.8772 54.9319 76.7563 54.9271" stroke="#373D3F" stroke-width="1.79757" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/content/blog/2022/libre_en_fete_2022.md
+++ b/content/blog/2022/libre_en_fete_2022.md
@ -0,0 +1,16 @@
+---
+title: Libre en fête 2022
+date: 2022-03-20
+author: David Soulayrol
+---
+
+À l'occasion de l'initiative Libre en Fête, l'association Ti Nuage proposera un atelier dimanche 20 mars dans la salle Victor Hugo de la Mairie de Vieux-Marché, de 14 heures à 18 heures.
+
+Cette rencontre est à destination de tous.
+
+Fraîchement créée, l'association Ti Nuage souhaite organiser des rendez-vous récurrents pour aborder les questions relatives à la dépendance aux logiciels, la vie privée sur Internet, la frugalité numérique et les logiciels libres.
+
+Cette première manifestation sera un moment informel et convivial pour rencontrer les personnes qui sont curieuses, souhaitent découvrir des alternatives libres aux logiciels et aux services courants, ou ont envie de s'investir dans l'aide et la maintenance de services pour les usagers du Trégor. 
+
+    
+https://www.agendadulibre.org/events/25008
--- a/content/blog/index.html
+++ b/content/blog/index.html
@ -0,0 +1,5 @@
+---
+layout: blog.njk
+permalink: false
+title: TODO BLOG
+---
--- a/content/cgu.md
+++ b/content/cgu.md
@ -0,0 +1,115 @@
+---
+permalink: false
+title: Conditions Générales d’Utilisation des services Ti Nuage - CGU
+---
+Ti Nuage propose des services en ligne libres et éthiques afin de fournir une alternative aux produits des GAFAM ou « Géants du web », respectueuse des données et de l'intimité de chacun. Ces services sont assurés par une association loi 1901 et reposent essentiellement sur le bénévolat d'une poignée d'administrateurs, sur un modèle de best effort en cas d’incident par exemple, sans garantie de continuité de services ou autre.
+
+Vous pouvez lire nos mentions légales sur la [page dédiée](/mentions_legales.html).
+
+## Services
+
+En utilisant un service Ti Nuage, vous acceptez d’être lié par les conditions d'utilisation suivantes. Ces conditions sont celles en vigueur depuis le 01/11/2021. Elles sont disponibles à l'adresse https://www.ti-nuage.fr/cgu.html. L'association se réserve le droit de modifier ces conditions en fonction des mises à jour des services, objet des présentes conditions générales.
+Ti Nuage permet à tout internaute un accès gratuit aux services suivants :
+
+- un outil de rédaction partagé (Etherpad) ;
+- un outil d'édition de feuilles de calcul partagé (Ethercalc) ;
+- un gestionnaire de sondage (OpenSondage) ;
+- un moyen de partager des fichiers (Send) ;
+- un moyen de partager des images (Lutim) ;
+- un générateur de QRCode (LibreQR) ;
+- un gestionnaire d'extraits de texte (PrivateBin) ;
+- un racourcisseur d'URL (LSTU).
+
+Si vous adhérez à l'association, vous pouvez bénéficier en outre des services suivants :
+
+- une boîte de courriel ;
+- des listes de diffusions ;
+- l'hébergement d'un site Web ;
+- un outil d'hébergement de fichier et de collaboration (Nextcloud) ;
+- une forge logicielle (Gitea) ;
+- une plateforme de communication et de collaboration (Mattermost) ;
+- un gestionnaire sécurisé de mots de passe (Bitwarden).
+
+L'association Ti Nuage se réserve le droit à tout moment de modifier ou d’interrompre, temporairement ou définitivement, l'un des services précédents avec ou sans préavis. Ti Nuage ne pourra être responsable envers vous ou tout tiers pour ces modifications, suspensions ou interruptions de service.
+
+Les adhérents de l'association peuvent être avertis de tous changements liés aux services disponibles ou aux Conditions d'Utilisation en s'inscrivant à la liste d’informations services@listes.ti-nuage.fr.
+
+## Responsabilité de Ti Nuage
+
+L'association Ti Nuage a qualité d’hébergeur par application des dispositions de l’article 6 de la Loi n° 2004-575 du 21 juin 2004 pour la confiance dans l’économie numérique. À ce titre, Ti Nuage ne peut pas être tenue responsable pour les contenus publiés sur ses services, sauf en cas de non retrait sur signalement de contenus illicites, tel que le prévoit la loi.
+
+L'association Ti Nuage ne peut être tenue responsable que du contenu qu’elle a elle-même édité ; elle ne peut être tenue responsable pour les contenus ou les liens publiés par les utilisateurs et utilisatrices de ses services.
+
+Vous comprenez que la mise en ligne des services ainsi que de votre contenu implique une transmission (en clair ou chiffrée, suivant les services) sur divers réseaux. Vous comprenez que la mise en ligne de contenu sur certains services implique une publication accessible à toutes et tous.
+Ti Nuage ne garantit pas que :
+
+- les services répondront à vos besoins spécifiques ;
+- les services seront ininterrompus ou exempt de bugs ;
+- les erreurs dans les services seront corrigées.
+
+Vous comprenez et acceptez que Ti Nuage ne puisse être tenue responsable de tous dommages directs, indirects ou fortuits, comprenant les dommages pour perte de profits, de clientèle, d’accès, de données ou d’autres pertes intangibles (même si Ti Nuage est informée de la possibilité de tels dommages) et qui résulteraient de : 
+
+- l’utilisation ou de l’impossibilité d’utiliser le service ;
+- l’accès non autorisé ou altéré de la transmission des données ;
+- les déclarations ou les agissements d’un tiers sur le service ;
+- la résiliation de votre compte ;
+- toute autre question relative au service.
+
+Ti Nuage se réserve le droit de poursuivre toute personne physique ou morale pour tout fait de nature à lui porter préjudice.
+
+L’échec de Ti Nuage à exercer ou à appliquer tout droit ou disposition de ces Conditions Générales d’Utilisation ne constitue pas une renonciation à ce droit ou à cette disposition. Les Conditions d’Utilisation constituent l’intégralité de l’accord entre vous et Ti Nuage et régissent votre utilisation du service, remplaçant tous les accords antérieurs entre vous et Ti Nuage (y compris les versions précédentes des Conditions Générales d’Utilisation).
+
+## Votre responsabilité
+
+L’utilisation des services se fait à vos propres risques. Les services sont fournis tels quels.
+
+La création d'un compte, lorsqu'elle est possible, n'est autorisée que pour des personnes physiques ou morales. Vous ne pouvez vendre, échanger, revendre, ou exploiter dans un but commercial non autorisé aucun de ces comptes. Les comptes créés par des robots ou tout autre méthode automatisée pourront être supprimés sans mise en demeure préalable.
+
+Vous êtes responsable de la sécurité de votre compte et de votre mot de passe. Ti Nuage ne peut pas et ne sera pas responsable de toutes pertes ou dommages résultant de votre non-respect de cette obligation de sécurité.
+
+Vous êtes responsable de tout contenu affiché et de l’activité qui se produit sous votre compte.
+
+Vous ne devez pas transgresser les lois de votre pays. En particulier, vous ne pouvez pas utiliser le service à des fins illégales ou non autorisées. Vous ne devez pas transmettre des vers, des virus ou tout autre code de nature malveillante.
+
+Le non-respect de l’une de vos obligations pourra entraîner la résiliation de vos comptes. Votre responsabilité pourra être engagée en cas de manquement à l’une de vos obligations ayant causé un préjudice aux services Ti Nuage.
+
+## Données à caractère personnel
+
+Certains services, comme d'autres sur Internet, enregistrent automatiquement certaines informations concernant l'utilisation que vous en faites, telles que les fonctionnalités utilisées ou des données permettant de vous identifier (par exemple : type de navigateur, adresse IP, date et heure de l’accès, URL de référence).
+
+Certaines de ces informations sont néanmoins conservées. La lois impose la conservation des journaux informatiques pour une durée de 1 an.
+
+Lorsque vous adhérez à l'association, vous vous engagez en outre à fournir des informations sincères et exactes concernant votre état civil et vos coordonnées, notamment votre adresse de courriel. L'association Ti Nuage ne recueille que les informations strictement nécessaires pour pouvoir vous contacter.
+
+L'utilisation de certains services nécessite la création d'un compte et certaines informations personnelles sont demandées : une adresse courriel valide et un mot de passe qui est utilisé pour protéger ce compte contre tout accès non autorisé. Les champs « Nom » et « Prénom » peuvent être requis pour le bon fonctionnement du logiciel, mais il n’est pas nécessaire qu’ils révèlent votre véritable identité.
+
+Toutes les données recuillies ne sont ni vendues, ni transmises à des tiers, et ne le seront jamais.
+
+Conformément aux dispositions de la loi n° 78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés, dans sa version issue de la loi n°2018-493 du 20 juin 2018 et de son décret d’application, l'association Ti Nuage vous garantit un droit d’opposition, d’accès et de rectification sur les données nominatives vous concernant. Pour exercer tout droit relatif à vos données à caractère personnel, vous pouvez contacter support@ti-nuage.fr.
+
+## Cookies (témoins de connexion)
+
+Les services Ti Nuage déposent sur votre ordinateur des cookies strictement nécessaires au fonctionnement du service. Aucun pistage n’est réalisé au moyen de ces cookies.
+Droit d’auteur sur les contenus
+
+Les textes, images, sons, vidéos, ou tout autre élément que vous téléchargez ou transmettez depuis votre compte vous appartiennent pleinement et sont de votre responsabilité. Vous ne pouvez pas, en particulier,  envoyer, télécharger, publier, distribuer, diffuser tout contenu illégal, diffamatoire, harcelant, abusif, frauduleux, contrefait, obscène ou autrement répréhensible.
+
+Ti Nuage ne revendique aucun droit sur vos données, ni ne les utilise autrement que pour vous fournir ses services de stockage et de partage. En revanche, et conformément aux obligations en qualité d’hébergeur de l'association, Ti Nuage pourra procéder au retrait de tout contenu dès le moment où elle aura eu connaissance de son caractère manifestement illicite. Ti Nuage se réserve également le droit d'empêcher la diffusion ou de supprimer tout contenu qui porterait préjudice au bon fonctionnement des services. Pour signaler un tel contenu ou un abus vous pouvez contacter support@ti-nuage.fr.
+
+Sauf mention contraire, tous les contenus des sites de Ti Nuage, hors les données des adhérents ou des utilisateurs anonymes, appartiennent à l'association.
+Résiliation et suppression
+
+Vous pouvez à tout moment demander la suppression de vos comptes et des données associées. Ti Nuage s’engage à répondre à la demande en tenant compte des limites possibles du service en question.
+
+Ti Nuage a le droit de suspendre ou de résilier les comptes que vous avez ouvert sur un service et de refuser toute utilisation actuelle ou future à ce service. Cette résiliation entraînera la désactivation de l’accès à votre compte, et dans la mesure du possible la restitution de l'ensemble de vos contenus. Ti Nuage n’a aucune obligation de résultat quant à la restitution de vos données.
+
+Ti Nuage se réserve également le droit de résilier votre compte sur un service gratuit s’il est présumé abandonné, ou sur vos services adhérents si vous vous êtes retiré ou avez été exclu de l'association. En dehors du cas de l'exclusion, cette résiliation sera effective seulement après l’expiration d’un délai de 8 jours suivant une demande par courriel de justifier de l’utilisation du compte.
+Obligation de communication de données
+
+Ti Nuage ne communique des données concernant les utilisateurs et utilisatrices de ses services que dans les cas où cette communication est rendue obligatoire par les dispositions législatives et réglementaires.
+
+## Droit applicable et juridiction compétente
+
+Les services et leurs Conditions Générales d’Utilisation sont régis par la loi française, quel que soit le lieu d’utilisation. En cas d’échec des solutions amiables ou dans l’absence de leur recherche, les tribunaux français sont seuls compétents pour répondre de tout différend né des présentes dispositions.
+
+
--- a/content/index.html
+++ b/content/index.html
@ -0,0 +1,51 @@
+---
+layout: front.njk
+hidemenuicon: true
+title: TODO TITLE
+---
+<img class="Logo" src="/images/logo.svg" alt="">
+<header class="Hero">
+  <h1 class="tac">Hébergeur associatif, transparent, éthique, militant et solidaire. </h1>
+  <div class="tac mt32">
+    <a class="Button" href="https://www.helloasso.com/associations/ti-nuage/adhesions/adhesion-1">Devenir adhérent</a>
+  </div>
+</header>
+<section class="Explanation">
+  <h2 class="mt64 tac">Ti Nuage ?</h2>
+  <p class="mb64">L'association Ti Nuage offre une alternative locale aux <abbr title="Google, Apple, Facebook, Amazon, Microsoft, etc.">GAFAM</abbr> pour les associations, les petites entreprises et les particuliers de la région du Trégor. L’infrastructure technique est gérée par les membres de l’association et hébergée localement dans le Trégor.</p>
+  <div class="Two-cols-One-row">
+    <div class="col-1">
+      <h3 class="tac">Liberté</h3>
+      <p>Nous fournissons des outils en ligne à code source ouvert qui vous permettent de garder le contrôle de vos données et de votre vie privée. Quand cela est possible, elles sont chiffées sur le serveur (Mail, Nextcloud). Nous ne transmettons ni ne vendons d'informations sur l'utilisations de nos service à qui que ce soit.</p>
+    </div>
+    <div class="col-2">
+      <h3 class="tac">Solidarité</h3>
+      <p>Nous nous organisons sur la base de l'autonomie, l'aide mutuelle, le partage de ressources et la création communautaire. Que vous soyez du métier ou simplement curieuse-eux, nous vous accueillons à bras ouverts.</p>
+    </div>
+  </div>
+</section>
+
+<section class="Services">
+  <h2 class="tac mt64 mb64">Nos services</h2>
+  <div class="Two-cols-Two-rows">
+    <div>
+      <h3 class="Services-Title Services-Title--Cloud">Hébergement web</h3>
+      <p>Nous ne le créons pas pour vous, mais nous pouvons vous apporter des conseils et nous hébergeont votre site internet. Vous pouvez utiliser votre propre noms de domaine où utiliser gratuitement un sous-domaine ti-nuage.fr</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Share">Partage de documents</h3>
+      <p>Partagez et collaborez sur des documents, envoyez et recevez des courriels, gérez votre calendrier et discutez par vidéo sans fuite de données. Synchronisez les contacts de votre téléphone.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Email">Adresse e-mail</h3>
+      <p>Une adresse email @ti-nuage.fr consultable par webmail, Nextcloud ou avec votre client de messagerie habituel.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Liste de diffusion</h3>
+      <p>Une liste de diffusion nom@listes.ti-nuage.fr pour échanger avec les membres de votre organisation.</p>
+    </div>
+  </div>
+  <div class="tac mt32">
+    <a class="Button" href="/services.html">Voir tous les services</a>
+  </div>
+</section>
--- a/content/mentions_legales.md
+++ b/content/mentions_legales.md
@ -0,0 +1,19 @@
+---
+permalink: false
+title: Mentions légales
+---
+## Publication
+
+Ti Nuage, association loi 1901.
+Déclarée à la préfecture de police à Saint Brieuc le 18 octobre 2021 sous le numéro en cours.
+Siège social situé à la Mairie, 11 places aux Chevaux, 22420 Le Vieux Marché, France.
+
+## Hébergement
+
+Sas OVH.
+Siège social : 2 rue Kellermann - 59100 Roubaix - France
+
+## Propriété intellectuelle
+
+Ce site est conçu avec le logiciel libre [Metasmith](https://www.metalsmith.io). Tout contenu affiché sur le site appartient à leurs ayant-droit respectifs. Sauf mention contraire sur les supports énoncés, les contenus appartenant à l'association Ti Nuage sont sous licence Creative Commons Attribution 4.0 International.
+
--- a/content/services.md
+++ b/content/services.md
@ -0,0 +1,77 @@
+---
+permalink: false
+title: Les services fournis par Ti Nuage
+---
+Les serveurs fournissant les services ci-dessous sont sous le seul contrôle de
+l'équipe technique de l'association.
+
+Nous sommes une petite structure et nous nous efforçons de donner le meilleur de nous même avec les moyens que nous avons à notre disposition. Malgré des sauvegardes quotidiennes et un suivi régulier de l'infrastructure, nous ne sommes pas à l'abris d'un incident. Nous ne garantissons donc pas une continuité de service permanente et nous ne nous assignons aucune obligation de résultat.
+
+<section class="Services">
+  <h2 class="tac mt192 mb64">Services réservés aux adhérents</h2>
+  <div class="Two-cols-Two-rows">
+    <div>
+      <h3 class="Services-Title Services-Title--Cloud">Hébergement web</h3>
+      <p>Nous ne le créons pas pour vous, mais nous pouvons vous apporter des conseils et nous hébergeont votre site internet. Vous pouvez utiliser votre propre noms de domaine où utiliser gratuitement un sous-domaine ti-nuage.fr</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Share">Partage de documents</h3>
+      <p>Partagez et collaborez sur des documents, envoyez et recevez des courriels, gérez votre calendrier et discutez par vidéo sans fuite de données. Synchronisez les contacts de votre téléphone.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Email">Adresse e-mail</h3>
+      <p>Une adresse email @ti-nuage.fr consultable par webmail, Nextcloud ou avec votre client de messagerie habituel.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Liste de diffusion</h3>
+      <p>Une liste de diffusion nom@listes.ti-nuage.fr pour échanger avec les membres de votre organisation.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Coffre-fort numérique</h3>
+      <p>Un espace pour stocker vos mot de passe de façon sécurisée et pouvoir y accéder depuis tous vos terminaux numériques.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Forge logicielle</h3>
+      <p>Un environnement de développement Git pour héberger et partager vos projets.</p>
+    </div>
+  </div>
+</section>
+
+<section class="Services">
+  <h2 class="tac mt192 mb64">Services en libre accès, sans adhésion</h2>
+  <div class="Two-cols-Two-rows">
+    <div>
+      <h3 class="Services-Title Services-Title--Cloud">Discussion instantanée</h3>
+      <p>Un logiciel de chat ouvert, avec des fonctions propres au travail en équipes.</p>
+      <p>Logiciel <a href="https://chat.ti-nuage.fr/">Mattermost</a>.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Share">Édition collaborative</h3>
+      <p>Des outils pour organiser un document et le rédiger en groupe, avec la possibilité de d'identifier les apports de chacun et de revenir en arrière.<p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/pad">Etherpad</a>, pour l'édition d'un texte.</p>
+      <p>Logiciel <a href="https://calc.ti-nuage.fr">Ethercalc</a>, pour la création d'une feuille de calcul.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--Email">Sondages</h3>
+      <p>Pour organiser des rendez-vous ou choisir parmi plusieurs options, au sein d'un groupe ou d'une association.</p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/date">OpenSondage</a></p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Partage de fichiers</h3>
+      <p>Pour partager des documents trop lourds pour un envoi par courriel, une gallerie de photos, ou même de simple extraits de texte ou de code, de manière sécurisée et temporaire.</p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/privatebin">PrivateBin</a>, pour le partage d'extraits de textes.</p>
+      <p>Logiciel <a href="https://send.ti-nuage.fr/">Send</a>, pour l'envoi de fichiers.</p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/lutim">Lutim</a>, pour le partage d'images.</p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Raccourcisseur d'URL</h3>
+      <p>Un outil pour partager de manière simple des URL complexes.</p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/lstu">Lstu</a></p>
+    </div>
+    <div>
+      <h3 class="Services-Title Services-Title--List">Générateur de QR Codes</h3>
+      <p>Le moyen de présenter des données courtes (telles une URL ou une adresse de courriel) de manière originale ou pratique.</p>
+      <p>Logiciel <a href="https://apps.ti-nuage.fr/qr">LibreQr</a>.</p>
+    </div>
+  </div>
+</section>
--- a/layouts/article.njk
+++ b/layouts/article.njk
@ -0,0 +1,13 @@
+{% extends "base.njk" %}
+
+{% block article %}
+<h1>{{ title }}</h1>
+{% if date %}
+<div class="meta-published">
+  Publié le : {{ moment(date).format('LL') }}
+</div>
+{% endif %}
+
+{{ contents | safe }}
+
+{% endblock %}
--- a/layouts/base.njk
+++ b/layouts/base.njk
@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    </head>
+    <title>{{ site.title }} | {{ page.title }}</title>
+    <meta charset="utf-8">
+    <meta name="author" content="Association Ti Nuage">
+    <meta name="generator" content="Metalsmith" />
+    <link rel="stylesheet" href="/fonts/Lato/font.css">
+    <link rel="stylesheet" href="/fonts/Calluna/font.css">
+    <link rel="stylesheet" href="/css/style.css">
+
+    <!-- Generated with https://formito.com/tools/favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23005aff%22></rect><path d=%22M45.00 37.37L36.45 37.37L36.45 70.90Q35.68 71.11 34.28 71.28Q32.88 71.45 31.34 71.45L31.34 71.45Q28.05 71.45 26.72 70.34Q25.39 69.22 25.39 66.28L25.39 66.28L25.39 37.37L14.40 37.37Q13.98 36.66 13.60 35.55Q13.21 34.42 13.21 33.09L13.21 33.09Q13.21 30.71 14.26 29.63Q15.31 28.55 17.13 28.55L17.13 28.55L47.73 28.55Q48.22 29.24 48.57 30.37Q48.91 31.48 48.91 32.81L48.91 32.81Q48.91 35.13 47.87 36.24Q46.82 37.37 45.00 37.37L45.00 37.37ZM76.08 49.48L76.08 49.48Q76.08 47.03 74.61 45.84Q73.14 44.64 70.69 44.64L70.69 44.64Q69.01 44.64 67.61 45.06Q66.21 45.48 65.02 46.12L65.02 46.12L65.02 70.90Q64.32 71.11 63.06 71.28Q61.80 71.45 60.26 71.45L60.26 71.45Q57.11 71.45 55.71 70.44Q54.31 69.42 54.31 66.48L54.31 66.48L54.31 44.86Q54.31 43.03 55.08 41.91Q55.85 40.80 57.25 39.81L57.25 39.81Q59.49 38.20 63.02 37.23Q66.56 36.24 70.83 36.24L70.83 36.24Q78.46 36.24 82.62 39.61Q86.79 42.97 86.79 49.20L86.79 49.20L86.79 70.90Q86.02 71.11 84.76 71.28Q83.50 71.45 81.96 71.45L81.96 71.45Q78.81 71.45 77.44 70.44Q76.08 69.42 76.08 66.48L76.08 66.48L76.08 49.48Z%22 fill=%22%23fff%22></path></svg>" />
+    {% block head %}{% endblock %}
+  </head>
+  <body>
+    <div class="Container">
+      <menu>
+        <div class="LogoContainer">
+          {% if not hidemenuicon %}
+          <a href="/"><img class="logo-small" src="/images/logo.svg" alt=""></a>
+          {% endif %}
+        </div>
+        <div class="Menu-Items">
+          <a class="button-members" href="https://mon.ti-nuage.fr">Éspace adhérents</a>
+        </div>
+      </menu>
+
+    {% block article %}{% endblock %}
+    </div>
+
+    <footer class="footer mt192">
+      <div class="Container">
+        <div class="Two-cols-One-row">
+          <div>
+            <h4>Ti Nuage</h4>
+            <ul>
+              <li><a href="/">Accueil</a></li>
+              <li><a href="/blog">Blog</a></li>
+              <li><a href="/services.html">Services</a></li>
+              <li><a href="/cgu.html">CGU</a></li>
+              <li><a href="/mentions_legales.html">Mentions légales</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4>Nous contacter</h4>
+            <h5>Adresse</h5>
+            <p>
+              Mairie - Le Vieux-Marché<br>
+              11 place aux Chevaux<br>
+              22420 Le Vieux Marché
+            </p>
+            <h5>Email</h5>
+            <p>contact@ti-nuage.fr</p>
+            <h5>Téléphone</h5>
+            <p>07 83 85 59 26</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
--- a/layouts/blog.njk
+++ b/layouts/blog.njk
@ -0,0 +1,18 @@
+{% extends "base.njk" %}
+
+{% block article %}
+  {% block header %}{{ header | safe }}{% endblock %}
+  <article>
+    {% block content %}{{ contents | safe }}{% endblock %}
+    {% set news = collections["archives"] %}
+       <ul>
+         {% for article in news %}
+         <li>
+            <p><a href="/{{ article.path }}">{{ moment(article.date).format('LL') }} | {{ article.title }}</a></p>
+             <p>{{ article.excerpt | safe }}</p>
+         </li>
+         {% else %}
+         {% endfor %}
+      </ul>
+  </article>
+{% endblock %}
--- a/layouts/front.njk
+++ b/layouts/front.njk
@ -0,0 +1,25 @@
+{% extends "base.njk" %}
+
+{% block article %}
+  {% block header %}{{ header | safe }}{% endblock %}
+  <article>
+    {% block content %}{{ contents | safe }}{% endblock %}
+
+    <section class="Services">
+      <h2 class="tac mt64">Actualités</h2>
+       {% set news = collections["news"] %}
+       <ul>
+         {% for article in news %}
+         <li>
+            <p><a href="{{ article.path }}">{{ moment(article.date).format('LL') }} | {{ article.title }}</a></p>
+             <p>{{ article.excerpt | safe }}</p>
+         </li>
+         {% else %}
+         {% endfor %}
+      </ul>
+      <div class="tac mt32">
+        <a class="Button" href="/blog">Voir les archives</a>
+      </div>
+    </section>
+  </article>
+{% endblock %}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,64 @@
+{
+  "name": "ti-nuage.fr",
+  "version": "2022.03.29",
+  "private": true,
+  "description": "Ti Nuage Website",
+  "main": "",
+  "scripts": {
+    "build": "DEBUG=metalsmith* npm run clean && npm run build:metalsmith",
+    "build:prod": "NODE_ENV=production npm run build",
+    "build:metalsmith": "nodejs scripts/run.js build",
+    "clean": "rimraf dist",
+    "dev": "npm run build && DEBUG=metalsmith* nodemon scripts/run.js serve",
+    "server": "npm run build && http-server dist",
+    "deploy": "npm run build:prod && cd dist && rsync -v -rlptz --relative * $SERVER_PATH",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:js": "eslint scripts",
+    "lint:css": "stylelint assets/**/*.css",
+    "test": "npm run lint && npm run build"
+  },
+  "author": "Ti Nuage <contact@ti-nuage.fr>",
+  "dependencies": {},
+  "devDependencies": {
+    "@metalsmith/collections": "^1.2.1",
+    "@metalsmith/excerpts": "^1.5.1",
+    "@metalsmith/layouts": "^2.4.0",
+    "@metalsmith/permalinks": "^2.4.0",
+    "browser-sync": "^2.27.5",
+    "bs-fullscreen-message": "^1.1.0",
+    "clean-css": "^5.1.5",
+    "cli-table2": "^0.2.0",
+    "debug": "^4.3.2",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-standard": "4.1.0",
+    "filesize": "^8.0.0",
+    "http-server": "^13.0.1",
+    "jstransformer-nunjucks": "^1.0.0",
+    "metalsmith": "^2.4.0",
+    "metalsmith-assets": "^0.1.0",
+    "metalsmith-clean-css": "^6.1.3",
+    "metalsmith-markdownit": "^0.5.0",
+    "metalsmith-rename": "^1.0.0",
+    "metalsmith-sitemap": "^1.2.2",
+    "moment": "^2.29.1",
+    "nodemon": "^2.0.12",
+    "rimraf": "^3.0.2",
+    "slug": "^5.1.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0"
+  },
+  "nodemonConfig": {
+    "delay": 2500,
+    "ignore": [
+      "test/*",
+      "docs/*"
+    ],
+    "watch": [
+      "scripts"
+    ]
+  }
+}
--- a/scripts/config.js
+++ b/scripts/config.js
@ -0,0 +1,20 @@
+const { resolve, join } = require('path')
+
+const hostname = 'https://ti-nuage.fr'
+
+const projectRoot = resolve(__dirname, '..')
+const distribution = join(projectRoot, 'dist')
+
+module.exports = {
+  hostname,
+  paths: {
+    projectRoot,
+    /* Nodes */
+    nodeModules: join(projectRoot, 'node_modules'),
+    /* Metalsmith */
+    metalsmithSource: 'content',
+    metalsmithDestination: distribution,
+    /* Server */
+    serverRoot: distribution
+  }
+}
--- a/scripts/metalsmith-helpers.js
+++ b/scripts/metalsmith-helpers.js
@ -0,0 +1,108 @@
+const path = require('path')
+const Table = require('cli-table2')
+const filesize = require('filesize')
+
+function generateFileMap (files) {
+  return Object.keys(files).reduce((map, filename) => {
+    const file = files[filename]
+    const parsedFilename = path.parse(filename)
+    const ext = parsedFilename.ext.substr(1)
+    const extFiles = map[ext] || []
+    return {
+      ...map,
+      [ext]: [
+        ...extFiles,
+        {
+          file,
+          filename
+        }
+      ]
+    }
+  }, {})
+}
+
+export function StatisticsPlugin (options) {
+  return (files, metalsmith, done) => {
+    const fileMap = generateFileMap(files)
+    const fileTypes = Object.keys(fileMap)
+
+    // File overview table
+    fileTypes.forEach((filetype) => {
+      const fileTypeFiles = fileMap[filetype]
+      const count = fileTypeFiles.length
+      const size = fileTypeFiles.reduce((totalsize, entry) => {
+        // Some plugins (eg. metalsmith-data-markdown) replace the Buffer by a string
+        if (typeof entry.file.contents === 'string') {
+          return totalsize + entry.file.contents.length
+        } else {
+          return totalsize + entry.file.contents.byteLength
+        }
+      }, 0)
+      const filenamesTable = new Table({
+        head: [`${count} ${filetype}-${count > 1 ? 'files' : 'file'} with total ${filesize(size)}`, 'File size'],
+        wordWrap: true,
+        colWidths: [process.stdout.columns - 16, 12]
+      })
+      fileTypeFiles.forEach((entry) => {
+        let size = 0
+        // Some plugins (eg. metalsmith-data-markdown) replace the Buffer by a string
+        if (typeof entry.file.contents === 'string') {
+          size = entry.file.contents.length
+        } else {
+          size = entry.file.contents.byteLength
+        }
+        filenamesTable.push([entry.filename, size])
+      })
+      console.log(filenamesTable.toString())
+    })
+
+    done()
+  }
+}
+
+export function DebugPlugin (options) {
+  function sanitizeTableContent (content) {
+    const length = content.length
+    content = content.replace(/\s+/g, ' ').slice(0, config.maxContentLength)
+    if (length > config.maxContentLength) {
+      content = content.trim() + '...'
+    }
+    return content
+  }
+
+  const defaultOptions = {
+    maxContentLength: 1000
+  }
+
+  const config = {
+    ...defaultOptions,
+    ...options
+  }
+
+  return (files, metalsmith, done) => {
+    const fileMap = generateFileMap(files)
+    const fileTypes = Object.keys(fileMap)
+
+    fileTypes.forEach((filetype) => {
+      const fileTypeFiles = fileMap[filetype]
+      fileTypeFiles.forEach((entry) => {
+        const content = sanitizeTableContent(entry.file.contents.toString())
+        const size = filesize(entry.file.contents.byteLength)
+        const metadata = {
+          ...entry.file
+        }
+        delete metadata.contents
+        const fileTable = new Table({
+          head: [`${entry.filename} @ ${size}`],
+          wordWrap: true,
+          colWidths: [process.stdout.columns - 2]
+        })
+        fileTable.push([JSON.stringify(metadata, null, 2)])
+        fileTable.push([content])
+        console.log(fileTable.toString())
+      })
+    })
+
+    done()
+  }
+}
--- a/scripts/metalsmith-statistics-plugin.js
+++ b/scripts/metalsmith-statistics-plugin.js
@ -0,0 +1,63 @@
+const path = require('path')
+const Table = require('cli-table2')
+const filesize = require('filesize')
+
+module.exports = plugin
+
+function generateFileMap (files) {
+  return Object.keys(files).reduce((map, filename) => {
+    const file = files[filename]
+    const parsedFilename = path.parse(filename)
+    const ext = parsedFilename.ext.substr(1)
+    const extFiles = map[ext] || []
+    return {
+      ...map,
+      [ext]: [
+        ...extFiles,
+        {
+          file,
+          filename
+        }
+      ]
+    }
+  }, {})
+}
+
+function plugin () {
+  return (files, metalsmith, done) => {
+    const fileMap = generateFileMap(files)
+    const fileTypes = Object.keys(fileMap)
+
+    // File overview table
+    fileTypes.forEach((filetype) => {
+      const fileTypeFiles = fileMap[filetype]
+      const count = fileTypeFiles.length
+      const size = fileTypeFiles.reduce((totalsize, entry) => {
+        // Some plugins (eg. metalsmith-data-markdown) replace the Buffer by a string
+        if (typeof entry.file.contents === 'string') {
+          return totalsize + entry.file.contents.length
+        } else {
+          return totalsize + entry.file.contents.byteLength
+        }
+      }, 0)
+      const filenamesTable = new Table({
+        head: [`${count} ${filetype}-${count > 1 ? 'files' : 'file'} with total ${filesize(size)}`, 'File size'],
+        wordWrap: true,
+        colWidths: [process.stdout.columns - 16, 12]
+      })
+      fileTypeFiles.forEach((entry) => {
+        let size = 0
+        // Some plugins (eg. metalsmith-data-markdown) replace the Buffer by a string
+        if (typeof entry.file.contents === 'string') {
+          size = entry.file.contents.length
+        } else {
+          size = entry.file.contents.byteLength
+        }
+        filenamesTable.push([entry.filename, size])
+      })
+      console.log(filenamesTable.toString())
+    })
+
+    done()
+  }
+}
--- a/scripts/metalsmith.js
+++ b/scripts/metalsmith.js
@ -0,0 +1,88 @@
+/* This is the actual metalsmith configuration script. */
+const assets = require('metalsmith-assets')
+const cleanCSS = require('metalsmith-clean-css')
+const config = require('./config.js')
+const collections = require('@metalsmith/collections')
+const excerpts = require('@metalsmith/excerpts')
+const layouts = require('@metalsmith/layouts')
+const Metalsmith = require('metalsmith')
+const markdown = require('metalsmith-markdownit')
+const moment = require('moment')
+const permalinks = require('@metalsmith/permalinks')
+const rename = require('metalsmith-rename')
+const sitemap = require('metalsmith-sitemap')
+const slug = require('slug')
+const statistics = require('./metalsmith-statistics-plugin')
+
+const __PROD__ = process.env.NODE_ENV === 'production'
+
+moment.locale('fr')
+
+module.exports = new Metalsmith(config.paths.projectRoot)
+  .clean(__PROD__)
+  .metadata({
+    moment: moment,
+    remove_diatrics: function (e) { return slug(e, { mode: 'rfc3986' }) },
+    site: {
+      title: 'Ti Nuage'
+    }
+  })
+  .source(config.paths.metalsmithSource)
+  .destination(config.paths.metalsmithDestination)
+  .use(cleanCSS({
+    files: 'content/css/*.css',
+    cleanCSS: {
+      rebase: true
+    }
+  }))
+  .use(assets({
+    source: './assets/' + (process.env.NODE_ENV || 'dev'),
+    destination: './'
+  }))
+  .use(markdown({
+    html: true,
+    linkify: true,
+    typographer: true,
+    quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
+    plugin: {
+      pattern: '**/*.md',
+      extension: 'html'
+    }
+  }))
+  .use(excerpts())
+  .use(permalinks({
+    pattern: 'blog/:date/:title',
+    date: 'YYYY/MM'
+  }))
+  .use(collections({
+    archives: {
+      limit: 3,
+      pattern: 'blog/*/**/*/*.html',
+      reverse: true,
+      sortBy: 'date'
+    },
+    news: {
+      pattern: 'blog/*/**/*.html',
+      reverse: true,
+      sortBy: 'date'
+    }
+  }))
+  .use(layouts({
+    default: 'article.njk',
+    pattern: '**/*.html',
+    engineOptions: {
+      filters: {
+      },
+      globals: {
+        production: __PROD__
+      }
+    }
+  }))
+  .use(rename([
+    [/\.njk$/, '.html']
+  ]))
+  .use(sitemap({
+    changefreq: 'monthly',
+    hostname: config.hostname
+  }))
+  .use(statistics())
--- a/scripts/run.js
+++ b/scripts/run.js
@ -0,0 +1,71 @@
+const bs = require('browser-sync').create('Metalsmith')
+const config = require('./config.js')
+const debug = require('debug')('Run')
+const metalsmith = require('./metalsmith')
+const path = require('path')
+const strip = require('strip-ansi')
+
+function build (sync) {
+  debug('Building Metalsmith')
+  metalsmith.build((err) => {
+    if (err) {
+      debug('Metalsmith build error:')
+      debug(err)
+      if (sync) {
+        return bs.sockets.emit('fullscreen:message', {
+          title: 'Metalsmith Error:',
+          body: strip(`${err.message}\n\n${err.stack}`),
+          timeout: 100000
+        })
+      } else {
+        throw err
+      }
+    }
+    debug('Metalsmith build finished!')
+    if (sync) {
+      bs.reload()
+    }
+  })
+}
+
+function serve () {
+  bs.init({
+    server: config.paths.serverRoot,
+    port: 8080,
+    ui: {
+      port: 9000
+    },
+    open: false,
+    logLevel: 'debug',
+    logPrefix: 'BrowserSync',
+    logConnections: true,
+    logFileChanges: true,
+    notify: true,
+    files: [{
+      match: [
+        path.resolve(config.paths.projectRoot, 'content', '**', '*'),
+        path.resolve(config.paths.projectRoot, 'layouts', '**', '*.njk')
+      ],
+      fn: function (event, file) {
+        build(true)
+      },
+      options: {
+        ignored: ['**/.#*', '**/*~', '**/#*#']
+        // /\.#|node_modules|~$/
+      }
+    }]
+  })
+}
+
+const args = process.argv.slice(2)
+
+switch (args[0]) {
+  case 'build':
+    build()
+    break
+  case 'serve':
+    serve()
+    break
+  default:
+    console.log('Unknown arguments "' + args[0] + '"')
+}
--- a/stylelint.config.js
+++ b/stylelint.config.js
@ -0,0 +1,8 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  rules: {
+    'selector-nested-pattern': /^&[^,\n\r]+(,\s*&[^,\n\r]+)*$/,
+    'selector-type-no-unknown': null
+  },
+  ignoreFiles: ['**/mini-tes.css']
+}