parent
56af4599a2
commit
f64e9d2e4c
22 changed files with 757 additions and 366 deletions
116
src/globals.css
116
src/globals.css
|
|
@ -1,7 +1,5 @@
|
|||
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
|
||||
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
|
||||
@import "@sun-typeface/suit/fonts/variable/woff2/SUIT-Variable.css";
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
|
@ -12,81 +10,73 @@
|
|||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-ring: var(--ring);
|
||||
--font-sans: "SUIT Variable", "SUIT", system-ui, sans-serif;
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BonmyeongjoSourceHanSerif';
|
||||
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.font-BonmyeongjoSourceHanSerif {
|
||||
font-family: "BonmyeongjoSourceHanSerif", sans-serif !important;
|
||||
}
|
||||
|
||||
.font-galmuri {
|
||||
font-family: "Galmuri", sans-serif !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: hsl(340 40% 98%);
|
||||
--foreground: hsl(315 21% 8%);
|
||||
--muted: hsl(340 20% 95%);
|
||||
--muted-foreground: hsl(340 10% 60%);
|
||||
--border: hsl(340 25% 90%);
|
||||
--ring: hsl(315 21% 8%);
|
||||
color-scheme: light;
|
||||
|
||||
--light-background: hsl(340 40% 98%);
|
||||
--light-foreground: hsl(315 21% 8%);
|
||||
--light-muted: hsl(340 20% 95%);
|
||||
--light-muted-foreground: hsl(340 10% 60%);
|
||||
--light-border: hsl(340 25% 90%);
|
||||
--light-ring: hsl(315 21% 8%);
|
||||
|
||||
--dark-background: hsl(315 21% 8%);
|
||||
--dark-foreground: hsl(0 0% 98%);
|
||||
--dark-muted: hsl(296 18% 15%);
|
||||
--dark-muted-foreground: hsl(240 5% 68%);
|
||||
--dark-border: hsl(296 18% 15%);
|
||||
--dark-ring: hsl(240 4.9% 83.9%);
|
||||
|
||||
--background: var(--light-background);
|
||||
--foreground: var(--light-foreground);
|
||||
--muted: var(--light-muted);
|
||||
--muted-foreground: var(--light-muted-foreground);
|
||||
--border: var(--light-border);
|
||||
--ring: var(--light-ring);
|
||||
--radius: 0.625rem;
|
||||
|
||||
--scrollbar: hsla(340 10% 60% / 0.5);
|
||||
--scrollbar-hover: hsla(340 10% 60% / 0.8);
|
||||
--mono-filter: none;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: hsl(315 21% 8%);
|
||||
--foreground: hsl(0 0% 98%);
|
||||
--muted: hsl(296, 18%, 15%);
|
||||
--muted-foreground: hsl(240 5% 68%);
|
||||
--border: hsl(296, 18%, 15%);
|
||||
--ring: hsl(240 4.9% 83.9%);
|
||||
|
||||
--scrollbar: hsla(340 10% 60% / 0.5);
|
||||
--scrollbar-hover: hsla(340 10% 60% / 0.8);
|
||||
color-scheme: dark;
|
||||
--background: var(--dark-background);
|
||||
--foreground: var(--dark-foreground);
|
||||
--muted: var(--dark-muted);
|
||||
--muted-foreground: var(--dark-muted-foreground);
|
||||
--border: var(--dark-border);
|
||||
--ring: var(--dark-ring);
|
||||
--mono-filter: invert(1);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
border-color: var(--border);
|
||||
outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
|
||||
}
|
||||
.light {
|
||||
color-scheme: light;
|
||||
--background: var(--light-background);
|
||||
--foreground: var(--light-foreground);
|
||||
--muted: var(--light-muted);
|
||||
--muted-foreground: var(--light-muted-foreground);
|
||||
--border: var(--light-border);
|
||||
--ring: var(--light-ring);
|
||||
--mono-filter: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system,
|
||||
BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo",
|
||||
"Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", sans-serif;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) {
|
||||
color-scheme: dark;
|
||||
--background: var(--dark-background);
|
||||
--foreground: var(--dark-foreground);
|
||||
--muted: var(--dark-muted);
|
||||
--muted-foreground: var(--dark-muted-foreground);
|
||||
--border: var(--dark-border);
|
||||
--ring: var(--dark-ring);
|
||||
--mono-filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fullscreen Scroll Snap */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
.snap-section {
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
Loading…
Reference in a new issue