139 lines
2.8 KiB
CSS
139 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--site-bg: #fbfbfa;
|
|
--site-panel: #f6f6f5;
|
|
--site-panel-strong: #ffffff;
|
|
--site-text: #111111;
|
|
--site-muted: #454545;
|
|
--site-soft: #6f7480;
|
|
--site-line: #e2e2e0;
|
|
--site-input: #f2f2f1;
|
|
--site-accent: #ff4f2e;
|
|
--site-accent-text: #ffffff;
|
|
--site-invert: #111111;
|
|
--site-invert-text: #ffffff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--site-bg: #050505;
|
|
--site-panel: #080808;
|
|
--site-panel-strong: #0d0d0d;
|
|
--site-text: #f4f4f2;
|
|
--site-muted: #c7c7c2;
|
|
--site-soft: #8b8e96;
|
|
--site-line: #252525;
|
|
--site-input: #171717;
|
|
--site-accent: #ff4f2e;
|
|
--site-accent-text: #ffffff;
|
|
--site-invert: #f4f4f2;
|
|
--site-invert-text: #111111;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--site-text);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
margin: 0;
|
|
background: var(--site-bg);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.site-shell {
|
|
min-height: 100vh;
|
|
color: var(--site-text);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-content-grid {
|
|
@apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
|
|
min-height: calc(100vh - 57px);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-content-grid--menu-closed {
|
|
@apply lg:grid-cols-[minmax(0,720px)_287px];
|
|
max-width: 1007px;
|
|
}
|
|
|
|
.site-section {
|
|
border-bottom: 1px solid var(--site-line);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-section-header {
|
|
@apply px-6 py-8;
|
|
}
|
|
|
|
.site-section-body {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.post-prose {
|
|
@apply max-w-none text-[17px] leading-8;
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-header {
|
|
height: 57px;
|
|
border-bottom: 1px solid var(--site-line);
|
|
background: var(--site-panel);
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-main {
|
|
min-height: calc(100vh - 57px);
|
|
border-left: 1px solid var(--site-line);
|
|
border-right: 1px solid var(--site-line);
|
|
background: var(--site-bg);
|
|
}
|
|
|
|
.site-main--menu-closed {
|
|
border-left: 0;
|
|
}
|
|
|
|
.site-sidebar {
|
|
min-height: calc(100vh - 57px);
|
|
background: var(--site-panel);
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-sidebar-section {
|
|
border-bottom: 1px solid var(--site-line);
|
|
}
|
|
|
|
.site-muted {
|
|
color: var(--site-muted);
|
|
}
|
|
|
|
.site-soft {
|
|
color: var(--site-soft);
|
|
}
|
|
|
|
.site-input {
|
|
border: 1px solid var(--site-line);
|
|
background: var(--site-input);
|
|
color: var(--site-text);
|
|
}
|
|
|
|
.site-button {
|
|
background: var(--site-invert);
|
|
color: var(--site-invert-text);
|
|
}
|
|
|
|
.site-accent-button {
|
|
background: var(--site-accent);
|
|
color: var(--site-accent-text);
|
|
}
|
|
}
|