Komplette Styling- & Komponenten-Showcase

test

Typografie & Textstile

Diese Seite demonstriert alle Typografie- und Stilelemente, die auf der BEARS-Website verwendet werden. Von Überschriften bis Fließtext folgt alles einer sorgfältig gestalteten typografischen Hierarchie.

Überschriftenhierarchie

Alle Überschriften verwenden responsive Schriftgrößen, die sich mit der Bildschirmgröße skalieren. Dies gewährleistet Lesbarkeit auf mobilen Geräten und Desktop gleichermaßen.

Unterüberschrift Ebene 4

Dies ist eine Überschrift der Ebene 4, die oft für Unterabschnitte innerhalb größerer Inhaltsblöcke verwendet wird.

Überschrift Ebene 5

Ebene-5-Überschriften eignen sich für verschachtelte Themen.

Überschrift Ebene 6

Ebene-6-Überschriften für tief verschachtelte Inhalte.

Fließtext & Absätze

Fließtext verwendet eine großzügige Zeilenhöhe (1.75) für komfortables Lesen. Absätze werden mit einheitlichen Abständen gesetzt, um visuellen Rhythmus zu erzeugen. Die Schriftgröße passt sich an: 1.0625rem auf Mobilgeräten, skaliert auf 1.125rem auf dem Desktop.

Dieser Absatz demonstriert fetten Text, kursiven Text und fett-kursiven Text. Du kannst auch Inline-Code verwenden, der mit einem dezenten Hintergrund erscheint. Links werden in der Akzentfarbe gestaltet und beim Hover unterstrichen.

Listen & Einrückung

Aufzählungszeichen und nummerierte Listen behalten eine konsistente Einrückung und Abstände bei:

• Erster Punkt mit Erklärung
• Zweiter Punkt zur Demonstration des Listenflusses
• Verschachtelte Punkte können mehrere Ebenen tief gehen:
  • Unterpunkt eins
  • Unterpunkt zwei
  • Unterpunkt drei
• Vierter Punkt setzt die Hauptliste fort

Nummerierte Listen funktionieren ebenso:

1. Erster Schritt in einem Prozess
2. Zweiter Schritt mit weiteren Details
3. Dritter Schritt zur Vervollständigung des Workflows
   1. Unterschritt A
   2. Unterschritt B
4. Letzter Schritt

Blockzitate

Blockzitate heben sich mit einem linken Rand in der Akzentfarbe ab. Sie eignen sich perfekt, um wichtige Zitate, Testimonials oder zentrale Erkenntnisse aus der Forschung hervorzuheben.

Dies ist ein weiteres Blockzitat zur Demonstration der Formatierung. Mehrere Blockzitate behalten eine konsistente Formatierung auf der gesamten Seite bei.

Code-Blöcke

Inline-Code wie const myVariable = 42; erscheint mit dezentem Styling. Für größere Code-Beispiele:

// Beispiel JavaScript-Code-Block
function demonstrateCode() {
  const greeting = "Hello, BEARS!";
  console.log(greeting);
  return greeting;
}

// Code-Blöcke unterstützen Syntax-Highlighting
const result = demonstrateCode();

# Python-Code-Beispiel
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Berechnen und ausgeben
for i in range(10):
    print(fibonacci(i))

---

Button-Komponenten

Buttons gibt es in mehreren Varianten und Größen für verschiedene Anwendungsfälle:

---

Bild-Komponente

Die Img-Komponente bietet optimierte, responsive Bildanzeige mit flexibler Größenanpassung:

Bilder-Raster

Quadratisch

Nativ

Bilder-Carousel

Ein Carousel kann ebenfalls Bilder mit der Img-Komponente anzeigen:

---

Akkordeon-Komponente

Akkordeons organisieren Inhalte in ausklappbare Abschnitte:

---

Callout-Komponente

Callouts heben wichtige Informationen mit einer Glasmorphismus-Karte und Akzent-Gradient-Leiste hervor:

---

Nebeneinander-Layout

Die SideBySide-Komponente erstellt responsive Zwei-Spalten-Layouts, die auf Mobilgeräten gestapelt werden:

---

Marquee-Komponente

Das Marquee erstellt eine scrollende Bildergalerie, die sich perfekt zur Präsentation mehrerer Projekte eignet. Es verarbeitet Bilder mit unterschiedlichen Seitenverhältnissen elegant:

Marquee in umgekehrter Richtung

Das Marquee unterstützt auch das Scrollen in die entgegengesetzte Richtung:

---

YouTube-Einbettung

Die YouTube-Komponente macht das Einbetten von Videos einfach. Übergib einfach eine Video-ID oder vollständige URL:

Einfache Einbettung

Mit Startzeit

---

Instagram-Einbettung

Die Instagram-Komponente bettet Instagram-Posts ein. Übergib einfach eine Post-URL oder Shortcode:

---

Kombiniertes Layout-Beispiel

Hier ist ein komplexeres Beispiel, das mehrere Komponenten kombiniert:

Vertikal zentrierter Inhalt

---

Kombiniertes Layout-Beispiel

---

Responsive Design Features

Das gesamte Design-System ist mit Mobile-First-Prinzipien aufgebaut:

Breakpoint-Strategie

• Mobil (< 640px): Ein-Spalten-Layouts, optimierte Abstände
• Kleines Tablet (640px - 1023px): Verbessertes Padding, erhöhte Lesbarkeit
• Desktop (>= 1024px): Volle Zwei-Spalten-Layouts, optimale Zeilenlängen
• Großer Desktop (>= 1280px): Zusätzliches Padding, maximale Inhaltsbreite

Responsive Textgrößen

Alle Texte verwenden clamp() für fließende Skalierung:

• Titel skalieren von 2rem nach 3.5rem
• Unterüberschriften skalieren fließend mit dem Viewport
• Fließtext bleibt durchgehend gut lesbar
• Zeilenhöhen gewährleisten Lesbarkeit über alle Größen

Bildoptimierung

• Automatische Formatkonvertierung (WebP mit Fallbacks)
• Responsive Bildgrößenanpassung
• Lazy Loading für Bilder unterhalb des Folds
• Eager Loading für Titelbilder
• Adaptive Bildauflösung

---

Farbsystem

Das Design verwendet eine sorgfältig ausgewählte Farbpalette:

---

Typografie-Farbbeispiele

Dieser Text ist fett (nutzt fette Schriftstärke). Dieser Text ist kursiv (nutzt kursive Formatierung). Hier ist etwas Code mit speziellem Styling.

Dieses Blockzitat demonstriert Textfarbe auf dezentem Hintergrund. Der linke Rand schafft visuelle Hierarchie.

---

Inhaltsbreite & Abstände

Alle Inhalte werden automatisch zentriert und auf optimale Lesebreite begrenzt:

• Mobil: 100 % des Viewports (mit Padding)
• Desktop: Bis zu 90 Zeichen breit
• Maximale Breite: Verhindert zu lange Textzeilen
• Konsistente Abstände um alle Elemente

Die responsive Maximalbreite gewährleistet Lesbarkeit auf jedem Gerät.

---

Fazit

Diese Showcase demonstriert das komplette Design-System und die Komponentenbibliothek, die für BEARS-Projektseiten verfügbar sind. Jedes Element ist gestaltet mit:

• Barrierefreiheit im Fokus
• Responsivem Verhalten auf allen Geräten
• Konsistentem Styling durchgehend
• Performance-Optimierung
• Nutzererlebnis als Priorität

Nutze diese Komponenten und Stilmuster, um ansprechende, professionelle Projektseiten zu erstellen, die deine Arbeit und Forschung effektiv kommunizieren.