feat(#29): mashup

* update templates to be more responsive
This commit is contained in:
Benjamin Nussbaum 2025-06-06 23:06:31 +02:00
parent a7a2d9d73e
commit 8946cabf05
28 changed files with 1067 additions and 346 deletions

View file

@ -1,79 +1,57 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Inter:300,400,500" rel="stylesheet"/>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
<title>plugin</title>
<style>
.trmnl .content .description {
word-break: break-word;
}
</style>
</head>
<body class="environment trmnl">
<div class="screen">
<div class="view view--full">
<div class="layout">
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Events</div>
{% for event in data.metadata.events %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.events[event].year }}</span>
<span class="description clamp--3">{{ data.events[event].text }}</span>
</div>
<div class="view view--{{ size }}">
<div class="layout">
<div class="columns">
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Events</div>
{% for event in data.metadata.events %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
{% endfor %}
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Births</div>
{% for birth in data.metadata.births %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.births[birth].year }}</span>
<span class="description clamp--1">{{ data.births[birth].text }}</span>
</div>
<div class="content">
<span class="title title--small">{{ data.events[event].year }}</span>
<span class="description clamp--3">{{ data.events[event].text }}</span>
</div>
{% endfor %}
<div class="title center">Deaths</div>
{% for death in data.metadata.deaths %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.deaths[death].year }}</span>
<span class="description clamp--1">{{ data.deaths[death].text }}</span>
</div>
</div>
{% endfor %}
</div>
<div class="column"
data-list-limit="true"
data-list-max-height="340">
<div class="title center">Births</div>
{% for birth in data.metadata.births %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
{% endfor %}
</div>
<div class="content">
<span class="title title--small">{{ data.births[birth].year }}</span>
<span class="description clamp--1">{{ data.births[birth].text }}</span>
</div>
</div>
{% endfor %}
<div class="title center">Deaths</div>
{% for death in data.metadata.deaths %}
<div class="item ">
<div class="meta">
<span class="index"></span>
</div>
<div class="content">
<span class="title title--small">{{ data.deaths[death].year }}</span>
<span class="description clamp--1">{{ data.deaths[death].text }}</span>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="title_bar">
<img class="image"
src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
<span class="title">This Day in History (Wikipedia)</span>
</div>
<div class="title_bar">
<img class="image"
src="https://raw.githubusercontent.com/jvivona/tidbyt-data/refs/heads/main/thisdayinhistwikipedia/thisdayinhist_icon.svg">
<span class="title">This Day in History (Wikipedia)</span>
<span class="instance">{{ data.metadata.current_date }}</span>
</div>
<span class="instance">{{ data.metadata.current_date }}</span>
</div>
</div>
</body>
</html>