Add auth.mischlabs.de as wide banner card above service grid

Horizontal banner layout with shield icon, spanning full grid width.
Responsive: collapses to vertical on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kroonk
2026-04-13 21:34:43 +02:00
parent 28f5654060
commit 0f35698eb8
2 changed files with 50 additions and 0 deletions

View File

@@ -22,6 +22,20 @@
</header>
<main>
<a href="https://auth.mischlabs.de" class="card card-banner" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #f59e0b;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<path d="M9 12l2 2 4-4"/>
</svg>
</div>
<div class="card-content">
<h2>Single Sign-On</h2>
<p>Zentrales Login fuer alle Dienste</p>
</div>
<span class="card-domain">auth.mischlabs.de</span>
</a>
<div class="grid">
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">

View File

@@ -126,6 +126,27 @@ main {
gap: 1.25rem;
}
/* ===== Banner Card (Auth) ===== */
.card-banner {
flex-direction: row;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 1.25rem;
animation: fadeInUp 0.5s ease backwards;
}
.card-banner .card-content {
flex: 1;
}
.card-banner .card-domain {
border-top: none;
padding-top: 0;
border-left: 1px solid var(--border);
padding-left: 1rem;
}
/* ===== Card ===== */
.card {
display: flex;
@@ -265,9 +286,24 @@ footer p {
width: 20px;
height: 20px;
}
.card-banner {
margin-bottom: 0.75rem;
}
}
@media (max-width: 480px) {
.card-banner {
flex-direction: column;
align-items: flex-start;
}
.card-banner .card-domain {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 0.5rem;
}
.grid {
grid-template-columns: 1fr;
}