From 569332ce6e8e98f3ec0bd4362acf20c330c0aed7 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Thu, 29 Jul 2021 11:07:59 +0200
Subject: [PATCH] feat: make more customizable the header and footer color

---
 src/scss/_global.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index 7cceea9..66c6a53 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -1,5 +1,8 @@
 /* --- 03. GLOBAL STYLING --- */
 
+$color-footer-back: get-color("dark2");
+$color-header-back: get-color("skyblue");
+
 /*
  * Les styles "globaux" touchant toute la page.
  *
@@ -31,8 +34,8 @@
   /* ------------------ HEADERS ------------------- */
 
 #page-header {
-    background: get-color("skyblue") url('img/background.png') center bottom repeat-x;
-    border-top: 6px solid get-color("dark2");
+    background: $color-header-back url('img/background.png') center bottom repeat-x;
+    border-top: 6px solid $color-footer-back;
     padding-bottom:3rem;
 
     .header-collumns {
@@ -202,9 +205,6 @@ header h1 {
 
   /* ------------------ FOOTER ------------------- */
 
-$color-footer-back: get-color("dark2");
-$color-footer-text: $color-font-light;
-
 body {
     // On colorise le background de la page complete de la même
     // couleur que le fond du footer.
@@ -213,7 +213,7 @@ body {
 
 footer {
     @include angled-edge('outside top', 'upper left', $color-footer-back, 32);
-    color: $color-footer-text;
+    color: getTextColorFromBackground($color-footer-back);
     padding-top:1.5rem;
     font-size: 0.8rem!important;
     padding-bottom:1.5rem;
@@ -232,7 +232,7 @@ footer {
 
       a, a:visited {
         &:hover, &:active, &:visited {
-          color: $color-font-light;
+          color: getTextColorFromBackground($color-footer-back);
         }
       }
 
@@ -252,14 +252,14 @@ ul.social {
         display: inline;
         a, a:visited {
             color: $color-footer-back;
-            background-color: $color-footer-text;
+            background-color: getTextColorFromBackground($color-footer-back);
             padding:0.3em;
             padding-left:0.36em;
             padding-right:0.36em;
             vertical-align:middle;
             border-radius:100%;
             &:hover {
-                color:$color-footer-text;
+                color:getTextColorFromBackground($color-footer-back);
                 background-color: $color-footer-back;
             }
         }