Small style update

conedevelopment · Jul 23, 2024 · 74812ca · 74812ca
1 parent 07b8057
commit 74812ca
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,8 @@ @@
           color('select-foreground', 'form', true, $dark-colors),
         );
       }
+      .cta {
+        border-block-start: 1px solid color('border');
+      }
     }