From e0a1f060a7df698307bc3e1328d99a8f8ad19fca Mon Sep 17 00:00:00 2001 From: "Edgar P. Burkhart" Date: Wed, 26 Jan 2022 17:34:31 +0100 Subject: [PATCH] Added style to homepage --- saturn/server/static/css/index.css | 61 ++++++++++++++++++++ saturn/server/static/css/main.css | 20 +++++++ saturn/server/templates/base.html | 16 ++++++ saturn/server/templates/index.html | 89 +++++++++++++++++------------- 4 files changed, 148 insertions(+), 38 deletions(-) create mode 100644 saturn/server/static/css/index.css create mode 100644 saturn/server/static/css/main.css create mode 100644 saturn/server/templates/base.html diff --git a/saturn/server/static/css/index.css b/saturn/server/static/css/index.css new file mode 100644 index 0000000..19bd8f8 --- /dev/null +++ b/saturn/server/static/css/index.css @@ -0,0 +1,61 @@ +body { + display: grid; + grid-template-columns: + 1fr + 1fr; + grid-template-rows: + auto + 1fr; + column-gap: 2rem; +} + +body > h1 { + grid-row: 1; + grid-column: 1 / span 2; +} + +body > * { + margin: 2rem; +} + +.event { + margin: 1rem; + display: grid; + grid-template-columns: + 1fr + 1fr; + grid-template-rows: + auto + auto + auto; + gap: .5rem; + background: var(--ui-01); + padding: 1rem; +} +.event > .summary { + font-weight: 400; + font-size: 1.5rem; + grid-row: 1; + grid-column: 1 / span 2; +} +.event > .date { + grid-row: 2; + font-size: 1.1rem; +} +.event > .start-date { + grid-column: 1; + text-align: right; +} +.event > .end-date { + grid-column: 2; +} +.event > .description { + grid-column: 1; +} +.event > .other { + grid-column: 2; +} +.event > .description, +.event > .other > * { + padding-top: 1rem; +} diff --git a/saturn/server/static/css/main.css b/saturn/server/static/css/main.css new file mode 100644 index 0000000..a6d63cf --- /dev/null +++ b/saturn/server/static/css/main.css @@ -0,0 +1,20 @@ +:root { + --ui-background: white; + --ui-01: var(--gray-10); + --text-01: var(--gray-100); + + --gray-10: #f4f4f4; + --gray-100: #161616; +} + +body { + margin: 0; + font-family: Inter, sans-serif; + background: var(--ui-background); + color: var(--text-01); +} + +h1 { + font-weight: 300; + font-size: 3rem; +} diff --git a/saturn/server/templates/base.html b/saturn/server/templates/base.html new file mode 100644 index 0000000..d3658c3 --- /dev/null +++ b/saturn/server/templates/base.html @@ -0,0 +1,16 @@ + + + + + + + {% block title %}Saturn{% endblock %} + + {% block style %} + + {% endblock %} + + + {% block body %}{% endblock %} + + diff --git a/saturn/server/templates/index.html b/saturn/server/templates/index.html index 43ba2bc..38362a6 100644 --- a/saturn/server/templates/index.html +++ b/saturn/server/templates/index.html @@ -1,38 +1,51 @@ - - - - Saturn - - - {% for event in events %} -
- -
- {% endfor %} - {% for event in events_day %} -
- -
- {% endfor %} - - +{% extends 'base.html' %} + +{% block style %} +{{ super() }} + +{% endblock %} + +{% block body %} +

Saturn

+ +
+ {% for event in events %} +
+
{{ event.summary.value }}
+
{{ event.dtstart.value.isoformat() }}
+
{{ event.dtend.value.isoformat() }}
+ {% if event.description %} +
{{ event.description.value }}
+ {% endif %} +
+ {% if event.location %} +
{{ event.location.value }}
+ {% endif %} + {% if event.rrule %} +
{{ event.rrule.value }}
+ {% endif %} +
+
+ {% endfor %} +
+
+ {% for event in events_day %} +
+
{{ event.summary.value }}
+
{{ event.dtstart.value }}
+
{{ event.dtend.value }}
+ {% if event.description %} +
{{ event.description.value }}
+ {% endif %} +
+ {% if event.location %} +
{{ event.location.value }}
+ {% endif %} + {% if event.rrule %} +
{{ event.rrule.value }}
+ {% endif %} +
+
+ {% endfor %} +
+{% endblock %}