129 lines
3.3 KiB
HTML
129 lines
3.3 KiB
HTML
{% extends group_config.template_base or "base_demo.html" %}
|
|
|
|
{% block title %}Crumbforest Pulse{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="container">
|
|
<hgroup>
|
|
<h1>📰 Crumbforest Pulse</h1>
|
|
<p>Neuigkeiten, Wissen und Geschichten aus dem Wald.</p>
|
|
</hgroup>
|
|
|
|
<!-- Tag Cloud -->
|
|
<section class="tag-cloud-container">
|
|
<h6>Themenwolke</h6>
|
|
<div class="tag-cloud">
|
|
<a href="/crumbforest/pulse" class="tag-pill {% if not current_tag %}active{% endif %}">
|
|
Alle
|
|
</a>
|
|
{% for tag in tag_cloud %}
|
|
<a href="/crumbforest/pulse?tag={{ tag.name }}" class="tag-pill {% if tag.active %}active{% endif %}"
|
|
style="font-size: {{ tag.size }}; opacity: {{ '1' if tag.active or not current_tag else '0.6' }}">
|
|
{{ tag.name }} <small>({{ tag.count }})</small>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<!-- Articles Grid -->
|
|
<div class="articles-grid">
|
|
{% for post in posts %}
|
|
<article class="post-card">
|
|
<header>
|
|
<small>{{ post.created_at.strftime('%d.%m.%Y') }} • ✍️ {{ post.author }}</small>
|
|
<h3>
|
|
<a href="/crumbforest/pulse/{{ post.slug }}" class="contrast">{{ post.title }}</a>
|
|
</h3>
|
|
</header>
|
|
|
|
<p>{{ post.excerpt }}</p>
|
|
|
|
<footer>
|
|
<div class="tags">
|
|
{% for t in post.tags %}
|
|
<span class="badge">#{{ t }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<a href="/crumbforest/pulse/{{ post.slug }}" role="button" class="outline">
|
|
Lesen →
|
|
</a>
|
|
</footer>
|
|
</article>
|
|
{% else %}
|
|
<article>
|
|
<p>Keine Artikel gefunden. 🍂</p>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<style>
|
|
.tag-cloud-container {
|
|
background: var(--card-background-color);
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.tag-cloud {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tag-pill {
|
|
text-decoration: none;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 99px;
|
|
background-color: var(--secondary);
|
|
color: white;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tag-pill:hover,
|
|
.tag-pill.active {
|
|
background-color: var(--primary);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tag-pill.active {
|
|
box-shadow: 0 0 10px var(--primary-focus);
|
|
}
|
|
|
|
.articles-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.articles-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.7em;
|
|
padding: 2px 6px;
|
|
background-color: var(--card-sectionning-background-color);
|
|
border-radius: 4px;
|
|
color: var(--contrast);
|
|
}
|
|
|
|
.post-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
{% endblock %} |