From d31702265cec7f3c2cdee49cbe1257fa80b2c0c4 Mon Sep 17 00:00:00 2001
From: Michael Boelen <michael.boelen@cisofy.com>
Date: Mon, 15 May 2023 21:58:14 +0200
Subject: [PATCH] Styling voor footer

---
 themes/nluug/assets/scss/styles.scss | 32 ++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss
index 92a933b..1c04b91 100644
--- a/themes/nluug/assets/scss/styles.scss
+++ b/themes/nluug/assets/scss/styles.scss
@@ -1,25 +1,29 @@
 
 $color-button: #1D3160;
 $color-button-hover: #17274d;
+$color-button-call-to-action: #138808;
+$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
 $color-header: #6A2060;
 $color-highlight-box-border: #6A2060;
 $color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
 $color-border: #6A2060;
 $color-text-inverse: white;
 
+
 *, :after, :before {
     box-sizing: border-box;
     padding: 0;
 }
 
 body {
-    font: 1rem/1.5 -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    //font: 1rem/1.5 -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    font: 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     padding: 1.2rem;
     // background: hsla(93, 0%, 96%, 1.00);
-    color: #000;
+    color: #2E2E2E;
 }
 
 .skip-link {
@@ -42,6 +46,13 @@ figure {
   margin-inline-end: 10px;
 }
 
+footer {
+  background-color: #E3E9F7;
+  border-top: 1px solid #99AFE2;
+  margin-top: 40px;
+  padding: 20px;
+}
+
 .grid-team-members {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -237,6 +248,23 @@ a.button:hover, a.button:active {
   background-color: $color-button-hover;
 }
 
+// Button 
+.btn:link, .btn:visited {
+  border-radius: 4px;
+  color: white;
+  padding: 14px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
+
+// Button voor call-to-action, <a href="#" class="btn btn-cta">#</a>
+.btn-cta:link, .btn-cta:visited {
+  background-color: $color-button-call-to-action;
+}
+.btn-cta:hover, .btn-cta:active {
+  background-color: $color-button-call-to-action-hover;
+}
 
 .time {
     font-variant-numeric: tabular-nums;