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:
14
index.html
14
index.html
@@ -22,6 +22,20 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<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">
|
<div class="grid">
|
||||||
|
|
||||||
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
|
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
|
||||||
|
|||||||
36
style.css
36
style.css
@@ -126,6 +126,27 @@ main {
|
|||||||
gap: 1.25rem;
|
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 ===== */
|
||||||
.card {
|
.card {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -265,9 +286,24 @@ footer p {
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-banner {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@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 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user