commit 8a71b952ada3abeb5333bc9f7c567edb54dfee54
parent 6305332a5866aa20a215a5a75f4233175fbc85b1
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date: Sat, 12 Apr 2025 00:20:19 +0800
Spacing overhaul
Diffstat:
4 files changed, 68 insertions(+), 114 deletions(-)
diff --git a/layouts/page.shtml b/layouts/page.shtml
@@ -9,10 +9,7 @@
}
#post-header {
- margin: 1.5em 0;
-}
-#post-header>h1 {
- margin: 0;
+ margin-block-end: 1.5em;
}
#post-header>time,
#post-header>span {
@@ -23,7 +20,7 @@
<div id="content">
<main>
<article>
- <header id="post-header">
+ <header id="post-header" class="non-hierarchical">
<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>
·
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -9,10 +9,7 @@
}
#post-header {
- margin: 1.5em 0;
-}
-#post-header>h1 {
- margin: 0;
+ margin-block-end: 1.5em;
}
#post-header>time,
#post-header>span {
@@ -23,7 +20,7 @@
<div id="content">
<main>
<article>
- <header id="post-header">
+ <header id="post-header" class="non-hierarchical">
<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>
·
diff --git a/layouts/posts.shtml b/layouts/posts.shtml
@@ -6,11 +6,7 @@
}
.post {
- margin: 1.5em 0;
-}
-
-.post-title h3 {
- margin: 0;
+ margin-block: 1.5em;
}
</style>
</head>
@@ -19,7 +15,7 @@
<h1 :text="$page.title"></h1>
<div :if="$page.content().len().eq(0).not()" :html="$page.content()"></div>
<div :loop="$page.subpages()">
- <section class="post">
+ <section class="post non-hierarchical">
<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
@@ -26,98 +26,70 @@
<!-- /mathtex -->
<style>
-@font-face {
- font-family: 'Atkinson Hyperlegible Next';
- font-display: swap;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- -webkit-font-smoothing: antialiased;
- src: url(/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format('woff2');
-}
+/* Modern CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */
+*, *::before, *::after { box-sizing: border-box; }
+@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%; }
+input, button, textarea, select { font: inherit; }
+p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
+p { text-wrap: pretty; }
+h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
+#content { isolation: isolate; }
</style>
<style>
-/* 1. Use a more-intuitive box-sizing model */
-*, *::before, *::after {
- box-sizing: border-box;
-}
-
-/* 2. Remove default margin */
-* {
- margin: 0;
-}
-
-/* 3. Enable keyword animations */
-@media (prefers-reduced-motion: no-preference) {
- html {
- interpolate-size: allow-keywords;
- }
-}
-
-body {
- /* 4. Add accessible line-height */
- line-height: 1.5;
- /* 5. Improve text rendering */
- -webkit-font-smoothing: antialiased;
-}
-
-/* 6. Improve media defaults */
-img, picture, video, canvas, svg {
- display: block;
- max-width: 100%;
-}
-
-/* 7. Inherit fonts for form controls */
-input, button, textarea, select {
- font: inherit;
-}
-
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
- overflow-wrap: break-word;
- hyphens: auto;
-}
-
-/* 9. Improve line wrapping */
-p {
- text-wrap: pretty;
-}
-h1, h2, h3, h4, h5, h6 {
- text-wrap: balance;
+/* Sizes */
+:root {
+ --content-width: 830px;
+ --rem: 14pt;
}
+ </style>
-/*
- 10. Create a root stacking context
-*/
-#content {
- isolation: isolate;
-}
+ <style>
+/* Font face */
+@font-face { font-family: 'Atkinson Hyperlegible Next'; font-display: swap; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; src: url(/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2) format('woff2'); }
</style>
<style>
-:root {
- --content-width: 830px;
-}
+/* Font loading magic to avoid Flash of Invisible Text */
+html { font-size: var(--rem); font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
+html.font-loading { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
+html.font-loading.font-loaded { font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
</style>
<style>
-html {
- font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- font-size: 14pt;
+/* Hierarchical spacing defaults */
+/* Disable by adding .non-hierarchical to an ancestor */
+* {
+ margin: 0;
+}
+
+/* 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);
}
-html.font-loading {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+/* 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;
}
-html.font-loading.font-loaded {
- font-family: 'Atkinson Hyperlegible Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+/* Horizontal rules always get a nice fat margin */
+hr/*
+*/:not(.non-hierarchical *) {
+ margin-block: 1em;
}
</style>
<style>
+/* PERSONAL STYLE SECTION */
+/* Colours, sizes, lines, links, etc. */
body {
background-color: #fdf9ee;
}
@@ -126,11 +98,6 @@ h1 {
font-size: 1.9em;
}
-h1, h2, h3, h4, h5, h6,
-p, hr {
- margin-block: 0.75em 0.25em;
-}
-
hr {
border: none;
border-top: 1px solid;
@@ -154,6 +121,7 @@ a:visited:hover {
</style>
<style>
+/* Header styling */
#nav {
max-width: var(--content-width);
margin-inline: auto;
@@ -170,10 +138,6 @@ a:visited:hover {
text-align: center;
}
-#site-title-text {
- margin-block: 0;
-}
-
#nav-links {
display: flex;
justify-content: center;
@@ -183,20 +147,18 @@ a:visited:hover {
}
#nav-links>a {
- padding-block: .25lh;
+ padding-block: .1lh .4lh;
}
#nav-rule {
- margin: 0;
margin-inline: 15px;
- border: none;
+ margin-block-end: 1rem;
border-block-start: 10px dotted lightpink;
}
#content {
margin: auto;
margin-block-start: 15px;
- padding: 0;
padding-inline: 15px;
padding-block-end: 15px;
max-width: var(--content-width);
@@ -207,18 +169,20 @@ a:visited:hover {
<super>
</head>
<body id="body">
- <nav id="nav">
- <a id="site-title" href="$site.page('').link()">
- <h2 id="site-title-text" :text="$site.title"></h2>
- </a>
- <div id="nav-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="nav-rule">
+ <header id="nav-header" class="non-hierarchical">
+ <nav id="nav">
+ <a id="site-title" href="$site.page('').link()">
+ <h2 id="site-title-text" :text="$site.title"></h2>
+ </a>
+ <div id="nav-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="nav-rule">
+ </header>
<div id="content">
<super>
</div>