From f81c5c6734826c191eb2716adc11edc39ee52f87 Mon Sep 17 00:00:00 2001 From: Raffael Sheikh Date: Sun, 24 May 2026 00:24:31 +0200 Subject: [PATCH] Refine footer hierarchy --- public/index.html | 20 +++++++++----- public/styles.css | 67 ++++++++++++++++++++++++++++------------------- 2 files changed, 53 insertions(+), 34 deletions(-) diff --git a/public/index.html b/public/index.html index c56b024..36a1ede 100644 --- a/public/index.html +++ b/public/index.html @@ -543,16 +543,22 @@ TechDay Kontakt - diff --git a/public/styles.css b/public/styles.css index 7d373b8..68a1a80 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1139,56 +1139,58 @@ section[id] { scroll-margin-top: 92px; } .site-footer { background: var(--black); color: var(--paper); - padding-top: 30px; + padding-top: 28px; } .footer-inner { display: grid; grid-template-columns: 1fr auto; - gap: 20px 42px; - align-items: start; - padding-bottom: 24px; + gap: 34px; + align-items: center; + padding-bottom: 26px; } -.footer-logo { height: 22px; width: auto; margin-bottom: 10px; } +.footer-logo { height: 22px; width: auto; margin-bottom: 8px; } .footer-brand p { font-size: 13px; color: var(--gray-2); letter-spacing: .03em; max-width: 390px; } -.footer-links, -.footer-meta { +.footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; - gap: 8px 18px; + gap: 8px 20px; } -.footer-links a, -.footer-meta a, -.footer-meta span { +.footer-links a { font-size: 13px; color: #D4D4D4; } -.footer-meta { - grid-column: 1 / -1; - justify-content: flex-start; - padding-top: 14px; - border-top: 1px solid #262626; -} -.footer-meta span, -.footer-meta a { - color: var(--gray-2); -} -.footer-links a:hover, -.footer-meta a:hover { color: var(--paper); } +.footer-links a:hover { color: var(--paper); } .footer-base { display: flex; + align-items: center; justify-content: space-between; + gap: 24px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid #262626; font-size: 12px; color: var(--gray-2); } +.footer-base > span:last-child { + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; + gap: 6px 10px; + text-align: right; +} +.footer-base i { + width: 3px; + height: 3px; + background: #3A3A3A; + border-radius: 50%; +} .footer-base a:hover { color: var(--paper); } /* ============================================================ @@ -1212,8 +1214,20 @@ section[id] { scroll-margin-top: 92px; } .arbeit-grid { grid-template-columns: 1fr; gap: 44px; } .event-grid { grid-template-columns: 1fr; } .kontakt-grid { grid-template-columns: 1fr; gap: 44px; } - .footer-inner { grid-template-columns: 1fr; gap: 18px; } + .footer-inner { + grid-template-columns: 1fr; + gap: 16px; + align-items: start; + } .footer-links { justify-content: flex-start; } + .footer-base { + align-items: flex-start; + flex-direction: column; + } + .footer-base > span:last-child { + justify-content: flex-start; + text-align: left; + } } @media (max-width: 620px) { @@ -1251,9 +1265,8 @@ section[id] { scroll-margin-top: 92px; } .event-card img, .mini-terminal { aspect-ratio: 16 / 10; } .site-footer { padding-top: 24px; } - .footer-links, - .footer-meta { gap: 8px 14px; } - .footer-base { flex-direction: column; gap: 8px; } + .footer-links { gap: 8px 14px; } + .footer-base { gap: 10px; } } .reveal {