You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
12 KiB
309 lines
12 KiB
{% extends "core/base.html" %}
|
|
{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags crispy_forms_tags %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Blog page specific styles */
|
|
.blog-post {
|
|
margin-bottom: 3rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.blog-post:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.blog-post-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.blog-post-image img {
|
|
transition: transform 0.5s ease;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 450px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.blog-post:hover .blog-post-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.blog-post-content {
|
|
padding: 1.5rem;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
height: 100%;
|
|
}
|
|
|
|
.blog-post-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.blog-post-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 1.5rem;
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.blog-post-meta-item i {
|
|
margin-right: 0.5rem;
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.blog-post-title {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.blog-post:hover .blog-post-title {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.blog-post-excerpt {
|
|
color: #6c757d;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.blog-post-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
color: var(--bs-primary);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.blog-post-link i {
|
|
margin-left: 0.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.blog-post-link:hover {
|
|
color: #65ab27;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.blog-post-link:hover i {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.carousel-blog {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-blog .carousel-inner {
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-blog .carousel-item {
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.carousel-blog .carousel-item img {
|
|
object-fit: contain;
|
|
height: 450px;
|
|
}
|
|
|
|
.carousel-blog .carousel-control-prev,
|
|
.carousel-blog .carousel-control-next {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.carousel-blog:hover .carousel-control-prev,
|
|
.carousel-blog:hover .carousel-control-next {
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel-blog .carousel-control-prev {
|
|
left: 20px;
|
|
}
|
|
|
|
.carousel-blog .carousel-control-next {
|
|
right: 20px;
|
|
}
|
|
|
|
.carousel-blog .carousel-control-prev-icon,
|
|
.carousel-blog .carousel-control-next-icon {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.carousel-blog .carousel-indicators {
|
|
bottom: 20px;
|
|
}
|
|
|
|
.carousel-blog .carousel-indicators button {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.carousel-blog .carousel-indicators button.active {
|
|
background-color: var(--bs-primary);
|
|
}
|
|
|
|
.reading-time {
|
|
background-color: var(--bs-primary);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.blog-post-content {
|
|
margin-top: 1rem;
|
|
height: auto;
|
|
}
|
|
|
|
.blog-post-image,
|
|
.carousel-blog,
|
|
.carousel-blog .carousel-inner,
|
|
.carousel-blog .carousel-item {
|
|
height: auto;
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<div class="row mb-5">
|
|
<div class="col-12 text-center">
|
|
<h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
|
|
<p class="lead text-muted">{{ page.subtitle }}</p>
|
|
<div class="divider mx-auto my-4" style="width: 80px; height: 4px; background-color: var(--bs-primary);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{% for post in self.posts %}
|
|
<div class="col-lg-12 blog-post">
|
|
<div class="row g-0 align-items-stretch">
|
|
<div class="col-md-5 d-flex">
|
|
{% if post.value.images|length == 1 %}
|
|
<div class="blog-post-image">
|
|
{% image post.value.images.0 max-650x450 as img %}
|
|
{% image post.value.images.0 original as img_orig %}
|
|
<a href="{{ img_orig.url }}" data-bs-toggle="modal" data-bs-target="#imgModal{{ img.id }}">
|
|
<img src="{{ img.url }}" alt="{{ img.alt }}" class="img-fluid" />
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div id="carousel-{{ post.id }}" class="carousel slide carousel-blog" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
{% for image in post.value.images %}
|
|
<button type="button" data-bs-target="#carousel-{{ post.id }}" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="carousel-inner">
|
|
{% for image in post.value.images %}
|
|
{% image image max-650x450 as img %}
|
|
{% image image original as img_orig %}
|
|
<div class="carousel-item{% if forloop.first %} active{% endif %}">
|
|
<a href="{{ img_orig.url }}" data-bs-toggle="modal" data-bs-target="#imgModal{{ img.id }}">
|
|
<img src="{{ img.url }}" class="d-block w-100" alt="{{ img.alt }}" />
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ post.id }}" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ post.id }}" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-7 d-flex">
|
|
<div class="blog-post-content w-100">
|
|
<div class="blog-post-meta">
|
|
{% if post.value.author %}
|
|
<div class="blog-post-meta-item">
|
|
<i class="bi bi-person-circle"></i>
|
|
<span>{{ post.value.author }}</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="blog-post-meta-item">
|
|
<i class="bi bi-calendar-event"></i>
|
|
<span>{{ post.value.date }}</span>
|
|
</div>
|
|
<div class="blog-post-meta-item">
|
|
<i class="bi bi-clock"></i>
|
|
<span class="reading-time">{{ post.value.text|striptags|wordcount|divisibleby:200|add:1 }} min Lesezeit</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="blog-post-title">{{ post.value.title }}</h2>
|
|
<div class="blog-post-excerpt">
|
|
{{ post.value.text|richtext }}
|
|
</div>
|
|
{% if post.value.url %}
|
|
<a href="{{ post.value.url }}" class="blog-post-link">
|
|
Mehr Infos <i class="bi bi-arrow-right"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% for image in post.value.images %}
|
|
{% image image max-650x450 as img %}
|
|
{% image image original as img_orig %}
|
|
<div class="modal fade" id="imgModal{{ img.id }}" tabindex="-1" aria-labelledby="carouselModalLabel{{ img.id }}" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="carouselModalLabel{{ img.id }}">{{ img.alt }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<img src="{{ img_orig.url }}" alt="{{ img.alt }}" class="img-fluid" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|