mirror of
https://git.nolog.cz/NoLog.cz/headline.git
synced 2025-02-07 14:12:45 +01:00
WIP
This commit is contained in:
Ondřej Nývlt
parent
ac690f2fb2
commit
d37c5799ad
3 changed files with 111 additions and 32 deletions
|
|
@ -1,17 +1,21 @@
|
||||||
|
/* Global */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--border-color: hsl(0 0% 80%);
|
--border-color: hsl(0 0% 80% / 60%);
|
||||||
--accent-color: blue;
|
--accent-color: hsl(225 90% 40%);
|
||||||
--color-muted: hsl(0 0% 50%);
|
--color-muted: hsl(0 0% 50%);
|
||||||
|
--radius-s: 0.25em;
|
||||||
--radius-m: 0.5em;
|
--radius-m: 0.5em;
|
||||||
--font-size-m: 1rem;
|
--font-size-m: 1rem;
|
||||||
--font-size-s: 0.85rem;
|
--font-size-s: 0.85rem;
|
||||||
--font-size-xs: 0.75rem;
|
--font-size-xs: 0.75rem;
|
||||||
--font-size-l: 1.25rem;
|
--font-size-l: 1.25rem;
|
||||||
|
--box-shadow: 0 2px 0 hsl(0 0% 50% / 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: system-ui;
|
font-family: "Inter", system-ui;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
|
@ -74,8 +78,42 @@ body {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
ins {
|
.input {
|
||||||
background-color: green;
|
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,
|
table,
|
||||||
|
|
@ -89,15 +127,47 @@ td {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
& .page-link {
|
.page-link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .page-item.active {
|
.page-item {
|
||||||
background-color: var(--accent-color);
|
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 {
|
.changeset {
|
||||||
|
|
@ -148,7 +218,7 @@ td {
|
||||||
font-size: var(--font-size-l);
|
font-size: var(--font-size-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
.changeset svg {
|
.inline-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
width: 1.25em;
|
width: 1.25em;
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,9 @@
|
||||||
data-domain="headline.beta.nolog.cz"
|
data-domain="headline.beta.nolog.cz"
|
||||||
src="https://plausible.nolog.cz/js/plausible.js"
|
src="https://plausible.nolog.cz/js/plausible.js"
|
||||||
></script>
|
></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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,11 @@
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="filters">
|
||||||
<form method="get">
|
<form method="get">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<input
|
<input
|
||||||
class="m-2 form-control"
|
class="input"
|
||||||
type="text"
|
type="text"
|
||||||
id="search"
|
id="search"
|
||||||
name="search"
|
name="search"
|
||||||
|
|
@ -15,9 +16,13 @@
|
||||||
class="button"
|
class="button"
|
||||||
type="submit"
|
type="submit"
|
||||||
value="Hledat"
|
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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% for diff in diffs %}
|
{% for diff in diffs %}
|
||||||
<article class="changeset">
|
<article class="changeset">
|
||||||
|
|
@ -25,13 +30,14 @@
|
||||||
<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>
|
||||||
<a class="changeset-action" href="{{ diff.article_url }}">
|
<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
|
Display article
|
||||||
</a>
|
</a>
|
||||||
|
{# Not implemented yet:
|
||||||
<a class="changeset-action" href="/article/{{ diff.article_url }}">
|
<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
|
Show change history
|
||||||
</a>
|
</a> #}
|
||||||
</p>
|
</p>
|
||||||
<details>
|
<details>
|
||||||
<summary class="changeset-title">
|
<summary class="changeset-title">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue