refactor: move styles into separate components

1 files changed, 3 insertions, 132 deletions

diff --git a/src/index.css b/src/index.css
index 370f29b..51b106c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,9 @@
 	--subtext: #dddddd;
 
 	font-family: 'Inter Variable', Helvetica, sans-serif;
+}
+
+* {
 	box-sizing: border-box;
 }
 
@@ -18,10 +21,6 @@ body {
 	margin: 0;
 }
 
-main {
-	margin: 2rem;
-}
-
 h1 {
 	margin: 0;
 	margin-bottom: 1rem;
@@ -32,23 +31,6 @@ h1, h2 {
 	font-weight: 500;
 }
 
-.container {
-	width: 50%;
-	margin: 1rem auto;
-}
-
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 2rem;
-	grid-auto-rows: minmax(100px, auto);
-}
-
-.row {
-	display: flex;
-	flex-direction: row;
-}
-
 hr {
 	border: 1px solid var(--overlay);
 	width: 100%;
@@ -60,115 +42,4 @@ p {
 
 a {
 	color: color-mix(in srgb, var(--text) 40%, var(--primary));
-}
-
-a.action {
-	color: var(--text);
-	text-decoration: none;
-	padding: 0 1rem;
-	height: 100%;
-	display: flex;
-	align-items: center;
-
-	&:hover {
-		background-color: var(--surface);
-	}
-
-	&:focus {
-		outline: 2px solid var(--primary);
-	}
-}
-
-article {
-	background-color: var(--surface);
-	border-radius: 1rem;
-	padding: 1rem;
-}
-
-ul.contained {
-	list-style: none;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-
-	li {
-		--border: 2px solid var(--surface);
-		border-top: var(--border);
-		&:last-child {
-			border-bottom: var(--border);
-		}
-		height: 3rem;
-		display: flex;
-		> * {
-			flex-grow: 1;
-		}
-	}
-}
-
-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	max-width: 26rem;
-}
-
-fieldset.group {
-	border: none;
-	display: flex;
-	flex-direction: row;
-	align-items: baseline;
-	padding: 0;
-
-	button, input[type="submit"] {
-		height: calc(2.5rem + 2px);
-		background-image: none;
-	}
-}
-
-label {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	color: var(--subtext);
-}
-
-input {
-	background-color: var(--surface);
-	color: var(--text);
-	height: 2.5rem;
-	padding: 0 0.5rem;
-	border: none;
-	border-bottom: 2px solid color-mix(in srgb, white 20%, var(--surface));
-	font-size: 1rem;
-
-	&:focus {
-		outline: 2px solid var(--primary);
-		border-bottom: none;
-		margin-bottom: 2px;
-	}
-}
-
-button, input[type="submit"] {
-	background-color: var(--primary);
-	color: var(--text);
-	width: 100%;
-	height: 3rem;
-	font-size: 1rem;
-	border: 1px solid var(--primary);
-	cursor: pointer;
-
-	&:focus {
-		border-color: var(--base);
-		outline: 2px solid var(--primary);
-	}
-}
-
-input[type="submit"] {
-	margin-top: 1rem;
-	padding: 0 1rem;
-	text-align: left;
-	align-self: flex-end;
-	background-image: url('icons/arrow-right.svg');
-	background-position: right 1rem center;
-	background-repeat: no-repeat;
 }
\ No newline at end of file