mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
🎨 style: optimize heti css styles
This commit is contained in:
radishzzz
parent
67525c3e41
commit
af6b45becf
2 changed files with 52 additions and 69 deletions
|
|
@ -12,10 +12,6 @@ body {
|
|||
--at-apply: 'ios-flash-fix';
|
||||
}
|
||||
|
||||
article.heti img {
|
||||
--at-apply: 'cursor-zoom-in force-gpu';
|
||||
}
|
||||
|
||||
/* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
::view-transition-new(theme-transition) {
|
||||
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
/* Images */
|
||||
.heti :where(img) {
|
||||
--at-apply: 'mx-auto my-5';
|
||||
--at-apply: 'mx-auto my-5 cursor-zoom-in force-gpu';
|
||||
}
|
||||
.heti :where(figure) {
|
||||
--at-apply: 'mx-auto my-5';
|
||||
|
|
@ -111,11 +111,6 @@
|
|||
--at-apply: 'tracking-0';
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.heti :where(blockquote) {
|
||||
--at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.heti :where(pre) {
|
||||
--at-apply: 'overflow-auto mb-4 p-4 rounded bg-secondary/5! border border-solid border-secondary/5';
|
||||
|
|
@ -142,9 +137,24 @@ html.dark .heti pre :where(span) {
|
|||
direction: rtl;
|
||||
}
|
||||
|
||||
/* Horizontal Rules */
|
||||
.heti :where(hr) {
|
||||
--at-apply: 'my-6 border-t-2 border-secondary/25';
|
||||
/* Blockquotes */
|
||||
.heti :where(blockquote) {
|
||||
--at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.heti :where(table) {
|
||||
--at-apply: 'block box-border table-fixed max-w-full mb-4 overflow-x-auto scrollbar-hidden';
|
||||
}
|
||||
.heti :where(table)::-webkit-scrollbar {
|
||||
--at-apply: 'hidden';
|
||||
}
|
||||
.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';
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
|
@ -178,33 +188,10 @@ html.dark .heti pre :where(span) {
|
|||
--at-apply: 'list-unset mt-0.25em';
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.heti :where(table) {
|
||||
--at-apply: 'block box-border table-fixed w-full max-w-full mt-3 mb-6 overflow-x-auto break-words scrollbar-hidden';
|
||||
}
|
||||
.heti :where(table)::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.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) {
|
||||
--at-apply: 'tracking-0';
|
||||
}
|
||||
.heti :where(abbr[title]) {
|
||||
--at-apply: 'mx-0.25 pb-0.25 border-dotted border-secondary border-b-1 no-underline cursor-help';
|
||||
}
|
||||
|
||||
/* Superscript and Subscript */
|
||||
/* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.heti :where(sub),
|
||||
.heti :where(sup) {
|
||||
--at-apply: 'mx-0.1em relative text-0.75em leading-1 align-baseline';
|
||||
--at-apply: 'relative mx-0.1em text-0.75em leading-1 align-baseline';
|
||||
}
|
||||
.heti :where(sub) {
|
||||
--at-apply: 'bottom--0.25em';
|
||||
|
|
@ -225,15 +212,28 @@ html.dark .heti sup a:target {
|
|||
--at-apply: 'bg-#4d4a00e0';
|
||||
}
|
||||
|
||||
/* Abbreviations */
|
||||
.heti :where(abbr[title]) {
|
||||
--at-apply: 'pb-0.06em border-b-1 border-dotted border-secondary no-underline cursor-help';
|
||||
}
|
||||
|
||||
/* Wavy Underline */
|
||||
.heti :where(u) {
|
||||
--at-apply: 'underline underline-offset-0.25em decoration-wavy decoration-red';
|
||||
}
|
||||
html.dark .heti :where(u) {
|
||||
--at-apply: 'decoration-#A14F50';
|
||||
}
|
||||
|
||||
/* Keyboard Input */
|
||||
.heti :where(kbd) {
|
||||
--at-apply: 'rounded border border-solid border-secondary/40 text-secondary tracking-0';
|
||||
--at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
|
||||
--at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-0 whitespace-nowrap';
|
||||
--at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
|
||||
}
|
||||
|
||||
/* Highlighted Text */
|
||||
.heti :where(mark) {
|
||||
--at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
|
||||
--at-apply: 'mx-0.06em p-0.06em text-inherit bg-#ff0';
|
||||
}
|
||||
html.dark .heti :where(mark) {
|
||||
--at-apply: 'bg-#4d4a00e0';
|
||||
|
|
@ -242,31 +242,31 @@ html.dark .heti :where(mark) {
|
|||
/* Footnotes */
|
||||
.footnotes > h2,
|
||||
.footnotes > h3 {
|
||||
display: none;
|
||||
--at-apply: 'hidden';
|
||||
}
|
||||
.footnotes:lang(zh-CN)::before {
|
||||
content: "脚注";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
|
||||
}
|
||||
.footnotes:lang(zh-TW)::before {
|
||||
content: "腳註";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
|
||||
}
|
||||
.footnotes:lang(ja)::before {
|
||||
content: "脚注";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
|
||||
}
|
||||
.footnotes:lang(en)::before {
|
||||
content: "Footnotes";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
|
||||
}
|
||||
.footnotes:lang(es)::before {
|
||||
content: "Notas al pie";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
|
||||
}
|
||||
.footnotes:lang(ru)::before {
|
||||
content: "Сноски";
|
||||
--at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
|
||||
--at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
|
||||
}
|
||||
.heti :where(.data-footnote-backref) {
|
||||
--at-apply: 'no-underline';
|
||||
|
|
@ -275,15 +275,10 @@ html.dark .heti :where(mark) {
|
|||
/* Bold */
|
||||
.heti :where(b),
|
||||
.heti :where(strong) {
|
||||
--at-apply: 'font-semibold';
|
||||
--at-apply: 'font-bold';
|
||||
}
|
||||
|
||||
/* Italic */
|
||||
.heti :where(i) {
|
||||
--at-apply: 'font-italic';
|
||||
}
|
||||
|
||||
/* Emphasized */
|
||||
.heti :where(em) {
|
||||
--at-apply: 'italic';
|
||||
}
|
||||
|
|
@ -297,18 +292,9 @@ html.dark .heti :where(mark) {
|
|||
quotes: auto;
|
||||
}
|
||||
|
||||
/* Wavy Underline */
|
||||
.heti :where(u) {
|
||||
--at-apply: 'mx-0.25 underline decoration-wavy decoration-red underline-offset-4';
|
||||
}
|
||||
html.dark .heti :where(u) {
|
||||
--at-apply: 'decoration-#A14F50';
|
||||
}
|
||||
|
||||
/* Strikethrough */
|
||||
.heti :where(del),
|
||||
.heti :where(s) {
|
||||
--at-apply: 'mx-0.25';
|
||||
/* Horizontal Rules */
|
||||
.heti :where(hr) {
|
||||
--at-apply: 'my-6 border-t-2 border-secondary/25';
|
||||
}
|
||||
|
||||
/* KaTeX Mathematical */
|
||||
|
|
@ -319,8 +305,8 @@ html.dark .heti :where(u) {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
.heti :where(details) {
|
||||
/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
|
||||
/* .heti :where(details) {
|
||||
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
|
||||
}
|
||||
.heti details :where(summary) {
|
||||
|
|
@ -328,7 +314,8 @@ html.dark .heti :where(u) {
|
|||
}
|
||||
.heti details[open] :where(summary) {
|
||||
--at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
|
||||
}
|
||||
} */
|
||||
|
||||
/* .heti details :where(summary) {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue