Clean up CSS, add dark mode, put animations behind media query

Signed-off-by: Shauna Gordon <[email protected]>

index.html

@@ -6,7 +6,8 @@
     <link rel="shortcut icon" href="/img/avatar.png">
     <link href="https://fonts.googleapis.com/css?family=Forum|Source+Sans+Pro" rel="stylesheet">
     <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
-    <link rel="stylesheet" type="text/css" href="/main.css" />
+    <link rel="stylesheet" type="text/css" href="/css/animations.css" media="screen and (prefers-reduced-motion: no-preference)" />
+    <link rel="stylesheet" type="text/css" href="/css/main.css" />
     <script defer src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
     <title>Resume</title>
   </head>

public/css/animations.css

@@ -0,0 +1,26 @@
+:root {
+    interpolate-size: allow-keywords; /* Allow transition to/from "auto" */
+}
+
+:root, .card {
+    transition: color 5s, background-color 5s;
+}
+
+a {
+    transition: all 1s;
+}
+
+details {
+    transition: all 1s;
+
+    &[open] {
+        height: auto;
+        overflow: clip; /* Clip off contents while animating */
+    }
+}
+
+.highlights {
+    li {
+        transition: background 1.5s;
+    }
+}

public/main.css → public/css/main.css

@@ -1,31 +1,32 @@
+@import url('./variables.css');
+
 :root {
-  interpolate-size: allow-keywords; /* Allow transition to/from "auto" */
+  background-color: var(--color-primary);
 }
 
 body {
-  background-color: #f0f0ec;
-  margin-bottom: 1rem;
+  margin-bottom: var(--gutter-normal);
 }
 
 h1 {
   font-size: 6rem;
-  margin-top: 1rem;
-  margin-bottom: .5rem;
+  margin-top: var(--gutter-normal);
+  margin-bottom: var(--gutter-narrow);
 }
 
 h2 {
   font-size: 4rem;
-  margin-top: 2rem;
+  margin-top: var(--gutter-wide);
 }
 
 h3 {
   font-size: 2rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: var(--gutter-normal);
+  margin-bottom: var(--gutter-normal);
 }
 
 nav {
-  padding-bottom: 1.25rem;
+  padding-bottom: var(--gutter-mid-wide);
 
   ul {
     display: grid;
@@ -41,49 +42,37 @@ nav {
 
 header {
   text-align: center;
-  font-family: 'Forum', Helvetica, Arial, sans-serif;
+  font-family: var(--font-header);
 
   p {
     margin: 0 auto;
-    margin-bottom: 3rem;
-    margin-top: -1.5rem;
+    margin-bottom: var(--gutter-ultra-wide);
+    margin-top: calc(var(--gutter-mid-wide) * -1);
     max-width: 45rem;
     text-align: justify;
-    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+    font-family: var(--font-body);
     opacity: .75;
     font-weight: 100;
   }
 }
 
 a {
   text-decoration: none;
-  color: #754668;
+  color: var(--color-accent-primary);
   font-weight: bold;
-  transition: all 1s;
 
   &:hover {
-    color: #617a71;
+    color: var(--color-accent-secondary);
   }
 }
 
 details {
   height: 1.2rem;
-  padding: .5rem auto;
+  padding: var(--gutter-narrow) auto;
 
   summary {
     cursor: pointer;
   }
-
-  /* @media screen and (prefers-reduced-animation: no-preference) { */
-  transition: all 1s;
-
-  &[open] {
-    height: auto;
-    overflow: clip; /* Clip off contents while animating */
-  }
-  /* } */
-
-
 }
 
 .icon {
@@ -94,22 +83,22 @@ details {
 .cardholder {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(30rem, 35rem));
-  grid-gap: 1rem;
+  grid-gap: var(--gutter-normal);
   justify-content: center;
 }
 
 .card {
-  background: #fcfbf8;
-  box-shadow: 3px 3px 5px 0 rgba(0,0,0,.08);
-  padding: 1rem 1.5rem;
+  background: var(--color-primary-light);
+  box-shadow: var(--box-shadow);
+  padding: var(--gutter-normal) var(--gutter-mid-wide);
   border-radius: 3px;
 
   header {
     text-align: left;
   }
 
   h3 {
-    margin-bottom: .5rem;
+    margin-bottom: var(--gutter-narrow);
   }
 
   h4 {
@@ -127,7 +116,7 @@ details {
         position: absolute;
         top: -.75rem;
         left: -.5rem;
-        font-size: 1.25rem;
+        font-size: 1.5rem;
         opacity: .5;
       }
     }
@@ -138,17 +127,17 @@ details {
   li {
     list-style-type: circle;
     padding: 3px 2px;
-    transition: all 1.5s;
 
     &:hover {
-      background: rgba(97,122,113,.06);
+      background: var(--color-primary);
+      background: var(--color-background-highlight);
     }
   }
 }
 
 .tech {
   column-count: 3;
-  color: #7f968f;
+  color: var(--color-accent-light);
   list-style-type: none;
   padding-left: 0;
 
@@ -162,10 +151,10 @@ details {
 }
 
 #app {
-  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #3f4f5f;
+  color: var(--color-secondary);
   margin: 3rem 4rem 5rem 4rem;
   font-size: 18px;
 }

public/css/variables.css

@@ -0,0 +1,32 @@
+:root {
+    --color-primary: #f0f0ec;
+    --color-primary-light: #fcfbf8;
+    --color-secondary: #333f4c;
+    --color-accent-primary: #495c55;
+    --color-accent-light: #4a5a56;
+    --color-accent-secondary: #754668;
+    --color-background-highlight: color-mix(in srgb, var(--color-accent-primary), transparent 94%);
+
+    --font-body: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+    --font-header: 'Forum', Helvetica, Arial, sans-serif;
+
+    --box-shadow: 3px 3px 5px 0 rgba(0,0,0,.08);
+
+    --gutter-normal: 1rem;
+    --gutter-narrow: calc(var(--gutter-normal) / 2);
+    --gutter-mid-wide: calc(var(--gutter-normal) * 1.5);
+    --gutter-wide: calc(var(--gutter-normal) * 2);
+    --gutter-ultra-wide: calc(var(--gutter-normal) * 3);
+
+    @media (prefers-color-scheme: dark) {
+      --color-primary: #111318;
+      --color-primary-light: #080b13;
+      --color-secondary: #c0b0a0;
+      --color-accent-primary: #7ea388;
+      --color-accent-light: #aa939e;
+      --color-accent-secondary: #a5969d;
+      --color-background-highlight: color-mix(in srgb, var(--color-accent-light), transparent 90%);
+
+      --box-shadow: 2px 2px 8px 0 rgba(255,255,255,.05);
+    }
+}