Refactor CSS

src/styles/_base.css

@@ -10,7 +10,7 @@
 
 td,
 th {
-  border-bottom: 1px solid var(--color-grey-lighter);
+  border-bottom: 1px solid var(--color-border);
   padding: var(--space-l-xl) var(--space-s-m);
 }
 
@@ -24,6 +24,13 @@ table {
 }
 
 body {
-  background-color: var(--color-white);
+  background-color: var(--body-color-bg);
   margin: 0;
 }
+
+/* main {
+  position: relative;
+  background: url('../images/pattern6.svg') repeat-x bottom;
+  background-size: auto;
+  padding-bottom: 185px;
+} */

src/styles/_footer.css

@@ -1,7 +1,11 @@
 footer {
-  background-color: var(--color-grey-dark);
+  background-color: var(--footer-color-bg);
+  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
+  /* box-shadow: 0 -.5rem 1rem 0 rgba(0,0,0,0.3), 0 -.2rem .3rem 0 rgba(0,0,0,0.3); */
   color: #fff;
   line-height: 1.2;
+  position: relative;
+  z-index: 1;
   a {
     &:hover,
     &:active,
@@ -10,4 +14,7 @@ footer {
       color: #2a2a2a;
     }
   }
+  .muted {
+    color: var(--footer-color-muted-fg);
+  }
 }

src/styles/_header.css

@@ -3,8 +3,13 @@
   width: 6rem;
 }
 
+.logo path {
+  fill: var(--masthead-color-fg);
+}
+
 #masthead {
-  background-color: #fff;
+  background-color: var(--masthead-color-bg);
+  color: var(--masthead-color-fg);
   container-type: inline-size;
   container-name: headerContainer;
   padding: var(--space-l) 0;

src/styles/_nav.css

@@ -11,6 +11,7 @@
   a {
     border: none;
     box-shadow: none;
+    color: var(--color-fg)
     padding: 0;
     &::after {
       border-radius: 1000px;
@@ -22,7 +23,7 @@
     }
     &.active {
       &::after {
-        background-color: #2a2a2a;
+        background-color: var(--nav-active-accent);
         border-radius: 1000px;
         content: '';
         display: block;
@@ -37,7 +38,7 @@
     &:focus {
       color: inherit;
       &::after {
-        background-color: #2a2a2a;
+        background-color: var(--masthead-color-fg);
         border-radius: 1000px;
         content: '';
         display: block;

src/styles/_patterns.css

@@ -26,8 +26,10 @@
 }
 
 .hero {
+  color: var(--color-grey-700);
   padding: var(--space-m);
-  background-color: var(--color-green-highlight);
+  background: rgb(116, 253, 109);
+  background: var(--color-gradient-brand);
   border-radius: var(--border-radius);
   position: relative;
   p {
@@ -76,7 +78,7 @@
 }
 
 .callout {
-  background-color: var(--color-bg-muted);
+  background-color: var(--color-muted-bg);
   border-radius: var(--border-radius);
   margin-left: -2rem;
   margin-right: -2rem;
@@ -93,25 +95,24 @@
   margin: 1rem 0;
   padding: 0;
   width: 100%;
-  __link {
-    border: none;
-    box-shadow: none;
-    opacity: 0.8;
-    margin-right: var(--space-2xs);
-    &:hover {
-      opacity: 1;
-    }
-    &:hover,
-    &:active,
-    &:focus {
-      box-shadow: none;
-      color: inherit;
-    }
-  }
+}
+
+.social__link {
+  border: none;
+  box-shadow: none;
+  color: var(--footer-color-link);
+  margin-right: var(--space-2xs);
+}
+
+.social__link:hover,
+.social__link:active,
+.social__link:focus {
+  box-shadow: none;
+  color: var(--color-primary-dark);
 }
 
 .a11y-webring-club {
-  background: var(--color-grey-darker);
+  background: var(--color-grey-800);
   border-radius: var(--border-radius);
   margin-bottom: 1rem;
   padding: var(--space-m);
@@ -162,3 +163,12 @@ h2#a11y-webring-club {
 .status {
   max-width: 40rem;
 }
+
+.panel {
+  border-radius: var(--border-radius);
+  padding: var(--padding-m);
+  @media (min-width: 768px) {
+    margin: var(--space-l) 0;
+    padding: var(--space-xl);
+  }
+}

src/styles/_projects.css

@@ -3,7 +3,6 @@
 }
 
 .project__type {
-  color: (var(--color-grey));
   display: inline-block;
   font-size: 1.2rem;
 }

src/styles/_reset.css

@@ -60,10 +60,10 @@ h4 {
 }
 
 /* A elements that don't have a class get default styles */
-a:not([class]) {
+/* a:not([class]) {
   text-decoration-skip-ink: auto;
   color: currentColor;
-}
+} */
 
 /* Make images easier to work with */
 img,

src/styles/_resume.css

@@ -2,20 +2,9 @@
   display: block;
 }
 
-.role__title {
-  position: relative;
-  &::before {
-    content: '';
-    display: inline-block;
-    background-color: #2a2a2a;
-    height: 0.4em;
-    margin-right: 0.5em;
-    width: 0.4em;
-  }
-}
-
 .role--now {
-  background-color: var(--color-green-highlight);
+  background-color: var(--color-primary);
+  color: var(--color-primary-fg);
   border-radius: var(--border-radius);
   margin-left: -2rem;
   margin-right: -2rem;
@@ -27,13 +16,4 @@
 
 .qual__title {
   font-size: var(--step-1);
-  position: relative;
-  &::before {
-    content: '';
-    display: inline-block;
-    background-color: var(--color-grey);
-    height: 0.4em;
-    margin-right: 0.5em;
-    width: 0.4em;
-  }
 }

src/styles/_typo.css

@@ -12,7 +12,7 @@
 }
 
 body {
-  color: var(--color-grey);
+  color: var(--body-color-fg);
   font-family: 'Atkinson Hyperlegible', sans-serif;
   font-size: var(--step-0);
   font-weight: 400;
@@ -22,20 +22,20 @@ body {
 a {
   text-decoration: none;
   box-shadow: inset 0 -0.1em 0 0;
-  color: inherit;
+  color: var(--color-link);
   padding: 0 0.1em;
   transition: all 0.2s;
   &:hover,
   &:active,
   &:focus {
-    box-shadow: inset 0 -2em 0 0 #2a2a2a;
-    color: #fff;
+    box-shadow: inset 0 -2em 0 0 var(--body-color-fg);
+    color: var(--body-color-bg);
   }
 }
 
 h1 {
   font-family: 'Overpass';
-  font-size: var(--step-6);
+  font-size: var(--step-7);
   letter-spacing: -0.03em;
   text-transform: lowercase;
   &.note {
@@ -67,12 +67,15 @@ p {
 }
 
 .muted {
-  color: #6b7280;
+  color: var(--color-muted-fg);
 }
 
 small {
   font-size: var(--step--1);
   line-height: 1.2;
+  a {
+    color: currentColor;
+  }
 }
 
 abbr {
@@ -100,7 +103,7 @@ article {
 }
 
 .list-heading {
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--color-border);
   font-size: var(--step-0);
   padding-bottom: var(--step--2);
 }

src/styles/_utilities.css

@@ -5,6 +5,7 @@
 @import url('utils/_margin.css');
 @import url('utils/_padding.css');
 @import url('utils/_text.css');
+@import url('utils/_order.css');
 
 .justify-between {
   justify-content: space-between;

src/styles/_variables.css

@@ -1,23 +1,57 @@
 :root {
   --color-white: #fff;
-  --color-grey-lightest: #f5f7f9;
-  --color-grey-lighter: #eef2f5;
-  --color-grey-light: #5d6b78;
-  --color-grey: #292f35;
-  --color-grey-dark: #20252a;
-  --color-grey-darker: #1a1f23;
+  --color-grey-50: #f8fafc;
+  --color-grey-100: #f1f5f9;
+  --color-grey-200: #e2e8f0;
+  --color-grey-300: #cbd5e1;
+  --color-grey-400: #94a3b8;
+  --color-grey-500: #64748b;
+  --color-grey-600: #23292e;
+  --color-grey-700: #1d2226;
+  --color-grey-800: #171b1e;
+  --color-grey-900: #111416;
+  --color-grey-950: #0b0d0e;
   --color-yellow-highlight: rgba(251, 247, 25, 0.5);
-  --color-green-highlight: #d3f689;
+  /* --color-green-highlight: #d3f689; */
+  --color-green-highlight: #bcfd6d;
+  --color-purple-highlight: #bb6dfd;
   --color-blue: #66bbff;
   --color-red: #be4242;
   --color-pink: #db2a62;
-  --color-bg-muted: var(--color-grey-lighter);
-  --color-bg-highlight: var(--color-green-highlight);
+
+  --color-green-light: #d4fda1;
+  --color-green: #bcfd6d;
+  --color-green-dark: #96ca57;
+  --color-green-darker: #77a145;
+
+  --color-greener-100: #d0fdcd;
+  --color-greener-200: #b9fdb5;
+  --color-greener-300: #a2fd9d;
+  --color-greener-400: #8bfd85;
+  --color-greener-500: #74fd6d;
+  --color-greener-600: #5ed158;
+  --color-greener-700: #47a342;
+  --color-greener-800: #30752c;
+  --color-greener-900: #194716;
+
+  --color-gradient-brand: linear-gradient(
+    90deg,
+    rgba(188, 253, 109, 1) 0%,
+    rgb(116, 253, 109) 100%
+  );
 
   --leading-base: 1.4;
   --leading-tight: 1.2;
   --leading-loose: 1.6;
   --leading-looser: 1.8;
 
-  --border-radius: var(--space-3xs);
+  --border-radius-s: var(--space-3xs);
+  --border-radius: var(--space-2xs);
+  --border-radius-l: var(--space-xs);
+
+  --padding-xs: var(--space-xs);
+  --padding-s: var(--space-s);
+  --padding-m: var(--space-m);
+  --padding-l: var(--space-l);
+  --padding-xl: var(--space-xl);
 }

src/styles/style.css

@@ -1,3 +1,5 @@
+@import url('themes/_light.css');
+@import url('themes/_dark.css');
 @import url('_reset.css');
 @import url('_base.css');
 @import url('_variables.css');
@@ -27,7 +29,7 @@ dl > div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-bottom: 1px solid var(--color-grey-lighter);
+  border-bottom: 1px solid var(--color-border);
   padding: var(--space-2xs) 0;
   @media (min-width: 700px) {
     flex-direction: row;
@@ -44,8 +46,8 @@ dt {
 }
 
 .section:not([class*='bg-']) {
-  border-top: 1px solid var(--color-grey-lighter);
-  border-bottom: 1px solid var(--color-grey-lighter);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .flow {