From 877378833541759c961b518044e349ed13c7ed56 Mon Sep 17 00:00:00 2001 From: Richard Bergsma Date: Sun, 19 Oct 2025 23:38:01 +0200 Subject: [PATCH] Enhance layout and styling for Anti-Fingerprinting Shield Plus page - Updated the layout structure to utilize a new PageLayout component for better organization. - Introduced new Hero, Content, and CallToAction components to improve the visual presentation and user engagement. - Added glassmorphism styles for enhanced aesthetics and readability. - Implemented accessibility features, including a "Skip to main content" link for improved navigation. - Refactored the RocketChat livechat initialization to remove unnecessary console logs, enhancing performance and user experience. --- src/assets/styles/tailwind.css | 13 ++++++ src/layouts/Layout.astro | 44 +++++------------- src/pages/[lang]/aboutme.astro | 10 +++++ src/pages/[lang]/index.astro | 15 ++++++- src/pages/[lang]/topdesk.astro | 10 +++++ src/pages/antifp.astro | 81 ++++++++++++++++++++++++++-------- 6 files changed, 118 insertions(+), 55 deletions(-) diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index 0097448..f50c1b1 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -65,6 +65,19 @@ p, li { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.7; } } @layer components { + /* Shared glass and card utilities */ + .glass { + @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg border border-white/20 dark:border-white/10 shadow-lg; + } + + .glass-strong { + @apply bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-white/30 dark:border-white/10 shadow-xl; + } + + .card-panel { + @apply rounded-2xl glass p-6 transition-shadow duration-200 hover:shadow-xl; + } + .btn { @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer; /* Enhanced visibility for light mode */ diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index aeb0c65..d6bf49e 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -66,6 +66,9 @@ const { language, textDirection } = I18N; + + Skip to main content +
@@ -73,7 +76,7 @@ const { language, textDirection } = I18N; -
+
@@ -87,62 +90,35 @@ const { language, textDirection } = I18N;