feat(content): improve typography spacing

levito · Mar 16, 2023 · 7d7f3aa · 7d7f3aa
1 parent acd4c36
commit 7d7f3aa
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/_content-inner.less b/src/_content-inner.less
@@ -1,23 +1,30 @@
 @import "_variables.less";
 
+@line-height: var(--line-height, 1.5);
+@margin-base: ~"@{font-size-post} * @{line-height}"; // default font-size: 16px, line-height: 1.5 (1.6875)
+@margin-sm: calc(@margin-base / 3); // => 8px (9px)
+@margin-md: calc(@margin-base); // => 24px (27px)
+@margin-lg: calc(@margin-base / 3 * 5); // => 40px (45px)
+
 font-size: @font-size-post;
+line-height: @line-height;
 
 .media(sm, {
-  line-height: 1.7;
+  --line-height: 1.6875;
 });
 
 // setup vertical rhythm with `* + *` method
 @{reset-selector} {
   margin: 0;
 
   + @{reset-selector} {
-    margin-top: 1em;
+    margin-top: @margin-md;
   }
   + :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: calc(2.5 * @font-size-post);
+    margin-top: @margin-lg;
   }
   + :is(dt, li) {
-    margin-top: 0.5em;
+    margin-top: @margin-sm;
   }
 }