This commit is contained in:
Ondřej Nývlt 2023-08-16 21:57:31 +02:00
parent ac690f2fb2
commit d37c5799ad
3 changed files with 111 additions and 32 deletions

View file

@ -1,17 +1,21 @@
/* Global */
:root {
--border-color: hsl(0 0% 80%);
--accent-color: blue;
--border-color: hsl(0 0% 80% / 60%);
--accent-color: hsl(225 90% 40%);
--color-muted: hsl(0 0% 50%);
--radius-s: 0.25em;
--radius-m: 0.5em;
--font-size-m: 1rem;
--font-size-s: 0.85rem;
--font-size-xs: 0.75rem;
--font-size-l: 1.25rem;
--box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
}
html {
box-sizing: border-box;
font-family: system-ui;
font-family: "Inter", system-ui;
}
*,
@ -74,8 +78,42 @@ body {
padding: 0 2rem;
}
ins {
background-color: green;
.input {
border-radius: var(--radius-s);
border: 1px solid var(--border-color);
padding: 0.375rem 0.75rem;
font-size: var(--font-size-m);
transition: border-color 120ms, box-shadow 120ms;
}
.input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px hsl(225 90% 40% / 50%);
outline: none;
}
.button {
display: inline-flex;
align-items: center;
gap: 0.5em;
border-radius: var(--radius-s);
border: 1px solid var(--border-color);
padding: 0.375rem 0.75rem;
background: hsl(0 0% 95%);
font-size: var(--font-size-m);
transition: background-color 120ms;
color: hsl(0 0% 40%);
font-weight: 500;
font-size: 0.9em;
line-height: 1.5rem;
}
.button:not(:disabled) {
cursor: pointer;
}
.button:hover {
background: hsl(0 0% 90%);
}
table,
@ -89,15 +127,47 @@ td {
list-style-type: none;
padding: 0;
display: flex;
margin-bottom: 1rem;
}
& .page-link {
.page-link {
display: block;
padding: 0.5em 1em;
}
text-decoration: none;
color: inherit;
}
& .page-item.active {
.page-item {
border: 1px solid var(--border-color);
box-shadow: var(--box-shadow);
}
.page-item:first-of-type {
border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.page-item:last-of-type {
border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.page-item:not(:last-of-type) {
border-right-width: 0px;
}
.page-item.active .page-link {
background-color: var(--accent-color);
}
color: white;
border-color: transparent;
}
/* Index */
.filters {
margin-bottom: 2rem;
position: sticky;
top: 0;
background-color: white;
padding: 0.75rem 0;
}
.changeset {
@ -148,7 +218,7 @@ td {
font-size: var(--font-size-l);
}
.changeset svg {
.inline-icon {
display: inline-block;
fill: currentColor;
width: 1.25em;

View file

@ -17,6 +17,9 @@
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" />
</head>
<body>
<header class="header">

View file

@ -2,10 +2,11 @@
{% block body %}
<div class="container">
<div class="filters">
<form method="get">
<div class="d-flex">
<input
class="m-2 form-control"
class="input"
type="text"
id="search"
name="search"
@ -15,9 +16,13 @@
class="button"
type="submit"
value="Hledat"
>Hledat</button>
>
Hledat
<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>
</button>
</div>
</form>
</div>
{% for diff in diffs %}
<article class="changeset">
@ -25,13 +30,14 @@
<span class="changeset-feed-name">{{ diff.feed_name }}</span>
<time class="changeset-time">{{ diff.diff_time }}</time>
<a class="changeset-action" href="{{ diff.article_url }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>
<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>
Display article
</a>
{# Not implemented yet:
<a class="changeset-action" href="/article/{{ diff.article_url }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path></svg>
<svg class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path></svg>
Show change history
</a>
</a> #}
</p>
<details>
<summary class="changeset-title">