feat: Update typography with fluid scaling for h4, h5, and h6 elements and adjust base font size

TODO.md

@@ -4,7 +4,7 @@
 
 - [x] **Code Font Ligatures** — Integrate a dedicated ligaturized monospace font (like Fira Code or JetBrains Mono) for cleaner code snippets.
 - [x] **Text Wrap Balancing** — Apply `text-wrap: balance` to headings and `text-wrap: pretty` to paragraphs to prevent awkward orphaned words.
-- [ ] **Fluid Typography Scale** — Refactor font sizes to use CSS `clamp()` functions for perfectly smooth scaling across all devices without relying on breakpoints.
+- [x] **Fluid Typography Scale** — Refactor font sizes to use CSS `clamp()` functions for perfectly smooth scaling across all devices without relying on breakpoints.
 - [ ] **Line Highlighting in Code Blocks** — Implement a custom shortcode or modify the syntax highlighter to allow highlighting specific lines of code (vital for exploit tutorials).
 - [ ] **Footnote Backlinks** — Add a smooth-scroll return link (e.g., `[↩]`) inside the expanded footnote tooltip or at the bottom of the article to jump back to the reading position.
 

sass/_reset.scss

@@ -7,7 +7,7 @@
 
 html {
   font-family: var(--font-sans);
-  font-size: 100%;
+  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
   background-color: var(--bg-color);
   color: var(--text-color);
   scroll-behavior: smooth;

sass/_typography.scss

@@ -24,6 +24,15 @@ h3 {
   font-size: clamp(1.2rem, 2vw, 1.8rem);
   margin-top: 1.5em;
 }
+h4 {
+  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
+}
+h5 {
+  font-size: clamp(1rem, 1.25vw, 1.15rem);
+}
+h6 {
+  font-size: clamp(0.9rem, 1vw, 1rem);
+}
 
 p,
 ul,