diff --git a/assets/styles/main.sass b/assets/styles/main.sass index a738f97..d8cf7c3 100644 --- a/assets/styles/main.sass +++ b/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 ;} diff --git a/config/_default/config.yml b/config/_default/config.yml index 716f94a..f03cf11 100644 --- a/config/_default/config.yml +++ b/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: diff --git a/content/_index.md b/content/_index.md index 9313562..2b02e8c 100644 --- a/content/_index.md +++ b/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**
les organisations
qui ont une **conscience sociétale**
vers la réappropriation de
leurs **outils numériques**. +
+
+ + > ## **Accompagner**
les organisations
qui ont une **conscience sociétale**
vers la réappropriation de
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} +
+
+
+
-- ![Collaboration sur un document](/icons/writting.svg) - #### Prise de notes collaborative +## Quels services propose RésiLien ? +{.center} + +-
+ + ![Collaboration sur un document](/icons/writting.svg) + ### Prise de notes collaborative + +
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 } +-
-### Comment bénéficier des services de RésiLien ? -{.center .frame} + ![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. +{ .cards } + +
+
+
+
+ +## 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} +
+
+
+
-Voici nos derniers articles de blog : +## Blog +{.center} + +Voici nos derniers articles de blog : {{< blog-article-last >}} [Voir tous les articles](/blog/) + +
+
diff --git a/content/blog/2021/2021-12-20-lancement-de-resilien.md b/content/blog/2021/2021-12-20-lancement-de-resilien.md index d1b3361..09cadaa 100644 --- a/content/blog/2021/2021-12-20-lancement-de-resilien.md +++ b/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 --- diff --git a/content/blog/2021/2021-12-21-integration-des-chatons.md b/content/blog/2021/2021-12-21-integration-des-chatons.md index 4dc92b4..8a9081b 100644 --- a/content/blog/2021/2021-12-21-integration-des-chatons.md +++ b/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. diff --git a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/graphique_rechauffement.png b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/graphique_rechauffement.png index b4508fb..5e329a1 100644 Binary files a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/graphique_rechauffement.png and b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/graphique_rechauffement.png differ diff --git a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/impact_numerique_france_2020.png b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/impact_numerique_france_2020.png index df20a68..e5e771f 100644 Binary files a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/impact_numerique_france_2020.png and b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/impact_numerique_france_2020.png differ diff --git a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/index.md b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/index.md index 649d180..7fc6d3f 100644 --- a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/index.md +++ b/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 CO2e 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 CO2 (le dioxyde de carbone). En continuant nos activités humaines avec les politiques actuelles, les scientifiques prédisent que nous émettrons environ 60 GtCO2e 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. diff --git a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/part_numerique_ges.png b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/part_numerique_ges.png index e00b43f..808a735 100644 Binary files a/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/part_numerique_ges.png and b/content/blog/2022/2022-01-26-l-impact-environnemental-du-numerique/part_numerique_ges.png differ diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..fea5eb7 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,7 @@ +{{ define "main" }} +
+
+ {{ .Content }} +
+
+{{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 4020fe5..6e099e4 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -1,8 +1,12 @@ {{ define "main" }} +
+
{{ .Content }} +
+
{{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 736a04f..ad28fa7 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,15 +1,19 @@ {{ define "main" }} +
+

Publié le {{ if isset .Params "auteur" }} - {{ .Params.auteur }}{{ end }}

{{ .Content }} -
+
+
+ - +
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 80db7c9..0293544 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,16 +1,17 @@ -
-