michi/checkvorteil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

desing angepasst

Browse Source
This commit is contained in:
michi 2025-06-16 15:57:37 +02:00
parent e157abb671
commit 7349aefe66
3 changed files with 201 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env
View File

@ -47,3 +47,13 @@ ACME_EMAIL=kontakt@pixelbrew.de
# SSL Debug Variablen hinzufügen
ACME_CASERVER=https://acme-v02.api.letsencrypt.org/directory
TRAEFIK_LOG_LEVEL=DEBUG
TRAEFIK_DEBUG=true
# SSL Status - Zertifikat vorhanden!
SSL_STATUS=active
CERT_EXPIRY=2025-09-14
# Content Setup
BLOG_LAYOUT=cards
CONTENT_PREVIEW=enabled
SAMPLE_CONTENT=true

121
blog.php Normal file
View File

@ -0,0 +1,121 @@
<?php
// filepath: /home/michi/landingpages/checkvorteil/home.php
get_header(); ?>
<section class="hero" style="padding: 3rem 0 5rem;">
<div class="container">
<h1 class="gradient-text">CheckVorteil Blog</h1>
<p>Aktuelle Insights, Strategien und Tools für maximale Online-Business Performance</p>
</div>
</section>
<div class="container">
<section class="section">
<?php if (have_posts()) : ?>
<!-- Kategorie Filter -->
<div style="margin-bottom: 2rem; text-align: center;">
<div style="display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
<a href="<?php echo get_permalink(get_option('page_for_posts')); ?>"
class="btn btn-secondary" style="padding: 0.5rem 1rem;">
Alle Artikel
</a>
<?php
$categories = get_categories(array('hide_empty' => true));
foreach ($categories as $category) :
?>
<a href="<?php echo get_category_link($category->term_id); ?>"
class="btn btn-secondary" style="padding: 0.5rem 1rem;">
<?php echo $category->name; ?> (<?php echo $category->count; ?>)
</a>
<?php endforeach; ?>
</div>
</div>
<!-- Blog Cards Grid -->
<div class="grid grid-3">
<?php while (have_posts()) : the_post();
$categories = get_the_category();
$read_time = ceil(str_word_count(get_the_content()) / 200); // ~200 Wörter/Min
?>
<article class="blog-card">
<!-- Featured Image -->
<?php if (has_post_thumbnail()) : ?>
<div class="blog-card-image">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium', array('style' => 'width: 100%; height: 200px; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0;')); ?>
</a>
</div>
<?php endif; ?>
<div class="blog-card-content">
<!-- Kategorie Tag -->
<?php if (!empty($categories)) : ?>
<div style="margin-bottom: 0.75rem;">
<span class="category-tag"><?php echo esc_html($categories[0]->name); ?></span>
</div>
<?php endif; ?>
<!-- Titel -->
<h3 style="margin-bottom: 0.75rem;">
<a href="<?php the_permalink(); ?>" style="color: #ffffff; text-decoration: none;">
<?php the_title(); ?>
</a>
</h3>
<!-- Excerpt -->
<p style="color: #9ca3af; margin-bottom: 1rem; line-height: 1.5;">
<?php echo wp_trim_words(get_the_excerpt(), 20, '...'); ?>
</p>
<!-- Meta Info -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 0.875rem; color: #6b7280;">
<span>
📅 <?php echo get_the_date('j. M Y'); ?>
</span>
<span>
🕒 <?php echo $read_time; ?> Min. Lesezeit
</span>
</div>
<!-- Read More Button -->
<a href="<?php the_permalink(); ?>" class="btn btn-primary" style="width: 100%; justify-content: center;">
Weiterlesen →
</a>
</div>
</article>
<?php endwhile; ?>
</div>
<!-- Pagination -->
<div style="margin-top: 3rem;">
<?php
the_posts_pagination(array(
'mid_size' => 2,
'prev_text' => '← Vorherige',
'next_text' => 'Nächste →',
'before_page_number' => '<span class="meta-nav screen-reader-text">Seite </span>',
));
?>
</div>
<?php else : ?>
<!-- Keine Posts -->
<div style="text-align: center; padding: 5rem 0;">
<h2 style="color: #9ca3af; margin-bottom: 1rem;">Noch keine Artikel verfügbar</h2>
<p style="color: #6b7280; margin-bottom: 2rem;">
Schreiben Sie den ersten Artikel im WordPress Admin!
</p>
<a href="<?php echo admin_url('post-new.php'); ?>" class="btn btn-primary">
✍️ Ersten Artikel schreiben
</a>
</div>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>

80
style.css
View File

@ -242,16 +242,76 @@ body {
color: #a855f7;
}
/* Category Tags */
.category-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(147, 51, 234, 0.2);
color: #d8b4fe;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.75rem;
/* Blog Card Styles */
.blog-card {
background: rgba(17, 24, 39, 0.7);
backdrop-filter: blur(10px);
border: 1px solid #1f2937;
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card:hover {
border-color: rgba(147, 51, 234, 0.5);
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
.blog-card-image {
position: relative;
overflow: hidden;
}
.blog-card-image a {
display: block;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card-image a {
transform: scale(1.05);
}
.blog-card-content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card-content .btn {
margin-top: auto;
}
/* Pagination Styles */
.page-numbers {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(17, 24, 39, 0.5);
border: 1px solid #374151;
border-radius: 0.5rem;
color: #d1d5db;
text-decoration: none;
transition: all 0.2s;
}
.page-numbers:hover,
.page-numbers.current {
background: #9333ea;
color: white;
border-color: #9333ea;
}
.pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Mobile Styles */