nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 11:53:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Style

Browse source
This commit is contained in:
Ondřej Nývlt 2023-08-17 10:50:02 +02:00
parent 3a53b026bf
commit b77e8fd20f
5 changed files with 82 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
view/static/main.css
View file

@ -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);
}

18
view/templates/about.html
View file

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

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

8
view/templates/index.html
View file

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

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>