finsh landingpage style
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
baseURL = "/" # Setze dies auf "/" für relative Pfade oder fest auf die Domain
|
baseURL = "/"
|
||||||
languageCode = "de"
|
languageCode = "de"
|
||||||
defaultContentLanguage = "de"
|
defaultContentLanguage = "de"
|
||||||
defaultContentLanguageInSubdir = true
|
defaultContentLanguageInSubdir = true
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ cta_button: "Jetzt entdecken"
|
|||||||
|
|
||||||
# About
|
# About
|
||||||
about_title: "Über Uns"
|
about_title: "Über Uns"
|
||||||
|
about_text: "Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen."
|
||||||
|
|
||||||
# Projekte
|
# Projekte
|
||||||
projects_title: "Unsere Hauptprojekte"
|
projects_title: "Unsere Hauptprojekte"
|
||||||
@@ -55,8 +56,3 @@ comm_btn2: "Archiv / Gitea"
|
|||||||
# Footer
|
# Footer
|
||||||
footer_text: "Ground Zero Lab - KI für kritische Wahrheit"
|
footer_text: "Ground Zero Lab - KI für kritische Wahrheit"
|
||||||
---
|
---
|
||||||
Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern.
|
|
||||||
In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative:
|
|
||||||
Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind.
|
|
||||||
Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken,
|
|
||||||
die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen.
|
|
||||||
@@ -18,6 +18,7 @@ cta_button: "Explore Now"
|
|||||||
|
|
||||||
# About
|
# About
|
||||||
about_title: "About Us"
|
about_title: "About Us"
|
||||||
|
about_text: "We develop AI workarounds and models that bypass propaganda and deliver scientific truth. In a world dominated by disinformation in the AI landscape, we offer an alternative: models trained on verified facts and scientific knowledge. Our team consists of researchers in data science, history, and critical thinking, working together to bring hidden truths to light."
|
||||||
|
|
||||||
# Projects
|
# Projects
|
||||||
projects_title: "Our Main Projects"
|
projects_title: "Our Main Projects"
|
||||||
@@ -55,8 +56,3 @@ comm_btn2: "Archive / Gitea"
|
|||||||
# Footer
|
# Footer
|
||||||
footer_text: "Ground Zero Lab - AI for Critical Truth"
|
footer_text: "Ground Zero Lab - AI for Critical Truth"
|
||||||
---
|
---
|
||||||
We develop AI workarounds and models that bypass propaganda and deliver scientific truth.
|
|
||||||
In a world dominated by disinformation in the AI landscape, we offer an alternative:
|
|
||||||
models trained on verified facts and scientific knowledge.
|
|
||||||
Our team consists of researchers in data science, history, and critical thinking,
|
|
||||||
working together to bring hidden truths to light.
|
|
||||||
@@ -18,6 +18,7 @@ cta_button: "Explorar"
|
|||||||
|
|
||||||
# About
|
# About
|
||||||
about_title: "Nosotros"
|
about_title: "Nosotros"
|
||||||
|
about_text: "Desarrollamos soluciones de IA y modelos que evitan la propaganda y entregan la verdad científica. En un mundo dominado por la desinformación en el panorama de la IA, ofrecemos una alternativa: modelos entrenados con hechos verificados y conocimiento científico. Nuestro equipo está compuesto por investigadores en ciencia de datos, historia y pensamiento crítico, trabajando juntos para sacar a la luz verdades ocultas."
|
||||||
|
|
||||||
# Projects
|
# Projects
|
||||||
projects_title: "Nuestros Proyectos Principales"
|
projects_title: "Nuestros Proyectos Principales"
|
||||||
@@ -55,4 +56,3 @@ comm_btn2: "Archivo / Gitea"
|
|||||||
# Footer
|
# Footer
|
||||||
footer_text: "Ground Zero Lab - IA para la Verdad Crítica"
|
footer_text: "Ground Zero Lab - IA para la Verdad Crítica"
|
||||||
---
|
---
|
||||||
Desarrollamos soluciones de IA y modelos que evitan la propaganda y entregan la verdad científica. En un mundo dominado por la desinformación en el panorama de la IA, ofrecemos una alternativa: modelos entrenados con hechos verificados y conocimiento científico. Nuestro equipo está compuesto por investigadores en ciencia de datos, historia y pensamiento crítico, trabajando juntos para sacar a la luz verdades ocultas.
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ cta_button: "Découvrir"
|
|||||||
|
|
||||||
# About
|
# About
|
||||||
about_title: "À propos"
|
about_title: "À propos"
|
||||||
|
about_text: "Nous développons des contournements IA et des modèles qui percent la propagande et délivrent la vérité scientifique. Dans un monde dominé par la désinformation dans le paysage de l'IA, nous offrons une alternative : des modèles entraînés sur des faits vérifiés et des connaissances scientifiques. Notre équipe est composée de chercheurs en science des données, en histoire et en pensée critique, travaillant ensemble pour mettre en lumière des vérités cachées."
|
||||||
|
|
||||||
# Projects
|
# Projects
|
||||||
projects_title: "Nos Projets Principaux"
|
projects_title: "Nos Projets Principaux"
|
||||||
@@ -55,4 +56,4 @@ comm_btn2: "Archives / Gitea"
|
|||||||
# Footer
|
# Footer
|
||||||
footer_text: "Ground Zero Lab - IA pour la Vérité Critique"
|
footer_text: "Ground Zero Lab - IA pour la Vérité Critique"
|
||||||
---
|
---
|
||||||
Nous développons des contournements IA et des modèles qui percent la propagande et délivrent la vérité scientifique. Dans un monde dominé par la désinformation dans le paysage de l'IA, nous offrons une alternative : des modèles entraînés sur des faits vérifiés et des connaissances scientifiques. Notre équipe est composée de chercheurs en science des données, en histoire et en pensée critique, travaillant ensemble pour mettre en lumière des vérités cachées.
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ cta_button: "Узнать больше"
|
|||||||
|
|
||||||
# About
|
# About
|
||||||
about_title: "О нас"
|
about_title: "О нас"
|
||||||
|
about_text: "Мы разрабатываем обходные пути ИИ и модели, которые преодолевают пропаганду и доставляют научную истину. В мире, где в ландшафте ИИ доминирует дезинформация, мы предлагаем альтернативу: модели, обученные на проверенных фактах и научных знаниях. Наша команда состоит из исследователей в области науки о данных, истории и критического мышления, работающих вместе, чтобы вывести скрытые истины на свет."
|
||||||
|
|
||||||
# Projects
|
# Projects
|
||||||
projects_title: "Наши главные проекты"
|
projects_title: "Наши главные проекты"
|
||||||
@@ -55,4 +56,4 @@ comm_btn2: "Архив / Gitea"
|
|||||||
# Footer
|
# Footer
|
||||||
footer_text: "Ground Zero Lab - ИИ для критической правды"
|
footer_text: "Ground Zero Lab - ИИ для критической правды"
|
||||||
---
|
---
|
||||||
Мы разрабатываем обходные пути ИИ и модели, которые преодолевают пропаганду и доставляют научную истину. В мире, где в ландшафте ИИ доминирует дезинформация, мы предлагаем альтернативу: модели, обученные на проверенных фактах и научных знаниях. Наша команда состоит из исследователей в области науки о данных, истории и критического мышления, работающих вместе, чтобы вывести скрытые истины на свет.
|
|
||||||
|
|||||||
@@ -10,6 +10,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav class="container">
|
<nav class="container">
|
||||||
|
<div class="hamburger" onclick="toggleHamburger()">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</div>
|
||||||
<a href="#" class="logo">🏗 Ground Zero Lab</a>
|
<a href="#" class="logo">🏗 Ground Zero Lab</a>
|
||||||
|
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
@@ -20,8 +23,7 @@
|
|||||||
<li><a href="#demo">{{ .Params.menu_demo }}</a></li>
|
<li><a href="#demo">{{ .Params.menu_demo }}</a></li>
|
||||||
<li><a href="#community">{{ .Params.menu_community }}</a></li>
|
<li><a href="#community">{{ .Params.menu_community }}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="theme-header-btn">
|
||||||
<div class="lang-switch">
|
|
||||||
<button class="lang-btn" id="langBtn">
|
<button class="lang-btn" id="langBtn">
|
||||||
{{ if eq .Lang "de" }}🇩🇪{{ end }}
|
{{ if eq .Lang "de" }}🇩🇪{{ end }}
|
||||||
{{ if eq .Lang "en" }}🇬🇧{{ end }}
|
{{ if eq .Lang "en" }}🇬🇧{{ end }}
|
||||||
@@ -31,7 +33,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<div class="lang-dropdown" id="langDropdown">
|
<div class="lang-dropdown" id="langDropdown">
|
||||||
{{ range .Site.Languages }}
|
{{ range .Site.Languages }}
|
||||||
<a href="#" data-lang="{{ .Lang }}">
|
<a href="#" class="theme-option" data-lang="{{ .Lang }}">
|
||||||
{{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
|
{{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
|
||||||
{{ if eq .Lang "en" }}🇬🇧 English{{ end }}
|
{{ if eq .Lang "en" }}🇬🇧 English{{ end }}
|
||||||
{{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
|
{{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
|
||||||
@@ -42,20 +44,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="theme-switch">
|
<div class="theme-header-btn">
|
||||||
<button class="theme-btn" id="themeBtn" title="Design wählen">
|
<button class="theme-btn" id="themeBtn" title="Design wählen">
|
||||||
<span class="theme-icon-active">🌓</span>
|
<span class="theme-icon-active">🌓</span>
|
||||||
</button>
|
</button>
|
||||||
<div class="theme-dropdown" id="themeDropdown">
|
<div class="theme-dropdown" id="themeDropdown">
|
||||||
<button data-theme="light">☀️ Hell</button>
|
<button class="theme-option" data-theme="setlight">☀️ Hell</button>
|
||||||
<button data-theme="dark">🌙 Dunkel</button>
|
<button class="theme-option" data-theme="setdark">🌙 Dunkel</button>
|
||||||
<button data-theme="auto">🌓 Auto</button>
|
<button class="theme-option" data-theme="setauto">🌓 Auto</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hamburger" onclick="toggleHamburger()">
|
|
||||||
<span></span><span></span><span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@@ -71,7 +70,7 @@
|
|||||||
|
|
||||||
<section id="about" class="container">
|
<section id="about" class="container">
|
||||||
<h2>{{ .Params.about_title }}</h2>
|
<h2>{{ .Params.about_title }}</h2>
|
||||||
<div class="text">{{ .Content }}</div>
|
<div class="text">{{ .Params.about_text }}</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="projects" class="section-dark">
|
<section id="projects" class="section-dark">
|
||||||
|
|||||||
178
static/script.js
178
static/script.js
@@ -8,34 +8,104 @@ function toggleHamburger() {
|
|||||||
hamburger.classList.toggle('active');
|
hamburger.classList.toggle('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================
|
// Initialisierung
|
||||||
THEME SWITCHER LOGIC
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
========================================== */
|
// ... dein bestehender Code ...
|
||||||
const themeBtn = document.getElementById('themeBtn');
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
||||||
const themeDropdown = document.getElementById('themeDropdown');
|
applyTheme(savedTheme);
|
||||||
const themeButtons = document.querySelectorAll('.theme-dropdown button');
|
|
||||||
const htmlEl = document.documentElement;
|
|
||||||
|
|
||||||
// Dropdown öffnen/schließen
|
// Hamburger Menü schließen bei Klick auf einen Link
|
||||||
if (themeBtn) {
|
const navLinksContainer = document.getElementById('navLinks');
|
||||||
themeBtn.addEventListener('click', (e) => {
|
const navLinks = navLinksContainer.querySelectorAll('a');
|
||||||
e.stopPropagation();
|
const hamburger = document.querySelector('.hamburger');
|
||||||
themeDropdown.classList.toggle('show');
|
|
||||||
// Schließe andere Dropdowns
|
|
||||||
if (langDropdown) langDropdown.classList.remove('show');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Theme auswählen
|
navLinks.forEach(link => {
|
||||||
themeButtons.forEach(btn => {
|
link.addEventListener('click', () => {
|
||||||
btn.addEventListener('click', () => {
|
// Prüfen, ob das Menü gerade offen ist
|
||||||
const theme = btn.getAttribute('data-theme');
|
if (navLinksContainer.classList.contains('mobile-open')) {
|
||||||
applyTheme(theme);
|
navLinksContainer.classList.remove('mobile-open');
|
||||||
themeDropdown.classList.remove('show');
|
hamburger.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
DROPDOWN LOGIC (Vereinheitlicht)
|
||||||
|
========================================== */
|
||||||
|
const langBtn = document.getElementById('langBtn');
|
||||||
|
const langDropdown = document.getElementById('langDropdown');
|
||||||
|
const themeBtn = document.getElementById('themeBtn');
|
||||||
|
const themeDropdown = document.getElementById('themeDropdown');
|
||||||
|
|
||||||
|
// Funktion zum Schließen aller Dropdowns
|
||||||
|
function closeAllDropdowns() {
|
||||||
|
if (langDropdown) langDropdown.classList.remove('show');
|
||||||
|
if (themeDropdown) themeDropdown.classList.remove('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Listener für Sprach-Dropdown
|
||||||
|
if (langBtn) {
|
||||||
|
langBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
closeAllDropdowns();
|
||||||
|
langDropdown.classList.toggle('show');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Listener für Theme-Dropdown
|
||||||
|
if (themeBtn) {
|
||||||
|
themeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
closeAllDropdowns();
|
||||||
|
themeDropdown.classList.toggle('show');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Klick außerhalb schließt alle
|
||||||
|
window.addEventListener('click', () => {
|
||||||
|
closeAllDropdowns();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
LANGUAGE SWITCHER LOGIC
|
||||||
|
========================================== */
|
||||||
|
if (langDropdown) {
|
||||||
|
langDropdown.querySelectorAll('.theme-option').forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const selectedLang = link.getAttribute('data-lang');
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
|
||||||
|
// URL Logik: Pfad ersetzen
|
||||||
|
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
|
||||||
|
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
|
||||||
|
newPath = '/' + selectedLang + '/';
|
||||||
|
}
|
||||||
|
newPath = newPath.replace(/\/+/g, '/');
|
||||||
|
window.location.href = newPath;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
THEME SWITCHER LOGIC
|
||||||
|
========================================== */
|
||||||
|
const themeOptions = document.querySelectorAll('#themeDropdown .theme-option');
|
||||||
|
const htmlEl = document.documentElement;
|
||||||
|
|
||||||
|
themeOptions.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const action = btn.getAttribute('data-theme');
|
||||||
|
let theme;
|
||||||
|
if (action === 'setdark') theme = 'dark';
|
||||||
|
else if (action === 'setlight') theme = 'light';
|
||||||
|
else theme = 'auto';
|
||||||
|
|
||||||
|
applyTheme(theme);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Theme anwenden
|
|
||||||
function applyTheme(theme) {
|
function applyTheme(theme) {
|
||||||
if (theme === 'auto') {
|
if (theme === 'auto') {
|
||||||
localStorage.removeItem('theme');
|
localStorage.removeItem('theme');
|
||||||
@@ -49,65 +119,3 @@ function applyTheme(theme) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialisierung beim Laden
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
||||||
applyTheme(savedTheme);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Klick außerhalb schließt alle Dropdowns
|
|
||||||
window.addEventListener('click', () => {
|
|
||||||
if (themeDropdown) themeDropdown.classList.remove('show');
|
|
||||||
if (langDropdown) langDropdown.classList.remove('show');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Mobile Menü schließen bei Klick auf Link
|
|
||||||
document.querySelectorAll('.nav-links a').forEach(link => {
|
|
||||||
link.addEventListener('click', () => {
|
|
||||||
document.getElementById('navLinks').classList.remove('mobile-open');
|
|
||||||
const hamburger = document.querySelector('.hamburger');
|
|
||||||
if (hamburger) hamburger.classList.remove('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/* ==========================================
|
|
||||||
LANGUAGE SWITCHER LOGIC
|
|
||||||
========================================== */
|
|
||||||
const langBtn = document.getElementById('langBtn');
|
|
||||||
const langDropdown = document.getElementById('langDropdown');
|
|
||||||
|
|
||||||
if (langBtn) {
|
|
||||||
langBtn.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
langDropdown.classList.toggle('show');
|
|
||||||
// Schließe andere Dropdowns
|
|
||||||
if (themeDropdown) themeDropdown.classList.remove('show');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sprachwechsel Logik (Repariert für alle Sprachen)
|
|
||||||
if (langDropdown) {
|
|
||||||
langDropdown.querySelectorAll('a').forEach(link => {
|
|
||||||
link.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault(); // Verhindert das sofortige Neuladen
|
|
||||||
|
|
||||||
const selectedLang = link.getAttribute('data-lang');
|
|
||||||
const currentPath = window.location.pathname; // z.B. /de/projects/
|
|
||||||
|
|
||||||
// RegEx um den aktuellen Sprachcode (/de/, /en/, /fr/, etc.) am Anfang zu finden
|
|
||||||
// und durch die neue Sprache zu ersetzen.
|
|
||||||
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
|
|
||||||
|
|
||||||
// Falls man auf der Hauptseite ist (/), oder RegEx nicht matcht
|
|
||||||
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
|
|
||||||
newPath = '/' + selectedLang + '/';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sicherstellen, dass keine Doppel-Slashes entstehen
|
|
||||||
newPath = newPath.replace(/\/+/g, '/');
|
|
||||||
|
|
||||||
window.location.href = newPath;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
138
static/style.css
138
static/style.css
@@ -16,6 +16,7 @@
|
|||||||
|
|
||||||
/* Hero & Akzente */
|
/* Hero & Akzente */
|
||||||
--accent: #667eea;
|
--accent: #667eea;
|
||||||
|
--accent-text: #ffffff;
|
||||||
--accent-dark: #764ba2;
|
--accent-dark: #764ba2;
|
||||||
--hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
--hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
--hero-text: #ffffff;
|
--hero-text: #ffffff;
|
||||||
@@ -42,6 +43,7 @@
|
|||||||
|
|
||||||
/* Hero & Akzente (Im Darkmode etwas entspannter) */
|
/* Hero & Akzente (Im Darkmode etwas entspannter) */
|
||||||
--accent: #39348c;
|
--accent: #39348c;
|
||||||
|
--accent-text: #ffffff;
|
||||||
--accent-dark: #3d4593;
|
--accent-dark: #3d4593;
|
||||||
--hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
|
--hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
|
||||||
--hero-text: #e2e8f0;
|
--hero-text: #e2e8f0;
|
||||||
@@ -132,74 +134,43 @@ nav {
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Theme Switcher */
|
|
||||||
.theme-switch { position: relative; }
|
/* Container für die Header-Buttons */
|
||||||
.theme-btn {
|
.theme-header-btn {
|
||||||
background: none;
|
position: relative;
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-dropdown {
|
/* Gemeinsames Styling für die Haupt-Buttons im Header */
|
||||||
position: absolute;
|
.lang-btn, .theme-btn {
|
||||||
top: 120%;
|
|
||||||
right: 0;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 5px 15px var(--card-shadow);
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 130px;
|
|
||||||
z-index: 2000;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-dropdown.show { display: flex; }
|
|
||||||
.theme-dropdown button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 15px;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
.theme-dropdown button:hover {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Language Switcher --- */
|
|
||||||
.lang-switch { position: relative; }
|
|
||||||
.lang-btn {
|
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 20px;
|
border-radius: 20px; /* Einheitliche Rundung */
|
||||||
padding: 8px 15px;
|
padding: 8px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.9rem;
|
font-size: 1.1rem;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
.lang-btn:hover {
|
|
||||||
|
.theme-btn {
|
||||||
|
border-radius: 50%; /* Runde Form für Theme-Btn */
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-btn:hover, .theme-btn:hover {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
background: rgba(102, 126, 234, 0.1);
|
background: rgba(102, 126, 234, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-dropdown {
|
/* Gemeinsames Styling für die Dropdowns */
|
||||||
|
.lang-dropdown, .theme-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 120%;
|
top: calc(100% + 10px); /* Leicht abgesetzt */
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: var(--card-bg);
|
background-color: var(--card-bg);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
@@ -207,27 +178,37 @@ nav {
|
|||||||
box-shadow: 0 5px 15px var(--card-shadow);
|
box-shadow: 0 5px 15px var(--card-shadow);
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 150px;
|
min-width: 140px;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.lang-dropdown.show { display: flex; }
|
|
||||||
.lang-dropdown a {
|
.lang-dropdown.show, .theme-dropdown.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Einheitliche Optionen im Dropdown */
|
||||||
|
.lang-dropdown a.theme-option,
|
||||||
|
.theme-dropdown .theme-option {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
text-decoration: none;
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
text-decoration: none;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
/* ANPASSUNG 2: Flexbox für Links, damit Flagge/Text nebeneinander bleiben */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px; /* Abstand zwischen Flagge und Text */
|
gap: 10px;
|
||||||
|
|
||||||
/* ANPASSUNG 3: Verhindern, dass der Text umbricht */
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
.lang-dropdown a:hover {
|
|
||||||
|
.lang-dropdown a.theme-option:hover,
|
||||||
|
.theme-dropdown .theme-option:hover {
|
||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
color: white;
|
color: var(--accent-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -282,7 +263,7 @@ nav {
|
|||||||
.cta-button {
|
.cta-button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
color: white;
|
color: var(--accent-text);
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
@@ -307,7 +288,7 @@ nav {
|
|||||||
|
|
||||||
.demo-button {
|
.demo-button {
|
||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
color: white;
|
color: var(--accent-text);
|
||||||
padding: 0.6rem 1.4rem;
|
padding: 0.6rem 1.4rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
@@ -411,6 +392,8 @@ footer {
|
|||||||
color: var(--footer-link-hover);
|
color: var(--footer-link-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ==========================================
|
/* ==========================================
|
||||||
7. RESPONSIVENESS
|
7. RESPONSIVENESS
|
||||||
========================================== */
|
========================================== */
|
||||||
@@ -425,24 +408,11 @@ footer {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.4s ease;
|
transition: max-height 0.4s ease;
|
||||||
}
|
}
|
||||||
.nav-links.mobile-open { max-height: 500px; }
|
.nav-links.mobile-open { max-height: 300px; }
|
||||||
.nav-links li { border-bottom: 1px solid var(--border-color); }
|
.nav-links li { border-bottom: 1px solid var(--border-color); }
|
||||||
.nav-links a { padding: 1.2rem; display: block; }
|
/*.nav-links a { padding: 0.1rem; display: block; }*/
|
||||||
.hero h1 { font-size: 2.2rem; }
|
.hero h1 { font-size: 2.2rem; }
|
||||||
.nav-links {
|
|
||||||
position: absolute;
|
}
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--header-bg);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.4s ease-in-out;
|
|
||||||
box-shadow: 0 10px 15px var(--card-shadow);
|
|
||||||
|
|
||||||
/* Nav-Links müssen über dem Content, aber unter dem Dropdown sein */
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user