From c238f11015066ff26696c1a6842361c641b0bbbb Mon Sep 17 00:00:00 2001 From: Severin Kaderli Date: Mon, 17 Jan 2022 20:07:49 +0100 Subject: [PATCH] Add styles.css Signed-off-by: Severin Kaderli --- .editorconfig | 8 +++++ static/styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 72 +++++++++++++++++++++---------------------- 3 files changed, 117 insertions(+), 36 deletions(-) create mode 100644 .editorconfig create mode 100644 static/styles.css diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..18616d3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 2 +charset = utf-8 diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..a0ae429 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,73 @@ +:root { + --spacing: 12px; + --spacing-half: calc(0.5 * var(--spacing)); + --spacing-2: calc(2 * var(--spacing)); + --spacing-4: calc(4 * var(--spacing)); + + --font-sans-serif: sans-serif; + + --color-background: #e5e5e5; + --color-text: #191919; + --link-color: #ffff00; +} + +@media (prefers-color-scheme: DARK) { + :root { + --color-background: #191919; + --color-background-accent: #2b2b2b; + --color-text: #e5e5e5; + --link-color: #ffff00; + } +} + +html { + margin: 0; + padding: 0; + font-size: 16px; +} + +body { + padding: 0 var(--spacing); + display: grid; + grid-template-columns: 1fr min(1024px, 100%) 1fr; + gap: var(--spacing-4) var(--spacing); + background-color: var(--color-background); + color: var(--color-text); + font-family: var(--font-sans-serif); + font-size: 100%; +} + +header, +main, +footer { + grid-column: 2; +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid var(--color-text); +} + +thead { + border-bottom: 1px solid var(--color-text); + background: var(--color-background-accent); +} + +tbody tr:nth-child(even) { + background: var(--color-background-accent); +} + +tfoot { + border-bottom: 1px solid var(--color-text); +} + +th { + text-align: left; +} + +th, +td { + border-spacing: 0; + padding: var(--spacing-half); +} diff --git a/templates/index.html b/templates/index.html index cd9254d..ca7739b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,47 +2,47 @@ - - - + + + -
-

My book list

-

This page lists all books that I've read since I started tracking them.

-
+
+

My book list

+

This page lists all books that I've read since I started tracking them.

+
-
- - - - - - - - - - - - - {% for book in books %} - - - - - - - - - {% endfor %} - -
TitleAuthorYearPagesStartedFinished
{{book.title}}{{book.author}}{{book.year}}{{book.pages}}{{book.startDate}}{{book.endDate}}
-
+
+ + + + + + + + + + + + + {% for book in books %} + + + + + + + + + {% endfor %} + +
TitleAuthorYearPagesStartedFinished
{{book.title}}{{book.author}}{{book.year}}{{book.pages}}{{book.startDate}}{{book.endDate}}
+
-
- Hello World! {{GIT_COMMIT}} -
+