Add Tools page

styles.css

@@ -41,7 +41,6 @@
 * {
 	box-sizing: border-box;
 }
-html,
 body {
 	margin: 0;
 	min-width: 320px;
@@ -158,11 +157,17 @@ main h1 {
 }
 .entry h2,
 .entry h3 {
-	font:
-		300 32px/1.2 "Yanone Kaffeesatz",
-		sans-serif;
+	font-family: "Yanone Kaffeesatz", sans-serif;
+	font-weight: 300;
+	line-height: 1.2;
 	margin: 28px 0 12px;
 }
+.entry h2 {
+	font-size: 32px;
+}
+.entry h3 {
+	font-size: 26px;
+}
 .entry hr {
 	border: 0;
 	border-top: 1px solid #0002;
@@ -353,6 +358,18 @@ footer p {
 .area-card:focus-visible img {
 	transform: scale(1.04);
 }
+@media (max-width: 820px) {
+	.tools-list h3 {
+		min-width: 0;
+	}
+	.tools-list h3 > span {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
 @media (max-width: 560px) {
 	.area-grid {
 		width: 80%;
@@ -361,3 +378,70 @@ footer p {
 		grid-template-columns: 1fr;
 	}
 }
+
+.tools-toc {
+	margin: 32px 0;
+	padding: 16px 20px;
+	border: 1px solid #0002;
+	background: #fff8;
+}
+.tools-toc strong {
+	display: block;
+	margin-bottom: 8px;
+}
+.tools-toc ul {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 4px 24px;
+	margin: 0;
+	padding-left: 20px;
+}
+.tools-list h3 {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-top: 48px;
+	padding: 10px 0;
+	background: var(--paper);
+	scroll-margin-top: 24px;
+}
+.category-back {
+	font: 16px/1.5 Lato, Arial, sans-serif;
+	white-space: nowrap;
+}
+.tools-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+	gap: 16px;
+}
+.tool-card.external {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 0 0 10px;
+	background: none;
+	border: 1px solid #0002;
+	color: var(--ink);
+	text-decoration: none;
+}
+.tool-card.external::after {
+	display: none;
+}
+.tool-card img {
+	width: 100%;
+	height: 170px;
+	object-fit: contain;
+	background: #eee;
+}
+.tool-card span {
+	padding: 0 10px;
+}
+@media (max-width: 820px) {
+	.tools-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}