From d37c5799ad6851a13d657aa916c75d29ad4c81a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 21:57:31 +0200 Subject: [PATCH] WIP --- view/static/main.css | 96 +++++++++++++++++++++++++++++++++------ view/templates/base.html | 3 ++ view/templates/index.html | 44 ++++++++++-------- 3 files changed, 111 insertions(+), 32 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index 962dd81..812895e 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -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 { - display: block; - padding: 0.5em 1em; - } +.page-link { + display: block; + padding: 0.5em 1em; + text-decoration: none; + color: inherit; +} - & .page-item.active { - background-color: var(--accent-color); - } +.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; diff --git a/view/templates/base.html b/view/templates/base.html index b3977e5..4854677 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -17,6 +17,9 @@ data-domain="headline.beta.nolog.cz" src="https://plausible.nolog.cz/js/plausible.js" > + + +
diff --git a/view/templates/index.html b/view/templates/index.html index f056ee1..4cd5e91 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -2,22 +2,27 @@ {% block body %}
-
-
- - -
-
+
+
+
+ + +
+
+
{% for diff in diffs %}