Add basic typography styles for common elements

This adds basic styles for headers, paragraphs, and definition lists. Closes #44
sul-dlss · Sep 11, 2024 · 225da4b · 225da4b
1 parent 648047d
commit 225da4b
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/styles/header.css b/styles/header.css
@@ -64,11 +64,7 @@
     }
   }
 
-  .h1 {
-    font-size: 2.25rem;
-
-    a {
-      --bs-link-hover-decoration: none;
-    }
+  .h1 a {
+    --bs-link-hover-decoration: none;
   }
 }
diff --git a/styles/typography.css b/styles/typography.css
@@ -5,3 +5,65 @@
   --font-family-serif: "Source Serif 4", serif;
   --bs-font-sans-serif: "Source Sans 3", "Source Sans Pro";
 }
+
+h1, .h1 {
+  font-size: 2.25rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+}
+
+h2, .h2 {
+  font-size: 1.75rem;
+  line-height: 2rem;
+  font-weight: 600;
+}
+
+h3, .h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+h4, .h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+h5, .h5 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+h6, .h6 {
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+dt {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+dd {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+p {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+/* xs */
+@media (width < 576px) {
+  p {
+    font-size: 0.9rem;
+  }
+}
+
+/* xl */
+@media (width >= 1200px) {
+  p {
+    font-size: 1.25rem;
+  }
+}