Typography and mobile fixes

johanbrook · Oct 10, 2024 · c71b1ff · c71b1ff
1 parent 8079369
commit c71b1ff
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/src/_includes/css/defaults.css b/src/_includes/css/defaults.css
@@ -65,7 +65,11 @@ nav {
 
 article
     :not(nav > *):where(h1, h2, h3, h4, p, ul, ol, li, blockquote, hr, figure, table, pre, details):not(:last-child) {
-    margin-block-end: var(--spacing-prose, 0.5rlh);
+    margin-block-end: var(--spacing-prose, 1rlh);
+
+    @media (max-width: 600px) {
+        --spacing-prose: 0.5rlh;
+    }
 }
 
 /* TABLES */

diff --git a/src/_includes/css/prose.css b/src/_includes/css/prose.css
@@ -8,8 +8,12 @@ PROSE
         padding-bottom: 0.25lh;
     }
 
-    * + h1 {
-        margin-top: 1lh;
+    :where(h1, h2, h3, h4, h5, h6) {
+        margin-block-end: 1rlh;
+    }
+
+    * + :where(h1, h2, h3) {
+        margin-block-start: 1.5rlh;
     }
 
     :where(img, iframe, figure, svg) {
@@ -32,7 +36,7 @@ PROSE
         padding-left: 0.5rlh;
         margin-left: 0.5rlh;
 
-        li * {
+        li {
             --spacing-prose: 0.25rlh;
         }
     }

diff --git a/src/_includes/css/reset.css b/src/_includes/css/reset.css
@@ -34,7 +34,7 @@
 }
 
 :where(h1, h2, h3, h4, button, input, label) {
-    line-height: 1.1;
+    line-height: 1.5;
 }
 
 :where(input, button, textarea, select) {

diff --git a/src/_includes/css/theme.css b/src/_includes/css/theme.css
@@ -76,10 +76,20 @@ pre {
     text-align: left;
     line-height: var(--leading);
     color: var(--code-color);
-    border-block: 2px solid var(--border-color);
-    padding: 0.5rlh 0;
+    padding: 0.5rlh;
     position: relative;
 
+    &::before {
+        border-radius: 10em;
+        position: absolute;
+        width: 3px;
+        display: block;
+        content: '';
+        inset: 0;
+        right: auto;
+        background-color: currentColor;
+    }
+
     & .line-highlight {
         --cycle: 27px;
         --color: 112 20% 50%;
@@ -131,8 +141,7 @@ blockquote {
 hr {
     border: 0;
     background-color: var(--border-color);
-    height: 1px;
-    margin-block: 0.5rlh calc(0.5rlh - 1px);
+    height: 2px;
 }
 
 table {