Style article detail

view/static/main.css

@@ -75,6 +75,7 @@ th,
 tr,
 td {
 	text-align: inherit;
+	border-collapse: collapse;
 }
 
 a {
@@ -97,6 +98,10 @@ del {
 	text-decoration-color: hsl(0 50% 40% / 50%);
 }
 
+code {
+	font-size: inherit;
+}
+
 summary {
 	cursor: pointer;
 	list-style: none;
@@ -243,6 +248,7 @@ details[open] summary::before {
 	border-radius: var(--radius-m);
 	background-color: white;
 	box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
+	overflow: hidden;
 }
 
 .pagination {
@@ -363,10 +369,3 @@ details[open] summary::before {
 .changeset table th {
 	padding-right: 1rem;
 }
-
-/* Article detail */
-
-.diffs-list {
-	list-style-type: none;
-	padding: 0;
-}

view/templates/article_detail.html

@@ -1,13 +1,46 @@
 {% extends "base.html" %}
 
+{% block head %}
+<style>
+.page-heading {
+	font-size: var(--font-size-l);
+	margin-bottom: 2rem;
+}
+
+.diffs-list {
+	list-style-type: none;
+	padding: 0;
+}
+
+.diff-table th, .diff-table td {
+	padding: 0.5rem 0.75rem;
+}
+
+.diff-table th {
+	font-size: var(--font-size-xs);
+	color: var(--color-muted);
+	font-weight: 500;
+}
+
+.diff-table tr:not(:last-of-type) {
+	border-bottom: 1px solid var(--border-color);
+}
+</style>
+{% endblock head %}
+
 {% block body %}
 <div class="container">
-	<h1>Diffs for the article at {{ article_url }}</h1>
+	<h1 class="page-heading">Diffs for the article at <code>{{ article_url }}</code></h1>
 
-	<ol class="diffs-list">
+	<div class="card">
-		{% for diff in diffs %}
+		<table class="diff-table">
-		<li>{{ diff.diff_time }} {{ diff.diff_html|safe }}</li>
+			{% for diff in diffs %}
-		{% endfor %}
+			<tr>
-	</ol>
+				<th>{{ diff.diff_time }}</th>
+				<td>{{ diff.diff_html|safe }}</td>
+			</tr>
+			{% endfor %}
+		</table>
+	</div>
 </div>
 {% endblock body %}