started moving to css files

5 files changed, 128 insertions, 18 deletions

diff --git a/styles/global.css b/styles/global.css
index 1e87524..350a2a7 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,17 +1,73 @@
-html {
-	--text: #FCFFFD;
-	--page-background: var(--text);
-
-	--background: #5D737E;
-	--text-alt: var(--background);
-	--background-alt: #81949E;
-
-	--disk-a: #E16D82;
-	--disk-a-text: #FDC0C4;
-	--disk-b: #71D9CC;
-	--disk-b-text: #C0FDEB;
+:root {
+	--background: #E3E6EE;
+	--foreground: var(--gray-100);
+
+	--accent: #7E3AA6;
+
+	--error: #A63A4D;
+	--disk-b-alt: #582D35;
+
+	--confirm: #3AA699;
+	--disk-a-alt: #244743;
+
+	/* shade */
+	--gray-100: #141619;
+	--gray-200: #1F242D;
+	--gray-300: #293140;
+	--gray-700: #757D92;
+	--gray-800: #A9AFC0;
+	--gray-900: #CED2DC;
+
+	/* box-shadow */
+	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
+	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+	/* border-radius */
+	--tight-corner: 6px;
+	--loose-corner: 8px;
+
+	/* margin/padding */
+	--spacing-small:  6px;
+	--spacing-medium: 12px;
+	--spacing-large:  24px;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: var(--gray-900);
+		--foreground: #FFFFF3;
+
+		--accent: #AD34F3;
+
+		--error: #FF4365;
+		--disk-b-alt: #F49BA1;
+
+		--confirm: #00D9C0;
+		--disk-a-alt: #86F3F3;
+
+		--gray-100: #CED2DC;
+		--gray-200: #A9AFC0;
+		--gray-300: #757D92;
+		--gray-700: #293140;
+		--gray-800: #1F242D;
+		--gray-900: #141619;
+	}
+}
+
+/* html { */
+/* 	--text: #FCFFFD; */
+/* 	--page-background: var(--text); */
+
+/* 	--background: #5D737E; */
+/* 	--text-alt: var(--background); */
+/* 	--background-alt: #81949E; */
+
+/* 	--disk-a: #E16D82; */
+/* 	--disk-a-text: #FDC0C4; */
+/* 	--disk-b: #71D9CC; */
+/* 	--disk-b-text: #C0FDEB; */
+/* } */
+
 /* default margin */
 html, body {
 	margin: 0;
@@ -27,17 +83,17 @@ h3 {
 	padding-bottom: 6px;
 }
 
-/* global font zize */
-p, b, i, span, td, th { font-size: 15px; }
-
 /* navbar fix */
 body { padding-left: 48px; }
 
 /* font */
-html { font-family: "Inter"; }
+html { font-family: "Inter", sans-serif; }
 
-/* background color */
-html, body { background-color: var(--page-background); }
+/* color */
+:root, html, body {
+	background-color: var(--background);
+	color: var(--foreground);
+}
 
 /* link fix */
 a {
diff --git a/styles/index.module.css b/styles/index.module.css
new file mode 100644
index 0000000..9b518ea
--- /dev/null
+++ b/styles/index.module.css
@@ -0,0 +1,7 @@
+.loginOrRegisterBox {
+	--squareSize: 90px;
+	vertical-align: top;
+	height: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: 100%;
+	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000..5866b8f
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,11 @@
+.navbar .item {
+	margin: var(--spacing-medium);
+	margin-bottom: calc(var(--spacing-medium) + 4px);
+	display: block;
+}
+
+.navbar .bottomArea {
+	position: absolute;
+	bottom: -4px;
+	left: 0;
+}
diff --git a/styles/ui.css b/styles/ui.css
new file mode 100644
index 0000000..d665044
--- /dev/null
+++ b/styles/ui.css
@@ -0,0 +1,9 @@
+.vierkant {
+	margin: var(--spacing-small);
+	display: inline-block;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.fullwidth { width: calc(100% - var(--spacing-medium)); }
+
diff --git a/styles/utility.css b/styles/utility.css
new file mode 100644
index 0000000..753b88d
--- /dev/null
+++ b/styles/utility.css
@@ -0,0 +1,27 @@
+.drop-1 { box-shadow: var(--drop-level-1); }
+.drop-2 { box-shadow: var(--drop-level-2); }
+
+.pad-s { padding: var(--spacing-small); }
+.pad-m { padding: var(--spacing-medium); }
+.pad-l { padding: var(--spacing-large); }
+
+.round-l { border-radius: var(--loose-corner); }
+.round-t { border-radius: var(--tight-corner); }
+
+.bg-100 { background-color: var(--gray-100); }
+.bg-200 { background-color: var(--gray-200); }
+.bg-300 { background-color: var(--gray-300); }
+.bg-700 { background-color: var(--gray-700); }
+.bg-800 { background-color: var(--gray-800); }
+.bg-900 { background-color: var(--gray-900); }
+
+.subtile {
+	color: var(--gray-300);
+	font-style: italic;
+}
+
+/* no-select */
+.nosel {
+	user-select: none;
+	font-weight: 600;
+}