fix contrast issues

brycedorn · Feb 2, 2024 · b27ae21 · b27ae21
1 parent cc5aad2
commit b27ae21
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/src/fonts/roboto.woff2 b/src/fonts/roboto.woff2
diff --git a/src/fonts/space.woff2 b/src/fonts/space.woff2
diff --git a/src/js/side-pane.js b/src/js/side-pane.js
@@ -7,7 +7,7 @@ function SidePane() {
     <div id="side-pane">
       <img id="me" src={me}></img>
       <h1 id="hi" className="box">Hi I&apos;m Bryce 👋</h1>
-      <h2>I&apos;m a frontend engineer with a passion for building things, improving user experiences and shipping high-impact features.</h2>
+      <h2>I&apos;m a software engineer with a passion for building things, improving user experiences and shipping high-impact features.</h2>
       <h2>Currently living in Amsterdam & working at Uber.</h2>
       <h3>Previously: Glassdoor, The Onion, Avant.</h3>
       <div className="links">

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -14,6 +14,7 @@
   --text-color: #222;
   --font-size: 1em;
   --icon-size: calc(var(--gutter-width) * 2);
+  --text-decoration-thickness: 2px;
 
   @media (max-width: 1140px) {
     --gutter-width: 12px;
@@ -24,6 +25,7 @@
   @media (max-width: 800px) {
     --left-offset: calc(50% + var(--gutter-width) * 2);
     --pane-width: 100%;
+    --text-decoration-thickness: 1px;
   }
 }
 
@@ -36,12 +38,10 @@
 }
 
 @font-face {
-  font-family: 'Space Mono';
+  font-family: 'Roboto Slab';
   font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(../fonts/space.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  font-weight: 400 500;
+  src: url(../fonts/roboto.woff2) format('woff2');
 }
 
 body {
@@ -56,10 +56,14 @@ body {
   height: 100vh;
   width: calc(var(--pane-width));
   padding: var(--gutter-width);
-  font-family: 'Space Mono', monospace;
+  font-family: 'Roboto Slab', monospace;
   overflow: scroll;
 }
 
+h2, h3 {
+  font-weight: 400;
+}
+
 #hi {
   background-color: var(--color-1);
 }
@@ -71,8 +75,9 @@ body {
 .box {
   width: fit-content;
   padding: 0 calc(var(--shadow-width) * 2);
-  box-shadow: var(--shadow-width) var(--shadow-width) 0 #000;
-  color: #fff;
+  color: var(--text-color);
+  font-weight: 500;
+  box-shadow: var(--shadow-width) var(--shadow-width) 0 var(--text-color);
 }
 
 #me {
@@ -89,8 +94,8 @@ body {
 a {
   color: var(--text-color);
   text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+  text-decoration-thickness: var(--text-decoration-thickness);
 }
 
 #collection {
@@ -241,6 +246,11 @@ a {
 }
 
 @media (prefers-color-scheme: dark) {
+  * {
+    --background-color: #222;
+    --text-color: #eee;
+  }
+
   .side--1 {
     filter: brightness(0.6) saturate(0.9);
   }
@@ -261,23 +271,16 @@ a {
     }
   }
 
-  #hi {
-    filter: brightness(0.9) saturate(0.9);
-  }
-
-  #contact {
+  .box {
     filter: brightness(0.9) saturate(0.9);
+    color: var(--background-color);
+    box-shadow: var(--shadow-width) var(--shadow-width) 0 #000;
   }
 
   #me {
     filter: brightness(0.9) saturate(0.9);
   }
 
-  * {
-    --background-color: rgb(42, 42, 42);
-    --text-color: #eee;
-  }
-
   #side-pane .links img {
     filter: invert(90%);
   }