WIP: Start using dark mode

components/Footer/Footer.module.scss

@@ -1,10 +1,9 @@
 .root {
   color: hsl(var(--dark-grey));
   font-size: .9rem;
-  margin: 1rem auto 0;
-  max-width: $width-max;
-  padding: 2rem 2.5rem;
+  padding-block-start: 5rem;
   position: relative;
+  overflow: hidden;
 
   a {
     color: hsl(var(--dark-grey));
@@ -16,6 +15,41 @@
   }
 }
 
+.wave {
+  background-color: var(--secondary-color);
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: -2px;
+  transform: scaleY(-1);
+  z-index: -1;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    height: 100px;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: -100px;
+    touch-action: none;
+    width: 100%;
+  }
+
+  &::before {
+    background-color: hsl(var(--bg-color) / 25%);
+    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
+    transform: scaleY(-1);
+  }
+
+  &::after {
+    background-color: hsl(var(--bg-card-color));
+    clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
+    transform: scale(-1, -1);
+  }
+}
+
 .logo {
   display: inline;
   margin-left: -10px;
@@ -42,6 +76,11 @@
 .main {
   column-gap: 5rem;
   display: flex;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: $width-max;
+  padding-inline-end: 1.5rem;
+  padding-inline-start: 1.5rem;
 }
 
 .summary {
@@ -62,7 +101,7 @@
   flex: 1;
   margin-top: 4rem;
 
-  & > div {
+  &>div {
     flex: 1;
   }
 
@@ -83,9 +122,12 @@
   display: flex;
   gap: 2rem;
   justify-content: flex-end;
-  margin-top: 1rem;
+  margin: 1rem auto;
+  max-width: $width-max;
+  padding-inline-end: 1.5rem;
+  padding-inline-start: 1.5rem;
 
-  & > div {
+  &>div {
     display: flex;
     gap: 2rem;
   }
@@ -117,12 +159,12 @@
     gap: 0;
     text-align: center;
 
-    & > div {
+    &>div {
       justify-content: center;
     }
 
     p {
       margin: .25rem;
     }
   }
-}
+}

components/Footer/Footer.tsx

@@ -14,6 +14,8 @@ const Footer: FunctionComponent = () => {
 
   return (
     <footer className={classes.root}>
+      <div className={classes.wave}>
+      </div>
       <div className={classes.main}>
         <div className={classes.summary}>
           <Link aria-label='Return to the Pictogrammers Home' className={classes.logo} href='/'>

components/Header/Header.module.scss

@@ -140,7 +140,7 @@
     min-width: 2.75rem;
 
     &.open {
-      background-color: hsl(var(--white));
+      background-color: hsl(var(--bg-color));
       border-radius: 5px 5px 0 0;
       box-shadow: var(--box-shadow);
     }

components/HomeSection/HomeSection.module.scss

@@ -1,5 +1,5 @@
 .root {
-  background-color: hsl(var(--white));
+  background-color: hsl(var(--bg-color));
   padding: 5rem 0;
   position: relative;
 
@@ -37,26 +37,26 @@
   }
 
   &::before {
-    background-color: hsl(var(--white) / 50%);
+    background-color: hsl(var(--bg-color) / 50%);
     clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
     transform: scale(-1, -1);
   }
 
   &::after {
-    background-color: hsl(var(--white));
+    background-color: hsl(var(--bg-color));
     clip-path: polygon(100% 0%, 0% 0%, 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
     transform: scaleY(-1);
   }
 }
 
 .highlight {
-  background-color: hsl(var(--primary-color));
+  background-color: hsl(var(--bg-highlight-color));
   color: hsl(var(--white));
   padding: 3rem 0;
 
   &::before,
   &::after {
-    background-color: hsl(var(--primary-color));
+    background-color: inherit;
     content: '';
     height: 100px;
     position: absolute;

pages/index.tsx

@@ -108,7 +108,7 @@ const Home: NextPage = () => {
             </p>
             <Icon
               className={classes.crowd}
-              color='#696969'
+              color='currentColor'
               path={mdiCrowd}
               size={48}
             />