refactor: wrap some of CSS in layers

remove unused CSS custom properties fix: use --base-color correctly
ericmasiello · Nov 27, 2023 · 8a6d07e · 8a6d07e
1 parent 6988cf6
commit 8a6d07e
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 130 deletions.
diff --git a/src/components/homepage/Resume/Resume.astro b/src/components/homepage/Resume/Resume.astro
@@ -149,7 +149,6 @@ const GridColumnWrapper = format === 'web' ? 'div' : Fragment;
 </Element>
 <style>
   .resume {
-    --resume-border: rgba(212, 207, 209, 0.5);
     --resume-v-gap: 1.25rem;
     --resume-h-gap: 2rem;
 

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -15,20 +15,22 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
-			ul {
-				list-style-type: none;
-				padding: unset;
-			}
-			ul li {
-				display: flex;
-			}
-			ul li time {
-				flex: 0 0 130px;
-				font-style: italic;
-				color: #888;
-			}
-			ul li a:visited {
-				color: #8e32dc;
+			@layer base {
+				ul {
+					list-style-type: none;
+					padding: unset;
+				}
+				ul li {
+					display: flex;
+				}
+				ul li time {
+					flex: 0 0 130px;
+					font-style: italic;
+					color: #888;
+				}
+				ul li a:visited {
+					color: #8e32dc;
+				}
 			}
 		</style>
 	</head>

diff --git a/src/pages/resume.astro b/src/pages/resume.astro
@@ -1,7 +1,7 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
 import Resume from '../components/homepage/Resume/Resume.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
+import { SITE_TITLE } from '../config';
 import VisuallyHidden from '../components/VisuallyHidden.astro';
 ---
 

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,135 +1,138 @@
-:root {
-  --font-base: 'Source Sans Pro', sans-serif;
-  --font-header: 'Lato', sans-serif;
-  --font-body-weight-light: 300;
-  --font-body-weight-medium: 400;
-  --font-body-weight-bold: 600;
-  --font-header-weight-medium: 400;
-  --font-header-weight-bold: 700;
-  --font-size-body: 0.875rem;
-  --color-bg: #fff;
-  --color-base: #424141;
-  --color-muted: #787575;
-  --color-brand: #c90044;
-  --color-brand-invert: #36ffbb;
-  --color-highlight: #5f2058;
-  --color-link: rgba(201, 0, 68, 0.8);
-  --color-logo: #3b3b3b;
-  --color-gallery-border: rgba(212, 207, 209, 0.5);
-  --color-gallery-border-highlight: #d4cfd1;
-  --color-gallery-bg: #e0dcde;
-  --content-max-width: 100rem; /* 1600px */
-  --h-space: 2.5rem;
-}
-
-html {
-  box-sizing: border-box;
-  background-color: var(--color-bg);
-  font-family: var(--font-base);
-  color: var(--color--base);
-  font-size: 100%;
+@layer variables, base;
+
+@layer variables {
+  :root {
+    --font-base: 'Source Sans Pro', sans-serif;
+    --font-header: 'Lato', sans-serif;
+    --font-body-weight-light: 300;
+    --font-body-weight-medium: 400;
+    --font-body-weight-bold: 600;
+    --font-header-weight-medium: 400;
+    --font-header-weight-bold: 700;
+    --font-size-body: 0.875rem;
+    --color-bg: #fff;
+    --color-base: #2d2d2d;
+    --color-muted: #787575;
+    --color-brand: #c90044;
+    --color-brand-invert: #36ffbb;
+    --color-highlight: #5f2058;
+    --color-link: rgba(201, 0, 68, 0.8);
+    --color-logo: #3b3b3b;
+    --content-max-width: 100rem; /* 1600px */
+    --h-space: 2.5rem;
+  }
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
+@layer base {
+  html {
+    box-sizing: border-box;
+    background-color: var(--color-bg);
+    font-family: var(--font-base);
+    color: var(--color-base);
+    font-size: 100%;
+  }
 
-code {
-  font-family: monospace;
-  background: var(--color-highlight);
-  color: var(--color-bg);
-  padding: 0.15em;
-  font-size: 0.9em;
-}
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
 
-body {
-  margin: 0;
-  font-size: var(--font-size-body);
-  line-height: 1.4;
-  font-weight: var(--font-body-weight-light);
-}
+  code {
+    font-family: monospace;
+    background: var(--color-highlight);
+    color: var(--color-bg);
+    padding: 0.15em;
+    font-size: 0.9em;
+  }
 
-@media only screen and (min-width: 992px) {
   body {
-    font-size: 0.9375rem;
+    margin: 0;
+    font-size: var(--font-size-body);
+    line-height: 1.4;
+    font-weight: var(--font-body-weight-light);
   }
-}
 
-@media only screen and (min-width: 1200px) {
-  body {
-    font-size: 1rem;
+  @media only screen and (min-width: 992px) {
+    body {
+      font-size: 0.9375rem;
+    }
   }
-}
 
-/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
-@media screen and (prefers-reduced-motion: no-preference) {
-  html,
-  body {
-    scroll-behavior: smooth;
+  @media only screen and (min-width: 1200px) {
+    body {
+      font-size: 1rem;
+    }
   }
-}
 
-input,
-textarea,
-select,
-button {
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-}
+  /* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
+  @media screen and (prefers-reduced-motion: no-preference) {
+    html,
+    body {
+      scroll-behavior: smooth;
+    }
+  }
 
-input[type='button'],
-input[type='submit'],
-input[type='reset'],
-button {
-  cursor: pointer;
-}
+  input,
+  textarea,
+  select,
+  button {
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-header);
-  font-weight: var(--font-header-weight-medium);
-  line-height: 1.4;
-}
+  input[type='button'],
+  input[type='submit'],
+  input[type='reset'],
+  button {
+    cursor: pointer;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin-block-start: 0;
-  margin-block-end: 1rem;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-header);
+    font-weight: var(--font-header-weight-medium);
+    line-height: 1.4;
+  }
 
-a {
-  background-color: transparent;
-  color: var(--color-link);
-  -webkit-tap-highlight-color: transparent;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-block-start: 0;
+    margin-block-end: 1rem;
+  }
 
-a:focus {
-  outline: 3px auto var(--color-brand);
-}
+  a {
+    background-color: transparent;
+    color: var(--color-link);
+    -webkit-tap-highlight-color: transparent;
+  }
 
-img,
-svg {
-  max-width: 100%;
-  height: auto;
-}
+  a:focus {
+    outline: 3px auto var(--color-brand);
+  }
 
-img {
-  vertical-align: middle;
-  border: 0;
-}
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+
+  img {
+    vertical-align: middle;
+    border: 0;
+  }
 
-blockquote {
-  margin: 0;
+  blockquote {
+    margin: 0;
+  }
 }