diff --git a/view/static/main.css b/view/static/main.css index f4c6e20..e06c8ca 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -18,6 +18,14 @@ html { font-family: "Inter", system-ui; } +body { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: stretch; + line-height: 1.5; +} + *, *::before, *::after { @@ -56,20 +64,101 @@ h4, h5, h6 { overflow-wrap: break-word; + font-size: inherit; + font-weight: inherit; } -body { - min-height: 100vh; +table, +th, +tr, +td { + text-align: inherit; +} + +summary { + cursor: pointer; + list-style: none; display: flex; - flex-direction: column; - align-items: stretch; + align-items: center; + gap: 0.5em; +} + +summary::-webkit-details-marker { + display: none; +} + +summary::before { + content: url('data:image/svg+xml,'); + display: grid; + place-content: center; + transition: transform 120ms; +} + +details[open] summary::before { + transform: rotate(90deg); +} + +.header { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.header .container { + display: flex; + align-items: center; + gap: 2rem; +} + +.header nav { + display: flex; + align-items: center; + gap: 1rem; +} + +.header a { + color: inherit; + text-decoration: none; +} + +.header h1 { + font-size: 1.5rem; + font-weight: 700; +} + +.header h1 .del { + text-decoration: line-through; + text-decoration-thickness: 2px; +} + +.header h1 .ins { + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-style: wavy; +} + +.main { + margin-bottom: auto; } .footer { - margin-top: auto; + margin-top: 4rem; padding: 1.5rem 0; - margin-top: 1.5rem; - border-top: 1px solid var(--border-color); + color: hsl(0 0% 60%); +} + +.footer a { + color: inherit; +} + +.footer-container { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.footer-nologo { + display: inline-block; + fill: currentColor; } .container { @@ -116,13 +205,6 @@ body { background: hsl(0 0% 90%); } -table, -th, -tr, -td { - text-align: inherit; -} - .pagination { list-style-type: none; padding: 0; @@ -160,6 +242,14 @@ td { border-color: transparent; } +.diff ins { + text-decoration-color: hsl(120 50% 75% / 50%); +} + +.diff del { + text-decoration-color: hsl(0 50% 40% / 50%); +} + /* Index */ .filters { @@ -168,6 +258,7 @@ td { top: 0; background-color: white; padding: 0.75rem 0; + border-bottom: 1px solid var(--border-color); } .changeset { @@ -228,6 +319,10 @@ td { margin-bottom: 1rem; } +.changeset table th { + padding-right: 1rem; +} + /* Article detail */ .diffs-list { diff --git a/view/templates/base.html b/view/templates/base.html index 4854677..f22109f 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -22,16 +22,10 @@ -
-
-

- Headliner -

-
-
-
+ {% include "parts/header.html" %} +
{% block body %}{% endblock %}
- {% include 'parts/footer.html' %} + {% include "parts/footer.html" %} diff --git a/view/templates/index.html b/view/templates/index.html index 6310eb7..029bd9e 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -1,8 +1,8 @@ {% extends "base.html" %} {% block body %} -
-
+
+
+
+
{% for diff in diffs %}

@@ -40,16 +42,18 @@

- {{ diff.diff_html|safe }} +

{{ diff.diff_html|safe }}

 -

- Old: - {{ diff.title_orig }} -

-

- New: - {{ diff.title_new }} -

+ + + + + + + + + +
Old{{ diff.title_orig }}
New{{ diff.title_new }}
{% endfor %} diff --git a/view/templates/parts/footer.html b/view/templates/parts/footer.html index 604114a..6ddc5f9 100644 --- a/view/templates/parts/footer.html +++ b/view/templates/parts/footer.html @@ -1,5 +1,16 @@ diff --git a/view/templates/parts/header.html b/view/templates/parts/header.html new file mode 100644 index 0000000..d35ecad --- /dev/null +++ b/view/templates/parts/header.html @@ -0,0 +1,13 @@ +
+
+ +

+ Headliner +

+ + +
+