Cleanup: Update in Prose and headline.

Author: nikoshell

src/components/ui/Headline.astro

@@ -20,6 +20,73 @@ const isCenter = center ? "text-center" : "";
 </Tag>
 
 <style>
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+    font-family: var(--font-display);
+    line-height: 1.25;
+
+    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
+
+    --min-fs: 1;
+    --max-fs: 1.5;
+    --min-vw: 20;
+    --max-vw: 45;
+
+    --min-fs-rem: var(--min-fs) * 1rem;
+    --max-fs-rem: var(--max-fs) * 1rem;
+    --min-vw-rem: var(--min-vw) * 1rem;
+
+    --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
+      (var(--max-vw) - var(--min-vw));
+
+    font-size: clamp(
+      var(--min-fs-rem),
+      var(--min-fs-rem) + var(--slope),
+      var(--max-fs-rem)
+    );
+  }
+
+  h1 {
+    /* 36 px, 48px */
+    --min-fs: 2.25;
+    --max-fs: 3;
+  }
+
+  h2 {
+    /* 32px, 40px */
+    --min-fs: 2;
+    --max-fs: 2.5;
+  }
+
+  h3 {
+    /* 28px, 36px */
+    --min-fs: 1.75;
+    --max-fs: 2.25;
+  }
+
+  h4 {
+    /* 24px, 32px */
+    --min-fs: 1.5;
+    --max-fs: 2;
+  }
+
+  h5 {
+    /* 20px, 28px */
+    --min-fs: 1.25;
+    --max-fs: 1.75;
+  }
+
+  h6 {
+    /* 16px, 24px */
+    --min-fs: 1;
+    --max-fs: 1.5;
+  }
+
   a:hover {
     color:var(--color-primary-hover);
   }