Style login and signup pages

1 files changed, 151 insertions, 13 deletions

diff --git a/src/index.css b/src/index.css
index aac86b5..19f1e8b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,15 @@
-/*@font-face {
+@font-face {
 	font-family: 'Inter';
 	src: url('Inter.ttf');
-}*/
+}
 
 :root {
-	--base: #121212;
-	--surface: #242424;
-	--overlay: #484848;
+	--base: hsl(0, 0%, 10%);
+	--surface: hsl(0, 0%, 15%);
+	--overlay: hsl(0, 0%, 20%);
+	--primary: hsl(220, 100%, 50%);
 	--text: #ffffff;
-	--primary: #1c4c87;
-
-	--data-any: #36c965;
-	--data-float: #a0a0a0;
-	--data-vector: #5e29d9;
+	--subtext: #dddddd;
 
 	font-family: 'Inter', Helvetica, sans-serif;
 	box-sizing: border-box;
@@ -22,7 +19,148 @@ body {
 	background-color: var(--base);
 	color: var(--text);
 	margin: 0;
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;
+}
+
+main {
+	margin: 2rem;
+}
+
+header {
+	height: 3rem;
+	border-bottom: 1px solid var(--overlay);
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	> .title {
+		padding-left: 1rem;
+		font-size: 1rem;
+		font-weight: 500;
+		text-decoration: none;
+		color: var(--text);
+	}
+
+	nav {
+		height: 100%;
+		display: flex;
+		flex-direction: row;
+	}
+
+	.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);
+		}
+	}
+}
+
+h1 {
+	margin: 0;
+	padding: 0;
+}
+
+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%;
+}
+
+p {
+	margin: 0;
+}
+
+a {
+	color: color-mix(in srgb, var(--text) 40%, var(--primary));
+}
+
+article {
+	background-color: var(--surface);
+	border-radius: 1rem;
+	padding: 1rem;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	max-width: 26rem;
+}
+
+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