feat: style project list

1 files changed, 52 insertions, 41 deletions

diff --git a/src/index.css b/src/index.css
index 301b6c2..370f29b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,7 @@
 	--text: #ffffff;
 	--subtext: #dddddd;
 
-	font-family: 'Inter', Helvetica, sans-serif;
+	font-family: 'Inter Variable', Helvetica, sans-serif;
 	box-sizing: border-box;
 }
 
@@ -22,48 +22,9 @@ 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;
+	margin-bottom: 1rem;
 	padding: 0;
 }
 
@@ -101,12 +62,49 @@ 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;
@@ -114,6 +112,19 @@ form {
 	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;