mipadoo - Globales Logo CSS System
🎯 Automatische Logo-Erkennung
Diese CSS-Klassen werden automatisch gestylt:
📏 Größenvarianten
mipadoo
mipadoo
mipadoo
mipadoo
🎨 Farbvarianten
mipadoo
mipadoo
mipadoo
mipadoo
🏗️ Kontext-sensitive Größen
💻 Verwendung im Code
Einfache Implementierung:
<!-- Automatisches Logo -->
<div class="mipadoo-logo"></div>
<!-- Oder mit Text -->
<a href="/" class="mipadoo-logo">mipadoo</a>
<!-- Größenvarianten -->
<div class="mipadoo-logo--small">mipadoo</div>
<div class="mipadoo-logo--large">mipadoo</div>
<!-- Farbvarianten -->
<div class="mipadoo-logo--white">mipadoo</div>
<div class="mipadoo-logo--dark">mipadoo</div>
<!-- Data-Attribut -->
<div data-logo="mipadoo"></div>
In bestehenden Headern:
<header>
<div class="logo">mipadoo</div> <!-- Wird automatisch gestylt -->
</header>
<nav>
<a href="/" class="mipadoo-logo"></a> <!-- Logo erscheint automatisch -->
</nav>
⚡ Installation
1. CSS in globale Stylesheet einfügen:
/* In main.css, global.css oder app.css einfügen */
@import url('mipadoo-logo-global.css');
2. Oder direkt in HTML einbinden:
<link rel="stylesheet" href="assets/css/mipadoo-logo-global.css">
3. Bestehende Logo-Container aktualisieren:
<!-- Vorher -->
<div style="font-family: Inter; color: #ff385c;">mipadoo</div>
<!-- Nachher -->
<div class="mipadoo-logo">mipadoo</div>
✅ Vorteil: Einmal implementiert, funktioniert das Logo automatisch auf allen Seiten mit konsistentem mipadoo-Branding!