M src/components/Uses.astro → src/components/Uses.astro

@@ -1,5 +1,6 @@
 ---
 import type { UsesCategory } from "@/types";
+import "@/css/uses.css";
 
 interface Props {
 	category: UsesCategory;
@@ -9,11 +10,16 @@ const { category } = Astro.props;
 const { items } = category;
 ---
 
-<div class="uses-category">
-    <div class="meta">
-        <h3>{category.title}</h3>
-        <p>{category.description}</p>
-    </div>
+<details class="uses-category">
+    <summary class="meta">
+        <div class="meta-content">
+            <h3>{category.title}</h3>
+            <p>{category.description}</p>
+        </div>
+        <div class="meta-arrow">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>
+        </div>
+    </summary>
     <div class="items">
         {items.map((item) => (
             <div class="item">
@@ -27,85 +33,4 @@ </div>
             </div>
         ))}
     </div>
-</div>
-
-<style>
-.uses-category {
-    display: flex;
-	flex-direction: column;
-	padding: 0.5rem;
-	background-color: hsl(var(--container-bg));
-	padding-bottom: 0;
-}
-
-.meta {
-	display: flex;
-	flex-direction: column;
-
-	h3 {
-		font-weight: 700;
-		font-size: 1.2rem;
-	}
-
-	p {
-		font-size: 0.9rem;
-		color: hsl(var(--subtext1));
-		margin-bottom: 0.5rem;
-	}
-}
-
-.items {
-	display: flex;
-	flex-direction: column;
-	margin-left: -0.5rem;
-	margin-right: -0.5rem;
-}
-
-.item {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	gap: 0.5rem;
-	padding: 0.2rem 0.5rem;
-
-	background-clip: padding-box;
-	border-top: 2px solid hsla(var(--surface1) / 0.25);
-	border-bottom: 2px solid transparent;
-	margin-top: -2px;
-
-
-	.label {
-		h4 {
-			color: hsl(var(--subtext1));
-			font-weight: 500;
-		}
-	}
-
-	.value {
-		color: hsl(var(--subtext0));
-		font-weight: 400;
-		text-align: right;
-		.subtext {
-			font-size: 0.8rem;
-			color: hsla(var(--subtext0) / 0.8);
-		}
-	}
-
-	&:hover {
-		background-color: hsla(var(--surface1) / 0.3);
-		border-bottom: 2px solid hsla(var(--surface1) / 0.5);
-		border-top: 2px solid hsla(var(--surface1) / 0.5);
-
-		transition: none;
-
-		&:last-child {
-    		border-bottom: 2px solid hsla(var(--surface1) / 0.3);
-		}
-
-		.label h4, .value p, .value .subtext {
-    		color: hsl(var(--text));
-            transition: none;
-		}
-	}
-}
-</style>
+</details>

A src/css/uses.css

@@ -0,0 +1,120 @@
+.uses-category {
+	display: flex;
+	flex-direction: column;
+	background-color: hsl(var(--container-bg));
+	padding-bottom: 0;
+
+	&:first-child summary.meta {
+		border-radius: 1.35rem 1.35rem 0 0;
+	}
+	&:last-child:not([open]) summary.meta {
+		border-radius: 0 0 1.35rem 1.35rem;
+	}
+}
+
+.uses-category[open] {
+	summary {
+		background-color: hsla(var(--surface1) / 0.3);
+	}
+	.meta-arrow {
+		transform: rotate(180deg);
+	}
+}
+
+.uses-category .meta {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem;
+
+	.meta-content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.meta-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		width: 2rem;
+		height: 2rem;
+		color: hsl(var(--subtext1));
+		transform-origin: center;
+	}
+
+	outline-offset: -2px;
+
+	&:hover,
+	&:focus-visible {
+		background-color: hsla(var(--surface1) / 0.3);
+		cursor: pointer;
+		transition: none;
+	}
+
+	h3 {
+		font-weight: 700;
+		font-size: 1.2rem;
+	}
+
+	p {
+		font-size: 0.9rem;
+		color: hsl(var(--subtext1));
+		margin-bottom: 0.5rem;
+	}
+}
+
+.uses-category .items {
+	display: flex;
+	flex-direction: column;
+
+	.item {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.2rem 0.5rem;
+
+		background-clip: padding-box;
+		border-top: 2px solid hsla(var(--surface0) / 0.25);
+		border-bottom: 2px solid transparent;
+		margin-top: -2px;
+
+		.label {
+			h4 {
+				color: hsl(var(--subtext1));
+				font-weight: 500;
+			}
+		}
+
+		.value {
+			color: hsl(var(--subtext0));
+			font-weight: 400;
+			text-align: right;
+			.subtext {
+				font-size: 0.8rem;
+				color: hsla(var(--subtext0) / 0.8);
+			}
+		}
+
+		&:hover {
+			background-color: hsla(var(--surface0) / 1);
+			border-bottom: 2px solid hsla(var(--surface1) / 0.5);
+			border-top: 2px solid hsla(var(--surface1) / 0.5);
+
+			transition: none;
+
+			&:last-child {
+				border-bottom: 2px solid hsla(var(--surface1) / 0.3);
+			}
+
+			.label h4,
+			.value p,
+			.value .subtext {
+				color: hsl(var(--text));
+				transition: none;
+			}
+		}
+	}
+}

M src/pages/index.astro → src/pages/index.astro

@@ -199,7 +199,7 @@ flex-direction: column;
 		background-color: hsl(var(--container-bg));
 
 		.project:first-child,
-		.uses-category:first-child {
+		.uses-category:first-child summary {
 			padding-top: 0.75rem;
 		}