commit 6695ba35ed9d8d7a7ce472e9d421fe2c6ab98e24
parent 2c41abcd2f2a1e495a6804971821ae09bf179a95
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date: Sat, 12 Apr 2025 02:35:03 +0800
Revamp spacing, again
Diffstat:
5 files changed, 131 insertions(+), 89 deletions(-)
diff --git a/layouts/index.shtml b/layouts/index.shtml
@@ -3,7 +3,11 @@
</head>
<div id="content">
<main>
- <h1 :text="$page.title"></h1>
- <div :html="$page.content()"></div>
+ <article class="hierarchical">
+ <header class="non-hierarchical">
+ <h1 class="limit-self" :text="$page.title"></h1>
+ </header>
+ <div class="limit-children" :html="$page.content()"></div>
+ </article>
</main>
</div>
diff --git a/layouts/page.shtml b/layouts/page.shtml
@@ -11,22 +11,24 @@
#post-header {
margin-block-end: 1.5em;
}
-#post-header>time,
-#post-header>span {
+#post-header>p>time,
+#post-header>p>span {
font-size: 0.8em;
}
</style>
</head>
<div id="content">
<main>
- <article>
- <header id="post-header" class="non-hierarchical">
+ <article class="hierarchical">
+ <header id="post-header" class="non-hierarchical limit-children">
<h1 :text="$page.title"></h1>
- <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
- ·
- <span rel="author" :text="$page.author"></span>
+ <p>
+ <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
+ ·
+ <span rel="author" :text="$page.author"></span>
+ </p>
</header>
- <div class="post-content" :html="$page.content()"></div>
+ <div class="post-content limit-children" :html="$page.content()"></div>
</article>
</main>
</div>
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -2,31 +2,34 @@
<head id="head">
<style>
#prev-next {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-top: 40px;
+ padding-block: 15px;
+ padding-inline: 15px;
+}
+#prev-next>div:last-child {
+ text-align: end;
}
#post-header {
margin-block-end: 1.5em;
}
-#post-header>time,
-#post-header>span {
+#post-header>p>time,
+#post-header>p>span {
font-size: 0.8em;
}
</style>
</head>
<div id="content">
<main>
- <article>
- <header id="post-header" class="non-hierarchical">
+ <article class="hierarchical">
+ <header id="post-header" class="non-hierarchical limit-children">
<h1 :text="$page.title"></h1>
- <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
- ·
- <span rel="author" :text="$page.author"></span>
+ <p>
+ <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
+ ·
+ <span rel="author" :text="$page.author"></span>
+ </p>
</header>
- <div class="post-content" :html="$page.content()"></div>
+ <div class="post-content limit-children" :html="$page.content()"></div>
</article>
</main>
<footer id="prev-next">
diff --git a/layouts/posts.shtml b/layouts/posts.shtml
@@ -12,10 +12,10 @@
</head>
<div id="content">
<main>
- <h1 :text="$page.title"></h1>
- <div :if="$page.content().len().eq(0).not()" :html="$page.content()"></div>
- <div :loop="$page.subpages()">
- <section class="post non-hierarchical">
+ <h1 class="limit-self" :text="$page.title"></h1>
+ <div class="limit-children" :html="$page.content()"></div>
+ <div class="limit-children" :loop="$page.subpages()">
+ <section class="post">
<a class="post-title" href="$loop.it.link()">
<h3 :text="$loop.it.title"></h3>
</a>
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -28,6 +28,7 @@
<style>
/* Modern CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
@@ -41,7 +42,9 @@ h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
<style>
/* Sizes */
:root {
- --content-width: 830px;
+ --viewport-width: min(100vw, 830px);
+ --viewport-padding: 15px;
+ --content-width: calc(var(--viewport-width) - 2 * var(--viewport-padding));
--rem: 14pt;
}
</style>
@@ -59,31 +62,73 @@ html.font-loading.font-loaded { font-family: 'Atkinson Hyperlegible Next', syste
</style>
<style>
-/* Hierarchical spacing defaults */
-/* Disable by adding .non-hierarchical to an ancestor */
-* {
- margin: 0;
+/* Horizontal spacing management */
+/* Philosophy: everything should be width = 100vw by default, and limited at the last minute */
+div, header, footer, section, article,
+h1, h2, h3, h4, h5, h6,
+blockquote, aside, details,
+p, ul, ol, menu, dl, pre {
+ width: 100%;
}
-/* All blocky texts have end margin, unless we have a nested list situation */
-:is(h1, h2, h3, h4, h5, h6, p, ul, ol, dir, menu, dl)/*
-*/:not(:is(ul, ol, dir, menu, dl) > li > :is(ul, ol, dir, menu, dl, p))/*
-*/:not(.non-hierarchical *) {
- /* Subtract 0.5rem to exaggerate the margin differences between different headings */
- margin-block-end: calc(0.6lh - 0.5rem);
+/* 2 ways to limit: limit-children and limit-self */
+.limit-self,
+.limit-children > *:not(.full-bleed) {
+ width: var(--content-width);
+ margin-inline: auto;
}
+ </style>
+
+ <style>
+/* Hierarchical vertical spacing management */
+/* Enable with .hierarchical, disable inside a .hierarchical with .non-hierarchical */
+/* Enable for a single element with .hierarchical-self */
+
+/* Blocky texts */
+/* Headings: h1, h2, h3, h4, h5, h6 */
+/* Biglets: blockquote, aside, details, pre, dl */
+/* Lists: ul, ol, menu */
+/* Paras: p */
+/* Rules: hr */
+
+/* There are 3 kinds of spacing: */
+/* - no spacing */
+/* - belongs together spacing */
+/* - separated spacing */
+/* All kinds of spacing are implemented as BOTH margin-block-start and margin-block-end, */
+/* abusing margin collapse to achieve the desired result. */
-/* Headers following a non-header blocky text should get start margin to separate from above */
-:is(p, ul, ol, dir, menu, dl) +
-:is(h1, h2, h3, h4, h5)/*
-*/:not(.non-hierarchical *) {
- margin-block-start: 1lh;
+:is(
+* + p,
+:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6, p),
+):not(li > *
+):is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self) {
+ margin-block-start: .4lh;
}
-/* Horizontal rules always get a nice fat margin */
-hr/*
-*/:not(.non-hierarchical *) {
- margin-block: 1em;
+:is(
+p,
+h1, h2, h3, h4, h5, h6,
+):not(li > *
+):is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self) {
+ margin-block-end: .2lh;
+}
+
+:is(
+h1, h2, h3, h4, h5, h6,
+):not(li > *
+):is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self) {
+ margin-block-start: 1.2lh;
+}
+
+:is(
+blockquote, aside, details,
+ul, ol, menu, pre, dl,
+hr
+):not(li > *
+):is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self) {
+ margin-block-start: 0.6lh;
+ margin-block-end: 0.6lh;
}
</style>
@@ -118,22 +163,24 @@ a:visited {
a:visited:hover {
color: #910f46;
}
+
+blockquote {
+ padding-inline-start: 15px;
+ border-inline-start: 3px solid gray;
+}
</style>
<style>
/* Template styling */
#base-everything {
- position: absolute;
- padding-block-end: 4em;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
min-height: 100vh;
};
#base-nav {
- max-width: var(--content-width);
- margin-inline: auto;
margin-block-start: 15px;
- padding-inline: 15px;
}
#base-nav a:not(:hover) {
@@ -160,24 +207,12 @@ a:visited:hover {
#base-header-rule {
margin-inline: 15px;
- margin-block-end: 1rem;
+ margin-block-end: 30px;
border-block-start: 10px dotted lightpink;
}
-#content {
- margin: auto;
- margin-block-start: 15px;
- padding-inline: 15px;
- max-width: var(--content-width);
-}
-
#base-footer {
- position: absolute;
- inset-block-end: 0;
- inset-inline: 0;
- margin-inline: auto;
margin-block-start: auto;
- padding-inline: 15px;
}
#base-footer-rule {
@@ -188,10 +223,8 @@ a:visited:hover {
#base-no-cookie {
max-width: var(--content-width);
- margin-inline: auto;
margin-block-end: 15px;
padding-block-start: .4lh;
- padding-inline: 15px;
text-align: center;
color: brown;
}
@@ -202,28 +235,28 @@ a:visited:hover {
</head>
<body id="body">
<div id="base-everything">
- <header id="base-header" class="non-hierarchical">
- <nav id="base-nav">
- <a id="base-site-title" href="$site.page('').link()">
- <h2 id="base-site-title-text" :text="$site.title"></h2>
- </a>
- <div id="base-links">
- <a href="$site.page('').link()">Home</a>
- <a href="$site.page('posts').link()">Posts</a>
- <a href="$site.page('bio').link()">Bio</a>
- <a href="$site.page('teaching').link()">Teaching</a>
- </div>
- </nav>
- <hr id="base-header-rule">
- </header>
- <div id="content">
- <super>
- </div>
- <div id="base-footer" class="non-hierarchical">
- <hr id="base-footer-rule">
- <p id="base-no-cookie">This site uses no cookies. ❌🍪</p>
- </div>
+ <header id="base-header">
+ <nav id="base-nav" class="limit-self">
+ <a id="base-site-title" href="$site.page('').link()">
+ <h2 id="base-site-title-text" :text="$site.title"></h2>
+ </a>
+ <div id="base-links">
+ <a href="$site.page('').link()">Home</a>
+ <a href="$site.page('posts').link()">Posts</a>
+ <a href="$site.page('bio').link()">Bio</a>
+ <a href="$site.page('teaching').link()">Teaching</a>
+ </div>
+ </nav>
+ <hr id="base-header-rule">
+ </header>
+ <div id="content">
+ <super>
+ </div>
+ <footer id="base-footer" class="limit-children">
+ <hr id="base-footer-rule">
+ <p id="base-no-cookie">This site uses no cookies. ❌🍪</p>
+ </footer>
</div>
- <script>document.querySelector('body').classList.add('font-loading');</script>
+ <script>document.querySelector('html').classList.add('font-loading');</script>
</body>
</html>