From 9fe45108d876ec32a93c20d1a60777311604d6f7 Mon Sep 17 00:00:00 2001 From: M_Viper Date: Tue, 6 Jan 2026 17:18:45 +0000 Subject: [PATCH] Minecraft-Modern-Theme/style.css aktualisiert --- Minecraft-Modern-Theme/style.css | 686 ++++++++++++++++++++++--------- 1 file changed, 492 insertions(+), 194 deletions(-) diff --git a/Minecraft-Modern-Theme/style.css b/Minecraft-Modern-Theme/style.css index 87739f6..f41ac87 100644 --- a/Minecraft-Modern-Theme/style.css +++ b/Minecraft-Modern-Theme/style.css @@ -4,7 +4,7 @@ Theme URI: https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme Author: M_Viper Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider. Author URI: https://M-Viper.de -Version: 1.3 +Version: 1.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: minecraft-modern-theme @@ -84,22 +84,16 @@ a:hover { color: #fff; } box-shadow: 0 2px 15px rgba(0,0,0,0.3); } -/* =================================================================== */ -/* === KORRIGIERT: Header-Layout für linksbündige Ausrichtung ========= */ -/* =================================================================== */ - .header-main { display: flex; align-items: center; - justify-content: flex-start; /* <== KORREKTUR: Alle Elemente linksbündig anordnen */ + justify-content: flex-start; gap: 120px; /* Gleichmäßiger Abstand zwischen den Elementen */ } -/* =================================================================== */ .site-branding { display: flex; align-items: center; - } .custom-logo-link img, .custom-logo { @@ -119,28 +113,150 @@ a:hover { color: #fff; } text-decoration: none; } +/* =================================================================== */ +/* === NEUE DROPDOWN NAVIGATION ======================================= */ +/* =================================================================== */ + .main-navigation { + position: relative; flex-grow: 1; - text-align: center; + display: flex; + justify-content: center; /* Zentriert das Menü */ + align-items: center; } -.main-navigation ul { + +/* Hauptliste (Top Level) */ +.primary-menu { + display: flex; + align-items: center; list-style: none; margin: 0; padding: 0; - display: inline-flex; - gap: 30px; + gap: 25px; } + +/* Menüpunkte */ +.menu-item { + position: relative; +} + +/* Links in der Navigation */ .main-navigation a { + display: block; font-size: 15px; font-weight: 600; color: var(--text-muted); - padding: 5px 0; - transition: color 0.2s; + text-decoration: none; + padding: 10px 0; + transition: color 0.3s ease; + position: relative; } + .main-navigation a:hover { color: var(--primary-accent); } +/* Pfeil-Icon für Untermenü-Punkte (Desktop) */ +.menu-item-has-children > a::after { + content: '\f107'; /* FontAwesome Down Arrow */ + font-family: 'Font Awesome 6 Free'; + font-weight: 900; + margin-left: 8px; + font-size: 0.8em; + display: inline-block; + transition: transform 0.3s ease; +} + +/* Pfeil drehen beim Hover */ +.menu-item-has-children:hover > a::after { + transform: rotate(180deg); +} + +/* --- DROPDOWNS (Untermenüs Level 1) --- */ +.sub-menu { + position: absolute; + top: 100%; /* Direkt unter dem Elternpunkt */ + left: 0; + background-color: var(--surface-color); + border: 1px solid var(--border-color); + border-top: 3px solid var(--primary-accent); + min-width: 240px; + list-style: none; + padding: 10px 0; + margin: 0; + z-index: 9999; + + /* Animationseinstellungen */ + opacity: 0; + visibility: hidden; + transform: translateY(20px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 10px 30px rgba(0,0,0,0.5); + border-radius: 0 0 8px 8px; +} + +/* Dropdown anzeigen bei Hover */ +.menu-item-has-children:hover > .sub-menu { + opacity: 1; + visibility: visible; + transform: translateY(10px); +} + +/* Links im Dropdown */ +.sub-menu li a { + padding: 12px 25px; + color: var(--text-color); + border-bottom: 1px solid rgba(255,255,255,0.05); + font-size: 14px; + white-space: nowrap; +} + +.sub-menu li:last-child a { + border-bottom: none; +} + +.sub-menu li a:hover { + background-color: rgba(0, 212, 255, 0.1); + color: var(--primary-accent); + padding-left: 30px; /* Schiebe-Effekt */ +} + +/* --- DROPDOWN LEVEL 2 (falls vorhanden) --- */ +.sub-menu .sub-menu { + top: 0; + left: 100%; /* Rechts neben dem Elternmenü */ + margin-top: -3px; +} +.sub-menu li:hover > .sub-menu { + opacity: 1; + visibility: visible; + transform: translateX(10px); +} + +/* Pfeil für Level 2 nach rechts zeigen */ +.sub-menu .menu-item-has-children > a::after { + content: '\f105'; /* FontAwesome Right Arrow */ + float: right; + margin-left: 0; + margin-top: 4px; +} + +/* --- MOBILE TOGGLE BUTTON --- */ +.menu-toggle { + display: none; /* Auf Desktop ausblenden */ + background: transparent; + border: none; + color: var(--text-color); + font-size: 24px; + cursor: pointer; + padding: 5px; + transition: color 0.3s ease; +} +.menu-toggle:hover { + color: var(--primary-accent); +} + +/* --- HEADER INFO & SOCIAL LINKS --- */ .header-info { display: flex; align-items: center; @@ -155,7 +271,7 @@ a:hover { color: #fff; } .social-links a { font-size: 18px; color: var(--text-muted); - transition: color 0.2s; + transition: color 0.2s ease; } .social-links a:hover { color: var(--primary-accent); @@ -212,7 +328,7 @@ a:hover { color: #fff; } width: 44px; height: 44px; border-radius: 50%; - transition: background 0.2s; + transition: background 0.2s ease; } .swiper-button-prev:hover, .swiper-button-next:hover { background: rgba(0,0,0,0.6); } .swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; } @@ -252,83 +368,232 @@ a:hover { color: #fff; } color: var(--primary-accent); } -/* === FOOTER === */ -.site-footer { - background-color: var(--surface-color); - padding: 20px 0; - border-top: 1px solid var(--border-color); - flex-shrink: 0; /* WICHTIG: Verhindert, dass der Footer schrumpft */ -} +/* === FOOTER (NEUES DESIGN) ========================================== */ .site-footer { - line-height: 1.4; + background-color: var(--surface-color); + border-top: 4px solid var(--primary-accent); + padding: 60px 0 0 0; + margin-top: 0; + position: relative; + flex-shrink: 0; +} + +/* Widget Grid Layout */ +.footer-widgets { + display: grid; + /* Responsive Grid: Mindestens 250px breit, füllt den Rest auf */ + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 40px; + margin-bottom: 50px; +} + +/* Widget Überschriften */ +.footer-widget .widget-title { + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--primary-accent); + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 2px solid rgba(255,255,255,0.1); + display: inline-block; +} + +/* Listen in Widgets */ +.footer-widget ul { + list-style: none; + margin: 0; + padding: 0; +} + +.footer-widget ul li { + margin-bottom: 12px; +} + +.footer-widget ul li a { + color: var(--text-muted); + text-decoration: none; + font-size: 14px; + transition: all 0.3s ease; + display: inline-block; + border-left: 2px solid transparent; + padding-left: 10px; +} + +.footer-widget ul li a:hover { + color: #fff; + border-left-color: var(--primary-accent); + padding-left: 15px; /* Schiebe-Effekt */ +} + +/* === FOOTER BOTTOM BAR ============================================= */ + +.footer-bottom-bar { + border-top: 1px solid var(--border-color); + padding: 25px 0; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px; font-size: 13px; } -.footer-widgets-container { - /* Dieser Container ist jetzt nur noch ein Wrapper */ - margin-bottom: 15px; -} - -.footer-widgets { +.footer-left-group { display: flex; - justify-content: space-between; /* Platziert 1 links, 3 rechts, 2 in der Mitte */ - align-items: flex-start; - gap: 40px; /* Gleichmäßiger Abstand zwischen den Widgets */ + flex-direction: column; + gap: 10px; } -.footer-widget .widget-title { - font-size: 15px; +.footer-right-group { + display: flex; + align-items: center; +} + +/* Site Info & Credit */ +.site-info { + color: var(--text-muted); + margin: 0; +} + +.footer-credit a { + color: var(--text-muted); + transition: color 0.2s; +} +.footer-credit a:hover { color: var(--primary-accent); - margin-bottom: 10px; - font-weight: 700; } +/* Footer Navigation (Menü unten) */ .footer-navigation { - text-align: center; - padding: 10px 0; - border-top: 1px solid var(--border-color); - margin-bottom: 5px; + display: flex; + gap: 20px; } + .footer-menu { list-style: none; margin: 0; padding: 0; - display: inline-flex; - align-items: center; + display: flex; gap: 15px; } + .footer-menu a { color: var(--text-muted); - font-weight: 400; + text-decoration: none; + font-size: 13px; transition: color 0.2s; } -.footer-menu a:hover { color: var(--primary-accent); } - -.site-info { - text-align: center; - padding-top: 10px; - border-top: 1px solid var(--border-color); - color: var(--text-muted); - margin: 0; -} -.site-info .footer-credit { - font-size: 0.8em; - opacity: 0.8; - color: #aaaaaa; +.footer-menu a:hover { + color: #fff; + text-decoration: underline; } +/* Legal Links */ .footer-legal-links { - text-align: center; - margin-top: 10px; + display: flex; + gap: 20px; +} + +.footer-legal-links a { + color: var(--text-muted); + text-decoration: none; + display: flex; + align-items: center; + gap: 5px; + transition: color 0.2s; +} +.footer-legal-links a:hover { + color: var(--primary-accent); +} +.footer-legal-links i { font-size: 14px; } -.footer-legal-links a { - color: #888; - text-decoration: none; - transition: color 0.3s ease; + +/* === THEME TOGGLE (Fixiert unten links) ========================= */ + +.theme-toggle { + position: fixed; /* Schwebend über dem Inhalt */ + left: 30px; /* <== WIEDER LINKS */ + bottom: 30px; + z-index: 9999; + width: 70px; + height: 36px; + background: var(--card-bg); + border: 2px solid var(--border-color); + border-radius: 30px; + cursor: pointer; + display: flex; + align-items: center; + padding: 3px; + box-shadow: 0 4px 20px rgba(0,0,0,0.4); + backdrop-filter: blur(10px); + transition: all 0.3s ease; + outline: none; +} + +.theme-toggle:hover { + border-color: var(--primary-accent); + box-shadow: 0 0 25px rgba(0,212,255,0.5); +} + +/* Light Mode Anpassung für den Toggle */ +html.light-mode .theme-toggle { + box-shadow: 0 4px 20px rgba(0,0,0,0.15); + background: #fff; +} + +/* Der bewegliche Punkt im Toggle */ +.theme-toggle::before { + content: ''; + position: absolute; + width: 28px; + height: 28px; + background: linear-gradient(135deg, var(--primary-accent), #0099cc); + border-radius: 50%; + left: 3px; + transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + box-shadow: 0 2px 8px rgba(0,0,0,0.3); +} + +/* Im Light Mode rutscht der Punkt nach rechts */ +html.light-mode .theme-toggle::before { + transform: translateX(34px); + background: linear-gradient(135deg, #ffd700, #ffaa00); +} + +/* Icons Container */ +.theme-toggle-icons { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6px; + position: relative; + z-index: 1; + pointer-events: none; /* Klicks gehen auf den Button */ +} + +.icon-moon, .icon-sun { + width: 18px; + height: 18px; + transition: all 0.3s ease; + flex-shrink: 0; + stroke: currentColor; +} + +.icon-moon { color: #a0a0ff; opacity: 1; } +.icon-sun { color: #ffd700; opacity: 0.3; } + +html.light-mode .icon-moon { opacity: 0.3; } +html.light-mode .icon-sun { opacity: 1; } + +.theme-toggle:hover .icon-moon, +.theme-toggle:hover .icon-sun { + transform: scale(1.1); } -.footer-legal-links a:hover { color: #ccc; } /* === FAQ STYLING === */ .page-header { @@ -466,72 +731,7 @@ a:hover { color: #fff; } pointer-events: auto; /* Wieder klickbar machen */ } -/* === THEME TOGGLE === */ -.theme-toggle { - position: fixed; - left: 20px; - bottom: 20px; - z-index: 9999; - width: 70px; - height: 36px; - background: var(--card-bg); - border: 2px solid var(--border-color); - border-radius: 30px; - cursor: pointer; - display: flex; - align-items: center; - padding: 3px; - box-shadow: 0 4px 20px rgba(0,0,0,0.4); - backdrop-filter: blur(10px); - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} -.theme-toggle:hover { - border-color: var(--primary-accent); - box-shadow: 0 0 25px rgba(0,212,255,0.5); -} -html.light-mode .theme-toggle { box-shadow: 0 4px 20px rgba(0,0,0,0.15); } - -.theme-toggle::before { - content: ''; - position: absolute; - width: 28px; - height: 28px; - background: linear-gradient(135deg, var(--primary-accent), #0099cc); - border-radius: 50%; - left: 3px; - transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); - box-shadow: 0 2px 8px rgba(0,0,0,0.3); -} -html.light-mode .theme-toggle::before { - transform: translateX(34px); - background: linear-gradient(135deg, #ffd700, #ffaa00); -} - -.theme-toggle-icons { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 0 6px; - position: relative; - z-index: 1; -} -.icon-moon, .icon-sun { - width: 18px; - height: 18px; - transition: all 0.3s ease; - flex-shrink: 0; -} -.icon-moon { color: #a0a0ff; opacity: 1; } -.icon-sun { color: #ffd700; opacity: 0.3; } -html.light-mode .icon-moon { opacity: 0.3; } -html.light-mode .icon-sun { opacity: 1; } -.theme-toggle:hover .icon-moon, .theme-toggle:hover .icon-sun { transform: scale(1.1); } - /* === ANKÜNDIGUNGSLEISTE ============================================== */ -/* =================================================================== */ .announcement-bar { background-color: var(--announcement-bg, #2c3e50); @@ -589,70 +789,8 @@ html.light-mode .icon-sun { opacity: 1; } } .hero-slider.slider-hide-pagination .swiper-pagination { display: none !important; } - -/* === RESPONSIVE DESIGN === */ -@media (max-width: 768px) { - /* Header */ - .header-main { flex-direction: column; gap: 15px; } - .main-navigation ul { gap: 20px; } - .custom-logo-link img, .custom-logo { max-height: 50px; } - - /* Hero */ - .hero-title, .slider-title { font-size: 32px; } - .hero-subtitle, .slider-subtitle { font-size: 18px; } - .hero-buttons a { display: block; margin: 10px auto; width: 80%; } - - /* Footer */ - .footer-widgets { - /* Auf mobilen Geräten das Layout ändern */ - flex-direction: column; - gap: 20px; - align-items: center; - } - - /* Theme Toggle */ - .theme-toggle { - width: 60px; - height: 32px; - left: 15px; - bottom: 15px; - } - .theme-toggle::before { - width: 24px; - height: 24px; - } - html.light-mode .theme-toggle::before { transform: translateX(28px); } - .icon-moon, .icon-sun { width: 16px; height: 16px; } -} - -/* Ladezustand für den Slider - Verhindert das Flackern beim Laden */ -.hero-slider.swiper-loading { - opacity: 0; - visibility: hidden; - transition: opacity 0.4s ease-in-out; -} -.hero-slider:not(.swiper-loading) { - opacity: 1; - visibility: visible; -} - /* =================================================================== */ -/* === Abstand für die neuen Trennlinien ============================== */ -/* =================================================================== */ - -/* Abstand nach dem Slider zum Hauptinhalt */ -main#primary.site-main { - padding-top: 40px; /* Passe den Wert bei Bedarf an */ -} - -/* Abstand im Footer, damit der Inhalt nicht direkt an der Linie klebt */ -.site-footer .widget-area, -.site-footer .site-info { - padding-top: 30px; /* Passe den Wert bei Bedarf an */ -} - -/* =================================================================== */ -/* === Titel der statischen Startseite ausblenden (KORRIGIERT) ==== */ +/* === Titel der statischen Startseite ausblenden ==================== */ /* =================================================================== */ /* Zielt genau auf das

-Element mit der Klasse "post-title" ab */ @@ -666,7 +804,7 @@ body.home-title-hidden h2.post-title { #scroll-to-top { position: fixed; - bottom: 30px; + bottom: 30px; /* <== WIEDER NORMAL POSITIONIERT */ right: 30px; width: 50px; height: 50px; @@ -702,10 +840,170 @@ body.home-title-hidden h2.post-title { /* Anpassungen für kleinere Bildschirme */ @media screen and (max-width: 768px) { #scroll-to-top { - bottom: 20px; + bottom: 20px; /* Mobile Standard */ right: 20px; width: 45px; height: 45px; font-size: 16px; } +} + +/* Ladezustand für den Slider - Verhindert das Flackern beim Laden */ +.hero-slider.swiper-loading { + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease-in-out; +} +.hero-slider:not(.swiper-loading) { + opacity: 1; + visibility: visible; +} + +/* =================================================================== */ +/* === Abstand für die neuen Trennlinien ============================== */ +/* =================================================================== */ + +/* Abstand nach dem Slider zum Hauptinhalt */ +main#primary.site-main { + padding-top: 40px; /* Passe den Wert bei Bedarf an */ +} + +/* =================================================================== */ +/* === RESPONSIVE DESIGN ============================================== */ +/* =================================================================== */ + +/* --- Navigation Mobile Breakpoint (992px) --- */ +@media (max-width: 992px) { + .header-main { + gap: 20px; + flex-wrap: wrap; + } + + .site-branding { flex-grow: 1; } + .header-info { order: 2; } /* Social rechts */ + .main-navigation { order: 3; width: 100%; } + + .menu-toggle { + display: block; + margin-left: auto; + } + + /* Hauptliste mobil */ + .primary-menu { + display: none; /* Standardmäßig eingeklappt */ + flex-direction: column; + width: 100%; + gap: 0; + background-color: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 8px; + margin-top: 20px; + padding: 10px 0; + } + + /* Wenn .toggled aktiv ist, zeigen */ + .main-navigation.toggled .primary-menu { + display: flex; + animation: slideDown 0.3s ease forwards; + } + + .menu-item { width: 100%; text-align: left; } + .main-navigation a { padding: 15px 20px; } + + /* Submenus mobil - Akkordeon Style */ + .sub-menu { + position: static; + opacity: 1; + visibility: visible; + transform: none; + display: none; /* Standardmäßig eingeklappt */ + width: 100%; + box-shadow: none; + border: none; + border-left: 2px solid var(--primary-accent); + background-color: rgba(0,0,0,0.2); + margin-top: 5px; + margin-bottom: 5px; + padding-left: 15px; + } + + /* Mobil: Wenn Eltern-Element aktiv ist, zeige Submenu */ + .menu-item.active > .sub-menu { + display: block; + } + + .sub-menu .sub-menu { padding-left: 20px; border-left: none; } + + /* Pfeile im Mobile-Modus ausblenden oder anpassen */ + .menu-item-has-children > a::after { float: right; } +} + +@keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* --- General Mobile Breakpoint (768px) --- */ +@media (max-width: 768px) { + /* Header */ + .custom-logo-link img, .custom-logo { max-height: 50px; } + + /* Hero */ + .hero-title, .slider-title { font-size: 32px; } + .hero-subtitle, .slider-subtitle { font-size: 18px; } + .hero-buttons a { display: block; margin: 10px auto; width: 80%; } + + /* Footer Responsive */ + .site-footer { + padding: 40px 0 0 0; + } + + .footer-bottom-bar { + flex-direction: column; + align-items: flex-start; /* Links ausrichten auf Mobile */ + text-align: center; /* Zentrieren */ + gap: 15px; + } + + .footer-left-group, + .footer-right-group, + .footer-navigation { + width: 100%; + justify-content: center; + flex-direction: column; + align-items: center; + } + + .site-info, .footer-legal-links a { + text-align: center; + } + + .footer-menu { + flex-wrap: wrap; + justify-content: center; + } + + /* Theme Toggle Responsive */ + .theme-toggle { + width: 60px; + height: 32px; + left: 15px; /* <== Links bleiben */ + bottom: 15px; + } + .theme-toggle::before { + width: 24px; + height: 24px; + } + html.light-mode .theme-toggle::before { transform: translateX(28px); } + .icon-moon, .icon-sun { width: 16px; height: 16px; } +} + +/* =================================================================== */ +/* === Titel der Startseite ausblenden / anzeigen ==================== */ +/* =================================================================== */ + +/* Wenn der Body die Klasse hat, wird der komplette Header-Bereich der Startseite ausgeblendet */ +body.home-title-hidden .site-main .entry-header, +body.home-title-hidden .site-main .page-header { + display: none !important; } \ No newline at end of file