From c0d9949037e96a3a01391c58fdf422df900b62a7 Mon Sep 17 00:00:00 2001 From: NOrtmann1 <145041949+NOrtmann1@users.noreply.github.com> Date: Thu, 28 May 2026 22:16:55 +0200 Subject: [PATCH] Seitenleiste mit Filteroptionen --- content/search-results.php | 117 +++++++++++++++++++++++++------------ css/search-results.css | 109 +++++++++++++++++++++++++++++++--- 2 files changed, 181 insertions(+), 45 deletions(-) diff --git a/content/search-results.php b/content/search-results.php index 9817411..dfdd93f 100644 --- a/content/search-results.php +++ b/content/search-results.php @@ -2,49 +2,92 @@ Seite: Suchergebnisse Inhalt: Zeigt die Ergebnisse einer Suche an --> -
+
- -
-

Suchergebnisse

-

3 Treffer für Ihre Suchanfrage

-
+ + + + +
+ + +
+

Suchergebnisse

+

3 Treffer für Ihre Suchanfrage

-
-
+ +
+ + +
+
+

+ Anleitung zur Webentwicklung +

+

Von: Max Mustermann

+
+
→
+
+ + +
+
+

+ CSS Flexbox verständlich erklärt +

+

Von: Anna Schmidt

+
+
→
+
+ + +
+
+

+ HTML5-Grundlagen für Einsteiger +

+

Von: Lisa Meier

+
+
→
+
+ +
+ + + \ No newline at end of file diff --git a/css/search-results.css b/css/search-results.css index 67118fb..47e326c 100644 --- a/css/search-results.css +++ b/css/search-results.css @@ -1,20 +1,109 @@ /* CSS für die Suchergebnis-Seite */ -.s-res-container { +/* Container und Layout-Schutz vor globalen Styles */ +.s-res-layout-grid { box-sizing: border-box; - max-width: 800px; + max-width: 1200px; margin: 2rem auto; padding: 0 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #212529; line-height: 1.5; + + /* Grid für die Zweispaltigkeit */ + display: grid; + grid-template-columns: 280px 1fr; + gap: 2rem; } -.s-res-container * { +.s-res-layout-grid * { box-sizing: border-box; } +/* --- SEITENLEISTE (FILTER & SUCHE) --- */ +.s-res-sidebar { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.s-res-sidebar-box { + background-color: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 8px; + padding: 1.25rem; +} + +.s-res-sidebar-title { + font-size: 1rem; + font-weight: 700; + color: #1a202c; + margin: 0 0 1rem 0; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Formular & deine Suchleisten-Klassen */ +.s-res-search-form { + display: flex; + align-items: center; +} + +.nav__search { + display: flex; + width: 100%; + margin: 0; + padding: 0.4rem 0.6rem; + font-size: 0.9rem; + border: 1px solid #cbd5e1; + border-radius: 4px; + background: #fff; +} + +.nav__search-button { + display: inline-block; + background: #fff; + border: 1px solid #cbd5e1; + border-radius: 4px; + padding: 0.4rem 0.6rem; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + margin-left: 4px; + transition: background-color 0.2s; +} + +.nav__search-button:hover { + background-color: #f8f9fa; +} + +/* Filter Radio-Buttons */ +.s-res-filter-group { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.s-res-filter-option { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + font-size: 0.95rem; + color: #4a5568; +} + +.s-res-filter-option input[type="radio"] { + margin: 0; + accent-color: #3182ce; /* Moderne Färbung des Radio-Buttons */ +} + +/* --- HAUPTINHALT (ERGEBNISSE) --- */ +.s-res-main-content { + min-width: 0; /* Verhindert das Ausbrechen von Flex-Elementen */ +} + .s-res-header { margin-bottom: 2rem; border-bottom: 2px solid #dee2e6; @@ -34,7 +123,6 @@ CSS für die Suchergebnis-Seite margin: 0; } -/* Ergebnisliste */ .s-res-list { display: flex; flex-direction: column; @@ -59,7 +147,6 @@ CSS für die Suchergebnis-Seite border-color: #cbd5e1; } -/* Inhalt des Beitrags */ .s-res-content { flex: 1; } @@ -70,7 +157,6 @@ CSS für die Suchergebnis-Seite font-weight: 600; } -/* Links */ .s-res-link { color: #3182ce; text-decoration: none; @@ -82,7 +168,6 @@ CSS für die Suchergebnis-Seite color: #2b6cb0; } -/* Autorenzeile */ .s-res-author { font-size: 0.875rem; color: #4a5568; @@ -94,7 +179,6 @@ CSS für die Suchergebnis-Seite color: #2d3748; } -/* Interaktions-Pfeil */ .s-res-arrow { font-size: 1.5rem; color: #a0aec0; @@ -106,3 +190,12 @@ CSS für die Suchergebnis-Seite color: #3182ce; transform: translateX(3px); } + +/* --- RESPONSIVE DESIGN (MOBILGERÄTE) --- */ +@media (max-width: 768px) { + .s-res-layout-grid { + grid-template-columns: 1fr; /* Stapelt Seitenleiste und Inhalt untereinander */ + gap: 1.5rem; + margin: 1rem auto; + } +}