reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: optimize underline style and theme introduction

Browse source
This commit is contained in:
radishzzz 2025-03-08 17:06:37 +00:00
parent a07c930d0d
commit 7abec02cc3
9 changed files with 42 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -19,7 +19,9 @@
# Retypeset
A blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of traditional layouts. Details in every sight, elegance in every space.
A static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of typography.
Details in every sight, elegance in every space.
- [Live Demo](https://retypeset.radishzz.cc/)
- [Mobile design](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)

4
README.zh.md
View file

@ -19,7 +19,9 @@
# 重新编排
一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。
一款基于 <a href="https://astro.build/">Astro</a> 框架的静态博客主题，灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。
所见皆为细节，方寸尽显优雅。
- [在线预览](https://retypeset.radishzz.cc/)
- [移动端设计稿](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)

8
src/components/Footer.astro
View file

@ -27,12 +27,12 @@ const year = Number(startYear) === currentYear
]}
>
<p>
<a href={linkAUrl}>{linkAName}</a> /
<a href={linkBUrl}>{linkBName}</a> /
<a href={linkCUrl}>{linkCName}</a>
<a class="hover:(c-primary transition-colors)" href={linkAUrl}>{linkAName}</a> /
<a class="hover:(c-primary transition-colors)" href={linkBUrl}>{linkBName}</a> /
<a class="hover:(c-primary transition-colors)" href={linkCUrl}>{linkCName}</a>
</p>
<p>
Powered by <a href="https://astro.build/">Astro</a> and <a href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
Powered by <a class="hover:(c-primary transition-colors)" href="https://astro.build/">Astro</a> and <a class="hover:(c-primary transition-colors)" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
</p>
<p>
© {year} {author}

4
src/content/posts/retypeset_en.md
View file

@ -5,4 +5,6 @@ tags: ["Astro", "Markdown"]
lang: en
---
A blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of traditional layouts. Details in every sight, elegance in every space.
A static blog theme based on the <a href="https://astro.build/">Astro</a> framework, inspired by <a href="https://astro-theme-typography.vercel.app/">Typography</a>. This theme is based on the style of Typography, through the establishment of a new visual standard, all the pages are rearranged to create a reading experience like the pages of a paper book, reviving the beauty of typography.
Details in every sight, elegance in every space.

4
src/content/posts/retypeset_zh.md
View file

@ -4,4 +4,6 @@ published: 2024-01-25
tags: ["Astro", "Markdown"]
---
一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。
一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。
所见皆为细节，方寸尽显优雅。

3
src/pages/about.astro
View file

@ -5,6 +5,7 @@ import Layout from '@/layouts/Layout.astro'
<Layout>
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
<div class="heti mt-4.375">
<p>一款基于 <a href="https://astro.build/">Astro</a> 框架的博客主题，最初灵感来自 <a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。所见皆为细节，方寸尽显优雅。</p>
<p>一款基于<a href="https://astro.build/">Astro</a>框架的静态博客主题，灵感来自<a href="https://astro-theme-typography.vercel.app/">Typography</a>。本主题以活版印刷风格为基础，通过建立全新视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现传统版式之美。</p>
<p>所见皆为细节，方寸尽显优雅。</p>
</div>
</Layout>

35
src/pages/posts/[slug].astro
View file

@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
postDescription={post.data.description}
postImage={post.data.image}
>
<article class="heti mb-16">
<article class="heti mb-12.6">
<h1 class="post-title">
<span
transition:name={`post-${post.data.slug || post.slug}`}
@ -48,23 +48,24 @@ const { Content, remarkPluginFrontmatter } = await post.render()
</span>
</div>
<Content />
{post.data.tags && post.data.tags.length > 0 && (
<div class="mt-12.625">
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
{post.data.tags.map(tag => (
<a
href={`/tags/${tag}/`}
class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
>
{tag}
</a>
))}
</div>
</div>
)}
</article>
<!-- Tags -->
{post.data.tags && post.data.tags.length > 0 && (
<div class="mb-16">
<div class="h-0.25 w-10 bg-secondary opacity-25"></div>
<div class="mt-4.375 w-95% flex flex-wrap gap-x-3 gap-y-3.6">
{post.data.tags.map(tag => (
<a
href={`/tags/${tag}/`}
class="inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary text-primary)"
>
{tag}
</a>
))}
</div>
</div>
)}
<Comments />
</Layout>

3
src/styles/heti.css
View file

@ -23,6 +23,9 @@
.heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child {
margin-block-end:0 !important
}
.heti a {
--at-apply: 'uno-custom-underline';
}
.heti blockquote {
margin-block-start:12px;
margin-block-end:24px;

4
uno.config.ts
View file

@ -32,7 +32,9 @@ export default defineConfig({
serif: ['STIX', 'EarlySummer', 'Georgia', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
},
},
shortcuts: {},
shortcuts: {
'uno-custom-underline': 'underline mx-0.3em decoration-secondary/35 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-primary/50 transition underline-0.1em)',
},
rules: [
['scrollbar-hidden', {
'scrollbar-width': 'none',