🎨 style: optimize heti css styles

This commit is contained in:
radishzzz 2025-04-21 19:18:45 +01:00
parent 85a629b4ee
commit 5408676c64
23 changed files with 63 additions and 130 deletions

View file

@ -113,8 +113,6 @@ All commands are run from the root of the project, from a terminal:
## Star History
Thank you to everyone who has starred this project. Your support motivates me to keep maintaining it!
<p align="center">
<a href="https://star-history.com/#radishzzz/astro-theme-retypeset&Date">
<picture>

View file

@ -85,7 +85,7 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
- Retypeset 会不定期发布 [新功能](https://github.com/radishzzz/astro-theme-retypeset/issues/18),更新方法如下。
- 参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork),在仓库中执行 `Sync fork` 同步复刻
- 参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork),在仓库中执行 `Sync fork` 同步最新分支
- 不要点击 `Discard Changes`,否则会丢失你的更改。

View file

@ -13,8 +13,7 @@ const currentUI = ui[currentLang as keyof typeof ui]
const { headings = [] } = Astro.props
const filteredHeadings = headings.filter(heading =>
heading.depth >= 2
&& heading.depth <= 4
&& heading.text !== 'Footnotes',
&& heading.depth <= 4,
)
---

View file

@ -14,7 +14,7 @@ Retypeset 是一款基于 Astro 框架的静态博客主题,中文名为重新
去年入坑博客以后,就很喜欢刷别人的博客。一来是可以看看别人的博客主题,二来是能刷到别人分享的故事。
![活版印字](https://image.radishzz.cc/birth-of-retypeset/typograph.webp)
![_活版印字](https://image.radishzz.cc/birth-of-retypeset/typograph.webp)
几个月前,我偶然在 V2 刷到 [活版印字](https://astro-theme-typography.vercel.app/) 这个主题,简约的风格直接戳中我的审美。再加上之前的 Hexo 博客性能太差,我一直想换来着,于是就决定迁移博客到这个主题。

View file

@ -8,7 +8,7 @@ lang: en
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
It was bitter cold as I set forth, after an absence of more than twenty years, on a visit to my native heath over two thousand li away.

View file

@ -8,7 +8,7 @@ lang: es
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
Hacía un frío glacial cuando, tras una ausencia de más de veinte años, partí para visitar mi páramo natal, a más de dos mil li de distancia.

View file

@ -8,7 +8,7 @@ lang: ja
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
わたしは厳寒を冒して、二千余里を隔て二十余年も別れていた故郷に帰って来た。時はもう冬の最中で故郷に近づくに従って天気は小闇くなり、身を切るような風が船室に吹き込んでびゅうびゅうと鳴る。苫の隙間から外を見ると、蒼黄いろい空の下にしめやかな荒村があちこちに横たわっていささかの活気もない。わたしはうら悲しき心の動きが抑え切れなくなった。

View file

@ -8,7 +8,7 @@ lang: ru
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
Было очень холодно, когда после более чем двадцатилетнего отсутствия я отправился навестить свою родную пустошь, расположенную более чем в двух тысячах ли отсюда.

View file

@ -8,7 +8,7 @@ lang: zh-tw
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
我冒了嚴寒,回到相隔二千餘里,別了二十餘年的故鄉去。

View file

@ -8,7 +8,7 @@ lang: zh
abbrlink: my-native-heath
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/03.webp)
我冒了严寒,回到相隔二千馀里,别了二十馀年的故乡去。

View file

@ -8,7 +8,7 @@ lang: en
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
It happened in the evening of one day. There was a retainer who was waiting for the rain under Rashomon.

View file

@ -8,7 +8,7 @@ lang: es
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
Ocurrió al anochecer de un día. Había un sirviente que estaba esperando la lluvia bajo Rashomon.

View file

@ -8,7 +8,7 @@ lang: ja
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
或日の暮方の事である。一人の下人が、羅生門の下で雨やみを待つてゐた。

View file

@ -8,7 +8,7 @@ lang: ru
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
Это произошло вечером одного дня. Под Расёмоном находился слуга, ожидавший дождя.

View file

@ -8,7 +8,7 @@ lang: zh-tw
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
是一日的傍晚的事。有一個家將,在羅生門下待著雨住。

View file

@ -8,7 +8,7 @@ lang: zh
abbrlink: rashomon
---
![Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
![_Here's the description of the picture](https://image.radishzz.cc/picsmaller/06.webp)
是一日的傍晚的事。有一个家将,在罗生门下待著雨住。

View file

@ -119,7 +119,6 @@ To add a table, use three or more hyphens `---` to create each columns header
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
| _italics_ | **bold** | `code` |
| _italics_ | **bold** | `code` |
```
### Output
@ -128,7 +127,6 @@ To add a table, use three or more hyphens `---` to create each columns header
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
| _italics_ | **bold** | `code` |
| _italics_ | **bold** | `code` |
## Code Blocks

View file

@ -119,7 +119,6 @@ Para agregar una tabla, use tres o más guiones `---` para crear el encabezado d
| --------- | ----------- | -------- |
| _cursiva_ | **negrita** | `código` |
| _cursiva_ | **negrita** | `código` |
| _cursiva_ | **negrita** | `código` |
```
### Resultado
@ -128,7 +127,6 @@ Para agregar una tabla, use tres o más guiones `---` para crear el encabezado d
| --------- | ----------- | -------- |
| _cursiva_ | **negrita** | `código` |
| _cursiva_ | **negrita** | `código` |
| _cursiva_ | **negrita** | `código` |
## Bloques de Código

View file

@ -119,7 +119,6 @@ abbrlink: markdown-style-guide
| ---------- | ------- | ------- |
| _イタリック_ | **太字** | `コード` |
| _イタリック_ | **太字** | `コード` |
| _イタリック_ | **太字** | `コード` |
```
### 効果
@ -128,7 +127,6 @@ abbrlink: markdown-style-guide
| ---------- | ------- | ------- |
| _イタリック_ | **太字** | `コード` |
| _イタリック_ | **太字** | `コード` |
| _イタリック_ | **太字** | `コード` |
## コードブロック

View file

@ -119,7 +119,6 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
| ---------- | ----------- | ------ |
| урсив_ | **жирный** | `код` |
| урсив_ | **жирный** | `код` |
| урсив_ | **жирный** | `код` |
```
### Результат
@ -128,7 +127,6 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
| ---------- | ----------- | ------ |
| урсив_ | **жирный** | `код` |
| урсив_ | **жирный** | `код` |
| урсив_ | **жирный** | `код` |
## Блоки кода

View file

@ -119,7 +119,6 @@ abbrlink: markdown-style-guide
| ----- | -------- | ------- |
| _斜體_ | **粗體** | `程式碼` |
| _斜體_ | **粗體** | `程式碼` |
| _斜體_ | **粗體** | `程式碼` |
```
### 效果
@ -128,7 +127,6 @@ abbrlink: markdown-style-guide
| ------ | ------- | ------- |
| _斜體_ | **粗體** | `程式碼` |
| _斜體_ | **粗體** | `程式碼` |
| _斜體_ | **粗體** | `程式碼` |
## 程式碼區塊

View file

@ -119,7 +119,6 @@ abbrlink: markdown-style-guide
| ----- | ------- | ------ |
| _斜体_ | **粗体** | `代码` |
| _斜体_ | **粗体** | `代码` |
| _斜体_ | **粗体** | `代码` |
```
### 效果
@ -128,7 +127,6 @@ abbrlink: markdown-style-guide
| ----- | -------- | ----- |
| _斜体_ | **粗体** | `代码` |
| _斜体_ | **粗体** | `代码` |
| _斜体_ | **粗体** | `代码` |
## 代码块

View file

@ -6,48 +6,26 @@
/* Global Styles */
.heti {
--at-apply: 'break-words leading-1.55em tracking-0.02em hyphens-auto';
--at-apply: 'break-words leading-1.5em tracking-0.02em hyphens-auto';
}
.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
--at-apply: 'leading-1.5em tracking-0';
--at-apply: 'tracking-0';
}
/* Article Title */
.heti .post-title {
--at-apply: 'mb-2 text-9 leading-12 font-bold text-balance c-primary';
--at-apply: 'mb-2 text-8.6 leading-12 font-bold c-primary lg:text-9';
}
/* Links */
.heti :where(a) {
--at-apply: 'break-all font-medium tracking-0 underline decoration-secondary/40 underline-0.075em underline-offset-0.2em';
--at-apply: 'break-all font-medium tracking-0 underline decoration-secondary/40 underline-0.075em underline-offset-0.14em';
--at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
}
/* Images */
.heti :where(img) {
--at-apply: 'mx-auto my-5 cursor-zoom-in force-gpu';
}
.heti :where(figure) {
--at-apply: 'mx-auto my-5';
}
.heti figure > :where(img) {
--at-apply: 'my-0';
}
.heti figure > :where(figcaption) {
--at-apply: 'text-center text-sm mt-3 text-secondary/80';
}
.heti :where(h1 + p > img:first-child),
.heti :where(h2 + p > img:first-child),
.heti :where(h3 + p > img:first-child),
.heti :where(h4 + p > img:first-child),
.heti :where(h5 + p > img:first-child),
.heti :where(h6 + p > img:first-child) {
--at-apply: 'mt-4';
}
/* Paragraphs */
.heti :where(p) {
--at-apply: 'mb-4 text-justify';
--at-apply: 'mt-3 mb-6 text-justify text-pretty';
}
.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
--at-apply: 'text-start';
@ -60,7 +38,7 @@
.heti :where(h4),
.heti :where(h5),
.heti :where(h6) {
--at-apply: 'mt-6 mb-4 font-bold';
--at-apply: 'mt-6 mb-3 font-semibold';
}
.heti :where(h1) {
--at-apply: 'text-8 leading-12';
@ -80,6 +58,16 @@
.heti :where(h6) {
--at-apply: 'text-3.5 leading-6';
}
.heti :where(h1),
.heti :where(h2),
.heti :where(h3) {
--at-apply: 'text-pretty tracking-0.05em';
}
.heti :where(h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
.heti :where(h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
.heti :where(h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
--at-apply: 'text-balance tracking-0';
}
.heti :where(h1 + h2),
.heti :where(h2 + h3),
.heti :where(h3 + h4),
@ -87,36 +75,24 @@
.heti :where(h5 + h6) {
--at-apply: 'mt-3';
}
.heti :where(h1:has(+ h2)),
.heti :where(h2:has(+ h3)),
.heti :where(h3:has(+ h4)),
.heti :where(h4:has(+ h5)),
.heti :where(h5:has(+ h6)),
.heti :where(h1:has(+ p)),
.heti :where(h2:has(+ p)),
.heti :where(h3:has(+ p)),
.heti :where(h4:has(+ p)),
.heti :where(h5:has(+ p)),
.heti :where(h6:has(+ p)) {
--at-apply: 'mb-3';
/* Images */
.heti :where(img) {
--at-apply: 'mx-auto cursor-zoom-in force-gpu';
}
.heti :where(h1),
.heti :where(h2),
.heti :where(h3) {
--at-apply: 'tracking-0.05em';
.heti :where(figure) {
--at-apply: 'mx-auto mt-3 mb-6';
}
.heti :where(h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
.heti :where(h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
.heti :where(h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
--at-apply: 'tracking-0';
.heti figure > :where(figcaption) {
--at-apply: 'text-center text-sm mt-3 text-secondary/80';
}
/* Code Blocks */
.heti :where(pre) {
--at-apply: 'overflow-auto mb-4 p-4 rounded bg-secondary/5! border border-solid border-secondary/5';
--at-apply: 'overflow-auto mt-3 mb-6 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/5';
}
.heti pre :where(code) {
--at-apply: 'p-0 border-none bg-transparent tracking-0 whitespace-pre';
--at-apply: 'p-0 border-none bg-transparent whitespace-pre';
}
html.dark .heti pre :where(span) {
--at-apply: 'text-[var(--shiki-dark)]!';
@ -131,7 +107,7 @@ html.dark .heti pre :where(span) {
--at-apply: 'relative pl-8';
}
.heti :where(code) span.line::before {
--at-apply: 'absolute left-0 w-4 leading-1.95em text-secondary/40 align-bottom';
--at-apply: 'absolute left-0 w-4 leading-1.9em text-secondary/40';
content: counter(line);
counter-increment: line;
direction: rtl;
@ -139,12 +115,12 @@ html.dark .heti pre :where(span) {
/* Blockquotes */
.heti :where(blockquote) {
--at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
--at-apply: 'mt-3 mb-6 px-4 c-secondary/80 border-l-4 border-solid border-secondary/25';
}
/* Tables */
.heti :where(table) {
--at-apply: 'block box-border table-fixed max-w-full mb-4 overflow-x-auto scrollbar-hidden';
--at-apply: 'mt-3 mb-6 block box-border table-fixed max-w-full overflow-x-auto scrollbar-hidden';
}
.heti :where(table)::-webkit-scrollbar {
--at-apply: 'hidden';
@ -153,20 +129,20 @@ html.dark .heti pre :where(span) {
.heti :where(td) {
--at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
}
.heti :where(tbody tr:nth-child(even)) {
.heti :where(th) {
--at-apply: 'bg-secondary/5';
}
/* Lists */
.heti :where(ul),
.heti :where(ol) {
--at-apply: 'mb-4 pl-2em';
--at-apply: 'mt-3 mb-6 pl-2em';
}
.heti ul :where(ul),
.heti ul :where(ol),
.heti ol :where(ul),
.heti ol :where(ol) {
--at-apply: 'mb-0.25em';
--at-apply: 'mt-0 mb-0.25em';
}
.heti :where(ul) {
--at-apply: 'list-disc';
@ -199,22 +175,10 @@ html.dark .heti pre :where(span) {
.heti :where(sup) {
--at-apply: 'top--0.5em';
}
.heti sub :where(a),
.heti sup :where(a) {
--at-apply: 'no-underline';
}
.heti sup:target,
.heti sup a:target {
--at-apply: 'bg-#ff0';
}
html.dark .heti sup:target,
html.dark .heti sup a:target {
--at-apply: 'bg-#4d4a00e0';
}
/* Abbreviations */
.heti :where(abbr[title]) {
--at-apply: 'pb-0.06em border-b-1 border-dotted border-secondary no-underline cursor-help';
--at-apply: 'pb-0.25 border-b-1 border-dotted border-secondary no-underline cursor-help';
}
/* Wavy Underline */
@ -233,40 +197,24 @@ html.dark .heti :where(u) {
/* Highlighted Text */
.heti :where(mark) {
--at-apply: 'py-0.06em text-inherit bg-#ff0';
--at-apply: 'py-0.25 text-inherit bg-#fff700e0';
}
html.dark .heti :where(mark) {
--at-apply: 'bg-#4d4a00e0';
}
/* Footnotes */
.footnotes > h2,
.footnotes > h3 {
--at-apply: 'hidden';
.heti sub :where(a),
.heti sup :where(a) {
--at-apply: 'no-underline';
}
.footnotes:lang(zh-CN)::before {
content: "脚注";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold tracking-0.05em';
.heti sup:target,
.heti sup a:target {
--at-apply: 'bg-#ff0';
}
.footnotes:lang(zh-TW)::before {
content: "腳註";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold tracking-0.05em';
}
.footnotes:lang(ja)::before {
content: "脚注";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold tracking-0.05em';
}
.footnotes:lang(en)::before {
content: "Footnotes";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold';
}
.footnotes:lang(es)::before {
content: "Notas al pie";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold';
}
.footnotes:lang(ru)::before {
content: "Сноски";
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-bold';
html.dark .heti sup:target,
html.dark .heti sup a:target {
--at-apply: 'bg-#4d4a00e0';
}
.heti :where(.data-footnote-backref) {
--at-apply: 'no-underline';
@ -275,7 +223,7 @@ html.dark .heti :where(mark) {
/* Bold */
.heti :where(b),
.heti :where(strong) {
--at-apply: 'font-bold';
--at-apply: 'font-semibold';
}
/* Italic */
@ -294,7 +242,7 @@ html.dark .heti :where(mark) {
/* Horizontal Rules */
.heti :where(hr) {
--at-apply: 'my-6 border-t-2 border-secondary/25';
--at-apply: 'mt-6 mb-3 border-t-2 border-secondary/25';
}
/* KaTeX Mathematical */