proof of concept der farbänderung auf der startseite
This commit is contained in:
parent
7c56bbbc5e
commit
7147bcbe25
184
index.html
184
index.html
@ -11,64 +11,174 @@
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="css/nav.css" />
|
||||
<link rel="stylesheet" href="css/footer.css" />
|
||||
|
||||
<style>
|
||||
/* Spezifisches Styling für das Logo2-Pattern auf der Index-Seite */
|
||||
.navbar-custom {
|
||||
background-color: #b30000 !important;
|
||||
/* Pfad angepasst für die index.html (Bilder liegen im Ordner bilder/) */
|
||||
/* ===== FARBVARIABLEN ===== */
|
||||
:root {
|
||||
--rot-dunkel: #900000;
|
||||
--rot-accent: #b30000;
|
||||
--gelb: #FFCC00;
|
||||
--gelb-hell: #fff3cc;
|
||||
--glow-dunkel: rgba(190, 140, 0, 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== GLOBALER HINTERGRUND & TEXT ===== */
|
||||
body {
|
||||
background-color: var(--rot-dunkel) !important;
|
||||
background-image: url('bilder/logo2.jpeg') !important;
|
||||
background-size: 7em !important;
|
||||
background-size: 12em !important;
|
||||
background-repeat: repeat !important;
|
||||
color: var(--gelb) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
.navbar-custom {
|
||||
background-color: var(--rot-accent) !important;
|
||||
background-image: url('bilder/logo2.jpeg') !important;
|
||||
background-size: 8em !important;
|
||||
background-repeat: repeat !important;
|
||||
border-bottom: 3px solid var(--gelb) !important;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-brand {
|
||||
font-size: 1.5rem; /* 👈 GRÖSSE HIER ANPASSEN */
|
||||
color: var(--gelb) !important;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
|
||||
color: var(--gelb) !important;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navbar-custom .nav-link:hover,
|
||||
.navbar-custom .nav-link:focus {
|
||||
color: var(--gelb-hell) !important;
|
||||
text-shadow: 0 0 8px var(--gelb);
|
||||
}
|
||||
|
||||
.navbar-custom .dropdown-menu {
|
||||
background-color: #900000 !important;
|
||||
background-color: var(--rot-dunkel) !important;
|
||||
background-image: url('bilder/logo2.jpeg') !important;
|
||||
background-size: 9em !important;
|
||||
}
|
||||
|
||||
/* Standard-Styling für Mobile */
|
||||
.main-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-size: 10em !important;
|
||||
background-repeat: repeat !important;
|
||||
border: 2px solid var(--gelb) !important;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Desktop-Optimierung */
|
||||
.navbar-custom .dropdown-item {
|
||||
color: var(--gelb) !important;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 🟡 DROPDOWN HOVER: Nur dunkler Glow, kein roter Hintergrund */
|
||||
.navbar-custom .dropdown-item:hover,
|
||||
.navbar-custom .dropdown-item:focus {
|
||||
background: transparent !important;
|
||||
color: var(--gelb-hell) !important;
|
||||
box-shadow: 0 0 10px var(--glow-dunkel) !important;
|
||||
transition: box-shadow 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar-custom .dropdown-divider {
|
||||
border-top-color: var(--gelb) !important;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border-color: var(--gelb) !important;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFCC00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
/* 🟡 DESKTOP: Brand exakt zentrieren */
|
||||
@media (min-width: 992px) {
|
||||
.sticky-sidebar {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
.navbar-custom .container-fluid {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
width: 60%;
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: auto;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Info-Boxen Styling */
|
||||
|
||||
/* ===== INFO-BOXEN ===== */
|
||||
.info-box {
|
||||
background-color: #fff;
|
||||
padding: 1.5rem;
|
||||
background-color: rgba(144, 0, 0, 0.85) !important;
|
||||
border: 2px solid var(--gelb) !important;
|
||||
border-left: 5px solid var(--gelb) !important;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 5px solid #e60000;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
padding: 1.5rem;
|
||||
color: var(--gelb) !important;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info-box h3 { color: var(--gelb) !important; }
|
||||
.info-box p { color: var(--gelb-hell) !important; }
|
||||
.info-box .text-muted { color: var(--gelb-hell) !important; opacity: 0.7; }
|
||||
|
||||
/* ===== TYPOGRAFIE ===== */
|
||||
h3, h6, .fw-bold, .text-danger { color: var(--gelb) !important; }
|
||||
|
||||
/* ===== HAUPTBILD ===== */
|
||||
.main-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 3px solid var(--gelb);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sticky-sidebar { position: sticky; top: 20px; z-index: 10; }
|
||||
.main-image { width: 60%; }
|
||||
}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
footer {
|
||||
background-color: var(--rot-dunkel) !important;
|
||||
background-image: url('bilder/logo2.jpeg') !important;
|
||||
background-size: 12em !important;
|
||||
background-repeat: repeat !important;
|
||||
border-top: 3px solid var(--gelb) !important;
|
||||
color: var(--gelb) !important;
|
||||
}
|
||||
|
||||
footer h6 { color: var(--gelb) !important; text-decoration-color: var(--gelb) !important; }
|
||||
footer p, footer .small, footer .fw-bold { color: var(--gelb-hell) !important; }
|
||||
footer .text-muted { color: var(--gelb-hell) !important; opacity: 0.7; }
|
||||
|
||||
/* ===== CUSTOM SCROLLBAR ===== */
|
||||
::-webkit-scrollbar { width: 10px; }
|
||||
::-webkit-scrollbar-track { background: var(--rot-dunkel); }
|
||||
::-webkit-scrollbar-thumb { background: var(--gelb); border-radius: 5px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--rot-accent); }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -92,7 +202,7 @@
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Aktuelles</a></li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Über uns
|
||||
@ -118,14 +228,14 @@
|
||||
<div class="col-lg-3 col-md-4 order-2 order-lg-1">
|
||||
<div class="sticky-sidebar">
|
||||
<div class="info-box">
|
||||
<h3 class="h5 fw-bold text-danger">Nächster Dienst</h3>
|
||||
<h3 class="h5 fw-bold">Nächster Dienst</h3>
|
||||
<div id="nextDienst">
|
||||
<p class="small text-muted">Lade nächsten Dienst...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<h3 class="h5 fw-bold text-danger">Veranstaltung</h3>
|
||||
<h3 class="h5 fw-bold">Veranstaltung</h3>
|
||||
<div id="nextEvent">
|
||||
<p class="small text-muted">Lade nächste Veranstaltung...</p>
|
||||
</div>
|
||||
@ -152,7 +262,7 @@
|
||||
<footer class="container-fluid py-4 mt-auto border-top">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-lg-4 col-md-5 text-lg-end text-center mb-3 mb-lg-0">
|
||||
<h6 class="fw-bold text-decoration-underline">Letzte Aktualisierung</h6>
|
||||
<h6 class="fw-bold">Letzte Aktualisierung</h6>
|
||||
<p class="mb-0">17. März 2026</p>
|
||||
<small class="text-muted">(Version 1.2)</small>
|
||||
</div>
|
||||
@ -160,7 +270,7 @@
|
||||
<div class="col-lg-1 d-none d-lg-block"></div>
|
||||
|
||||
<div class="col-lg-4 col-md-5 text-lg-start text-center">
|
||||
<h6 class="fw-bold text-decoration-underline">Kleine Statistik der FFw Stadt Wehlen</h6>
|
||||
<h6 class="fw-bold">Kleine Statistik der FFw Stadt Wehlen</h6>
|
||||
<p class="mb-0 small">
|
||||
<strong>Aktive:</strong> 27 | <strong>Jugend:</strong> 23 | <strong>Passive:</strong> 9 | <strong>Förderverein:</strong> 172
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user