Website design

Author: one-kash

index.html

@@ -156,18 +156,23 @@
 
         /* --- Hero --- */
         .hero {
-            display: flex;
-            flex-direction: column;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
             align-items: center;
-            text-align: center;
-            padding: 10rem 2rem 4rem;
+            gap: 4rem;
+            max-width: 1100px;
+            margin: 0 auto;
+            padding: 10rem 2rem 5rem;
         }
 
-        .hero-icon {
-            width: 260px;
+        .hero-text {}
+
+        .hero-phone {
+            width: 100%;
+            max-width: 300px;
             height: auto;
             border-radius: 28px;
-            margin-bottom: 2rem;
+            margin: 0 auto;
             border: 1px solid var(--border);
             box-shadow: 0 20px 60px rgba(26, 26, 46, 0.12);
         }
@@ -453,8 +458,13 @@
             .nav-link { display: none; }
             .menu-btn { display: block; }
 
-            .hero { padding: 7rem 1.5rem 3rem; }
-            .hero-icon { width: 220px; }
+            .hero {
+                grid-template-columns: 1fr;
+                text-align: center;
+                padding: 7rem 1.5rem 3rem;
+            }
+            .hero-text { align-items: center; display: flex; flex-direction: column; }
+            .hero-phone { order: -1; max-width: 240px; }
 
             .questions { padding: 3.5rem 1.5rem; }
             .questions-grid {
@@ -479,7 +489,7 @@
         }
 
         @media (max-width: 480px) {
-            .hero-icon { width: 180px; }
+            .hero-phone { max-width: 200px; }
             .screenshots-row figure { flex: 0 0 65%; }
         }
 
@@ -508,22 +518,24 @@
     </div>
 
     <section class="hero">
-        <img src="https://raw.githubusercontent.com/KashCal/KashCal/main/fastlane/metadata/android/en-US/images/phoneScreenshots/HomePage-with-AboutMe.png"
-             alt="KashCal calendar home screen" class="hero-icon">
-        <h1>KashCal</h1>
-        <p class="hero-tagline">All your calendars on Android.</p>
-        <p class="hero-sources">iCloud · Nextcloud · Holidays · Birthdays</p>
-        <div class="hero-badges">
-            <a href="https://f-droid.org/en/packages/org.onekash.kashcal/">
-                <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
-                     alt="Get it on F-Droid" height="60">
-            </a>
-            <a href="https://apt.izzysoft.de/fdroid/index/apk/org.onekash.kashcal">
-                <img src="https://gitlab.com/IzzyOnDroid/repo/-/raw/master/assets/IzzyOnDroid.png"
-                     alt="Get it on IzzyOnDroid" height="60">
-            </a>
+        <div class="hero-text">
+            <h1>KashCal</h1>
+            <p class="hero-tagline">All your calendars on Android.</p>
+            <p class="hero-sources">iCloud · Nextcloud · Holidays · Birthdays</p>
+            <div class="hero-badges">
+                <a href="https://f-droid.org/en/packages/org.onekash.kashcal/">
+                    <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
+                         alt="Get it on F-Droid" height="60">
+                </a>
+                <a href="https://apt.izzysoft.de/fdroid/index/apk/org.onekash.kashcal">
+                    <img src="https://gitlab.com/IzzyOnDroid/repo/-/raw/master/assets/IzzyOnDroid.png"
+                         alt="Get it on IzzyOnDroid" height="60">
+                </a>
+            </div>
+            <p class="hero-apk">or <a href="https://github.com/KashCal/KashCal/releases/latest">download the APK</a></p>
         </div>
-        <p class="hero-apk">or <a href="https://github.com/KashCal/KashCal/releases/latest">download the APK</a></p>
+        <img src="https://raw.githubusercontent.com/KashCal/KashCal/main/fastlane/metadata/android/en-US/images/phoneScreenshots/HomePage-with-AboutMe.png"
+             alt="KashCal calendar home screen" class="hero-phone">
     </section>
 
     <section class="questions fade-in">