diff --git a/src/_includes/css/defaults.css b/src/_includes/css/defaults.css index d410e972c..a1ea58cd4 100644 --- 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 index 5197ca10c..b20943a64 100644 --- 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 index 7c319b2c4..2c9ffdd74 100644 --- 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 index b69be3ea7..f5faa4f7d 100644 --- 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 {