major changes to styling:

move nav bar to left side and implement hover animations,
generalize color scheme using css variables,
move button and btn-group related styles to buttons.css,
consolidate form input and select styles in form.css

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

css/buttons.css

@@ -0,0 +1,29 @@
+.btn-group {
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.btn-group button {
+	padding: 10px; /* Some padding */
+	cursor: pointer; /* Pointer/hand icon */
+	border: none;
+}
+
+.btn-group button:hover {
+	filter: brightness(85%);
+}
+
+.btn-group button.accept {
+	background-color: var(--button-accept);
+}
+
+.btn-group button.cancel {
+	background-color: var(--button-cancel);
+}
+
+img.clickable {
+	cursor: pointer;
+}

css/dialog.css

@@ -1,6 +1,6 @@
 dialog {
-	background-color: #000000;
-	border: 1px solid white;
+	background-color: var(--content-bkg-color);
+	border: 1px solid var(--content-txt-color);
 	border-radius: 5px;
 	padding: 10px;
 }

css/form.css

@@ -1,50 +1,34 @@
+form {
+	width: fit-content;
+}
+
 p {
 	text-align: left;
 	margin: 0px;
 }
 
 fieldset {
-	border: solid white 1px;
-	border-radius: 5px;
+	border: solid var(--content-txt-color) 1px;
 	padding: 10px;
 	margin: 10px;
 }
 
-form > fieldset:first-of-type {
-	margin-top: 0px;
-}
-
 input, label, legend {
 	font-family: monospace;
-	color: white;
 	font-size: 14px;
-	background-color: black;
 }
 
-input {
-	border: solid white 1px;
+input, select {
+	border: solid var(--content-txt-color) 1px;
 	min-width: fit-content;
-	width: 100%;
 }
 
-input:focus {
+input:focus, select:focus {
 	outline: none;
 }
 
-input:disabled {
-	background-color: #606060;
-}
-
-select {
-	border: solid white 1px;
-	background-color: black;
-	color: white;
-	min-width: fit-content;
-	width: 100%;
-}
-
-select:disabled {
-	background-color: #606060;
+input:disabled, select:disabled {
+	background-color: var(--form-disabled-color);
 }
 
 button {
@@ -71,7 +55,7 @@ form img {
 hr {
 	width: 100%;
 	border: none;
-	border-top: solid white 1px;
+	border-top: solid var(--content-txt-color) 1px;
 }
 
 .last-item {

css/instance.css

@@ -1,5 +1,5 @@
 article {
-	border: solid white 1px;
+	border: solid var(--content-txt-color) 1px;
 	border-radius: 5px;
 	padding: 0px 1em 0px 1em;
 	margin: 20px 0px 20px 0px;
@@ -27,7 +27,7 @@ article > div > div > img {
 
 hr {
 	border: none;
-	border-top: solid white 1px;
+	border-top: solid var(--content-txt-color) 1px;
 	margin: 0px;
 }
 

css/style.css

@@ -1,30 +1,104 @@
+:root {
+    --accent-bkg-color: black;
+	--accent-txt-color: white;
+	--content-bkg-color: white;
+	--content-txt-color: black;
+	--form-disabled-color: #606060;
+	--button-accept: #0F0;
+	--button-cancel: #F00;
+}
+
+* {
+	font-family: monospace;
+	font-size: large;
+}
+
 body {
-	background-color:black;
-	min-width: fit-content;
+	display: grid;
+	min-height: 100vh;
+	grid-template-rows: 1fr auto;
+	grid-template-columns: auto 1fr;
+	grid-template-areas: 
+		"header main"
+		"footer main"
+	;
+	margin: 0px;
+}
+
+header, footer {
+	background-color: var(--accent-bkg-color);
+	color: var(--accent-txt-color);
+	padding: 20px;
+	width: 15vw;
+	min-width: max-content;
+	max-width: 25ch;
+}
+
+main {
+	background-color: var(--content-bkg-color);
+	color: var(--content-txt-color);
+	padding: 20px;
+}
+
+footer p {
+	text-align: center;
+}
+
+nav {
+	display: flex;
+	flex-direction: column;
+	row-gap: 20px;
+}
+
+nav a {
+	color: var(--accent-txt-color);
+	font-size: xx-large;
+	text-decoration: none;
+	position: relative;
+	padding: 10px;
+	padding-left: 20px;
+}
+
+nav a:before {
+	position: absolute;
+    width: 0px;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    content: '';
+    background: var(--accent-txt-color);
+    opacity: 0.3;
+    transition: all 0.3s;
+}
+
+nav a[aria-current="true"]:before {
+	width: 10px;
+}
+
+nav a:hover:before {
+    width: 100%;
 }
 
 h1, h2, h3, p {
 	font-family: monospace;
-	color: white;
 }
 
 h1 {
-	font-size: 72px; 
+	font-size: xx-large; 
 	text-align: center;
 }
 
 h2 {
-	font-size: 32px; 
+	font-size: x-large; 
 	text-align: center;
 }
 
 h3 {
-	font-size: 24px; 
+	font-size: larger; 
 	text-align: center;
 }
 
 p {
-	font-size: 14px; 
 	text-align: left;
 }
 
@@ -45,59 +119,10 @@ p {
 }
 }
 
-.btn-group {
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 10px;
-}
-
-.btn-group button {
-	background-color: #00ff00; /* Green background */
-	color: black; /* White text */
-	padding: 10px; /* Some padding */
-	cursor: pointer; /* Pointer/hand icon */
-	border: none;
-}
-
-.btn-group button:hover {
-	background-color: #008800;
-}
-
-.btn-group button.active {
-	background-color: black;
-	color: white;
-	border: solid white 1px;
-}
-
-nav {
-	margin: 20px 0px 20px 0px;
-}
-
-.btn-group img:hover {
-	cursor: pointer;
-}
-
-img.clickable {
-	cursor: pointer;
-}
-
 .hidden {
 	visibility: hidden;	
 }
 
 .none {
 	display: none;
-}
-
-.visuallyhidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-  }
+}