From a2ce87050ef1c80f1ca7ceb8796790646e29eef5 Mon Sep 17 00:00:00 2001 From: Simon C Date: Fri, 4 Feb 2022 15:59:24 +0100 Subject: [PATCH 1/3] feat: Add theme variables --- assets/styles/main.sass | 112 ++++++++++++++++++++++++++++++++++++---- content/_index.md | 2 +- 2 files changed, 104 insertions(+), 10 deletions(-) diff --git a/assets/styles/main.sass b/assets/styles/main.sass index a738f97..c76181f 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -8,11 +8,109 @@ html p, li line-height: 1.4 -body - --color-background: #fff8eb - --color-paragraph: #2d3824 - --color-highlight: #c14508 +// COLOR +$color-darkest: #001e1d +$color-darken: #0f3433 +$color-dark: #004643 +$color-main: #abd1c6 +$color-light: #e8e4e6 +$color-lightest: #fffffe +$color-secondary: #f9bc60 +$color-tertiary: #e16162 + +@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: #{$color-lightest} + --color-paragraph: var(--color-secondary) + --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: var(--color-headline) + + + --color-secondary-background: var(--color-secondary) + --color-secondary-headline: var(--color-darkest) + --color-secondary-paragraph: #{$color-darken} + + --color-secondary-link: var(--color-highlight) + --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 > * + 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) + +@mixin theme-secondary + 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 + color: var(--color-secondary-card-paragraph) + background: var(--color-secondary-card-background) + 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) + +body + @include theme + @include theme-primary + +.theme-secondary + @include theme-secondary + +.card, .cards > * + padding: 1rem + margin: 1rem + +body --border-style: dashed --border-size: 4px --link-style: dotted @@ -21,8 +119,7 @@ body 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 @@ -70,9 +167,6 @@ ul.no-style padding: 0 line-height: $line-height -a, h1, h2, h3 - color: var(--color-highlight) - a text-decoration: underline var(--link-style) &:hover diff --git a/content/_index.md b/content/_index.md index 9313562..5a40b84 100644 --- a/content/_index.md +++ b/content/_index.md @@ -31,7 +31,7 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale - ![É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 } +{ .flex .services .cards } ### Comment bénéficier des services de RésiLien ? {.center .frame} From 12c1d8ffc6a4a798ed59c32da428e7dcefb3d217 Mon Sep 17 00:00:00 2001 From: Simon C Date: Fri, 4 Feb 2022 18:14:17 +0100 Subject: [PATCH 2/3] feat: Adapt layout to the theme --- assets/styles/main.sass | 36 +- content/_index.md | 23 +- layouts/partials/footer.html | 2 +- layouts/partials/header.html | 630 ++++++++++++++++++++++++++++++++++- static/logo.svg | 313 ++++++++++++++++- 5 files changed, 989 insertions(+), 15 deletions(-) diff --git a/assets/styles/main.sass b/assets/styles/main.sass index c76181f..c1e3f2a 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -17,7 +17,7 @@ $color-main: #abd1c6 $color-light: #e8e4e6 $color-lightest: #fffffe $color-secondary: #f9bc60 -$color-tertiary: #e16162 +$color-tertiary: #A91804 @mixin theme // https://www.happyhues.co/palettes/10 @@ -43,10 +43,10 @@ $color-tertiary: #e16162 --color-secondary-background: var(--color-secondary) - --color-secondary-headline: var(--color-darkest) + --color-secondary-headline: var(--color-stroke) --color-secondary-paragraph: #{$color-darken} - --color-secondary-link: var(--color-highlight) + --color-secondary-link: var(--color-tertiary) --color-secondary-button: var(--color-highlight) --color-secondary-button-text: var(--color-stroke) @@ -78,6 +78,15 @@ $color-tertiary: #e16162 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: var(--color-secondary-paragraph) background: var(--color-secondary-background) @@ -88,7 +97,7 @@ $color-tertiary: #e16162 color: var(--color-secondary-button-text) a color: var(--color-secondary-link) - .card + .card, .cards > * color: var(--color-secondary-card-paragraph) background: var(--color-secondary-card-background) h1, h2, h3, h4, h5, h6 @@ -99,6 +108,13 @@ $color-tertiary: #e16162 a color: var(--color-secondary-card-link) +svg + height: 120px + .st0 + fill: var(--color-paragraph) + .st1 + fill: var(--color-link) + body @include theme @include theme-primary @@ -120,9 +136,8 @@ body 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" - margin: 0 auto - padding: 0 var(--tile) - max-width: 800px + margin: 0 + padding: 0 overflow-y: scroll @media screen and (max-width: $size-small) @@ -130,6 +145,11 @@ body --tile: 1rem font-size: .9rem +.content + max-width: 800px + padding: var(--tile) + margin: 0 auto + img max-width: 100% @media screen and (max-width: $size-small) @@ -230,11 +250,9 @@ h3 text-align: center h2 - color: var(--color-paragraph) margin: 0 strong - color: var(--color-highlight) font-size: 130% .blogDate diff --git a/content/_index.md b/content/_index.md index 5a40b84..4ffeee2 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,6 +19,11 @@ 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} @@ -33,6 +41,11 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale 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 .cards } +
+
+
+
+ ### Comment bénéficier des services de RésiLien ? {.center .frame} @@ -48,6 +61,11 @@ Pour tous les services hébergés par RésiLien, ce sera l'entreprise Weko (dép 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} @@ -56,3 +74,6 @@ Voici nos derniers articles de blog : {{< blog-article-last >}} [Voir tous les articles](/blog/) + +
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 80db7c9..3ce865c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,5 @@
-