Fix style glitch on page transition

This commit is contained in:
Ondřej 2023-08-17 17:03:18 +02:00
parent b3b20d8a77
commit a70a0b464d
3 changed files with 48 additions and 49 deletions

View file

@ -414,3 +414,41 @@ details[open] summary::before {
padding-right: 1rem;
vertical-align: top;
}
/* Article detail */
.article-detail h1 {
margin-bottom: 1rem;
font-size: var(--font-size-l);
}
.page-heading {
font-size: var(--font-size-l);
margin-bottom: 2rem;
}
.article-detail-diffs th,
.article-detail-diffs td {
padding: 0.5rem 0.75rem;
}
.article-detail-diffs td:last-child {
width: 100%;
}
.article-detail-diffs th {
font-size: var(--font-size-xs);
color: var(--color-muted);
font-weight: 500;
}
.article-detail-diffs tr:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
/* About */
.page-about-prose {
font-size: var(--font-size-l);
max-width: 800px;
}

View file

@ -1,21 +1,13 @@
{% extends "base.html" %}
{% block head %}
<style>
.prose {
font-size: var(--font-size-l);
max-width: 800px;
}
</style>
{% endblock head %}
{% block body %}
<div class="container">
<div class="prose">
<div class="prose page-about-prose">
<p>
Headline is monitoring rss feeds of czech news websites for changes in
article headlines. Just because it might be interesting. You can read more about it on <a href="https://www.zive.cz/clanky/mrknete-novinarum-pod-ruce-tenhle-web-vam-ukaze-jak-se-titulek-clanku-zmeni-treba-petkrat-za-hodinu/sc-3-a-223150/default.aspx">zive.cz</a> or <a href="https://a2larm.cz/2022/10/co-je-psano-neni-dano-online-media-meni-nazvy-clanku-i-nekolikrat-za-den/">a2larm.cz</a>.
</p>
<p>
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.

View file

@ -1,44 +1,13 @@
{% 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 td:last-child {
width: 100%;
}
.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>
<div class="container article-detail">
<h1>
Diffs for the article at
<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
</h1>
<div class="card">
<table class="diff-table">
<table class="article-detail-diffs">
{% for diff in diffs %}
<tr>
<th>{{ diff.diff_time }}</th>