setup global text styles

calblueprint · Jan 10, 2024 · 731f408 · 731f408
1 parent 93b61da
commit 731f408
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 79 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -25,7 +25,6 @@ export default function NavBar({ links }: Props) {
         onClick={() => setMenuVisible(!menuVisible)}
       >
         <svg
-          className="w-full h-full"
           width="30"
           height="30"
           viewBox="0 0 30 30"

diff --git a/src/components/Navbar/style.module.scss b/src/components/Navbar/style.module.scss
@@ -28,12 +28,18 @@
   flex-direction: column;
   justify-content: space-between;
   z-index: 10;
+  padding: 0;
 
   @media (min-width: breakpoints.$tablet) {
     visibility: hidden;
   }
 }
 
+.button > svg {
+  width: 100%;
+  height: 100%;
+}
+
 .backdrop {
   position: absolute;
   left: 0;
@@ -70,7 +76,6 @@
   align-items: flex-end;
 
   background: rgba(0, 0, 0, 0.3);
-  color: white;
   font-weight: 300;
 
   width: 100%;
@@ -82,3 +87,7 @@
     visibility: hidden;
   }
 }
+
+.mobileLinks > a {
+  color: white;
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -25,80 +25,5 @@ const { title } = Astro.props;
 </html>
 
 <style is:global lang="scss">
-  @use '../styles/breakpoints';
-  @use '../styles/colors';
-  @use '../styles/fonts';
-
-  html {
-    font-family: fonts.$sans;
-    background: colors.$background;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  /* text styles */
-  h1 {
-    font-size: 3rem;
-    line-height: 1;
-    font-weight: 700;
-  }
-
-  h2 {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  h3 {
-    font-size: 0.75rem;
-    font-weight: 300;
-    line-height: 1;
-  }
-
-  h4,
-  p {
-    font-size: 0.75rem;
-    font-weight: 300;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  button {
-    background: none;
-    border: none;
-  }
-
-  /* large screens */
-  @media (min-width: breakpoints.$tablet) {
-    h1 {
-      font-size: 6rem;
-    }
-
-    h2 {
-      font-size: 2.25rem;
-      line-height: 2.5rem;
-    }
-
-    h3 {
-      font-size: 1.5rem;
-      line-height: 2rem;
-    }
-
-    h4 {
-      font-size: 1.25rem;
-      line-height: 1.75rem;
-    }
-
-    p {
-      font-size: 1.125rem;
-      line-height: 1.75rem;
-    }
-  }
+  @use '../styles/global';
 </style>
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
@@ -1,6 +1,6 @@
 $background: #fff9ef;
 $primary: #80d3f1;
-$secondary: #80d3f1;
+$secondary: #ccedf9; // nontransparent hex
 $accent: #df7291;
 $text: #3d3833; // theres a #3d3935, but the difference is miniscule
 $link: #61c5e3;
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
@@ -0,0 +1,79 @@
+@use '../styles/breakpoints';
+@use '../styles/colors';
+@use '../styles/fonts';
+
+html {
+  font-family: fonts.$sans;
+  background: colors.$background;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* text styles */
+h1 {
+  font-family: fonts.$serif;
+  font-size: 3.25rem;
+  line-height: 120%;
+  font-weight: 600;
+}
+
+h2 {
+  font-family: fonts.$serif;
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 150%;
+}
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 150%;
+}
+
+h4 {
+  font-family: fonts.$mono;
+  font-size: 1rem;
+}
+
+h5 {
+  font-family: fonts.$mono;
+  font-size: 0.875rem;
+}
+
+p {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 150%;
+}
+
+a {
+  color: colors.$link;
+  text-decoration: none;
+}
+
+button {
+  background: none;
+  border: none;
+  border-radius: 8px;
+  display: flex;
+  gap: 0.5rem;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+button.primary,
+button.menu {
+  background: colors.$primary;
+}
+
+button.secondary {
+  background: colors.$secondary;
+}
+
+button.menu {
+  font-family: fonts.$mono;
+}