From e6895391f63c53b887a915709299ad67fcfff4f5 Mon Sep 17 00:00:00 2001
From: prescientmoon <git@moonythm.dev>
Date: Mon, 4 Nov 2024 23:45:28 +0100
Subject: [PATCH] Fix spacing of first paragraph in asides containing a header
This was caused by the margin of the header not collapsing with that of
the first paragraph, leading to too much space being inserted.
---
public/styles.css | 51 ++++++++++++++++++++---------------
src/templates/long-aside.html | 2 +-
2 files changed, 30 insertions(+), 23 deletions(-)
diff --git a/public/styles.css b/public/styles.css
index a3bbe4b..739295f 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -17,6 +17,11 @@ blockquote {
margin-left: 0;
}
+ul,
+ol {
+ padding-left: 1rem;
+}
+
h1,
h2,
h3,
@@ -41,11 +46,11 @@ math[display="block"] {
display: inline-flex;
align-items: center;
box-sizing: border-box;
-}
-.aside-header > img {
- height: 1.75em;
- margin-right: 0.75em;
+ img {
+ height: 1.75em;
+ margin-right: 0.75em;
+ }
}
.aside {
@@ -59,33 +64,35 @@ math[display="block"] {
/* Prevents margin-collapsing of the children. */
border: 1px solid transparent;
-}
-.aside-long > :not(summary) {
- margin-left: 1rem;
-}
+ /* Slightly move things to the left to more nicely align with the marker */
+ &.aside-long > :not(summary) {
+ margin-left: 1rem;
+ }
-.aside-long:has-child(.aside-header) > :not(summary):nth-child(2) {
- margin-top: 0;
- padding-top: 0;
+ /* Remove the top margin of the first paragraph under the header */
+ &:has(> .aside-header) > :nth-child(2) {
+ margin-top: 0;
+ }
}
/* {{{ Override marker*/
-.aside-summary::marker {
- display: none;
+.aside > summary {
+ &::marker {
+ display: none;
+ }
+
+ &:before {
+ content: "▶";
+ font-size: 0.75rem;
+ padding: 0 0.75rem 0 0.25rem;
+ box-sizing: border-box;
+ }
}
-.aside-summary:before {
- content: "▶";
- font-size: 0.75rem;
- padding: 0 0.75rem 0 0.25rem;
- box-sizing: border-box;
-}
-
-.aside[open] .aside-summary:before {
+.aside[open] > summary:before {
content: "▼";
}
-
/* }}}*/
/* }}}*/
/* {{{ Tier lists */
diff --git a/src/templates/long-aside.html b/src/templates/long-aside.html
index cc411da..23d7df7 100644
--- a/src/templates/long-aside.html
+++ b/src/templates/long-aside.html
@@ -1,6 +1,6 @@
<aside>
<details class="aside aside-long">
- <summary class="aside-summary aside-header">
+ <summary class="aside-header">
<img
alt="{{character}}"
src="/assets/icons/characters/{{character}}.webp"