Added style to homepage
This commit is contained in:
parent
e32098e68c
commit
e0a1f060a7
GPG key ID:
9833D3C5A25BD227
4 changed files with 148 additions and 38 deletions
61
saturn/server/static/css/index.css
Normal file
61
saturn/server/static/css/index.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
20
saturn/server/static/css/main.css
Normal file
20
saturn/server/static/css/main.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
16
saturn/server/templates/base.html
Normal file
16
saturn/server/templates/base.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang='en'>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8' />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<title>{% block title %}Saturn{% endblock %}</title>
|
||||||
|
|
||||||
|
{% block style %}
|
||||||
|
<link rel="stylesheet" href="/static/css/main.css" />
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,38 +1,51 @@
|
||||||
<!DOCTYPE html>
|
{% extends 'base.html' %}
|
||||||
<html lang='en'>
|
|
||||||
<head>
|
{% block style %}
|
||||||
<title>Saturn</title>
|
{{ super() }}
|
||||||
</head>
|
<link rel="stylesheet" href="/static/css/index.css" />
|
||||||
<body>
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<h1>Saturn</h1>
|
||||||
|
|
||||||
|
<div id="events">
|
||||||
{% for event in events %}
|
{% for event in events %}
|
||||||
<div>
|
<div class="event">
|
||||||
<ul>
|
<div class="summary">{{ event.summary.value }}</div>
|
||||||
<li>{{ event.dtstart.value }}</li>
|
<div class="date start-date">{{ event.dtstart.value.isoformat() }}</div>
|
||||||
<li>{{ event.dtend.value }}</li>
|
<div class="date end-date">{{ event.dtend.value.isoformat() }}</div>
|
||||||
<li>{{ event.summary.value }}</li>
|
|
||||||
{% if event.description %}
|
{% if event.description %}
|
||||||
<li>{{ event.description.value }}</li>
|
<div class="description">{{ event.description.value }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<div class="other">
|
||||||
{% if event.location %}
|
{% if event.location %}
|
||||||
<li>{{ event.location.value }}</li>
|
<div>{{ event.location.value }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if event.rrule %}
|
{% if event.rrule %}
|
||||||
<li>{{ event.rrule.value }}</li>
|
<div>{{ event.rrule.value }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div id="events_day">
|
||||||
{% for event in events_day %}
|
{% for event in events_day %}
|
||||||
<div>
|
<div class="event">
|
||||||
<ul>
|
<div class="summary">{{ event.summary.value }}</div>
|
||||||
<li>{{ event.dtstart.value }}</li>
|
<div class="date start-date">{{ event.dtstart.value }}</div>
|
||||||
<li>{{ event.dtend.value }}</li>
|
<div class="date end-date">{{ event.dtend.value }}</div>
|
||||||
<li>{{ event.summary.value }}</li>
|
|
||||||
{% if event.description %}
|
{% if event.description %}
|
||||||
<li>{{ event.description.value }}</li>
|
<div class="description">{{ event.description.value }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
<div class="other">
|
||||||
|
{% if event.location %}
|
||||||
|
<div>{{ event.location.value }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if event.rrule %}
|
||||||
|
<div>{{ event.rrule.value }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</body>
|
</div>
|
||||||
</html>
|
{% endblock %}
|
||||||
|
|
|
||||||
Reference in a new issue