Created
July 16, 2025 07:11
-
-
Save mywaiting/0aa360d4d5d1e12c62911b0025434278 to your computer and use it in GitHub Desktop.
可以直接用于小型网站如 个人博客/blog 的基础/通用 css 样式,不带任何的 id/class 选择器,全局支持 css 变量,支持颜色主题,有良好的打印样式,顺便还按照 Github 官方的 markdown 输出样式微调了正文使用的 css 样式,堪称完美
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! (c) mywaiting */ | |
:root { | |
--color-bg: #ffffff; | |
--color-text: #222222; | |
--color-link: #0366d6; | |
--color-code-bg: #f6f8fa; | |
--color-border: #dddddd; | |
--color-quote-border: #cccccc; | |
--color-quote-text: #555555; | |
--font-base: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; | |
--font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; | |
--max-width: 45rem; /* 720px */ | |
--line-height: 1.15; | |
} | |
@media (prefers-color-scheme: dark) { | |
:root { | |
--color-bg: #1e1e1e; | |
--color-text: #dddddd; | |
--color-link: #58a6ff; | |
--color-code-bg: #2d2d2d; | |
--color-border: #444444; | |
--color-quote-border: #555555; | |
--color-quote-text: #aaaaaa; | |
} | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
html { | |
font-size: 16px; /* 1rem=16px */ | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
font-family: var(--font-base); | |
font-size: 1rem; | |
line-height: var(--line-height); | |
color: var(--color-text); | |
background-color: var(--color-bg); | |
word-wrap: break-word; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-weight: 600; | |
line-height: 1.25; | |
margin-top: 1.5rem; | |
margin-bottom: 1rem; | |
} | |
h1 { font-size: 2.25rem; } /* 36px */ | |
h2 { font-size: 1.75rem; } /* 28px */ | |
h3 { font-size: 1.5rem; } /* 24px */ | |
h4 { font-size: 1.25rem; } /* 20px */ | |
h5, h6 { font-size: 1rem; } /* 16px */ | |
p { margin: 1rem 0; } | |
small { | |
font-size: var(--font-size-small); | |
color: var(--color-quote-text); | |
} | |
a { | |
color: var(--color-link); | |
text-decoration: none; | |
} | |
a:hover { text-decoration: underline; } | |
ul, ol { | |
padding-left: 2rem; | |
margin: 1rem 0; | |
} | |
li { margin-bottom: 0.5rem; } | |
ul ul, ol ol, ul ol, ol ul { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
blockquote { | |
border-left: 0.25rem solid var(--color-quote-border); | |
color: var(--color-quote-text); | |
font-style: normal; | |
margin: 1rem 0; | |
padding: 0.5rem 1rem; | |
} | |
code, pre, kbd { | |
font-family: var(--font-mono); | |
font-size: 0.875rem; /* 14px */ | |
background-color: var(--color-code-bg); | |
color: inherit; | |
} | |
code, kbd { padding: 0.2rem 0.4rem; } | |
pre { | |
padding: 1rem; | |
overflow-x: auto; | |
margin: 1rem 0; | |
} | |
kbd { box-shadow: inset 0 -1px 0 var(--color-border); } | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
margin: 1rem 0; | |
font-size: 0.875rem; /* 14px */ | |
} | |
th, td { | |
border: 1px solid var(--color-border); | |
padding: 0.5rem 1rem; | |
text-align: left; | |
} | |
thead { background-color: var(--color-code-bg); } | |
img { | |
vertical-align: middle; | |
max-width: 100%; | |
margin: 1rem auto; | |
} | |
hr { | |
border: none; | |
border-top: 1px solid var(--color-border); | |
margin: 2rem 0; | |
} | |
@media (max-width: 37.5rem) { /* 600px */ | |
h1 { font-size: 1.75rem; } | |
h2 { font-size: 1.5rem; } | |
h3 { font-size: 1.25rem; } | |
} | |
@media print { | |
body { | |
background-color: #fff; | |
color: #000; | |
font-size: 0.875rem; | |
padding: 0; | |
} | |
a::after { | |
content: " (" attr(href) ")"; | |
font-size: 90%; | |
} | |
nav, aside, footer { | |
display: none !important; | |
} | |
pre, code { | |
background-color: #f5f5f5 !important; | |
color: #000 !important; | |
} | |
img { | |
max-width: 100% !important; | |
page-break-inside: avoid; | |
} | |
h1, h2, h3 { | |
page-break-after: avoid; | |
} | |
table { | |
page-break-inside: avoid; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment