mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 11:41:17 +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
|
|
@ -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