From a2ce87050ef1c80f1ca7ceb8796790646e29eef5 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Fri, 4 Feb 2022 15:59:24 +0100
Subject: [PATCH] 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}