diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/Geizkragen.iml b/.idea/Geizkragen.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/Geizkragen.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/copilot.data.migration.agent.xml b/.idea/copilot.data.migration.agent.xml new file mode 100644 index 0000000..4ea72a9 --- /dev/null +++ b/.idea/copilot.data.migration.agent.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/copilot.data.migration.ask.xml b/.idea/copilot.data.migration.ask.xml new file mode 100644 index 0000000..7ef04e2 --- /dev/null +++ b/.idea/copilot.data.migration.ask.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/copilot.data.migration.edit.xml b/.idea/copilot.data.migration.edit.xml new file mode 100644 index 0000000..8648f94 --- /dev/null +++ b/.idea/copilot.data.migration.edit.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml new file mode 100644 index 0000000..c664185 --- /dev/null +++ b/.idea/dataSources.xml @@ -0,0 +1,12 @@ + + + + + mysql.8 + true + com.mysql.cj.jdbc.Driver + jdbc:mysql://localhost:3306/FSST + $ProjectFileDir$ + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..11c7d0e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..f324872 --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/logo.png b/assets/images/logo.png index f8e2599..71890b6 100644 Binary files a/assets/images/logo.png and b/assets/images/logo.png differ diff --git a/header.php b/header.php index cb95400..9b5e6c7 100644 --- a/header.php +++ b/header.php @@ -1,5 +1,3 @@ - - @@ -17,50 +15,41 @@ - diff --git a/style.css b/style.css index dc2cc33..8c82c3e 100755 --- a/style.css +++ b/style.css @@ -33,6 +33,9 @@ --transition-fast: 150ms ease; --transition-normal: 250ms ease; + + /* Gutter des Standard-Containers (für Navbar-Logo-Offset genutzt) */ + --nav-gutter: 1.5rem; } body { @@ -43,6 +46,15 @@ body { line-height: 1.45; } +/* ========================================================== + CONTAINER (Wrapper) + ========================================================== */ +.container { + max-width: 1400px; + margin-inline: auto; + padding-inline: var(--nav-gutter); +} + /* ========================================================== HEADER ========================================================== */ @@ -50,45 +62,172 @@ body { position: sticky; top: 0; z-index: 1000; - background: var(--header-bg); + background: var(--bg-header); box-shadow: 0 2px 10px rgba(0,0,0,0.15); - padding: 0; /* ← WICHTIG */ + padding: 0; } +/* Entferne die Padding-Änderung im Header nicht global auf .container. + (Das hat die Ausrichtung der rechten Elemente kaputt gemacht.) */ +/* .header .container { padding-inline: 0; } */ -.header-inner { - max-width: 1400px; - margin: auto; +/* ========================================================== + NAVBAR + ========================================================== */ +.nav { + min-height: 56px; + width: 100%; display: flex; align-items: center; - gap: 2rem; + background: var(--bg-header); } -.logo { - font-size: 1.4rem; - font-weight: 700; - letter-spacing: 0.3px; +/* Logo wirklich ganz links (ohne Tricks) */ +.nav__logoLink { + display: inline-flex; + align-items: center; + padding-left: 0; + margin-left: 0; /* <-- wichtig: kein negatives Margin */ } -.search { +.nav__logo { + display: block; + margin: 0; + max-width: 150px; + height: auto; +} + +/* Rechter Bereich: nimmt den restlichen Platz ein und richtet Inhalt rechts aus */ +.nav__inner { + margin-right: 0; flex: 1; - position: relative; + width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 1.25rem; } -.search input { - width: 100%; - padding: 0.6rem 1rem; - border-radius: var(--radius-sm); - border: none; - outline: none; +/* Damit Menü + Icons wirklich bis ganz rechts können (trotz container max-width) */ +.nav__inner.container { + margin-left: auto; +} + +/* Desktop: Menü rechts */ +.nav__menu { + display: flex; + align-items: center; +} + +.nav__list { + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; +} + +.nav__link { + color: rgba(255,255,255,0.85); font-size: 0.95rem; + font-weight: 500; + text-decoration: none; + transition: color var(--transition-normal); +} + +.nav__link:hover { + color: var(--text-invert); +} + +/* Action Icons rechts */ +.nav__actions { + display: flex; + align-items: center; + gap: 1.2rem; +} + +.nav__search, +.nav__login, +.nav__toggle, +.nav__close { + font-size: 1.3rem; + color: var(--text-invert); + cursor: pointer; + transition: color var(--transition-normal); +} + +.nav__search:hover, +.nav__login:hover { + color: var(--color-primary); +} + +/* ========================================================== + TOGGLE / CLOSE + ========================================================== */ +.nav__toggle { + display: none; +} + +.nav__close { + display: none; +} + +/* ========================================================== + MOBILE NAV + ========================================================== */ +@media (max-width: 900px) { + /* Logo bleibt links, Container rechts (Toggle) */ + + .nav__toggle { + display: block; + } + + .nav__menu { + position: fixed; + top: 0; + right: -100%; + width: 280px; + height: 100%; + background: #111827; + padding: 4rem 2rem; + transition: right 300ms ease; + flex-direction: column; + align-items: flex-start; + gap: 2rem; + } + + .nav__menu.show-menu { + right: 0; + } + + .nav__list { + flex-direction: column; + gap: 1.5rem; + } + + .nav__link { + font-size: 1.05rem; + color: #e5e7eb; + } + + .nav__close { + display: block; + position: absolute; + top: 1.2rem; + right: 1.2rem; + } } /* ========================================================== LAYOUT ========================================================== */ -.container { - max-width: 1400px; +/* + WICHTIG: + `.container` ist jetzt nur noch ein Wrapper (max-width/padding). + Das Grid-Layout liegt in `.layout`, damit die Navbar (`.nav.container`) + nicht versehentlich zu einem Grid wird. +*/ +.layout { margin: 2rem auto; padding: 0 2rem; display: grid; @@ -248,7 +387,7 @@ body { RESPONSIVE ========================================================== */ @media (max-width: 900px) { - .container { + .layout { grid-template-columns: 1fr; } @@ -256,167 +395,3 @@ body { order: 2; } } - -/* ========================================================== - NAVBAR - ========================================================== */ - -/* ========================================================== - BASIS / VARIABLEN - ========================================================== */ -:root { - --header-bg: #1f2937; - --header-text: #ffffff; - --header-muted: #9ca3af; - --primary: #2563eb; - --primary-hover: #1d4ed8; - - --radius: 8px; - --transition: 200ms ease; -} - -/* ========================================================== - CONTAINER - ========================================================== */ -.container { - max-width: 1400px; - margin-inline: auto; - padding-inline: 1.5rem; -} - -/* ========================================================== - HEADER - ========================================================== */ -.nav { - height: 200px; /* klassischer Navbar-Wert */ - padding: 0 1.5rem; - display: flex; - align-items: center; - justify-content: space-between; -} - - - -/* ========================================================== - NAV - ========================================================== */ -.nav { - height: 5px; - display: flex; - align-items: center; - justify-content: space-between; -} - -/* ========================================================== - LOGO - ========================================================== */ -.nav__logo { - font-size: 1.25rem; - font-weight: 700; - color: var(--header-text); - text-decoration: none; -} - -/* ========================================================== - MENU (DESKTOP) - ========================================================== */ -.nav__menu { - display: flex; -} - -.nav__list { - display: flex; - gap: 2rem; - list-style: none; -} - -.nav__link { - color: var(--header-muted); - font-size: 0.95rem; - font-weight: 500; - text-decoration: none; - transition: color var(--transition); -} - -.nav__link:hover { - color: var(--header-text); -} - -/* ========================================================== - ACTION ICONS - ========================================================== */ -.nav__actions { - display: flex; - align-items: center; - gap: 1.2rem; -} - -.nav__search, -.nav__login, -.nav__toggle, -.nav__close { - font-size: 1.3rem; - color: var(--header-text); - cursor: pointer; - transition: color var(--transition); -} - -.nav__search:hover, -.nav__login:hover { - color: var(--primary); -} - -/* ========================================================== - TOGGLE / CLOSE - ========================================================== */ -.nav__toggle { - display: none; -} - -.nav__close { - display: none; -} - -/* ========================================================== - MOBILE NAV - ========================================================== */ -@media (max-width: 900px) { - - .nav__toggle { - display: block; - } - - .nav__menu { - position: fixed; - top: 0; - right: -100%; - width: 280px; - height: 100%; - background: #111827; - padding: 4rem 2rem; - transition: right 300ms ease; - flex-direction: column; - gap: 2rem; - } - - .nav__menu.show-menu { - right: 0; - } - - .nav__list { - flex-direction: column; - gap: 1.5rem; - } - - .nav__link { - font-size: 1.05rem; - color: #e5e7eb; - } - - .nav__close { - display: block; - position: absolute; - top: 1.2rem; - right: 1.2rem; - } -}