ticker-serve: enhance style

This commit is contained in:
Astro 2023-03-19 23:45:16 +01:00
parent 53f0d5f242
commit 608471667c
2 changed files with 19 additions and 3 deletions

View File

@ -8,13 +8,25 @@ body {
max-width: 40rem; max-width: 40rem;
} }
h1 {
text-align: center;
font-size: 300%;
margin: 1rem 0 2rem;
}
h2 { h2 {
margin: 0 0; margin: 0 0;
} }
h1, h2 {
font-family: serif;
font-variant: small-caps;
letter-spacing: 0.3rem;
}
.date { .date {
font-family: sans-serif;
display: inline-flex; display: inline-flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: flex-end;
border: 1px solid black; border: 1px solid black;
background-color: #ffffff; background-color: #ffffff;
color: #444; color: #444;
@ -36,6 +48,7 @@ h2 {
align-self: center; align-self: center;
font-size: 200%; font-size: 200%;
line-height: 1em; line-height: 1em;
letter-spacing: -0.15rem;
} }
.date .month { .date .month {
align-self: center; align-self: center;
@ -43,9 +56,11 @@ h2 {
font-variant-caps: small-caps; font-variant-caps: small-caps;
} }
.weekday { .weekday {
padding-left: 1rem;
font-size: 180%; font-size: 180%;
vertical-align: middle; vertical-align: middle;
display: inline-block;
width: 35rem;
text-align: center;
} }
article { article {

View File

@ -8,6 +8,7 @@
<link rel="icon" type="image/png" href="static/favicon.png"/> <link rel="icon" type="image/png" href="static/favicon.png"/>
</head> </head>
<body> <body>
<h1>Dresden Ticker</h1>
{% for day in days.iter() %} {% for day in days.iter() %}
<div> <div>
<h2> <h2>
@ -15,7 +16,7 @@
format!("wd{}", day.date.weekday().num_days_from_monday()) format!("wd{}", day.date.weekday().num_days_from_monday())
}}"> }}">
<span class="day"> <span class="day">
{{ day.date.day() }} {{ day.date.day() }}.
</span> </span>
<span class="month"> <span class="month">
{{ day.month }} {{ day.month }}
@ -63,7 +64,7 @@
<footer> <footer>
<p> <p>
Ein Projekt des Ein Projekt des
<a href="https://www.c3d2.de/">"C3D2"</a> <a href="https://www.c3d2.de/">C3D2</a>
- -
<a href="https://gitea.c3d2.de/astro/ticker">Code</a> <a href="https://gitea.c3d2.de/astro/ticker">Code</a>
</p> </p>