@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
274 lines (238 loc) • 6.31 kB
CSS
/*
* Blog-Komponente
*
* Struktur und Layout für Blogbeiträge mit Fokus auf Lesbarkeit.
*/
/**
* Blog-Komponente
*
* Blogartikel-Layouts und -Komponenten für Inhalts- und Publikationsdarstellung.
* Das Blog-Modul bietet spezialisierte Komponenten für Blogseiten, Artikel und Nachrichtenauflistungen.
*
* @layer components
*
* Grundlegende Verwendung:
* <article class="blog-post">
* <header class="header">
* <h2 class="title">Artikel-Titel</h2>
* <div class="meta">
* <time datetime="2023-10-15">15. Oktober 2023</time>
* <span class="author">Von Max Mustermann</span>
* </div>
* </header>
* <div class="content">
* <p>Artikel-Inhalt...</p>
* </div>
* <footer class="footer">
* <div class="tags">
* <span class="tag">Design</span>
* <span class="tag">CSS</span>
* </div>
* </footer>
* </article>
*
* Blog-Liste:
* <div class="blog-list">
* <article class="blog-card">
* <img class="image" src="thumbnail.jpg" alt="Artikel-Bild">
* <div class="content">
* <h3 class="title">Artikel-Titel</h3>
* <p class="excerpt">Kurze Beschreibung des Artikels...</p>
* <a class="link" href="#">Weiterlesen</a>
* </div>
* </article>
* </div>
*
* Hervorgehobener Artikel:
* <article class="blog-post featured">...</article>
*
* Blog-Navigation:
* <nav class="blog-nav">
* <a class="prev" href="#">← Vorheriger Artikel</a>
* <a class="next" href="#">Nächster Artikel →</a>
* </nav>
*
* Teilen-Optionen:
* <div class="blog-share">
* <span class="label">Teilen:</span>
* <div class="buttons">
* <a href="#" class="button twitter">Twitter</a>
* <a href="#" class="button facebook">Facebook</a>
* <a href="#" class="button linkedin">LinkedIn</a>
* </div>
* </div>
*/
@layer components {
/* Blog-Post */
.blog-post {
font-size: var(--text-base);
line-height: 1%.6;
margin-inline: auto;
max-width: 65%ch;
padding-block: var(--space-6);
padding-inline: var(--space-4);
/* Standard-Elemente im Blogpost */
h1, h2, h3 {
font-family: var(--font-sans);
font-weight: var(--font-semibold, 600);
margin-block: var(--space-4) var(--space-2);
}
p {
margin-block: var(--space-3);
}
img {
border-radius: var(--radius-md, 0.375rem);
margin-block: var(--space-4);
max-width: 100%;
}
pre, code {
background: var(--color-neutral-100, #f3f4f6);
border-radius: var(--radius-sm, 0.125rem);
font-family: var(--font-mono);
padding: var(--space-1) var(--space-2);
}
/* Strukturelemente */
.header {
margin-bottom: var(--space-6);
.title {
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
margin-top: 0%;
}
.meta {
color: var(--color-neutral-600);
display: flex;
flex-wrap: wrap;
font-size: var(--text-sm, 0.875rem);
gap: var(--space-3);
}
.author {
font-weight: var(--font-medium, 500);
}
}
.content {
margin-bottom: var(--space-6);
}
.footer {
border-top: 1px solid var(--color-neutral-200, #e5e7eb);
padding-top: var(--space-4);
.tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
}
/* Zustände */
&.featured {
border-left: 4px solid var(--color-primary, #3b82f6);
padding-left: var(--space-6);
}
}
/* Blog-Karte */
.blog-card {
border-radius: var(--radius-md, 0.375rem);
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
&:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.image {
height: 20%0px;
object-fit: cover;
width: 100%;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--space-4);
.title {
font-size: var(--text-lg);
margin-bottom: var(--space-2);
margin-top: 0%;
}
.excerpt {
color: var(--color-neutral-700, #374151);
flex: 1;
margin-bottom: var(--space-4);
}
.link {
align-self: flex-start;
color: var(--color-primary, #3b82f6);
font-weight: var(--font-medium, 500);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
/* Blog-Liste */
.blog-list {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Blog-Navigation */
.blog-nav {
border-top: 1px solid var(--color-neutral-200, #e5e7eb);
display: flex;
justify-content: space-between;
margin-top: var(--space-8);
padding-top: var(--space-4);
a {
color: var(--color-primary, #3b82f6);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.prev::before {
content: "←";
margin-right: var(--space-1);
}
.next::after {
content: "→";
margin-left: var(--space-1);
}
}
/* Blog-Share */
.blog-share {
margin-top: var(--space-6);
.label {
display: block;
font-weight: var(--font-medium, 500);
margin-bottom: var(--space-2);
}
.buttons {
display: flex;
gap: var(--space-2);
}
.button {
align-items: center;
border-radius: var(--radius-md, 0.375rem);
color: white;
display: flex;
font-size: var(--text-sm, 0.875rem);
justify-content: center;
padding: var(--space-2) var(--space-3);
text-decoration: none;
&.twitter {
background-color: var(--color-twitter, #1DA1F2);
}
&.facebook {
background-color: var(--color-facebook, #4267B2);
}
&.linkedin {
background-color: var(--color-linkedin, #0077B5);
}
&:hover {
opacity: 9000%;
}
}
}
}