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>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>Saturn</title>
|
||||
</head>
|
||||
<body>
|
||||
{% for event in events %}
|
||||
<div>
|
||||
<ul>
|
||||
<li>{{ event.dtstart.value }}</li>
|
||||
<li>{{ event.dtend.value }}</li>
|
||||
<li>{{ event.summary.value }}</li>
|
||||
{% if event.description %}
|
||||
<li>{{ event.description.value }}</li>
|
||||
{% endif %}
|
||||
{% if event.location %}
|
||||
<li>{{ event.location.value }}</li>
|
||||
{% endif %}
|
||||
{% if event.rrule %}
|
||||
<li>{{ event.rrule.value }}</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for event in events_day %}
|
||||
<div>
|
||||
<ul>
|
||||
<li>{{ event.dtstart.value }}</li>
|
||||
<li>{{ event.dtend.value }}</li>
|
||||
<li>{{ event.summary.value }}</li>
|
||||
{% if event.description %}
|
||||
<li>{{ event.description.value }}</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block style %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="/static/css/index.css" />
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<h1>Saturn</h1>
|
||||
|
||||
<div id="events">
|
||||
{% for event in events %}
|
||||
<div class="event">
|
||||
<div class="summary">{{ event.summary.value }}</div>
|
||||
<div class="date start-date">{{ event.dtstart.value.isoformat() }}</div>
|
||||
<div class="date end-date">{{ event.dtend.value.isoformat() }}</div>
|
||||
{% if event.description %}
|
||||
<div class="description">{{ event.description.value }}</div>
|
||||
{% endif %}
|
||||
<div class="other">
|
||||
{% if event.location %}
|
||||
<div>{{ event.location.value }}</div>
|
||||
{% endif %}
|
||||
{% if event.rrule %}
|
||||
<div>{{ event.rrule.value }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="events_day">
|
||||
{% for event in events_day %}
|
||||
<div class="event">
|
||||
<div class="summary">{{ event.summary.value }}</div>
|
||||
<div class="date start-date">{{ event.dtstart.value }}</div>
|
||||
<div class="date end-date">{{ event.dtend.value }}</div>
|
||||
{% if event.description %}
|
||||
<div class="description">{{ event.description.value }}</div>
|
||||
{% endif %}
|
||||
<div class="other">
|
||||
{% if event.location %}
|
||||
<div>{{ event.location.value }}</div>
|
||||
{% endif %}
|
||||
{% if event.rrule %}
|
||||
<div>{{ event.rrule.value }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Reference in a new issue