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

Feat: Optimiert Navbar mit Mobile-Menü, passt Margin-Styles für <main> an und ergänzt CSS-Kommentare

Browse Source
This commit is contained in:
DragonSlayer_14
2026-06-13 18:53:29 +02:00
parent 9121d57dcc
commit 067ff488d2
3 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/app.scss
+9
View File
@@ -593,3 +593,12 @@ pre {
white-space: nowrap;
direction: ltr;
}
// =============================================================================
// CSS Settings
// =============================================================================
main {
margin-top: 64px;
margin-bottom: 45px;
}
assets/styles/root/root.css
+5
View File
@@ -2,6 +2,11 @@ body {
height: 100vh;
}
main {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Scanline sweep */
.scanline {
position: absolute;
templates/widgets/nav_bar.html.twig
+34 -7
View File
@@ -3,22 +3,49 @@
aria-label="Hauptnavigation">
<div class="container d-flex justify-content-between align-items-center">
{# Links: Logo + CTDRA (als Block zusammengefasst) #}
{# Links: Logo + CTDRA #}
<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">
id="nav-brand-logo"
style="height: 40px; width: auto;">
<span class="fw-bold text-white">CTDRA</span>
</a>
{# Mitte: Links zentriert mit mx-auto #}
{# Mitte: Desktop-Links zentriert #}
<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-decoration-none nav-link-ds">Projects</a>
<a href="#" class="text-decoration-none nav-link-ds">About Me</a>
<a href="#" class="text-label-sm text-decoration-none nav-link-ds">Projects</a>
<a href="#" class="text-label-sm text-decoration-none nav-link-ds">About Me</a>
</div>
{# Rechts: Platzhalter #}
<div>&nbsp;</div>
{# Rechts: Hamburger-Button (nur Mobile) + Platzhalter für Desktop #}
<div class="d-flex align-items-center">
{# Hamburger Button für Mobile mit Material Icon #}
<button class="navbar-toggler d-md-none border-0 text-white p-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mobile-menu"
aria-controls="mobile-menu"
aria-expanded="false"
aria-label="Navigation umschalten">
<span class="material-symbols-outlined">menu</span>
</button>
{# Platzhalter für Desktop (hält Balance) #}
<div class="d-none d-md-block">&nbsp;</div>
</div>
</div>
{# Mobile Menu Container (Collapsible) #}
<div class="collapse d-md-none" id="mobile-menu">
<div class="container py-3">
<div class="d-flex flex-column gap-3">
<a href="#" class="text-label-sm text-decoration-none text-white fs-6">News</a>
<a href="#" class="text-label-sm text-decoration-none text-white fs-6">Projects</a>
<a href="#" class="text-label-sm text-decoration-none text-white fs-6">About Me</a>
</div>
</div>
</div>
</nav>