mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-01-31 11:53:35 +01:00
Merge remote-tracking branch 'origin/new-frontend' into new-frontend
This commit is contained in:
commit
9e5ff527ba
5 changed files with 147 additions and 50 deletions
|
|
@ -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;
|
||||
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 {
|
||||
|
|
@ -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 {
|
||||
text-decoration-color: hsl(120 50% 75% / 50%);
|
||||
.pagination-page-info {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.diff del {
|
||||
text-decoration-color: hsl(0 50% 40% / 50%);
|
||||
.prose p:not(:last-of-type) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="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>
|
||||
<p>
|
||||
See <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.
|
||||
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.
|
||||
</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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{% 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 %}
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue