Fix UI on mobile platforms

seiKiMo-Inc · Aug 12, 2023 · 3755beb · 3755beb
1 parent 1afe1ec
commit 3755beb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/public/images/laudiolin-mobile.png b/public/images/laudiolin-mobile.png
diff --git a/src/css/pages/LandingPage.scss b/src/css/pages/LandingPage.scss
@@ -54,6 +54,35 @@
     }
 }
 
+@media screen and (max-width: 1200px) {
+    .LandingPage_Segment {
+        background-size: cover !important;
+        background-repeat: no-repeat !important;
+    }
+
+    .LandingPage_TextContainer {
+        align-items: center !important;
+        text-align: center !important;
+        justify-content: center;
+
+        width: 80%;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+
+    .LandingPage_Laudiolin {
+        background-image:
+                linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+                url("/images/laudiolin-mobile.png") !important;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .LandingPage_Buttons {
+        @apply flex-col;
+    }
+}
+
 .LandingPage_Laudiolin {
     background-image: url("/images/laudiolin.png");
 }
diff --git a/src/ui/pages/LandingPage.tsx b/src/ui/pages/LandingPage.tsx
@@ -34,12 +34,14 @@ function Laudiolin() {
                         </p>
                     </div>
 
-                    <div className={"LandingPage_Open"}
-                         onClick={() => window.open("https://laudiolin.seikimo.moe")}
-                    >
-                        <MdLaunch />
+                    <div className={"LandingPage_Buttons"}>
+                        <div className={"LandingPage_Open"}
+                             onClick={() => window.open("https://laudiolin.seikimo.moe")}
+                        >
+                            <MdLaunch />
 
-                        <p>Open</p>
+                            <p>Open</p>
+                        </div>
                     </div>
                 </div>
             </div>