Update component css

lib/components.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+
 @theme {
 	/* Universal */
 	--color-neutral-light: oklch(92.8% 0.006 264.531);	/* gray-200 */

lib/layout.css

@@ -0,0 +1,70 @@
+@import "tailwindcss";
+
+
+body {
+	margin-inline: auto;
+
+	min-width: 320px;
+	height: 100vh;
+
+	text-align: center;
+}
+
+#root {
+	padding-top: 4rem;
+	padding-bottom: 4rem;
+	padding-inline: 1rem;
+
+	height: 100%;
+	width: 100%;
+
+	overflow: auto;
+}
+
+h1 {
+	font-size: 4rem;
+}
+
+h2 {
+	font-size: 3rem;
+}
+
+a.active {
+	color: oklch(70.7% 0.165 254.624);	/* blue-400 */
+}
+
+nav {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+
+	margin-inline: auto;
+
+	padding-inline: 1rem;
+}
+
+footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+
+	margin-inline: auto;
+
+	padding-inline: 1rem;
+}

lib/theme.css

@@ -0,0 +1,37 @@
+@import "tailwindcss";
+
+
+@theme {
+	--light-text-color: #213547;
+	--light-bg-color: #FFFFFF;
+
+	--dark-text-color: #FFFFFFDE;
+	--dark-bg-color: #242424;
+}
+
+
+:root {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	color: var(--text-color);
+	background-color: var(--bg-color);
+}
+
+:root.light {
+	--text-color: var(--light-text-color);
+	--bg-color: var(--light-bg-color);
+}
+
+:root.dark {
+	--text-color: var(--dark-text-color);
+	--bg-color: var(--dark-bg-color);
+}

src/index.css

@@ -1,85 +1,16 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
-@import "../lib/styles.css";
+@import "../lib/components.css";
+@import "../lib/theme.css";
 
 
 @theme {
 	--color-neutral-825: oklch(0.253 0 0);
 	--color-neutral-850: oklch(0.237 0 0);
-
-
-	--light-text-color: #213547;
-	--light-bg-color: #FFFFFF;
-
-	--dark-text-color: #FFFFFFDE;
-	--dark-bg-color: #242424;
 }
 
 
-:root.light {
-	--text-color: var(--light-text-color);
-	--bg-color: var(--light-bg-color);
-}
-
-:root.dark {
-	--text-color: var(--dark-text-color);
-	--bg-color: var(--dark-bg-color);
-}
-
 input::-webkit-calendar-picker-indicator {
 	cursor: pointer;
 }
-
-:root {
-	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
-	color: var(--text-color);
-	background-color: var(--bg-color);
-}
-
-#root {
-	padding-top: 4rem;
-	padding-inline: 1rem;
-	height: 100%;
-	width: 100%;
-}
-
-body {
-	margin-inline: auto;
-
-	min-width: 320px;
-	height: 100vh;
-
-	text-align: center;
-}
-
-a.active {
-	color: var(--color-blue-400);
-}
-
-nav {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: space-btween;
-	align-items: center;
-	margin-inline: auto;
-	padding-inline: 1rem;
-}
-
-@keyframes spinnerAnimate {
-	100% {
-		transform: rotate(360deg);
-	}
-}

vite.config.ts

@@ -35,7 +35,15 @@ export default defineConfig({
 		viteStaticCopy({
 			targets: [
 				{
-					src: resolve(__dirname, "lib/styles.css"),
+					src: resolve(__dirname, "lib/components.css"),
+					dest: ""
+				},
+				{
+					src: resolve(__dirname, "lib/layout.css"),
+					dest: ""
+				},
+				{
+					src: resolve(__dirname, "lib/theme.css"),
 					dest: ""
 				}
 			]