refactor(other): adapt to mobile devices requirements to properly dislplay hero image (#380)

* update used nodejsversion to current lts version

* refactor: adapt to mobile requirements

* linting

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>

.nvmrc

@@ -1 +1 @@
-v22.13.1
+v22.16.0

docs/.vuepress/config/meta.ts

@@ -5,6 +5,16 @@ export default {
   description:
     'IT4C.dev stellt das IT Team for Change, seine angewandte Philosophie und Projekte vor.',
   head: [
-    ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1' }],
+    [
+      'meta',
+      {
+        name: 'viewport',
+        content:
+          'width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no,shrink-to-fit=no',
+      },
+    ],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }],
+    ['meta', { name: 'format-detection', content: 'telephone=no' }],
   ] as HeadConfig[],
 }

docs/.vuepress/layouts/BlankLayout.vue

@@ -79,4 +79,54 @@ export default {
     padding: 0 1rem;
   }
 }
+
+/* iOS Safari specific global fixes */
+@supports (-webkit-touch-callout: none) {
+  html {
+    /* Fix for iOS Safari viewport height issues */
+    height: -webkit-fill-available;
+  }
+
+  body {
+    /* Fix for iOS Safari bounce scrolling */
+    -webkit-overflow-scrolling: touch;
+    /* Prevent zoom on input focus */
+    -webkit-text-size-adjust: 100%;
+    /* Fix for iOS Safari height issues */
+    min-height: -webkit-fill-available;
+  }
+
+  /* Fix for iOS Safari input zoom */
+  input,
+  textarea,
+  select {
+    font-size: 16px !important;
+    -webkit-appearance: none;
+    border-radius: 0;
+  }
+
+  /* Fix for iOS Safari button styling */
+  button,
+  .hero-button {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    border-radius: 0;
+  }
+}
+
+/* Additional responsive fixes for older iOS versions */
+@media screen and (max-width: 768px) {
+  /* Fix for older iOS Safari transform issues */
+  .hero-section img {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+
+  /* Prevent horizontal scrolling on older iOS */
+  body {
+    overflow-x: hidden;
+  }
+}
 </style>

docs/index.md

@@ -2,44 +2,47 @@
 layout: BlankLayout
 ---
 
-<section class="full-width-section h-screen relative">
+<section class="full-width-section hero-section relative">
   <!-- Desktop background image -->
-  <img
+  <picture class="hidden md:block">
-    src="/images/hero-bg-desktop.jpg"
+    <source srcset="/images/hero-bg-desktop.webp" type="image/webp">
-    alt="Technologie für den gesellschaftlichen Wandel"
+    <img
-    class="w-full h-screen object-cover hidden md:block"
+      src="/images/hero-bg-desktop.jpg"
-  />
+      alt="Technologie für den gesellschaftlichen Wandel"
+      class="w-full hero-height object-cover"
+    />
+  </picture>
 
   <!-- Desktop gradient -->
   <div class="absolute inset-0 bg-gradient-to-r from-[#22596c]/100 via-[#22596c]/80 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/80 dark:to-transparent hidden md:block" style="width: 65%;"></div>
 
-  <div class="w-full h-screen md:hidden relative overflow-hidden">
+  <!-- Mobile background container -->
+  <div class="w-full hero-height md:hidden relative overflow-hidden">
     <!-- Mobile background image -->
-    <img
+    <picture class="absolute top-0 left-0 w-full h-full">
-      src="/images/hero-bg-mobile.jpg"
+      <source srcset="/images/hero-bg-mobile.webp" type="image/webp">
-      alt="Technologie für den gesellschaftlichen Wandel"
+      <img
-      class="absolute top-0 left-0 w-full h-auto object-cover max-h-none"
+        src="/images/hero-bg-mobile.jpg"
-      style="min-width: 100%;"
+        alt="Technologie für den gesellschaftlichen Wandel"
-    />
+        class="absolute top-0 left-0 w-full h-full object-cover"
+      />
+    </picture>
   </div>
 
   <!-- Mobile gradient -->
-  <div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent"
+  <div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent mobile-gradient">
-       style="height: 70vh;">
   </div>
 
   <!-- XS Mobile gradient -->
-  <div class="absolute left-0 right-0 bottom-0 sm:hidden"
+  <div class="absolute left-0 right-0 bottom-0 sm:hidden xs-mobile-gradient">
-       style="height: 80vh; background-image: linear-gradient(to top, #22596c 70%, transparent 100%);">
   </div>
 
-
   <!-- Content area -->
   <div class="absolute inset-0 flex flex-col md:justify-start md:pt-45 justify-end pb-8 md:pb-16">
     <div class="content-width mx-auto px-4 md:px-6">
       <!-- Für Desktop: Normal positioniert mit margin-top -->
       <!-- Für Mobile: Am unteren Rand fixiert ohne margin -->
-      <div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative">
+      <div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative hero-content">
         <div
           role="heading"
           aria-level="1"
@@ -194,6 +197,56 @@ layout: BlankLayout
 </ContentSection>
 
 <style lang="scss">
+  /* iOS Safari specific fixes */
+  .hero-section {
+    /* Fix for iOS Safari viewport height issues */
+    min-height: 100vh;
+    min-height: 100dvh; /* Dynamic viewport height for modern browsers */
+
+    /* iOS Safari specific height fallback */
+    @supports (-webkit-touch-callout: none) {
+      min-height: -webkit-fill-available;
+    }
+  }
+
+  .hero-height {
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport height for modern browsers */
+
+    /* iOS Safari specific height */
+    @supports (-webkit-touch-callout: none) {
+      height: -webkit-fill-available;
+    }
+  }
+
+  .mobile-gradient {
+    height: 70vh;
+    height: 70dvh;
+
+    @supports (-webkit-touch-callout: none) {
+      height: calc(-webkit-fill-available * 0.7);
+    }
+  }
+
+  .xs-mobile-gradient {
+    height: 80vh;
+    height: 80dvh;
+    background-image: linear-gradient(to top, #22596c 70%, transparent 100%);
+
+    @supports (-webkit-touch-callout: none) {
+      height: calc(-webkit-fill-available * 0.8);
+    }
+  }
+
+  .hero-content {
+    /* Prevent content from being cut off on iOS */
+    padding-bottom: env(safe-area-inset-bottom, 0);
+
+    /* Fix for iOS Safari scrolling issues */
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+
   .text-shadow {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 
@@ -212,6 +265,9 @@ layout: BlankLayout
 
     &-button {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
+      /* iOS Safari button fix */
+      -webkit-appearance: none;
+      -webkit-tap-highlight-color: transparent;
 
       &:hover {
         transform: translateY(-3px);
@@ -247,4 +303,14 @@ layout: BlankLayout
     }
   }
 
+  /* Global iOS Safari fixes */
+  @supports (-webkit-touch-callout: none) {
+    body {
+      /* Fix for iOS Safari bounce scrolling */
+      -webkit-overflow-scrolling: touch;
+      /* Prevent zoom on input focus */
+      -webkit-text-size-adjust: 100%;
+    }
+  }
+
 </style>