From 3a53b026bff595e1c8d7ec637b8b4d2cb6d20bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 10:14:33 +0200
Subject: [PATCH 1/4] Style

---
 view/static/main.css | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/view/static/main.css b/view/static/main.css
index e06c8ca..428fc7d 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -75,6 +75,14 @@ td {
 	text-align: inherit;
 }
 
+ins {
+	text-decoration-color: hsl(120 50% 75% / 50%);
+}
+
+del {
+	text-decoration-color: hsl(0 50% 40% / 50%);
+}
+
 summary {
 	cursor: pointer;
 	list-style: none;
@@ -221,7 +229,16 @@ details[open] summary::before {
 
 .page-item {
 	border: 1px solid var(--border-color);
-	box-shadow: var(--box-shadow);
+	background: hsl(0 0% 95%);
+	transition: background-color 120ms;
+	color: hsl(0 0% 40%);
+	font-weight: 500;
+	font-size: 0.85em;
+	line-height: 1.5rem;
+}
+
+.page-item:not(.active):hover {
+	background: hsl(0 0% 90%);
 }
 
 .page-item:first-of-type {
@@ -236,20 +253,12 @@ details[open] summary::before {
 	border-right-width: 0px;
 }
 
-.page-item.active .page-link {
+.page-item.active {
 	background-color: var(--accent-color);
 	color: white;
 	border-color: transparent;
 }
 
-.diff ins {
-	text-decoration-color: hsl(120 50% 75% / 50%);
-}
-
-.diff del {
-	text-decoration-color: hsl(0 50% 40% / 50%);
-}
-
 /* Index */
 
 .filters {

From b77e8fd20ff9c255e1e3c20a25eb6e96c28f5a17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 10:50:02 +0200
Subject: [PATCH 2/4] Style

---
 view/static/main.css             | 66 ++++++++++++++++++++++++--------
 view/templates/about.html        | 18 ++++++---
 view/templates/base.html         | 15 +++++++-
 view/templates/index.html        |  8 +++-
 view/templates/parts/header.html | 13 -------
 5 files changed, 82 insertions(+), 38 deletions(-)
 delete mode 100644 view/templates/parts/header.html

diff --git a/view/static/main.css b/view/static/main.css
index 428fc7d..5e6e668 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -2,7 +2,8 @@
 
 :root {
 	--border-color: hsl(0 0% 80% / 60%);
-	--accent-color: hsl(225 90% 40%);
+	--accent-color: hsl(225 90% 50%);
+	--accent-color-pressed: hsl(225 90% 35%);
 	--color-muted: hsl(0 0% 50%);
 	--radius-s: 0.25em;
 	--radius-m: 0.5em;
@@ -24,6 +25,7 @@ body {
 	flex-direction: column;
 	align-items: stretch;
 	line-height: 1.5;
+	background-color: hsl(0 0% 98%);
 }
 
 *,
@@ -75,11 +77,23 @@ td {
 	text-align: inherit;
 }
 
+a {
+	color: var(--accent-color);
+	font-weight: 500;
+	text-decoration: none;
+}
+
+a:hover {
+	color: var(--accent-color-pressed);
+}
+
 ins {
+	background-color: hsl(120 100% 95%);
 	text-decoration-color: hsl(120 50% 75% / 50%);
 }
 
 del {
+	background-color: hsl(0 100% 95%);
 	text-decoration-color: hsl(0 50% 40% / 50%);
 }
 
@@ -107,8 +121,14 @@ details[open] summary::before {
 }
 
 .header {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	background-color: white;
+}
+
+.header:not(.header-extended) {
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 2rem;
 }
 
 .header .container {
@@ -123,7 +143,7 @@ details[open] summary::before {
 	gap: 1rem;
 }
 
-.header a {
+.header-link-home {
 	color: inherit;
 	text-decoration: none;
 }
@@ -166,7 +186,12 @@ details[open] summary::before {
 
 .footer-nologo {
 	display: inline-block;
-	fill: currentColor;
+	fill: hsl(0 0% 60%);
+	transition: fill 120ms;
+}
+
+.footer-nologo:hover {
+	fill: hsl(0 0% 40%);
 }
 
 .container {
@@ -213,6 +238,13 @@ details[open] summary::before {
 	background: hsl(0 0% 90%);
 }
 
+.card {
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius-m);
+	background-color: white;
+	box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
+}
+
 .pagination {
 	list-style-type: none;
 	padding: 0;
@@ -259,6 +291,14 @@ details[open] summary::before {
 	border-color: transparent;
 }
 
+.pagination-page-info {
+	color: var(--color-muted);
+}
+
+.prose p:not(:last-of-type) {
+	margin-bottom: 1rem;
+}
+
 /* Index */
 
 .filters {
@@ -270,12 +310,13 @@ details[open] summary::before {
 	border-bottom: 1px solid var(--border-color);
 }
 
+.changesets {
+	margin-bottom: 2rem;
+}
+
 .changeset {
 	padding: 1rem 1.5rem;
-	border: 1px solid var(--border-color);
-	border-radius: var(--radius-m);
 	margin-bottom: 1rem;
-	box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
 }
 
 .changeset-actions {
@@ -291,11 +332,6 @@ details[open] summary::before {
 	font-size: var(--font-size-s);
 }
 
-.changeset-feed-name,
-.changeset-time {
-	/* color: var(--color-muted); */
-}
-
 .changeset-action {
 	display: inline-flex;
 	align-items: center;
@@ -310,10 +346,6 @@ details[open] summary::before {
 	margin-left: 0.5em;
 }
 
-.changeset-action:hover {
-	color: var(--accent-color);
-}
-
 .changeset-title {
 	font-size: var(--font-size-l);
 }
diff --git a/view/templates/about.html b/view/templates/about.html
index 4859a28..d76afcc 100644
--- a/view/templates/about.html
+++ b/view/templates/about.html
@@ -1,10 +1,18 @@
 {% extends "base.html" %}
 
+{% block head %}
+<style>
+.prose {
+	font-size: var(--font-size-l);
+	max-width: 800px;
+}
+</style>
+{% endblock head %}
+
 {% block body %}
-<main class="flex-shrink-0">
-	<div class="container">
-		<h1 class="mt-5">Headliner</h1>
-		<p class="lead">
+<div class="container">
+	<div class="prose">
+		<p>
 			Headliner is monitoring rss feeds of czech news websites for changes in
 			article headlines. Just because it might be interesting.
 		</p>
@@ -19,5 +27,5 @@
 			>
 		</p>
 	</div>
-</main>
+</div>
 {% endblock body %}
diff --git a/view/templates/base.html b/view/templates/base.html
index f22109f..6305fba 100644
--- a/view/templates/base.html
+++ b/view/templates/base.html
@@ -20,9 +20,22 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
+		{% block head %}{% endblock %}
 	</head>
 	<body>
-		{% include "parts/header.html" %}
+		<header class="header {% block header_class %}{% endblock %}">
+			<div class="container">
+				<a class="header-link-home" href="/">
+					<h1>
+						<span class="del"> Head</span><span class="ins">liner</span>
+					</h1>
+				</a>
+				<nav>
+					<a href="/about">About</a>
+					<a href="/feeds">Feeds</a>
+				</nav>
+			</div>
+		</header>
 		<main class="main">
 			{% block body %}{% endblock %}
 		</main>
diff --git a/view/templates/index.html b/view/templates/index.html
index 029bd9e..8ffdc22 100644
--- a/view/templates/index.html
+++ b/view/templates/index.html
@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
+{% block header_class %}header-extended{% endblock header_class %}
+
 {% block body %}
 <div class="filters">
 	<div class="container">
@@ -25,9 +27,9 @@
 	</div>
 </div>
 
-<div class="container">
+<div class="container changesets">
 	{% for diff in diffs %}
-	<article class="changeset">
+	<article class="card changeset">
 		<p class="changeset-actions">
 			<span class="changeset-feed-name">{{ diff.feed_name }}</span>
 			<time class="changeset-time">{{ diff.diff_time }}</time>
@@ -57,7 +59,9 @@
 		</details>
 	</article>
 	{% endfor %}
+</div>
 
+<div class="container">
 	{{ pagination.links }}
 	{{ pagination.info }}
 </div>
diff --git a/view/templates/parts/header.html b/view/templates/parts/header.html
deleted file mode 100644
index d35ecad..0000000
--- a/view/templates/parts/header.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<header class="header">
-	<div class="container">
-		<a href="/">
-			<h1>
-				<span class="del"> Head</span><span class="ins">liner</span>
-			</h1>
-		</a>
-		<nav>
-			<a href="/about">About</a>
-			<a href="">Feeds</a>
-		</nav>
-	</div>
-</header>

From b95ba9eb586f8d530547562bf1747da29fc85d13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 11:03:34 +0200
Subject: [PATCH 3/4] Style article detail

---
 view/static/main.css               | 13 ++++-----
 view/templates/article_detail.html | 45 ++++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/view/static/main.css b/view/static/main.css
index 5e6e668..ef68fff 100644
--- a/view/static/main.css
+++ b/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;
-}
diff --git a/view/templates/article_detail.html b/view/templates/article_detail.html
index 13daf54..ee2f734 100644
--- a/view/templates/article_detail.html
+++ b/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">
-		{% for diff in diffs %}
-		<li>{{ diff.diff_time }} {{ diff.diff_html|safe }}</li>
-		{% endfor %}
-	</ol>
+	<div class="card">
+		<table class="diff-table">
+			{% for diff in diffs %}
+			<tr>
+				<th>{{ diff.diff_time }}</th>
+				<td>{{ diff.diff_html|safe }}</td>
+			</tr>
+			{% endfor %}
+		</table>
+	</div>
 </div>
 {% endblock body %}

From 7e48a57f636cab09fee8a0d1e3c0d5c403f25021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= <ondrej@nyv.lt>
Date: Thu, 17 Aug 2023 11:11:19 +0200
Subject: [PATCH 4/4] Use system font stack

---
 view/static/main.css     | 3 ++-
 view/templates/base.html | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/view/static/main.css b/view/static/main.css
index ef68fff..d301f6f 100644
--- a/view/static/main.css
+++ b/view/static/main.css
@@ -16,7 +16,8 @@
 
 html {
 	box-sizing: border-box;
-	font-family: "Inter", system-ui;
+	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 body {
diff --git a/view/templates/base.html b/view/templates/base.html
index 6305fba..1e72205 100644
--- a/view/templates/base.html
+++ b/view/templates/base.html
@@ -17,9 +17,6 @@
 			data-domain="headline.beta.nolog.cz"
 			src="https://plausible.nolog.cz/js/plausible.js"
 		></script>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
 		{% block head %}{% endblock %}
 	</head>
 	<body>