Merge pull request #26 from TeaClientMC/fix-mobile-issues

Fixes Minor Mobile Issues
TeaClientMC · Jun 8, 2024 · 18b3b33 · 18b3b33
2 parents 0ce3d2e + 05c73ad
commit 18b3b33
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 215 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "teaclient-website",
 	"type": "module",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "astro dev",
 		"preview": "astro preview",

diff --git a/src/components/CustomImage.astro b/src/components/CustomImage.astro
@@ -4,33 +4,34 @@ import { twMerge } from "tailwind-merge";
 const { src, className, flexbasis } = Astro.props;
 ---
 
-<div class={twMerge("reveal-image", className)} style=`--image-url: url(${src}); flex-basis:${flexbasis}; `>
+<div
+  class={twMerge("reveal-image", className)}
+  style=`--image-url: url(${src}); flex-basis:${flexbasis}; `
+>
 </div>
 
 <style>
+  .reveal-image {
+    @apply relative rounded-2xl z-10 hidden xl:flex;
+    box-shadow: 0 0 40px var(--nav-color);
+    background: var(--image-url) center center / cover;
+    transition: transform 0.3s ease-in-out;
+    transform: perspective(800px) rotateY(-15deg) translateY(10px)
+      rotateX(10deg) scale(1);
+  }
 
-    .reveal-image {
-        box-shadow:  0  0  40px var(--nav-color);
-        position: relative;
-        background: var(--image-url) center center / cover;
-        border-radius:  1rem;
-        z-index:  9;
-        transition: transform  0.3s ease-in-out; 
-        transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1); 
-    }
+  .reveal-image:hover {
+    transform: none;
+  }
 
-    .reveal-image:hover {
-        transform: none;
-    }
+  .reveal-image::before {
+    content: "";
+    display: block;
+    padding-top: calc(9 / 16 * 100%);
+  }
 
-    .reveal-image::before {
-        content: '';
-        display: block;
-        padding-top: calc(9 /  16 *  100%);
-    }
-
-    .reveal-image>* {
-        top:  0;
-        left:  0;
-    }
-</style>
+  .reveal-image > * {
+    top: 0;
+    left: 0;
+  }
+</style>
diff --git a/src/components/HeroImage.astro b/src/components/HeroImage.astro
@@ -4,44 +4,47 @@ import { twMerge } from "tailwind-merge";
 const { src, className, flexbasis } = Astro.props;
 ---
 
-<div class={twMerge("reveal-image", className)} style=`--image-url: url(${src}); flex-basis:${flexbasis}; `>
+<div
+  class={twMerge("reveal-image", className)}
+  style=`--image-url: url(${src}); flex-basis:${flexbasis}; `
+>
 </div>
 
 <style>
-    @keyframes reveal-hero-image {
-        0% {
-            opacity:   0;
-            transform: scale(1.1,   1.1);
-        }
-        100% {
-            opacity:   1;
-            transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1);
-        }
+  @keyframes reveal-hero-image {
+    0% {
+      opacity: 0;
+      transform: scale(1.1, 1.1);
     }
-
-    .reveal-image {
-        box-shadow:  0  0  40px var(--nav-color);
-        position: relative;
-        background: var(--image-url) center center / cover;
-        border-radius:  1rem;
-        z-index:  9;
-        animation: reveal-hero-image  3s ease-out backwards;
-        transition: transform  0.3s ease-in-out; 
-        transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1); 
+    100% {
+      opacity: 1;
+      transform: perspective(800px) rotateY(-15deg) translateY(10px)
+        rotateX(10deg) scale(1);
     }
+  }
 
-    .reveal-image:hover {
-        transform: none;
-    }
+  .reveal-image {
+    @apply relative rounded-2xl z-10 hidden xl:flex;
+    box-shadow: 0 0 40px var(--nav-color);
+    background: var(--image-url) center center / cover;
+    animation: reveal-hero-image 3s ease-out backwards;
+    transition: transform 0.3s ease-in-out;
+    transform: perspective(800px) rotateY(-15deg) translateY(10px)
+      rotateX(10deg) scale(1);
+  }
 
-    .reveal-image::before {
-        content: '';
-        display: block;
-        padding-top: calc(9 /  16 *  100%);
-    }
+  .reveal-image:hover {
+    transform: none;
+  }
 
-    .reveal-image>* {
-        top:  0;
-        left:  0;
-    }
-</style>
+  .reveal-image::before {
+    content: "";
+    display: block;
+    padding-top: calc(9 / 16 * 100%);
+  }
+
+  .reveal-image > * {
+    top: 0;
+    left: 0;
+  }
+</style>
diff --git a/src/components/head.astro b/src/components/head.astro
@@ -2,9 +2,9 @@
 import { SEO } from "astro-seo";
 const { title, customDescription, bannerPath } = Astro.props;
 export interface Props {
-	title: string;
-	customDescription?: string;
-	bannerPath?: string;
+  title: string;
+  customDescription?: string;
+  bannerPath?: string;
 }
 
 // SEO SETTINGS
@@ -54,7 +54,7 @@ const language = "en-us";
         link: [
           { rel: "icon", href: favicon },
           { rel: "apple-touch-icon", type: "image/x-icon", href: favicon },
-          { rel: "sitemap", href: "/sitemap-index.xml" }
+          { rel: "sitemap", href: "/sitemap-index.xml" },
         ],
         meta: [
           { name: "theme-color", content: theme_color },
@@ -67,7 +67,7 @@ const language = "en-us";
           {
             name: "viewport",
             content:
-              "width=device-1200px, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover",
+              "width=device-width, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover",
           },
         ],
       }}