mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
✨ feat: refactor heti css and define basic markdown styles
This commit is contained in:
radishzzz
parent
6e5c1f390e
commit
8810ba6db5
10 changed files with 211 additions and 197 deletions
|
|
@ -42,7 +42,7 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
|
|||
|
||||
### Output
|
||||
|
||||
|
||||
|
||||
|
||||
## Blockquotes
|
||||
|
||||
|
|
@ -53,13 +53,13 @@ The blockquote element represents content that is quoted from another source, op
|
|||
#### Syntax
|
||||
|
||||
```markdown
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.<br>
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.<br>
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
|
@ -188,30 +188,51 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
|
|||
- Milk
|
||||
- Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
## Other Elements
|
||||
|
||||
### Syntax
|
||||
|
||||
```markdown
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format (hover for 2s).
|
||||
|
||||
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
|
||||
|
||||
Students often make some <u title="spelling">speling</u> mistakes (hover for 2s).
|
||||
|
||||
There is <del>nothing</del> no code either good or bad, but running it makes it so.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
```
|
||||
|
||||
### Output
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format (hover for 2s).
|
||||
|
||||
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
|
||||
|
||||
Students often make some <u title="spelling">speling</u> mistakes (hover for 2s).
|
||||
|
||||
There is <del>nothing</del> no code either good or bad, but running it makes it so.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
|
||||
<!-- <details>
|
||||
<summary>
|
||||
I have keys but no doors. I have space but no room. You can enter but can’t
|
||||
leave. What am I?
|
||||
</summary>
|
||||
A keyboard.
|
||||
</details>
|
||||
|
||||
<figure>
|
||||
<img src="https://image.radishzz.cc/picsmaller/03.webp">
|
||||
<figcaption text-center="">Node Modules Inspector - Overview</figcaption>
|
||||
</figure> -->
|
||||
|
|
@ -5,6 +5,7 @@ tags: ["Lu Xun","Modern Literature"]
|
|||
lang: en
|
||||
abbrlink: my-native-heath
|
||||
---
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ tags: ["Lu Xun","Literatura Moderna"]
|
|||
lang: es
|
||||
abbrlink: my-native-heath
|
||||
---
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ tags: ["ろじん","きんだいぶんがく"]
|
|||
lang: ja
|
||||
abbrlink: my-native-heath
|
||||
---
|
||||
|
||||
|
||||
|
||||
わたしは厳寒を冒して、二千余里を隔て二十余年も別れていた故郷に帰って来た。時はもう冬の最中で故郷に近づくに従って天気は小闇くなり、身を切るような風が船室に吹き込んでびゅうびゅうと鳴る。苫の隙間から外を見ると、蒼黄いろい空の下にしめやかな荒村があちこちに横たわっていささかの活気もない。わたしはうら悲しき心の動きが抑え切れなくなった。
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ tags: ["Лу Синь","Современная литература"]
|
|||
lang: ru
|
||||
abbrlink: my-native-heath
|
||||
---
|
||||
|
||||
|
||||
|
||||
Было очень холодно, когда после более чем двадцатилетнего отсутствия я отправился навестить свою родную пустошь, расположенную более чем в двух тысячах ли отсюда.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ tags: ["芥川龍之介","近代文學"]
|
|||
lang: zh-tw
|
||||
abbrlink: rashomon
|
||||
---
|
||||
|
||||
|
||||
|
||||
是一日的傍晚的事。有一個家將，在羅生門下待著雨住。
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ tags: ["芥川龙之介","近代文学"]
|
|||
lang: zh
|
||||
abbrlink: rashomon
|
||||
---
|
||||
|
||||
|
||||
|
||||
是一日的傍晚的事。有一个家将，在罗生门下待著雨住。
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
* Author: Sivan [sun.sivan@gmail.com]
|
||||
*/
|
||||
|
||||
/* Global Styles */
|
||||
.heti {
|
||||
--at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
|
||||
}
|
||||
|
|
@ -12,18 +13,18 @@
|
|||
--at-apply: 'tracking-0';
|
||||
}
|
||||
|
||||
/* 文章标题 */
|
||||
/* Article Title */
|
||||
.heti .post-title {
|
||||
--at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
|
||||
}
|
||||
|
||||
/* 链接 */
|
||||
/* Links */
|
||||
.heti a {
|
||||
--at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
|
||||
--at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
|
||||
}
|
||||
|
||||
/* 段落 */
|
||||
/* Paragraphs */
|
||||
.heti p {
|
||||
--at-apply: 'mt-3 mb-4 text-justify';
|
||||
}
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
--at-apply: 'text-start';
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
/* Headings */
|
||||
.heti h1,
|
||||
.heti h2,
|
||||
.heti h3,
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
--at-apply: 'mt-3';
|
||||
}
|
||||
|
||||
/* 引用 */
|
||||
/* Blockquotes */
|
||||
.heti blockquote {
|
||||
--at-apply: 'mt-3 mb-6 px-4 py-3 rounded';
|
||||
--at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
--at-apply: 'my-2';
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
/* Code Blocks */
|
||||
.heti pre {
|
||||
--at-apply: 'my-3 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/7';
|
||||
--at-apply: 'overflow-auto whitespace-pre scrollbar-hidden';
|
||||
|
|
@ -104,17 +105,17 @@ html.dark .heti pre span {
|
|||
--at-apply: 'text-[var(--shiki-dark)]!';
|
||||
}
|
||||
|
||||
/* 代码 */
|
||||
/* Inline Code */
|
||||
.heti code {
|
||||
--at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/7';
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
/* Horizontal Rules */
|
||||
.heti hr {
|
||||
--at-apply: 'border-secondary/25';
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
/* Lists */
|
||||
.heti ul,
|
||||
.heti ol,
|
||||
.heti dl {
|
||||
|
|
@ -150,16 +151,17 @@ html.dark .heti pre span {
|
|||
--at-apply: 'list-unset';
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
/* Tables */
|
||||
.heti table {
|
||||
--at-apply: 'box-border table-fixed mt-3 mb-6 rounded-md border border-solid border-secondary/40 border-collapse break-words';
|
||||
--at-apply: 'box-border table-fixed mt-3 mb-6 rounded-md break-words';
|
||||
--at-apply: 'border border-solid border-secondary/25 border-collapse';
|
||||
}
|
||||
.heti th,
|
||||
.heti td {
|
||||
--at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
|
||||
}
|
||||
|
||||
/* 缩写 */
|
||||
/* Abbreviations */
|
||||
.heti abbr {
|
||||
--at-apply: 'tracking-0';
|
||||
}
|
||||
|
|
@ -167,7 +169,7 @@ html.dark .heti pre span {
|
|||
--at-apply: 'mx-0.25 pb-0.25 border-dotted border-secondary border-b-1 no-underline cursor-help';
|
||||
}
|
||||
|
||||
/* 上标和下标 */
|
||||
/* Superscript and Subscript */
|
||||
.heti sub,
|
||||
.heti sup {
|
||||
--at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
|
||||
|
|
@ -191,13 +193,13 @@ html.dark .heti sup a:target {
|
|||
--at-apply: 'bg-#4d4a00e0';
|
||||
}
|
||||
|
||||
/* 键盘输入文本 */
|
||||
/* Keyboard Input */
|
||||
.heti kbd {
|
||||
--at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
|
||||
--at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
|
||||
}
|
||||
|
||||
/* 高亮 */
|
||||
/* Highlighted Text */
|
||||
.heti mark {
|
||||
--at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
|
||||
}
|
||||
|
|
@ -205,53 +207,32 @@ html.dark .heti mark {
|
|||
--at-apply: 'bg-#4d4a00e0';
|
||||
}
|
||||
|
||||
/* 脚注 */
|
||||
/* Footnotes */
|
||||
.heti .data-footnote-backref {
|
||||
--at-apply: 'no-underline';
|
||||
}
|
||||
|
||||
.heti figure {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.heti figure > img {
|
||||
display: block;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
|
||||
.heti caption {
|
||||
caption-side: bottom;
|
||||
margin-block-start: 2px;
|
||||
margin-block-end: -4px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* Bold */
|
||||
.heti b,
|
||||
.heti strong {
|
||||
font-weight: 600;
|
||||
--at-apply: 'font-semibold';
|
||||
}
|
||||
|
||||
.heti em {
|
||||
font-weight: 600;
|
||||
}
|
||||
.heti figcaption {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
text-align: start;
|
||||
}
|
||||
/* Italic */
|
||||
.heti i {
|
||||
font-style: italic;
|
||||
}
|
||||
.heti u {
|
||||
padding-block-end: 1px;
|
||||
border-block-end: 1px solid;
|
||||
text-decoration: none;
|
||||
--at-apply: 'font-italic';
|
||||
}
|
||||
|
||||
/* Emphasized */
|
||||
.heti em {
|
||||
--at-apply: 'not-italic font-semibold';
|
||||
}
|
||||
.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
|
||||
.heti em:not(:lang(zh)) {
|
||||
--at-apply: 'italic font-normal';
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
.heti q {
|
||||
quotes: "「" "」" "『" "』";
|
||||
}
|
||||
|
|
@ -260,47 +241,42 @@ html.dark .heti mark {
|
|||
quotes: initial;
|
||||
quotes: auto;
|
||||
}
|
||||
.heti rt {
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.heti small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.heti strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 折叠 */
|
||||
/* .heti summary {
|
||||
padding-inline-start: 1em;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.heti summary::-webkit-details-marker {
|
||||
width: 0.6em;
|
||||
margin-inline-end: 0.4em;
|
||||
} */
|
||||
|
||||
.heti u[title] {
|
||||
cursor: help;
|
||||
border-block-end-width: 3px;
|
||||
border-block-end-style: double;
|
||||
border-block-end-color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.heti dt,
|
||||
.heti em {
|
||||
font-style: normal;
|
||||
}
|
||||
.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
|
||||
.heti dt:not(:lang(zh)),
|
||||
.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
|
||||
.heti em:not(:lang(zh)) {
|
||||
font-style: italic;
|
||||
}
|
||||
.heti del,
|
||||
.heti s,
|
||||
/* Wavy Underline */
|
||||
.heti u {
|
||||
--at-apply: 'mx-0.25 underline decoration-wavy decoration-red underline-offset-4';
|
||||
}
|
||||
|
||||
/* Strikethrough */
|
||||
.heti del,
|
||||
.heti s {
|
||||
--at-apply: 'mx-0.25';
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.heti figure {
|
||||
--at-apply: 'my-6';
|
||||
}
|
||||
.heti figure > figcaption {
|
||||
--at-apply: 'text-center text-sm mt-3 text-secondary/75';
|
||||
}
|
||||
|
||||
/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.heti details {
|
||||
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
|
||||
}
|
||||
.heti details summary {
|
||||
--at-apply: 'cursor-pointer';
|
||||
}
|
||||
.heti details[open] summary {
|
||||
--at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
|
||||
}
|
||||
/* .heti details summary {
|
||||
list-style: none;
|
||||
}
|
||||
.heti details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.heti details summary::marker {
|
||||
content: '';
|
||||
} */
|
||||
Loading…
Add table
Add a link
Reference in a new issue