refactor: restructure

src/css/animation.css

@@ -1,9 +0,0 @@
-@keyframes fadein {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1.0;
-    }
-}

src/css/font.css

@@ -1,19 +0,0 @@
-@font-face {
-    font-family: "Inter Var";
-    font-weight: 400 900;
-    font-display: swap;
-    font-style: normal;
-    src: url("/src/font/Inter.woff2") format("woff2");
-}
-
-html {
-    font-family: "Inter Var", sans-serif;
-    font-size: 17px;
-    box-sizing: border-box;
-}
-
-.greeting {
-    font-variation-settings: "wght" 400;
-    letter-spacing: 0rem;
-    line-height: 1.7rem;
-}

src/main.js

@@ -1,10 +1,10 @@
-import "./css/style.css";
-import "./css/font.css";
-import "./css/animation.css";
-import "./css/button.css";
+import "./styles/base.css";
+import "./styles/typography.css";
+import "./styles/animations.css";
+import "./styles/components.css";
 
-import "./app";
-import { add3DRotationEffect, updateGreeting, updateTime } from "./app";
+import "./effects";
+import { add3DRotationEffect, updateGreeting, updateTime } from "./effects";
 import { importJsAsModule } from "./utils";
 
 const initialize = async () => {

src/styles/animations.css

@@ -0,0 +1,9 @@
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}

src/styles/typography.css

@@ -0,0 +1,19 @@
+@font-face {
+	font-family: "Inter Var";
+	font-weight: 400 900;
+	font-display: swap;
+	font-style: normal;
+	src: url("/src/assets/Inter.woff2") format("woff2");
+}
+
+html {
+	font-family: "Inter Var", sans-serif;
+	font-size: 17px;
+	box-sizing: border-box;
+}
+
+.greeting {
+	font-variation-settings: "wght" 400;
+	letter-spacing: 0rem;
+	line-height: 1.7rem;
+}