refactor: heti style

This commit is contained in:
radishzzz 2025-04-17 01:00:26 +01:00
parent 4ff44f9ac4
commit fd8cc74627
5 changed files with 137 additions and 141 deletions

View file

@ -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) {