NoLog.cz/headline
6
2
Fork 0
Code Issues Pull requests Releases Wiki Activity

New frontent and article grouping #1

Merged
mdivecky merged 16 commits from new-frontend into main 2023-08-17 11:32:35 +02:00
Conversation 0 Commits 16 Files changed 15 +82 -38
5 changed files with 82 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b77e8fd20f - Show all commits

66
view/static/main.css
View file

@ -2,7 +2,8 @@
:root { :root {
--border-color: hsl(0 0% 80% / 60%); --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%); --color-muted: hsl(0 0% 50%);
--radius-s: 0.25em; --radius-s: 0.25em;
--radius-m: 0.5em; --radius-m: 0.5em;
@ -24,6 +25,7 @@ body {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
line-height: 1.5; line-height: 1.5;
background-color: hsl(0 0% 98%);
} }
*, *,
@ -75,11 +77,23 @@ td {
text-align: inherit; text-align: inherit;
} }
a {
color: var(--accent-color);
font-weight: 500;
text-decoration: none;
}
a:hover {
color: var(--accent-color-pressed);
}
ins { ins {
background-color: hsl(120 100% 95%);
text-decoration-color: hsl(120 50% 75% / 50%); text-decoration-color: hsl(120 50% 75% / 50%);
} }
del { del {
background-color: hsl(0 100% 95%);
text-decoration-color: hsl(0 50% 40% / 50%); text-decoration-color: hsl(0 50% 40% / 50%);
} }
@ -107,8 +121,14 @@ details[open] summary::before {
} }
.header { .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 { .header .container {
@ -123,7 +143,7 @@ details[open] summary::before {
gap: 1rem; gap: 1rem;
} }
.header a { .header-link-home {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@ -166,7 +186,12 @@ details[open] summary::before {
.footer-nologo { .footer-nologo {
display: inline-block; display: inline-block;
fill: currentColor; fill: hsl(0 0% 60%);
transition: fill 120ms;
}
.footer-nologo:hover {
fill: hsl(0 0% 40%);
} }
.container { .container {
@ -213,6 +238,13 @@ details[open] summary::before {
background: hsl(0 0% 90%); 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 { .pagination {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -259,6 +291,14 @@ details[open] summary::before {
border-color: transparent; border-color: transparent;
} }
.pagination-page-info {
color: var(--color-muted);
}
.prose p:not(:last-of-type) {
margin-bottom: 1rem;
}
/* Index */ /* Index */
.filters { .filters {
@ -270,12 +310,13 @@ details[open] summary::before {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
.changesets {
margin-bottom: 2rem;
}
.changeset { .changeset {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-m);
margin-bottom: 1rem; margin-bottom: 1rem;
box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
} }
.changeset-actions { .changeset-actions {
@ -291,11 +332,6 @@ details[open] summary::before {
font-size: var(--font-size-s); font-size: var(--font-size-s);
} }
.changeset-feed-name,
.changeset-time {
/* color: var(--color-muted); */
}
.changeset-action { .changeset-action {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -310,10 +346,6 @@ details[open] summary::before {
margin-left: 0.5em; margin-left: 0.5em;
} }
.changeset-action:hover {
color: var(--accent-color);
}
.changeset-title { .changeset-title {
font-size: var(--font-size-l); font-size: var(--font-size-l);
} }

18
view/templates/about.html
View file

@ -1,10 +1,18 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head %}
<style>
.prose {
font-size: var(--font-size-l);
max-width: 800px;
}
</style>
{% endblock head %}
{% block body %} {% block body %}
<main class="flex-shrink-0"> <div class="container">
<div class="container"> <div class="prose">
<h1 class="mt-5">Headliner</h1> <p>
<p class="lead">
Headliner is monitoring rss feeds of czech news websites for changes in Headliner is monitoring rss feeds of czech news websites for changes in
article headlines. Just because it might be interesting. article headlines. Just because it might be interesting.
</p> </p>
@ -19,5 +27,5 @@
> >
</p> </p>
</div> </div>
</main> </div>
{% endblock body %} {% endblock body %}

15
view/templates/base.html
View file

@ -20,9 +20,22 @@
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
{% block head %}{% endblock %}
</head> </head>
<body> <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"> <main class="main">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</main> </main>

8
view/templates/index.html
View file

@ -1,5 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block header_class %}header-extended{% endblock header_class %}
{% block body %} {% block body %}
<div class="filters"> <div class="filters">
<div class="container"> <div class="container">
@ -25,9 +27,9 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container changesets">
{% for diff in diffs %} {% for diff in diffs %}
<article class="changeset"> <article class="card changeset">
<p class="changeset-actions"> <p class="changeset-actions">
<span class="changeset-feed-name">{{ diff.feed_name }}</span> <span class="changeset-feed-name">{{ diff.feed_name }}</span>
<time class="changeset-time">{{ diff.diff_time }}</time> <time class="changeset-time">{{ diff.diff_time }}</time>
@ -57,7 +59,9 @@
</details> </details>
</article> </article>
{% endfor %} {% endfor %}
</div>
<div class="container">
{{ pagination.links }} {{ pagination.links }}
{{ pagination.info }} {{ pagination.info }}
</div> </div>

13
view/templates/parts/header.html
View file

@ -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>