Websites/main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Überarbeitet Navbar mit Logo-Integration, zentrierten Links und verbesserten Styles

Browse Source
This commit is contained in:
DragonSlayer_14
2026-06-13 17:51:32 +02:00
parent 00436fdf3c
commit 9121d57dcc
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/app/nav.css
+7 -1
View File
@@ -1,5 +1,5 @@
nav div { nav div {
height: 64px; min-height: 64px;
} }
/* Glassmorphism nav — uses RGB channel var for rgba() composition */ /* Glassmorphism nav — uses RGB channel var for rgba() composition */
@@ -28,4 +28,10 @@ nav div {
font-family: var(--font-display), serif; font-family: var(--font-display), serif;
letter-spacing: -.02em; letter-spacing: -.02em;
font-size: 1rem; font-size: 1rem;
text-decoration: none;
}
#nav-brand-logo {
height: 30px;
width: auto;
} }
templates/widgets/nav_bar.html.twig
+13 -6
View File
@@ -2,16 +2,23 @@
id="top-nav" id="top-nav"
aria-label="Hauptnavigation"> aria-label="Hauptnavigation">
<div class="container d-flex justify-content-between align-items-center"> <div class="container d-flex justify-content-between align-items-center">
<span id="nav-site-name" class="fw-bold text-white">
CTDRA
</span>
<div class="d-none d-md-flex align-items-center gap-4"> {# Links: Logo + CTDRA (als Block zusammengefasst) #}
<a href="/" id="nav-site-name" class="d-flex align-items-center gap-2 text-decoration-none">
<img src="{{ asset('images/logo.png') }}"
alt="CTDRA Logo"
id="nav-brand-logo">
<span class="fw-bold text-white">CTDRA</span>
</a>
{# Mitte: Links zentriert mit mx-auto #}
<div class="d-none d-md-flex align-items-center gap-4 mx-auto">
<a href="#" class="text-label-sm text-decoration-none nav-link-ds">News</a> <a href="#" class="text-label-sm text-decoration-none nav-link-ds">News</a>
<a href="#" class="text-label-sm text-decoration-none nav-link-ds">Projects</a> <a href="#" class="text-decoration-none nav-link-ds">Projects</a>
<a href="#" class="text-label-sm text-decoration-none nav-link-ds">About Me</a> <a href="#" class="text-decoration-none nav-link-ds">About Me</a>
</div> </div>
{# Rechts: Platzhalter #}
<div>&nbsp;</div> <div>&nbsp;</div>
</div> </div>
</nav> </nav>