mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
refactor: a part of heti css style
This commit is contained in:
radishzzz
parent
0f63770b69
commit
608bb0045f
13 changed files with 136 additions and 99 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
|
||||
|
|
|
|||
|
|
@ -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/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
|
||||
|
|
|
|||
|
|
@ -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/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
|
||||
|
|
|
|||
|
|
@ -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/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
|
||||
|
|
|
|||
|
|
@ -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/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue