commit 477c745471cf5f99d23fec15027b2cb927ba2756
parent 25d2d892e7cddb99c602c665e1bb0e469d0c084d
Author: gracefu <81774659+gracefuu@users.noreply.github.com>
Date: Sun, 4 May 2025 07:10:10 +0800
More decorating
Diffstat:
10 files changed, 84 insertions(+), 229 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+layouts/*.raw.shtml
public/
__pycache__/
.makedb
diff --git a/layouts/index.raw.shtml b/layouts/index.raw.shtml
@@ -1,10 +0,0 @@
-<div id="content">
- <style>
- #post-header {
- margin-block-end: 1.2em;
- }
- </style>
- <main>
- <article class="hierarchical limit-children" :html="$page.content()"></article>
- </main>
-</div>
-\ No newline at end of file
diff --git a/layouts/page.raw.shtml b/layouts/page.raw.shtml
@@ -1,45 +0,0 @@
-<div id="content">
- <style>
- #prev-next {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-top: 40px;
- }
-
- main {
- position: relative;
- }
- #post-header {
- position: absolute;
- top: -1.4em;
- color: #711;
- }
- #post-header > p {
- display: flex;
- gap: 0.5ch;
- font-size: 0.8em;
- }
- #post-header > p > * {
- background: #ffe8c8;
- border-radius: 5px;
- padding-inline: 0.5ch;
- }
- #post-header > p > tag {
- background: #cef;
- }
- </style>
- <main>
- <header id="post-header" class="limit-children">
- <p>
- <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
- <author :text="$page.author"></author>
- <ctx :loop="$page.tags">
- <tag :text="$loop.it">
- </tag>
- </ctx>
- </p>
- </header>
- <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
- </main>
-</div>
-\ No newline at end of file
diff --git a/layouts/page.shtml b/layouts/page.shtml
@@ -1,45 +1,25 @@
<extend template="base.shtml">
<div id="content">
<style>
- #prev-next {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-top: 40px;
- }
-
- main {
- position: relative;
- }
- #post-header {
- position: absolute;
- top: -1.4em;
- color: #711;
- }
- #post-header > p {
- display: flex;
- gap: 0.5ch;
- font-size: 0.8em;
- }
- #post-header > p > * {
- background: #ffe8c8;
- border-radius: 5px;
- padding-inline: 0.5ch;
- }
- #post-header > p > tag {
- background: #cef;
+ #post-header > tags {
+ flex-direction: column;
+ align-items: end;
+ text-align: right;
+ width: min-content;
+ float: right;
+ padding-inline: 10px;
}
</style>
<main>
- <header id="post-header" class="limit-children">
- <p>
+ <header id="post-header" class="limit-self">
+ <tags>
<time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
<author :text="$page.author"></author>
<ctx :loop="$page.tags">
<tag :text="$loop.it">
</tag>
</ctx>
- </p>
+ </tags>
</header>
<article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
</main>
diff --git a/layouts/post.raw.shtml b/layouts/post.raw.shtml
@@ -1,64 +0,0 @@
-<div id="content">
- <style>
- #prev-next {
- padding-block: 15px;
- padding-inline: 15px;
- }
- #prev-next>div:last-child {
- text-align: end;
- }
-
- main {
- position: relative;
- }
- #post-header {
- position: absolute;
- top: -1.4em;
- color: #711;
- }
- #post-header > p {
- display: flex;
- gap: 0.5ch;
- font-size: 0.8em;
- }
- #post-header > p > * {
- background: #ffe8c8;
- border-radius: 5px;
- padding-inline: 0.5ch;
- }
- #post-header > p > tag {
- background: #cef;
- }
- </style>
- <main>
- <header id="post-header" class="limit-children">
- <p>
- <time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
- <author :text="$page.author"></author>
- <reading-time>
- <time :text="$page.wordCount().div(220).plus(1)"></time>
- min read<!---->
- </reading-time>
- <ctx :loop="$page.tags">
- <tag :text="$loop.it">
- </tag>
- </ctx>
- </p>
- </header>
- <article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
- </main>
- <footer id="prev-next">
- <div :if="$page.prevPage?()">
- <a href="$if.link()">
- ←
- <span :text="$if.title"></span>
- </a>
- </div>
- <div :if="$page.nextPage?()">
- <a href="$if.link()">
- <span :text="$if.title"></span>
- →
- </a>
- </div>
- </footer>
-</div>
-\ No newline at end of file
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -5,35 +5,26 @@
padding-block: 15px;
padding-inline: 15px;
}
- #prev-next>div:last-child {
- text-align: end;
+ #prev-next > a {
+ display: block;
+ text-wrap: balance;
}
+ #prev-next > a.next { text-align: end; }
+ #prev-next > a.prev::before { content: "←"; }
+ #prev-next > a.next::after { content: "→"; }
- main {
- position: relative;
- }
- #post-header {
- position: absolute;
- top: -1.4em;
- color: #711;
- }
- #post-header > p {
- display: flex;
- gap: 0.5ch;
- font-size: 0.8em;
- }
- #post-header > p > * {
- background: #ffe8c8;
- border-radius: 5px;
- padding-inline: 0.5ch;
- }
- #post-header > p > tag {
- background: #cef;
+ #post-header > tags {
+ flex-direction: column;
+ align-items: end;
+ text-align: right;
+ width: min-content;
+ float: right;
+ padding-inline: 10px;
}
</style>
<main>
- <header id="post-header" class="limit-children">
- <p>
+ <header id="post-header" class="limit-self">
+ <tags>
<time class="date" datetime="$page.date.format('2006-01-02 15:04:05MST')" :text="$page.date.format('2006-01-02')"></time>
<author :text="$page.author"></author>
<reading-time>
@@ -41,25 +32,18 @@
min read<!---->
</reading-time>
<ctx :loop="$page.tags">
- <tag :text="$loop.it">
- </tag>
+ <tag :text="$loop.it"></tag>
</ctx>
- </p>
+ </tags>
</header>
<article id="post" class="hierarchical limit-children" :html="$page.content()"></article>
</main>
<footer id="prev-next">
- <div :if="$page.prevPage?()">
- <a href="$if.link()">
- ←
- <span :text="$if.title"></span>
- </a>
- </div>
- <div :if="$page.nextPage?()">
- <a href="$if.link()">
- <span :text="$if.title"></span>
- →
- </a>
- </div>
+ <ctx :if="$page.prevPage?()">
+ <a class="prev" href="$if.link()" :text="$if.title"></a>
+ </ctx>
+ <ctx :if="$page.nextPage?()">
+ <a class="next" href="$if.link()" :text="$if.title"></a>
+ </ctx>
</footer>
</div>
\ No newline at end of file
diff --git a/layouts/posts.raw.shtml b/layouts/posts.raw.shtml
@@ -1,24 +0,0 @@
-<div id="content">
- <style>
- .date, .author {
- font-size: 0.8em;
- }
-
- .post {
- margin-block: 1.6em;
- }
- </style>
- <main>
- <div class="hierarchical 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>
- <time class="date" datetime="$loop.it.date.format('2006-01-02 15:04:05MST')" :text="$loop.it.date.format('2006-01-02')"></time>
- ·
- <span class="author" rel="author" :text="$loop.it.author"></span>
- </section>
- </div>
- </main>
-</div>
-\ No newline at end of file
diff --git a/layouts/posts.shtml b/layouts/posts.shtml
@@ -1,24 +1,36 @@
<extend template="base.shtml">
<div id="content">
<style>
- .date, .author {
- font-size: 0.8em;
- }
-
.post {
- margin-block: 1.6em;
+ margin-block: 1em;
+ color: #711;
+ font-size: 0.9em;
+ border: 1px solid lightpink;
+ border-radius: calc(3px / 0.4142135623730951);
+ padding: 3px;
+ }
+ .post > .post-title {
+ margin-block-end: 0.1em;
}
</style>
<main>
<div class="hierarchical 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>
- <time class="date" datetime="$loop.it.date.format('2006-01-02 15:04:05MST')" :text="$loop.it.date.format('2006-01-02')"></time>
- ·
- <span class="author" rel="author" :text="$loop.it.author"></span>
+ <h3 class="post-title">
+ <a href="$loop.it.link()" :text="$loop.it.title"></a>
+ </h3>
+ <tags>
+ <time class="date" datetime="$loop.it.date.format('2006-01-02 15:04:05MST')" :text="$loop.it.date.format('2006-01-02')"></time>
+ <author :text="$loop.it.author"></author>
+ <reading-time>
+ <time :text="$loop.it.wordCount().div(220).plus(1)"></time>
+ min read<!---->
+ </reading-time>
+ <ctx :loop="$loop.it.tags">
+ <tag :text="$loop.it"></tag>
+ </ctx>
+ </tags>
</section>
</div>
</main>
diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml
@@ -164,6 +164,11 @@
line-height: 1;
}
+ :is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *) a:hover {
+ text-decoration: 2.5px dotted underline;
+ text-underline-position: under;
+ }
+
:is(.hierarchical *:not(.non-hierarchical *), .hierarchical-self):not(:is(ol, ul, dl, menu).tight > li > *):not(:first-child
):is(
h1, h2, h3, h4, h5, h6,
@@ -225,8 +230,7 @@
text-decoration: none;
}
a:hover {
- text-decoration: 2.5px dotted underline;
- text-underline-position: under;
+ text-decoration: 1px dotted underline;
}
a { color: #ac1052; }
a:hover { color: #7b0c3b; }
@@ -241,6 +245,22 @@
ul, ol, dl, menu {
padding-inline-start: 1.5em;
}
+
+ tags {
+ display: flex;
+ gap: 0.5ch;
+ font-size: 0.8em;
+ color: #711;
+ }
+ tags > * {
+ background: #ffe8c8;
+ border-radius: 5px;
+ padding-inline: 0.5ch;
+ pointer-events: auto;
+ }
+ tags > tag {
+ background: #cef;
+ }
</style>
<style>
/* Template styling */
diff --git a/make.py b/make.py
@@ -25,6 +25,11 @@ async def main():
await shell(
"""
rm -rf public
+ rm -rf layouts/*.raw.shtml
+ for layout in layouts/*.shtml; do
+ tail -n+2 $layout > $layout.raw
+ done
+ rename .shtml.raw .raw.shtml layouts/*.shtml.raw
zine release
""",
echo=EchoAll,