src/components/layout/Footer.tsx

@@ -22,6 +22,9 @@ const Footer = () => {
                 </a>
               </Link>
             </li>
+            <li>
+              <span> | </span>
+            </li>
           ))}
           <li className={styles.nav__item}>
             <a href='#' className={styles.nav__link}>

src/styles/abstracts/variables/_themes.scss

@@ -2,9 +2,9 @@ $_dark: (
   text-accent: hsl(0, 0%, 100%),
   text: hsl(0, 0%, 96%),
   text-muted: hsl(0, 0%, 80%),
-  bg-accent: #232323,
+  bg-accent: hsl(221, 39%, 15%),
   bg: #000,
-  bg-muted: #141414,
+  bg-muted: rgb(20, 28, 46),
   link: hsl(339, 95%, 80%),
   link-muted: hsl(344, 79%, 80%),
   fill: hsl(339, 75%, 64%),
@@ -20,5 +20,4 @@ $_dark: (
 
 $themes: (
   light: $_dark, // yes
-  dark: $_dark,
 );

src/styles/modules/layout/header.module.scss

@@ -6,8 +6,7 @@
   font-size: 1.1em;
 
   display: grid;
-  background: none;
-  border-bottom: solid 1px (var(--clr-text-accent))
+  background: (var(--clr-bg-muted));
 
   &__about {
     min-height: 100vh;