clemo/valtrix-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimisation for cell phones
Some checks failed
Build and Deploy Container / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Clemens Hering
2025-11-08 12:32:59 +01:00
parent 159efd2c9a
commit 56cb4555f8
1 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/layouts/Base.astro
View File

@@ -50,22 +50,39 @@ const labels = isEn ? {
<link rel="alternate" hreflang="en" href={`https://valtrix.systems${enHref}`} /> <link rel="alternate" hreflang="en" href={`https://valtrix.systems${enHref}`} />
</head> </head>
<body class="bg-white transition-colors duration-300"> <body class="bg-white transition-colors duration-300">
<header class="max-w-7xl mx-auto px-6 py-6"> <header class="max-w-7xl mx-auto px-6 py-4">
<nav class="flex items-center justify-between"> <nav class="flex items-center justify-between">
<a href={`${prefix || '/'}`} class="flex items-center gap-3 font-semibold"> <a href={`${prefix || '/'}`} class="flex items-center gap-3 font-semibold min-w-0">
<img src="/logo-valtrix.png" alt="Valtrix" class="h-9 w-9 rounded-md shadow-sm"/> <img src="/logo-valtrix.png" alt="Valtrix" class="h-9 w-9 rounded-md shadow-sm"/>
<span class="tracking-wide text-lg">VALTRIX</span> <span class="tracking-wide text-lg">VALTRIX</span>
</a> </a>
<div class="flex items-center gap-6"> <div class="hidden md:flex items-center gap-6">
<a href={`${prefix}/leistungen`} class="text-textMuted hover:text-white">{labels.services}</a> <a href={`${prefix}/leistungen`} class="text-textMuted hover:text-white">{labels.services}</a>
<a href={`${prefix}/sicherheit`} class="text-textMuted hover:text-white">{labels.security}</a> <a href={`${prefix}/sicherheit`} class="text-textMuted hover:text-white">{labels.security}</a>
<a href={`${prefix}/cases`} class="text-textMuted hover:text-white">{labels.cases}</a> <a href={`${prefix}/cases`} class="text-textMuted hover:text-white">{labels.cases}</a>
<a href={`${prefix}/ueber-uns`} class="text-textMuted hover:text-white">{labels.about}</a> <a href={`${prefix}/ueber-uns`} class="text-textMuted hover:text-white">{labels.about}</a>
<a href={`${prefix}/kontakt`} class="px-4 py-2 rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a> <a href={`${prefix}/kontakt`} class="px-4 py-2 rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a>
<a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a> <a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a>
<button id="themeToggle" aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button> <button data-theme-toggle aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
</div> </div>
<button id="navToggle" class="md:hidden px-3 py-2 border rounded-brand hover:bg-graybg" aria-controls="mobileMenu" aria-expanded="false" aria-label="Navigation">
Menu
</button>
</nav> </nav>
<!-- Mobile menu -->
<div id="mobileMenu" class="md:hidden hidden mt-3 border rounded-brand p-4 bg-[color:var(--color-bg,#0b0e14)]">
<div class="grid gap-3">
<a href={`${prefix}/leistungen`} class="block text-white">{labels.services}</a>
<a href={`${prefix}/sicherheit`} class="block text-white">{labels.security}</a>
<a href={`${prefix}/cases`} class="block text-white">{labels.cases}</a>
<a href={`${prefix}/ueber-uns`} class="block text-white">{labels.about}</a>
<a href={`${prefix}/kontakt`} class="block px-4 py-2 text-center rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a>
<div class="flex items-center gap-3 pt-2 border-t mt-2">
<a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a>
<button data-theme-toggle aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
</div>
</div>
</div>
</header> </header>
<main class="max-w-7xl mx-auto px-6"> <main class="max-w-7xl mx-auto px-6">
<slot /> <slot />
@@ -77,14 +94,36 @@ const labels = isEn ? {
© {new Date().getFullYear()} Valtrix · <a href={`${prefix}/impressum`} class="underline">{labels.imprint}</a> · <a href={`${prefix}/datenschutz`} class="underline">{labels.privacy}</a> © {new Date().getFullYear()} Valtrix · <a href={`${prefix}/impressum`} class="underline">{labels.imprint}</a> · <a href={`${prefix}/datenschutz`} class="underline">{labels.privacy}</a>
</footer> </footer>
<script> <script>
const btn = document.getElementById('themeToggle'); // Theme toggle for all buttons
const html = document.documentElement; const html = document.documentElement;
const set = (m)=>{ html.setAttribute('data-theme', m); btn.textContent = m==='dark' ? 'Light' : 'Dark'; }; const themeBtns = Array.from(document.querySelectorAll('[data-theme-toggle]'));
set(localStorage.getItem('theme')||'dark'); const setTheme = (m)=>{
btn?.addEventListener('click', ()=>{ html.setAttribute('data-theme', m);
themeBtns.forEach(b=> b.textContent = m==='dark' ? 'Light' : 'Dark');
};
setTheme(localStorage.getItem('theme')||'dark');
themeBtns.forEach(btn=> btn.addEventListener('click', ()=>{
const next = html.getAttribute('data-theme')==='dark' ? 'light' : 'dark'; const next = html.getAttribute('data-theme')==='dark' ? 'light' : 'dark';
set(next); localStorage.setItem('theme', next); setTheme(next); localStorage.setItem('theme', next);
}));
// Mobile nav toggle
const navToggle = document.getElementById('navToggle');
const mobileMenu = document.getElementById('mobileMenu');
const closeMenu = () => {
mobileMenu?.classList.add('hidden');
navToggle?.setAttribute('aria-expanded','false');
};
navToggle?.addEventListener('click', ()=>{
const isOpen = !mobileMenu.classList.contains('hidden');
if (isOpen) { closeMenu(); }
else {
mobileMenu.classList.remove('hidden');
navToggle.setAttribute('aria-expanded','true');
}
}); });
// Close menu on link click
mobileMenu?.querySelectorAll('a').forEach(a=> a.addEventListener('click', closeMenu));
</script> </script>
</body> </body>
</html> </html>