refactor: a part of heti css style

This commit is contained in:
radishzzz 2025-03-20 18:09:39 +00:00
parent 0f63770b69
commit 608bb0045f
13 changed files with 136 additions and 99 deletions

View file

@ -7,6 +7,7 @@ import { defineConfig } from 'astro/config'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import remarkSectionize from 'remark-sectionize'
import UnoCSS from 'unocss/astro'
import { themeConfig } from './src/config'
import { langMap } from './src/i18n/config'
@ -53,6 +54,7 @@ export default defineConfig({
markdown: {
remarkPlugins: [
remarkMath,
remarkSectionize,
remarkReadingTime,
],
rehypePlugins: [
@ -66,8 +68,8 @@ export default defineConfig({
},
],
],
// available themes: https://shiki.style/themes
shikiConfig: {
// available themes: https://shiki.style/themes
themes: {
light: 'one-light',
dark: 'one-dark-pro',

View file

@ -46,6 +46,7 @@
"lint-staged": "^15.5.0",
"mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0",
"remark-sectionize": "^2.1.0",
"sharp": "^0.33.5",
"typescript": "~5.8.2",
"unocss": "66.1.0-beta.6",

43
pnpm-lock.yaml generated
View file

@ -102,6 +102,9 @@ importers:
reading-time:
specifier: ^1.5.0
version: 1.5.0
remark-sectionize:
specifier: ^2.1.0
version: 2.1.0
sharp:
specifier: ^0.33.5
version: 0.33.5
@ -3014,6 +3017,9 @@ packages:
remark-rehype@11.1.1:
resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
remark-sectionize@2.1.0:
resolution: {integrity: sha512-R/pHt1RLYrEqrbwOVXx8HnvvwOg+mxg8pE4kIWpIYE3/CuZhU8/PAx/0y1BbHWUA0jmTLTeWpUlDrS/B0pyd0g==}
remark-smartypants@3.0.2:
resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
engines: {node: '>=16.0.0'}
@ -3346,9 +3352,15 @@ packages:
unified@11.0.5:
resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
unist-util-find-after@4.0.1:
resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==}
unist-util-find-after@5.0.0:
resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
unist-util-is@5.2.1:
resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
unist-util-is@6.0.0:
resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
@ -3370,9 +3382,15 @@ packages:
unist-util-visit-children@3.0.0:
resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
unist-util-visit-parents@5.1.3:
resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
unist-util-visit-parents@6.0.1:
resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
unist-util-visit@4.1.2:
resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
unist-util-visit@5.0.0:
resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
@ -7414,6 +7432,11 @@ snapshots:
unified: 11.0.5
vfile: 6.0.3
remark-sectionize@2.1.0:
dependencies:
unist-util-find-after: 4.0.1
unist-util-visit: 4.1.2
remark-smartypants@3.0.2:
dependencies:
retext: 9.0.0
@ -7808,11 +7831,20 @@ snapshots:
trough: 2.2.0
vfile: 6.0.3
unist-util-find-after@4.0.1:
dependencies:
'@types/unist': 2.0.11
unist-util-is: 5.2.1
unist-util-find-after@5.0.0:
dependencies:
'@types/unist': 3.0.3
unist-util-is: 6.0.0
unist-util-is@5.2.1:
dependencies:
'@types/unist': 2.0.11
unist-util-is@6.0.0:
dependencies:
'@types/unist': 3.0.3
@ -7843,11 +7875,22 @@ snapshots:
dependencies:
'@types/unist': 3.0.3
unist-util-visit-parents@5.1.3:
dependencies:
'@types/unist': 2.0.11
unist-util-is: 5.2.1
unist-util-visit-parents@6.0.1:
dependencies:
'@types/unist': 3.0.3
unist-util-is: 6.0.0
unist-util-visit@4.1.2:
dependencies:
'@types/unist': 2.0.11
unist-util-is: 5.2.1
unist-util-visit-parents: 5.1.3
unist-util-visit@5.0.0:
dependencies:
'@types/unist': 3.0.3

View file

@ -19,7 +19,7 @@ const marginBottom = {
---
<header class="mb-15 lg:hidden">
<h3 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
<h2 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
<div
class="box-content inline-block pr-1.25"
@ -30,7 +30,7 @@ const marginBottom = {
{headerTitle}
</a>
</div>
</h3>
</h2>
{headerSubtitle && (
<div

View file

@ -34,15 +34,17 @@ function getPostPath(post: Post) {
>
{/* post title */}
<a
class="hover:c-primary"
lg={isTag ? '' : 'font-medium text-4.5'}
href={getPostPath(post)}
transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
data-disable-transition-on-theme
>
{post.data.title}
</a>
<h3 class="inline">
<a
class="hover:c-primary"
lg={isTag ? '' : 'font-medium text-4.5'}
href={getPostPath(post)}
transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
data-disable-transition-on-theme
>
{post.data.title}
</a>
</h3>
{/* mobile post time */}
<div

View file

@ -2,4 +2,4 @@
lang: ja
---
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/)フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。

View file

@ -2,4 +2,4 @@
lang: zh-tw
---
Retypeset 是一款基於[Astro](https://astro.build/)框架的靜態部落格主題,中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感,通過建立全新的視覺規範,對所有頁面進行重新編排,打造紙質書頁般的閱讀體驗,再現版式之美。所見皆為細節,方寸盡顯優雅。
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題,中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感,通過建立全新的視覺規範,對所有頁面進行重新編排,打造紙質書頁般的閱讀體驗,再現版式之美。所見皆為細節,方寸盡顯優雅。

View file

@ -2,4 +2,4 @@
lang: zh
---
Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题,中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感,通过建立全新的视觉规范,对所有页面进行重新编排,打造纸质书页般的阅读体验,再现版式之美。所见皆为细节,方寸尽显优雅。
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题,中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感,通过建立全新的视觉规范,对所有页面进行重新编排,打造纸质书页般的阅读体验,再现版式之美。所见皆为细节,方寸尽显优雅。

View file

@ -1,9 +1,8 @@
---
title: Markdown Style Guide
published: 2025-03-08
updated: 2025-03-12
updated: 2025-03-20
tags: ["Guide"]
draft: true
pin: 1
lang: en
abbrlink: markdown-style-guide
@ -15,17 +14,17 @@ Here is a sample of some basic Markdown syntax that can be used when writing Mar
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
# Heading 1 Preview
## H2
## Heading 2 Preview
### H3
### Heading 3 Preview
#### H4
#### Heading 4 Preview
##### H5
##### Heading 5 Preview
###### H6
###### Heading 6 Preview
## Paragraph

View file

@ -8,4 +8,4 @@ lang: ja
abbrlink: theme-guide
---
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/)フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。

View file

@ -8,4 +8,4 @@ lang: zh-tw
abbrlink: theme-guide
---
Retypeset 是一款基於[Astro](https://astro.build/)框架的靜態部落格主題,中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感,通過建立全新的視覺規範,對所有頁面進行重新編排,打造紙質書頁般的閱讀體驗,再現版式之美。所見皆為細節,方寸盡顯優雅。
Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題,中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感,通過建立全新的視覺規範,對所有頁面進行重新編排,打造紙質書頁般的閱讀體驗,再現版式之美。所見皆為細節,方寸盡顯優雅。

View file

@ -8,4 +8,4 @@ lang: zh
abbrlink: theme-guide
---
Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题,中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感,通过建立全新的视觉规范,对所有页面进行重新编排,打造纸质书页般的阅读体验,再现版式之美。所见皆为细节,方寸尽显优雅。
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题,中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感,通过建立全新的视觉规范,对所有页面进行重新编排,打造纸质书页般的阅读体验,再现版式之美。所见皆为细节,方寸尽显优雅。

View file

@ -3,34 +3,70 @@
* URL:https://github.com/sivan/heti
* Author:Sivan [sun.sivan@gmail.com]
*/
/*!
* .heti = CJK text
* .heti not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) = non-CJK text
*/
/* Global setting */
.heti {
line-height:1.5;
overflow-wrap:break-word;
word-wrap:break-word;
hyphens:auto;
letter-spacing:.02em
--at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
}
.heti:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
letter-spacing: 0;
hyphens: none;
line-height: 1.4;
--at-apply: 'leading-1.4em tracking-0';
}
.heti::before,.heti::after {
content:"";
display:table
}
.heti::after {
clear:both
}
.heti>*:first-child,.heti section>*:first-child,.heti td>*:first-child {
margin-block-start:0 !important
}
.heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child {
margin-block-end:0 !important
/* Common tags style */
.heti p {
--at-apply: 'mb-6 text-justify';
}
.heti a {
--at-apply: 'underline mx-0.25em decoration-secondary/25 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-secondary/75 transition) lg:underline-0.1em';
--at-apply: 'mx-0.15em font-medium transition-colors hover:(c-primary decoration-secondary/60) ';
--at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
}
/* Heading style */
.heti .post-title {
--at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
}
.heti h1 {
--at-apply: 'text-8';
}
.heti h2 {
--at-apply: 'text-6';
}
.heti h3 {
--at-apply: 'text-5';
}
.heti h4 {
--at-apply: 'text-4.5';
}
.heti h5 {
--at-apply: 'text-4';
}
.heti h6 {
--at-apply: 'text-3.5';
}
.heti h1,.heti h2,.heti h3 {
--at-apply: 'tracking-0.04em';
}
.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),
.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),
.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
--at-apply: 'tracking-0';
}
.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 {
--at-apply: 'font-semibold mt-6 mb-3';
}
/* .heti h1+h2 {
--at-apply: 'mbs-4.5';
}
.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 {
--at-apply: 'mbs-3';
} */
.heti blockquote {
margin-block-start:12px;
margin-block-end:24px;
@ -74,16 +110,12 @@
background-color:#404040
}
}
.heti p {
margin-block-start:12px;
margin-block-end:24px;
text-align:justify
}
.heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
text-align:start
}
.heti pre {
--at-apply: 'bg-primary/3!';
--at-apply: 'bg-secondary/8! scrollbar-hidden';
margin-block-start:12px;
margin-block-end:12px;
margin-inline-start:0;
@ -98,10 +130,10 @@
border-radius:4px;
}
html.dark .heti pre {
--at-apply: 'bg-primary/3!';
--at-apply: 'bg-secondary/8!';
}
html.dark .astro-code span {
--at-apply: 'bg-primary/0!';
--at-apply: 'bg-secondary/0!';
}
.heti pre code {
margin:0;
@ -112,50 +144,8 @@ html.dark .astro-code span {
.heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] {
letter-spacing:normal
}
.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 {
position:relative;
margin:0;
margin-block-start:24px;
margin-block-end:12px;
font-weight:600
}
.heti .post-title {
--at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
}
.heti h1 {
--at-apply: 'mb-6';
font-size:32px;
line-height:48px
}
.heti h2 {
font-size:24px;
line-height:36px
}
.heti h3 {
font-size:20px;
line-height:36px
}
.heti h4 {
font-size:18px;
line-height:24px
}
.heti h5 {
font-size:16px;
line-height:24px
}
.heti h6 {
font-size:14px;
line-height:24px
}
.heti h1,.heti h2,.heti h3 {
letter-spacing:.05em
}
.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h1:not(:lang(zh)),.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h2:not(:lang(zh)),.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h3:not(:lang(zh)) {
letter-spacing:0
}
.heti h1+h2,.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 {
margin-block-start:12px
}
.heti ul,.heti ol,.heti dl {
margin-block-start:12px;
margin-block-end:24px