FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
Fabian Schieder 2026-01-22 19:46:42 +01:00
parent c8ef8d692f
commit 5b63fe53b3
12 changed files with 268 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.idea/.gitignore generated vendored Normal file
View File

@ -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/

8
.idea/Geizkragen.iml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/copilot.data.migration.agent.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AgentMigrationStateService">
<option name="migrationStatus" value="COMPLETED" />
</component>
</project>

6
.idea/copilot.data.migration.ask.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AskMigrationStateService">
<option name="migrationStatus" value="COMPLETED" />
</component>
</project>

6
.idea/copilot.data.migration.edit.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="EditMigrationStateService">
<option name="migrationStatus" value="COMPLETED" />
</component>
</project>

12
.idea/dataSources.xml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
<data-source source="LOCAL" name="FSST" uuid="f9586db9-d1df-45a2-a60a-9a8716a08fec">
<driver-ref>mysql.8</driver-ref>
<synchronize>true</synchronize>
<jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
<jdbc-url>jdbc:mysql://localhost:3306/FSST</jdbc-url>
<working-dir>$ProjectFileDir$</working-dir>
</data-source>
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Geizkragen.iml" filepath="$PROJECT_DIR$/.idea/Geizkragen.iml" />
</modules>
</component>
</project>

19
.idea/php.xml generated Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="MessDetectorOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCSFixerOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PHPCodeSnifferOptionsConfiguration">
<option name="highlightLevel" value="WARNING" />
<option name="transferred" value="true" />
</component>
<component name="PhpStanOptionsConfiguration">
<option name="transferred" value="true" />
</component>
<component name="PsalmOptionsConfiguration">
<option name="transferred" value="true" />
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

BIN
assets/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 85 KiB

25
header.php
View File

@ -1,5 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -17,9 +15,12 @@
<body> <body>
<!--==================== HEADER ====================--> <!--==================== HEADER ====================-->
<header class="header" id="header"> <header class="header" id="header">
<nav class="nav container"> <nav class="nav" aria-label="Hauptnavigation">
<img src="/assets/images/logo.png" alt="Geizhals" width="70" height="70"> <a class="nav__logoLink" href="index.php">
<img class="nav__logo" src="/assets/images/logo.png" alt="Geizhals" width="150">
</a>
<div class="nav__inner container">
<div class="nav__menu" id="nav-menu"> <div class="nav__menu" id="nav-menu">
<ul class="nav__list"> <ul class="nav__list">
<li class="nav__item"> <li class="nav__item">
@ -27,19 +28,7 @@
</li> </li>
<li class="nav__item"> <li class="nav__item">
<a href="footer.php" class="nav__link">Test</a> <a href="footer.php" class="nav__link">Wunschliste</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Services</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Featured</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Contact Me</a>
</li> </li>
</ul> </ul>
@ -61,6 +50,6 @@
<i class="ri-menu-line"></i> <i class="ri-menu-line"></i>
</div> </div>
</div> </div>
</div>
</nav> </nav>
</header> </header>

345
style.css
View File

@ -33,6 +33,9 @@
--transition-fast: 150ms ease; --transition-fast: 150ms ease;
--transition-normal: 250ms ease; --transition-normal: 250ms ease;
/* Gutter des Standard-Containers (für Navbar-Logo-Offset genutzt) */
--nav-gutter: 1.5rem;
} }
body { body {
@ -43,6 +46,15 @@ body {
line-height: 1.45; line-height: 1.45;
} }
/* ==========================================================
CONTAINER (Wrapper)
========================================================== */
.container {
max-width: 1400px;
margin-inline: auto;
padding-inline: var(--nav-gutter);
}
/* ========================================================== /* ==========================================================
HEADER HEADER
========================================================== */ ========================================================== */
@ -50,45 +62,172 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
background: var(--header-bg); background: var(--bg-header);
box-shadow: 0 2px 10px rgba(0,0,0,0.15); 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; NAVBAR
margin: auto; ========================================================== */
.nav {
min-height: 56px;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2rem; background: var(--bg-header);
} }
.logo { /* Logo wirklich ganz links (ohne Tricks) */
font-size: 1.4rem; .nav__logoLink {
font-weight: 700; display: inline-flex;
letter-spacing: 0.3px; 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; flex: 1;
position: relative; width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.25rem;
} }
.search input { /* Damit Menü + Icons wirklich bis ganz rechts können (trotz container max-width) */
width: 100%; .nav__inner.container {
padding: 0.6rem 1rem; margin-left: auto;
border-radius: var(--radius-sm); }
border: none;
outline: none; /* 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-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 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; margin: 2rem auto;
padding: 0 2rem; padding: 0 2rem;
display: grid; display: grid;
@ -248,7 +387,7 @@ body {
RESPONSIVE RESPONSIVE
========================================================== */ ========================================================== */
@media (max-width: 900px) { @media (max-width: 900px) {
.container { .layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -256,167 +395,3 @@ body {
order: 2; 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;
}
}