From c258539bab089f6e0a1c8f6b947db2e236950a1d Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 31 Dec 2024 00:00:14 +0800
Subject: [PATCH] Make definition lists responsive

---
 src/assets/css/general.css | 16 ++++++++++++----
 src/assets/css/global.css  |  1 +
 src/assets/css/utility.css |  4 ++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/general.css b/src/assets/css/general.css
index 896e1b7c..c827fa94 100644
--- a/src/assets/css/general.css
+++ b/src/assets/css/general.css
@@ -73,6 +73,7 @@ blockquote > * + :not([class]),
 
 button:hover { cursor: pointer; }
 details:focus { outline-offset: 0.2em; }
+video { width: 100%; }
 
 figure {
     margin-bottom: var(--sz-paragraph-margin);
@@ -109,12 +110,19 @@ pre > code { white-space: pre; }
 summary { cursor: pointer; }
 
 dl {
+    container-type: inline-size;
     display: grid;
-    gap: 1em;
-    grid-template-columns: auto auto;
+    gap: var(--sz-content-list-gap);
 }
 
 dt { font-weight: 700; }
-dd {grid-column-start: 2; }
+dd { margin-left: var(--sz-def-indent); }
+dd ul { padding-left: 1em; }
 
-video { width: 100%; }
\ No newline at end of file
+@container (min-width: 20rem) {
+    dl { grid-template-columns: 1fr 2fr; }
+    dd {
+        grid-column-start: 2;
+        margin-left: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 0b64d520..fe2826f9 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -48,6 +48,7 @@
     --sz-navbar-ht: 4rem;
     --sz-external-link: 1.25em;
     --sz-content-list-gap: 0.7em;
+    --sz-def-indent: 1.5em;
 
     --ht-sticky-sidebar: 89vh;
 }
diff --git a/src/assets/css/utility.css b/src/assets/css/utility.css
index 04218f44..3aea29a2 100644
--- a/src/assets/css/utility.css
+++ b/src/assets/css/utility.css
@@ -45,10 +45,10 @@ a > .inline-icon { padding-inline-end: .25em; }
 .email-encoded b { display: none; }
 
 .deflist-1col { grid-template-columns: unset; }
-* + .deflist-1col { margin-block-start: 1.5em; }
+* + .deflist-1col { margin-block-start: var(--sz-def-indent); }
 .deflist-1col dd {
     grid-column-start: unset;
-    margin-left: 1.5em;
+    margin-block-start: var(--sz-def-indent);
 }
 
 .hidden { display: none; }