diff --git a/index.html b/index.html index 1ec4e6a..3e14b77 100755 --- a/index.html +++ b/index.html @@ -1,52 +1,105 @@ - + - - - Feuerwehr Stadt Wehlen - - + + + Feuerwehr Stadt Wehlen - - + + + + + + + + + + +
+ + + +
+
+ +
+
- - + + - + \ No newline at end of file diff --git a/nav.css b/nav.css index 3eb5032..f95a723 100755 --- a/nav.css +++ b/nav.css @@ -1,93 +1,125 @@ -.navbar-custom { - background-color: #900000; - padding-top: 1rem; - padding-bottom: 1rem; +/* ====================================================== + 1. Grundlegende Einstellungen + ====================================================== */ +html, body { + margin: 0; + padding: 0; + width: 100%; + overflow-x: hidden; + box-sizing: border-box; } -.navbar-brand span { - font-size: 1.7rem; /* Adjust the size as needed */ +/* ====================================================== + 2. NAVBAR-DESIGN + ====================================================== */ +.navbar-custom { + background-color: #b30000; + background-image: url('logo2.jpeg'); + background-size: 7em; + background-repeat: repeat; + padding: 1rem 0; + color: #900000; } + .navbar-custom .navbar-brand, .navbar-custom .nav-link { color: #ffffff; } .navbar-custom .nav-link:hover { - color: #000000; + color: #000000; } - .navbar-custom .dropdown-menu { background-color: #900000; background-image: url('logo2.jpeg'); - background-size: 9em; /* oder eine feste Größe */ -} - -.navbar-custom { - color: #900000; + background-size: 9em; } .navbar-custom .dropdown-item:hover { - background-color: #ffffff00; - color: #000000; + background-color: transparent; + color: #000000; } a.dropdown-item { - color: #fff; -} - -.navbar-custom { - background-image: url('logo2.jpeg'); - background-size: 7em; - background-repeat: repeat; + color: #ffffff; } .navbar-brand { display: flex; align-items: center; justify-content: center; - text-align: center; - overflow: visible; - white-space: normal; - width: auto; + gap: 0.75rem; + margin: 0 auto; + white-space: nowrap; } -/* logo alig*/ .navbar-brand img { - height: 3em; + height: 3rem; width: auto; - margin-right: 10px; - vertical-align: middle; } -/*text aligns with the logo */ .navbar-brand span { font-size: 1.2rem; - line-height: 1.2em; + line-height: 1.2; display: flex; align-items: center; } -/* Adjust layout on small screens */ +/* Responsive Anpassungen */ @media (max-width: 370px) { .navbar-brand { flex-direction: column; align-items: center; text-align: center; } - .navbar-brand img { - margin-right: 0; - margin-bottom: 5px; + margin-bottom: 0.5rem; } - .navbar-brand span { text-align: center; } } -@media (min-width: 520px) { +@media (min-width: 520px) { .navbar-brand span { - font-size: 2rem; /* Größere Schriftgröße */ + font-size: 2rem; } -} \ No newline at end of file +} + +/* ====================================================== + 3. FACEBOOK-PLUGIN (ADAPTIVE BREITE) + ====================================================== */ +.fb-super-wrapper { + width: 100%; + padding: 2rem 0; + background-color: #f8f9fa; + text-align: center; /* wichtig für das inline-block Verhalten */ +} + +.fb-align-center { + display: inline-block; + text-align: left; /* Inhalt innen linksbündig, Box selbst zentriert */ + max-width: 700px; + width: 100%; +} + +.fb-outer-container { + width: 100%; + max-width: 700px; + padding: 0 1rem; +} + +.fb-inner-container { + width: 100%; +} + +/* Facebook-spezifische Elemente */ +.fb-page, +.fb-page > span, +.fb-page > span > iframe { + width: 100% !important; + display: block !important; + margin: 0 auto !important; + max-width: 100% !important; +}