joostadrian/lorem_ipsum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grundgerüst Navigation optimiert

Browse Source
This commit is contained in:
DST81 2026-03-09 22:51:01 +01:00
parent c996777f45
commit 8fb326cf87
3 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/custom.css
View File

@ -2,7 +2,7 @@
body {
background: #f0f4f8;
color: #1b1b2f;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
line-height: 1.6;
margin-bottom: 1rem;
padding: 0;
@ -10,7 +10,7 @@ body {
/* Navigation Styles */
.navbar {
background: linear-gradient(90deg, #1b1b2f, #4a6fa5)
background: linear-gradient(90deg, #1b1b2f, #4a6fa5)
}
.navbar .nav-link {
color: #fff;
@ -77,22 +77,29 @@ button:hover, .btn:hover {
#sidebar {
width: 240px;
height: auto;
background: linear-gradient(180deg, #1b1b2f, #4a6fa5);
background: linear-gradient(180deg, #1b1b2f, #4a6fa5);
color: white;
padding: 25px;
}
.logo {
font-size: 24px;
margin-bottom: 30px;
}
#logo-img {
max-width: 500px;
width: 100%;
max-width: 400px;
width: 90%;
height: auto;
}
#sidebar .nav-link {
margin: 0.5rem 0;
transition: all 0.3s;
color: white;
}
#sidebar .nav-link:hover {
color: #ffd166;
background-color: rgba(255,255,255,0.1);
border-radius: 6px;
}
#main-area {
flex: 1;
@ -128,6 +135,9 @@ button:hover, .btn:hover {
/* Responsive Styles */
@media (max-width: 768px) {
body {
font-size: 0.9rem;
}
.container > div {
flex: 1 1 calc(50% - 40px);
}

BIN
image/icon_loremIpsum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

30
index.html
View File

@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem Ipsum - Das Spiel</title>
<title >Lorem Ipsum - Das Spiel</title>
<link rel="icon" type="image/png" href="image/icon_loremIpsum.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
@ -17,19 +18,9 @@
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--evtl. weglassen, da es eine Sidebar gibt -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html" id="nav-home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-play">Spiel Starten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-my-scores">Meine Scores</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-leaderboard">Leaderboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
@ -37,27 +28,28 @@
</ul>
</div>
</div>
</nav>
</nav>
<div id="page-wrapper">
<!-- Sidebar -->
<nav id="sidebar" class="bg-dark text-white p-3">
<h3 class="text-center">Navigation</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-home">Home</a>
<a class="nav-link active" href="index.html" id="nav-home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-play">Spiel Starten</a>
<a class="nav-link" href="#" id="nav-play">Spiel Starten</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-my-scores">Meine Scores</a>
<a class="nav-link" href="#" id="nav-my-scores">Meine Scores</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-leaderboard">Leaderboard</a>
<a class="nav-link" href="#" id="nav-leaderboard">Leaderboard</a>
</li>
<!-- evtl. weglassen, da es in der Topbar ist
<li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-login">Login / Registrieren</a>
</li>
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
</li> -->
</ul>
</nav>