Merge remote-tracking branch 'origin/new-frontend' into new-frontend

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;
@@ -15,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 {
@@ -24,6 +26,7 @@ body {
 	flex-direction: column;
 	align-items: stretch;
 	line-height: 1.5;
+	background-color: hsl(0 0% 98%);
 }
 
 *,
@@ -73,6 +76,31 @@ th,
 tr,
 td {
 	text-align: inherit;
+	border-collapse: collapse;
+}
+
+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%);
+}
+
+code {
+	font-size: inherit;
 }
 
 summary {
@@ -99,8 +127,14 @@ details[open] summary::before {
 }
 
 .header {
-	margin-top: 1rem;
+	padding-top: 1rem;
-	margin-bottom: 1rem;
+	padding-bottom: 1rem;
+	background-color: white;
+}
+
+.header:not(.header-extended) {
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 2rem;
 }
 
 .header .container {
@@ -115,7 +149,7 @@ details[open] summary::before {
 	gap: 1rem;
 }
 
-.header a {
+.header-link-home {
 	color: inherit;
 	text-decoration: none;
 }
@@ -158,7 +192,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 {
@@ -205,6 +244,14 @@ 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%);
+	overflow: hidden;
+}
+
 .pagination {
 	list-style-type: none;
 	padding: 0;
@@ -221,7 +268,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,18 +292,18 @@ 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 {
+.pagination-page-info {
-	text-decoration-color: hsl(120 50% 75% / 50%);
+	color: var(--color-muted);
 }
 
-.diff del {
+.prose p:not(:last-of-type) {
-	text-decoration-color: hsl(0 50% 40% / 50%);
+	margin-bottom: 1rem;
 }
 
 /* Index */
@@ -261,12 +317,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 {
@@ -282,11 +339,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;
@@ -301,10 +353,6 @@ details[open] summary::before {
 	margin-left: 0.5em;
 }
 
-.changeset-action:hover {
-	color: var(--accent-color);
-}
-
 .changeset-title {
 	font-size: var(--font-size-l);
 }
@@ -322,10 +370,3 @@ details[open] summary::before {
 .changeset table th {
 	padding-right: 1rem;
 }
-
-/* Article detail */
-
-.diffs-list {
-	list-style-type: none;
-	padding: 0;
-}

view/templates/about.html

@@ -1,23 +1,32 @@
 {% 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">
-		<p class="lead">
+	<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>
 		<p>
-			See <a href="https://git.nolog.cz/mdivecky/headline">the source code</a>,
+			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.
+			but be aware that it's not too nice. Feel free to improve it or run the tool yourself.
 		</p>
-		<br>
+		
 		<p>
 			If you want to access the raw data collected by this tool, you can
 			<a href="https://git.nolog.cz/NoLog.cz/headline-exports"> download the full archive from our git repo.</a>
 		</p>
-		<br>
+		
 		<p><a href="https://ondrej.nyv.lt/">Ondřej</a> and <a href="https://bain.cz">Bain</a> made important contribution to the project. Thank you!</p>
 	</div>
-</main>
+</div>
 {% endblock body %}

view/templates/article_detail.html

@@ -1,14 +1,47 @@
 {% 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 <a href="{{ article_url }}">{{ article_url|truncate(50) }}</a></h1>
 	<br>
 
-	<ol class="diffs-list">
+	<div class="card">
+		<table class="diff-table">
 			{% for diff in diffs %}
-		<li>{{ diff.diff_time }} {{ diff.diff_html|safe }}</li>
+			<tr>
+				<th>{{ diff.diff_time }}</th>
+				<td>{{ diff.diff_html|safe }}</td>
+			</tr>
 			{% endfor %}
-	</ol>
+		</table>
+	</div>
 </div>
 {% endblock body %}

view/templates/base.html

@@ -17,12 +17,22 @@
 			data-domain="headline.beta.nolog.cz"
 			src="https://plausible.nolog.cz/js/plausible.js"
 		></script>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		{% block head %}{% endblock %}
-		<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" />
 	</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>

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>