mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 19:51:07 +02:00
feat: enhance typography and image handling
- Add Heti typography plugin for improved Chinese text layout - Implement rehype plugin to convert images to figure elements with captions - Update UnoCSS configuration by removing typography preset - Modify file extensions for consistency (.mjs to .js) - Add new plugins for admonition, GitHub card, and reading time components - Improve image and text styling with Heti CSS
This commit is contained in:
radishzzz
parent
c549814c7e
commit
9d6de20b6a
19 changed files with 1006 additions and 556 deletions
317
src/styles/heti.css
Normal file
317
src/styles/heti.css
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
/*!
|
||||
* Project:Heti
|
||||
* URL:https://github.com/sivan/heti
|
||||
* Author:Sivan [sun.sivan@gmail.com]
|
||||
*/
|
||||
.heti {
|
||||
max-width:42em;
|
||||
line-height:1.5;
|
||||
overflow-wrap:break-word;
|
||||
word-wrap:break-word;
|
||||
hyphens:auto;
|
||||
letter-spacing:.02em
|
||||
}
|
||||
.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
|
||||
}
|
||||
.heti blockquote {
|
||||
margin-block-start:12px;
|
||||
margin-block-end:24px;
|
||||
margin-inline-start:32px;
|
||||
margin-inline-end:32px;
|
||||
padding-block-start:12px;
|
||||
padding-block-end:12px;
|
||||
padding-inline-start:16px;
|
||||
padding-inline-end:16px;
|
||||
background-color:rgba(0,0,0,.054)
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti blockquote {
|
||||
background-color:rgba(255,255,255,.054)
|
||||
}
|
||||
}
|
||||
.heti img {
|
||||
--at-apply: 'my-12.8';
|
||||
}
|
||||
.heti figure {
|
||||
--at-apply: 'my-12.8 flex flex-col items-center';
|
||||
}
|
||||
.heti figure>img {
|
||||
--at-apply: 'mt-0 mb-4.8';
|
||||
}
|
||||
.heti figure>figcaption {
|
||||
--at-apply: 'opacity-75 w-95% text-center';
|
||||
}
|
||||
.heti hr {
|
||||
width:30%;
|
||||
height:1px;
|
||||
margin-block-start:48px;
|
||||
margin-block-end:47px;
|
||||
margin-inline-start:auto;
|
||||
margin-inline-end:auto;
|
||||
border:0;
|
||||
background-color:#ccc
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti hr {
|
||||
background-color:#404040
|
||||
}
|
||||
}
|
||||
.heti p {
|
||||
margin-block-start:12px;
|
||||
margin-block-end:24px;
|
||||
text-align:justify
|
||||
}
|
||||
.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti p:not(:lang(zh)) {
|
||||
text-align:start
|
||||
}
|
||||
.heti pre {
|
||||
margin-block-start:12px;
|
||||
margin-block-end:12px;
|
||||
margin-inline-start:0;
|
||||
margin-inline-end:0;
|
||||
padding-block-start:12px;
|
||||
padding-block-end:12px;
|
||||
padding-inline-start:16px;
|
||||
padding-inline-end:16px;
|
||||
overflow:auto;
|
||||
white-space:pre;
|
||||
word-wrap:normal;
|
||||
border-radius:4px;
|
||||
background-color:rgba(0,0,0,.054)
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti pre {
|
||||
background-color:rgba(255,255,255,.054)
|
||||
}
|
||||
}.heti pre code {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
background-color:rgba(0,0,0,0);
|
||||
color:inherit
|
||||
}
|
||||
.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti:not(:lang(zh)) {
|
||||
letter-spacing:0
|
||||
}
|
||||
.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 h1 {
|
||||
margin-block-end:24px;
|
||||
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)):not(:lang(ja)):not(:lang(ko)),.heti h1:not(:lang(zh)),.heti h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti h2:not(:lang(zh)),.heti h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.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
|
||||
}
|
||||
.heti ul,.heti ol {
|
||||
padding-inline-start:32px
|
||||
}
|
||||
.heti ul ul,.heti ul ol,.heti ol ul,.heti ol ol {
|
||||
margin-block-start:0;
|
||||
margin-block-end:0
|
||||
}
|
||||
.heti ul {
|
||||
list-style-type:disc
|
||||
}
|
||||
.heti ol {
|
||||
list-style-type:decimal
|
||||
}
|
||||
.heti ul ul,.heti ol ul {
|
||||
list-style-type:circle
|
||||
}
|
||||
.heti ul ul ul,.heti ul ol ul,.heti ol ul ul,.heti ol ol ul {
|
||||
list-style-type:square
|
||||
}
|
||||
.heti li {
|
||||
list-style-type:unset
|
||||
}
|
||||
.heti table {
|
||||
box-sizing:border-box;
|
||||
table-layout:fixed;
|
||||
margin-block-start:12px;
|
||||
margin-block-end:24px;
|
||||
margin-inline-start:auto;
|
||||
margin-inline-end:auto;
|
||||
border-collapse:collapse;
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
border-color:#ccc;
|
||||
word-break:break-word
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti table {
|
||||
border-color:#404040
|
||||
}
|
||||
}.heti th,.heti td {
|
||||
padding-block-start:6px;
|
||||
padding-block-end:6px;
|
||||
padding-inline-start:8px;
|
||||
padding-inline-end:8px;
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
border-color:#ccc
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti th,.heti td {
|
||||
border-color:#404040
|
||||
}
|
||||
}.heti caption {
|
||||
caption-side:bottom;
|
||||
margin-block-start:2px;
|
||||
margin-block-end:-4px;
|
||||
font-size:14px;
|
||||
line-height:24px
|
||||
}
|
||||
.heti b,.heti strong {
|
||||
font-weight:600
|
||||
}
|
||||
.heti code {
|
||||
margin-inline-start:.25em;
|
||||
margin-inline-end:.25em;
|
||||
font-size:.875em
|
||||
}
|
||||
.heti dfn {
|
||||
font-weight:600
|
||||
}
|
||||
.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti dfn:not(:lang(zh)) {
|
||||
font-weight:400
|
||||
}
|
||||
.heti em {
|
||||
font-weight:600
|
||||
}
|
||||
.heti figcaption {
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
font-size:14px;
|
||||
text-align:start
|
||||
}
|
||||
.heti i {
|
||||
font-style:italic
|
||||
}
|
||||
.heti ins,.heti u {
|
||||
padding-block-end:1px;
|
||||
border-block-end:1px solid;
|
||||
text-decoration:none
|
||||
}
|
||||
.heti mark {
|
||||
padding-block-start:2px;
|
||||
padding-block-end:2px;
|
||||
padding-inline-start:1px;
|
||||
padding-inline-end:1px;
|
||||
margin-inline-start:1px;
|
||||
margin-inline-end:1px;
|
||||
background-color:rgba(255,247,0,.88);
|
||||
color:inherit
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti mark {
|
||||
background-color:rgba(77,74,0,.88)
|
||||
}
|
||||
}.heti q {
|
||||
quotes:"「" "」" "『" "』"
|
||||
}
|
||||
.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti q:not(:lang(zh)) {
|
||||
quotes:initial;
|
||||
quotes:auto
|
||||
}
|
||||
.heti rt {
|
||||
font-size:.875em;
|
||||
font-weight:400
|
||||
}
|
||||
.heti small {
|
||||
font-size:.875em
|
||||
}
|
||||
.heti strong {
|
||||
font-weight:600
|
||||
}
|
||||
.heti sub,.heti sup {
|
||||
position:relative;
|
||||
margin-inline-start:.25em;
|
||||
margin-inline-end:.25em;
|
||||
font-size:.75em;
|
||||
font-style:normal;
|
||||
line-height:1;
|
||||
vertical-align:baseline
|
||||
}
|
||||
.heti sub {
|
||||
bottom:-0.25em
|
||||
}
|
||||
.heti sup {
|
||||
top:-0.5em
|
||||
}
|
||||
.heti sup:target,.heti sup a:target {
|
||||
background-color:#dbedff
|
||||
}
|
||||
@media(prefers-color-scheme:dark) {
|
||||
.heti sup:target,.heti sup a:target {
|
||||
background-color:#3a6188
|
||||
}
|
||||
}.heti summary {
|
||||
padding-inline-start:1em;
|
||||
outline:0;
|
||||
cursor:pointer
|
||||
}
|
||||
.heti summary::-webkit-details-marker {
|
||||
width:.6em;
|
||||
margin-inline-end:.4em
|
||||
}
|
||||
.heti address,.heti cite,.heti dfn,.heti dt,.heti em {
|
||||
font-style:normal
|
||||
}
|
||||
.heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti address:not(:lang(zh)),.heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti cite:not(:lang(zh)),.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),.heti dfn:not(:lang(zh)),.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 .heti del,.heti ins,.heti s,.heti u {
|
||||
margin-inline-start:1px;
|
||||
margin-inline-end:1px
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue