From 74812cae942bc7f3b9ecced54bd6a2a81c880b00 Mon Sep 17 00:00:00 2001
From: Adam Laki <info@adamlaki.com>
Date: Tue, 23 Jul 2024 17:57:47 +0200
Subject: [PATCH] Small style update

---
 src/_includes/partial/footer.html |  2 +-
 src/css/main.css                  | 17 ++++++++++++++---
 src/scss/config/_config.scss      |  2 ++
 src/scss/config/_dark-colors.scss |  3 +++
 src/scss/config/_dark-mode.scss   |  4 ++++
 src/scss/section/_cta.scss        |  6 +++++-
 src/scss/section/_footer.scss     |  4 ++--
 7 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/_includes/partial/footer.html b/src/_includes/partial/footer.html
index 7de5fa7..8208a47 100644
--- a/src/_includes/partial/footer.html
+++ b/src/_includes/partial/footer.html
@@ -2,7 +2,7 @@
     <div class="container">
         <div class="site-footer__top">
             <div class="site-footer__col">
-                <p class="site-footer__slogen">Another <br/>CSS framework.</p>
+                <p class="site-footer__slogan">Another <br/>CSS framework.</p>
                 <a class="site-footer__logo" href="/" aria-label="Spruce CSS">
                     {% svgIcon "./src/img/spruce-logo-without-text.svg" %}
                 </a>
diff --git a/src/css/main.css b/src/css/main.css
index 53da172..1a7e779 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -376,6 +376,7 @@ template {
   --spruce-base-color-primary-dark: hsl(261, 52%, 35%);
   --spruce-base-color-primary-darkest: hsl(272, 100%, 9%);
   --spruce-base-color-primary-lightest: hsl(259, 53%, 94%);
+  --spruce-base-color-tertiary: hsl(323, 90%, 92%);
 }
 
 :root {
@@ -1667,6 +1668,10 @@ legend {
   --spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25);
 }
 
+:root[data-theme-mode=dark] {
+  --spruce-footer-color-background: hsl(206, 100%, 6%);
+}
+
 :root[data-theme-mode=dark] {
   --spruce-hero-color-note-color: hsl(0, 0%, 100%);
   --spruce-hero-color-note-background: hsl(207, 64%, 16%);
@@ -1730,6 +1735,9 @@ legend {
 [data-theme-mode=dark] select.form-control:not([multiple]):not([size]) {
   background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');
 }
+[data-theme-mode=dark] .cta {
+  border-block-start: 1px solid var(--spruce-base-color-border);
+}
 
 .skip-link {
   inset: -50vh auto auto 1.5rem;
@@ -3645,7 +3653,10 @@ pre[class*=language-] {
 .cta .heading {
   margin-block-end: 0;
 }
-.cta * {
+.cta__title {
+  color: var(--spruce-base-color-tertiary);
+}
+.cta p {
   color: hsl(0, 0%, 100%);
 }
 .cta p {
@@ -3664,8 +3675,8 @@ pre[class*=language-] {
 .site-footer a:hover, .site-footer a:focus {
   color: #b8a1e3;
 }
-.site-footer__slogen {
-  color: hsl(0, 0%, 100%);
+.site-footer__slogan {
+  color: var(--spruce-base-color-tertiary);
   font-family: var(--doc-heading-font-family);
   font-size: clamp(2.1rem, 4vw + 1rem, 3rem);
   font-weight: 700;
diff --git a/src/scss/config/_config.scss b/src/scss/config/_config.scss
index 992318b..430abdd 100644
--- a/src/scss/config/_config.scss
+++ b/src/scss/config/_config.scss
@@ -1,6 +1,7 @@
 @use 'dark-colors' as dark;
 
 $color-dark: hsl(260deg 70% 6%);
+$color-tertiary: hsl(323deg 90% 92%);
 
 @use 'sprucecss/scss/spruce' with (
   $color-black: $color-dark,
@@ -10,6 +11,7 @@ $color-dark: hsl(260deg 70% 6%);
       'primary-dark': hsl(261deg 52% 35%),
       'primary-darkest': hsl(272deg 100% 9%),
       'primary-lightest': hsl(259deg 53% 94%),
+      'tertiary': $color-tertiary,
     ),
     'breadcrumb': (
       'separator': hsl(0deg 0% 0% / 10%),
diff --git a/src/scss/config/_dark-colors.scss b/src/scss/config/_dark-colors.scss
index bf05548..9f0f4c0 100644
--- a/src/scss/config/_dark-colors.scss
+++ b/src/scss/config/_dark-colors.scss
@@ -71,6 +71,9 @@ $colors: (
     'valid': $dark-color-success,
     'valid-focus-ring': color.adjust($dark-color-success, $alpha: -0.75),
   ),
+  'footer': (
+    'background': hsl(206deg 100% 6%),
+  ),
   'hero': (
     'note-color': hsl(0deg 0% 100%),
     'note-background': hsl(207deg 64% 16%),
diff --git a/src/scss/config/_dark-mode.scss b/src/scss/config/_dark-mode.scss
index 0899df7..203ce22 100644
--- a/src/scss/config/_dark-mode.scss
+++ b/src/scss/config/_dark-mode.scss
@@ -15,4 +15,8 @@
       color('select-foreground', 'form', true, $dark-colors),
     );
   }
+
+  .cta {
+    border-block-start: 1px solid color('border');
+  }
 }
diff --git a/src/scss/section/_cta.scss b/src/scss/section/_cta.scss
index 108c784..b34ecd7 100644
--- a/src/scss/section/_cta.scss
+++ b/src/scss/section/_cta.scss
@@ -22,7 +22,11 @@
     margin-block-end: 0;
   }
 
-  * {
+  &__title {
+    color: color('tertiary');
+  }
+
+  p {
     color: hsl(0deg 0% 100%);
   }
 
diff --git a/src/scss/section/_footer.scss b/src/scss/section/_footer.scss
index 8bfa0f4..cbcd516 100644
--- a/src/scss/section/_footer.scss
+++ b/src/scss/section/_footer.scss
@@ -15,8 +15,8 @@
     }
   }
 
-  &__slogen {
-    color: hsl(0deg 0% 100%);
+  &__slogan {
+    color: color('tertiary');
     font-family: var(--doc-heading-font-family);
     font-size: responsive-font-size(3rem, 30, '4vw + 1rem');
     font-weight: 700;