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

16
assets/css/custom.css
View File

@ -2,7 +2,7 @@
body { body {
background: #f0f4f8; background: #f0f4f8;
color: #1b1b2f; 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; line-height: 1.6;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0; padding: 0;
@ -81,18 +81,25 @@ button:hover, .btn:hover {
color: white; color: white;
padding: 25px; padding: 25px;
} }
.logo { .logo {
font-size: 24px; font-size: 24px;
margin-bottom: 30px; margin-bottom: 30px;
} }
#logo-img { #logo-img {
max-width: 500px; max-width: 400px;
width: 100%; width: 90%;
height: auto; height: auto;
} }
#sidebar .nav-link { #sidebar .nav-link {
margin: 0.5rem 0; margin: 0.5rem 0;
transition: all 0.3s; 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 { #main-area {
flex: 1; flex: 1;
@ -128,6 +135,9 @@ button:hover, .btn:hover {
/* Responsive Styles */ /* Responsive Styles */
@media (max-width: 768px) { @media (max-width: 768px) {
body {
font-size: 0.9rem;
}
.container > div { .container > div {
flex: 1 1 calc(50% - 40px); 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

26
index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom.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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<!--evtl. weglassen, da es eine Sidebar gibt -->
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <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>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a> <a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
@ -44,20 +35,21 @@
<h3 class="text-center">Navigation</h3> <h3 class="text-center">Navigation</h3>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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>
<li class="nav-item"> <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> </li>
<!-- evtl. weglassen, da es in der Topbar ist
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-white" href="#" id="nav-login">Login / Registrieren</a> <a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
</li> </li> -->
</ul> </ul>
</nav> </nav>