Files
Blog/src/styles/tokens.css
T
2026-08-11 10:25:27 +08:00

67 lines
1.7 KiB
CSS

:root {
--mirages-accent: #1abc9c;
--mirages-page-light: #fff;
--mirages-page-sunset: #f8f1e4;
--mirages-page-dark: #2c2a2a;
--mirages-raised-dark: #343232;
--mirages-text-light: #202020;
--color-accent: var(--mirages-accent);
--color-accent-strong: #138a74;
--color-accent-contrast: #102b27;
--mirages-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mirages-font-sans: "Mirages Custom", Merriweather, "Open Sans", "Segoe UI Emoji", "Segoe UI Symbol", Helvetica, Arial, sans-serif;
--mirages-font-serif: "Noto Serif SC", serif;
--mirages-font-code: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
--font-sans: var(--mirages-font-sans);
--font-serif: var(--mirages-font-serif);
--reading-font-family: var(--mirages-font-sans);
--content-width: 704px;
--article-content-width: 606px;
--page-width: 720px;
--nav-height: 4rem;
--radius-sm: .25rem;
--radius-md: .5rem;
--shadow-soft: 0 14px 40px rgb(20 25 24 / 9%);
--transition-fast: 160ms ease;
}
@media (min-width: 1302px) {
:root {
--content-width: 848px;
--article-content-width: 662px;
--page-width: 864px;
}
}
@media (min-width: 1600px) {
:root {
--content-width: 880px;
--article-content-width: 720px;
--page-width: 896px;
}
}
@media (min-width: 1800px) {
:root {
--content-width: 944px;
--article-content-width: 752px;
--page-width: 960px;
}
}
@media (min-width: 1920px) {
:root {
--content-width: 976px;
--article-content-width: 800px;
--page-width: 992px;
}
}
@media (min-width: 2400px) {
:root {
--content-width: 1008px;
--article-content-width: 850px;
--page-width: 1024px;
}
}