Completed lightmode/darkmode for header and footer

chrisnajman · Jan 1, 2024 · 0b636ea · 0b636ea
1 parent 850c258
commit 0b636ea
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/css/base.css b/css/base.css
@@ -108,8 +108,21 @@ button {
     grid-template-rows: auto 1fr auto;
 }
 
+.page-header,
+.page-footer {
+    background-color: var(--header-footer-bg);
+    color: var(--header-footer-txt);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    border-style: solid;
+}
+
 .page-header {
     padding: 3.2rem 0;
+    border-bottom-color: var(--header-footer-border);
+    border-width: 0 0 0.5rem 0;
     @media screen and (width < 360px) {
         padding-inline: 1rem;
         padding-top: 5rem;
@@ -135,23 +148,9 @@ button {
     }
 }
 
-.page-footer {
-    padding: 3.2rem 0;
-}
-
-.page-header,
-.page-footer {
-    background-color: var(--clr-darkest);
-    color: var(--clr-lightest);
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
 .page-header a,
 .page-footer a {
-    color: var(--clr-lightest);
+    color: var(--header-footer-txt);
     text-decoration: none;
 }
 
@@ -162,6 +161,10 @@ button {
 }
 
 .page-footer {
+    padding: 3.2rem 0;
+    border-top-color: var(--header-footer-border);
+    border-width: 0.5rem 0 0 0;
+
     & a:hover {
         text-decoration: underline;
     }
@@ -176,7 +179,7 @@ button {
 }
 
 .icon-logo {
-    fill: var(--clr-lightest);
+    fill: var(--header-footer-txt);
     width: 3.6rem;
     height: 3.6rem;
     margin: var(--horz-center);

diff --git a/css/primary-navigation.css b/css/primary-navigation.css
@@ -32,20 +32,20 @@
     }
     & a {
         text-decoration: none;
-        color: var(--clr-lightest);
+        color: var(--nav-link);
         border-bottom: 5px solid transparent;
         padding-block-end: 0.5rem;
         margin-bottom: 1rem;
 
         &:hover {
-            border-bottom-color: var(--clr-lightest);
+            border-bottom-color: var(--nav-link);
         }
 
         &.current-page,
         &.current-page:hover {
             text-decoration: none;
             cursor: default;
-            border-bottom-color: var(--clr-lightest);
+            border-bottom-color: var(--nav-link);
             font-weight: 600;
         }
     }

diff --git a/css/theme-switcher.css b/css/theme-switcher.css
@@ -9,20 +9,20 @@
 .theme-icon {
     width: 2.4rem;
     height: 2.4rem;
-    fill: var(--clr-lightest);
+    fill: var(--theme-icon);
     margin-right: 0.5rem;
 }
 
 .btn-theme-toggle {
     display: var(--flex);
     align-items: center;
     padding: 0.5rem 0.5rem 0.75rem 0;
-    border-bottom: 5px solid var(--clr-mid);
-    color: var(--clr-lightest);
+    border-bottom: 5px solid var(--clr-green);
+    color: var(--theme-txt);
     font-size: clamp(1.2rem, 1.1rem + 0.4444vw, 1.6rem);
 
     &:hover {
-        border-bottom-color: var(--clr-lightest);
+        opacity: 0.8;
     }
 
     & .mode {

diff --git a/css/theme.css b/css/theme.css
@@ -10,17 +10,25 @@
     --clr-darker: #222;
     --clr-darkest: black;
     --clr-code-bg: beige;
+    --clr-orange: orange;
     --clr-red-tile: rgb(205, 74, 10);
     --clr-warning: red;
+    --clr-transparent: transparent;
 
     --highlight: var(--clr-light-blue);
     --timeline: var(--clr-red-tile);
-    --hamburger-line-colour: var(--clr-light-green);
 
     /* Dark theme (default) */
 
     --body-bg: var(--clr-dark);
     --body-txt: var(--clr-light-green);
+    --header-footer-bg: var(--clr-darkest);
+    --header-footer-txt: var(--clr-light-green);
+    --header-footer-border: var(--clr-transparent);
+    --hamburger-line-colour: var(--clr-light-green);
+    --nav-link: var(--clr-light-green);
+    --theme-icon: var(--clr-lightest);
+    --theme-txt: var(--clr-lightest);
     --item-shadow: rgba(0, 0, 0, 0.5);
     --item-bg: var(--clr-grey-green);
     --item-repo-link: var(--clr-light-green);
@@ -29,6 +37,13 @@
 .light-theme {
     --body-bg: var(--clr-light-green);
     --body-txt: var(--clr-darkest);
+    --header-footer-bg: var(--clr-lightest);
+    --header-footer-txt: var(--clr-darkest);
+    --header-footer-border: var(--clr-green);
+    --hamburger-line-colour: var(--clr-darkest);
+    --nav-link: var(--clr-darkest);
+    --theme-icon: var(--clr-orange);
+    --theme-txt: var(--clr-darkest);
     --item-shadow: rgba(0, 0, 0, 0.3);
     --item-bg: var(--clr-lightest);
     --item-repo-link: var(--clr-green);