Fix style glitch on page transition

view/static/main.css

@@ -414,3 +414,41 @@ details[open] summary::before {
 	padding-right: 1rem;
 	vertical-align: top;
 }
+
+/* Article detail */
+
+.article-detail h1 {
+	margin-bottom: 1rem;
+	font-size: var(--font-size-l);
+}
+
+.page-heading {
+	font-size: var(--font-size-l);
+	margin-bottom: 2rem;
+}
+
+.article-detail-diffs th,
+.article-detail-diffs td {
+	padding: 0.5rem 0.75rem;
+}
+
+.article-detail-diffs td:last-child {
+	width: 100%;
+}
+
+.article-detail-diffs th {
+	font-size: var(--font-size-xs);
+	color: var(--color-muted);
+	font-weight: 500;
+}
+
+.article-detail-diffs tr:not(:last-of-type) {
+	border-bottom: 1px solid var(--border-color);
+}
+
+/* About */
+
+.page-about-prose {
+	font-size: var(--font-size-l);
+	max-width: 800px;
+}

view/templates/about.html

@@ -1,21 +1,13 @@
 {% extends "base.html" %}
 
-{% block head %}
-<style>
-.prose {
-	font-size: var(--font-size-l);
-	max-width: 800px;
-}
-</style>
-{% endblock head %}
-
 {% block body %}
 <div class="container">
-	<div class="prose">
+	<div class="prose page-about-prose">
 		<p>
 			Headline is monitoring rss feeds of czech news websites for changes in
 			article headlines. Just because it might be interesting. You can read more about it on <a href="https://www.zive.cz/clanky/mrknete-novinarum-pod-ruce-tenhle-web-vam-ukaze-jak-se-titulek-clanku-zmeni-treba-petkrat-za-hodinu/sc-3-a-223150/default.aspx">zive.cz</a> or <a href="https://a2larm.cz/2022/10/co-je-psano-neni-dano-online-media-meni-nazvy-clanku-i-nekolikrat-za-den/">a2larm.cz</a>.
 		</p>
+
 		<p>
 			Check out <a href="https://git.nolog.cz/mdivecky/headline">the source code</a>,
 			but be aware that it's not too nice. Feel free to improve it or run the tool yourself.

view/templates/article_detail.html

@@ -1,44 +1,13 @@
 {% 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 td:last-child {
-	width: 100%;
-}
-
-.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">
+<div class="container article-detail">
-	<h1>Diffs for the article at <a href="{{ article_url }}">{{ article_url|truncate(50) }}</a></h1>
+	<h1>
-	<br>
+		Diffs for the article at
-
+		<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
+	</h1>
 	<div class="card">
-		<table class="diff-table">
+		<table class="article-detail-diffs">
 			{% for diff in diffs %}
 			<tr>
 				<th>{{ diff.diff_time }}</th>