mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
refactor: heti style
This commit is contained in:
parent
4ff44f9ac4
commit
fd8cc74627
5 changed files with 137 additions and 141 deletions
|
@ -6,26 +6,26 @@
|
|||
|
||||
/* Global Styles */
|
||||
.heti {
|
||||
--at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
|
||||
--at-apply: 'break-words leading-1.55em tracking-0.02em hyphens-auto';
|
||||
}
|
||||
.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
|
||||
--at-apply: 'tracking-0';
|
||||
--at-apply: 'leading-1.5em tracking-0';
|
||||
}
|
||||
|
||||
/* Article Title */
|
||||
.heti .post-title {
|
||||
--at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
|
||||
--at-apply: 'mb-2 text-9 leading-12 font-bold text-balance c-primary';
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.heti :where(a) {
|
||||
--at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.1em lg:underline-0.1em';
|
||||
--at-apply: 'font-medium transition-colors break-all tracking-0 hover:(c-primary decoration-secondary/80) ';
|
||||
--at-apply: 'break-all font-medium tracking-0 underline decoration-secondary/40 underline-0.075em underline-offset-0.2em';
|
||||
--at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
.heti :where(p) {
|
||||
--at-apply: 'mt-3 mb-4 text-justify';
|
||||
--at-apply: 'mb-4 text-justify';
|
||||
}
|
||||
.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
|
||||
--at-apply: 'text-start';
|
||||
|
@ -38,7 +38,7 @@
|
|||
.heti :where(h4),
|
||||
.heti :where(h5),
|
||||
.heti :where(h6) {
|
||||
--at-apply: 'mt-6 mb-3 font-semibold';
|
||||
--at-apply: 'mt-6 mb-4 font-bold';
|
||||
}
|
||||
.heti :where(h1) {
|
||||
--at-apply: 'text-8 leading-12';
|
||||
|
@ -75,26 +75,26 @@
|
|||
.heti :where(h5 + h6) {
|
||||
--at-apply: 'mt-3';
|
||||
}
|
||||
.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';
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.heti :where(blockquote) {
|
||||
--at-apply: 'mt-3 mb-6 px-4 py-3 rounded';
|
||||
--at-apply: 'border-l-4 border-solid border-secondary/40 bg-secondary/5';
|
||||
}
|
||||
.heti blockquote :where(blockquote) {
|
||||
--at-apply: 'my-3';
|
||||
}
|
||||
.heti blockquote :where(p) {
|
||||
--at-apply: 'my-2';
|
||||
--at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.heti :where(pre) {
|
||||
--at-apply: 'mt-3 mb-4 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/5';
|
||||
--at-apply: 'overflow-auto whitespace-pre';
|
||||
--at-apply: 'overflow-auto mb-4 p-4 rounded bg-secondary/5! border border-solid border-secondary/5';
|
||||
}
|
||||
.heti pre :where(code) {
|
||||
--at-apply: 'p-0 bg-secondary/0 tracking-0 border-none';
|
||||
--at-apply: 'p-0 border-none bg-transparent tracking-0 whitespace-pre';
|
||||
}
|
||||
html.dark .heti pre :where(span) {
|
||||
--at-apply: 'text-[var(--shiki-dark)]!';
|
||||
|
@ -102,14 +102,14 @@ html.dark .heti pre :where(span) {
|
|||
|
||||
/* Inline Code */
|
||||
.heti :where(code) {
|
||||
--at-apply: 'px-1 py-0.5 bg-secondary/7 rounded text-0.85em border border-solid border-secondary/5 break-all tracking-0';
|
||||
--at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 whitespace-pre-wrap rounded bg-secondary/5 border border-solid border-secondary/5';
|
||||
counter-reset: line;
|
||||
}
|
||||
.heti :where(code) span.line {
|
||||
--at-apply: 'relative pl-8';
|
||||
}
|
||||
.heti :where(code) span.line::before {
|
||||
--at-apply: 'text-secondary/40 w-4 absolute left-0 leading-1.95em align-bottom';
|
||||
--at-apply: 'absolute left-0 w-4 leading-1.95em text-secondary/40 align-bottom';
|
||||
content: counter(line);
|
||||
counter-increment: line;
|
||||
direction: rtl;
|
||||
|
@ -117,24 +117,19 @@ html.dark .heti pre :where(span) {
|
|||
|
||||
/* Horizontal Rules */
|
||||
.heti :where(hr) {
|
||||
--at-apply: 'border-secondary/25';
|
||||
--at-apply: 'my-6 border-t-2 border-secondary/25';
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.heti :where(ul),
|
||||
.heti :where(ol),
|
||||
.heti :where(dl) {
|
||||
--at-apply: 'mt-3 mb-6';
|
||||
}
|
||||
.heti :where(ul),
|
||||
.heti :where(ol) {
|
||||
--at-apply: 'pl-8';
|
||||
--at-apply: 'mb-4 pl-2em';
|
||||
}
|
||||
.heti ul :where(ul),
|
||||
.heti ul :where(ol),
|
||||
.heti ol :where(ul),
|
||||
.heti ol :where(ol) {
|
||||
--at-apply: 'my-0';
|
||||
--at-apply: 'mb-0.25em';
|
||||
}
|
||||
.heti :where(ul) {
|
||||
--at-apply: 'list-disc';
|
||||
|
@ -153,7 +148,7 @@ html.dark .heti pre :where(span) {
|
|||
--at-apply: 'list-square';
|
||||
}
|
||||
.heti :where(li) {
|
||||
--at-apply: 'list-unset';
|
||||
--at-apply: 'list-unset mt-0.25em';
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
@ -163,13 +158,13 @@ html.dark .heti pre :where(span) {
|
|||
.heti :where(table)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.heti :where(th) {
|
||||
--at-apply: 'bg-secondary/5';
|
||||
}
|
||||
.heti :where(th),
|
||||
.heti :where(td) {
|
||||
--at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
|
||||
}
|
||||
.heti :where(tbody tr:nth-child(even)) {
|
||||
--at-apply: 'bg-secondary/5';
|
||||
}
|
||||
|
||||
/* Abbreviations */
|
||||
.heti :where(abbr) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue