mobile update

2 years ago · 16cb73526c
parent e9511cc473
commit 16cb73526c
5 changed files with 43 additions and 22 deletions
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body>
+	<body class="bg-zinc-900">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/lib/footer/Footer.svelte
+++ b/src/lib/footer/Footer.svelte
@ -1,4 +1,4 @@
-<main class="py-10">
+<main class="px-3 lg:px-0 py-10">
    <div class="container mx-auto">
        Made by <a class="hover:underline" href="https://bartindustries.com/" target="_blank">Midblep</a>.
    </div>
--- a/src/lib/menu/Menu.svelte
+++ b/src/lib/menu/Menu.svelte
@ -3,17 +3,18 @@ import MenuItem from "./MenuItem.svelte";
 import MenuTitle from "./MenuTitle.svelte";

 </script>
-<main class="flex gap-5 justify-between">
-    <section class="flex gap-3 items-end justify-start appear">
-        <MenuTitle text="AlexArcher" />
+<main class="flex flex-col lg:flex-row gap-3 lg:gap-5 justify-between w-full appear">
+    <MenuTitle text="AlexArcher" classes="w-full lg:w-fit" />
+
+    <section class="flex px-2 gap-3 items-end justify-start">
        <MenuItem link="#about" text="About"/>
        <MenuItem link="#socials" text="Socials"/>
        <MenuItem link="#fursona" text="Fursona"/>
    </section>

-    <section class="flex gap-3 items-end justify-end">
+    <!-- <section class="flex gap-3 items-end justify-end">

-    </section>
+    </section> -->
 </main>

 <style>
--- a/src/lib/menu/MenuTitle.svelte
+++ b/src/lib/menu/MenuTitle.svelte
@ -1,7 +1,8 @@
 <script lang="ts">
    export let text: string|null = null;
+    export let classes: string = "";
 </script>

-<div class="p-2 pt-10 font-museo bg-red-500 font-bold text-2xl text-white duration-150">
+<div class={"p-2 lg:pt-10 font-museo bg-red-500 font-bold text-4xl lg:text-2xl text-white duration-150 " + classes}>
    {text}
 </div>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -9,19 +9,43 @@
 <main>

    <section class="relative h-screen">
-        <div class="h-3/4 -z-1 absolute bg-zinc-800 shadow-xl w-screen slide"></div>
+        <div class="h-screen lg:h-3/4 -z-1 absolute bg-zinc-800 shadow-xl w-screen slide"></div>

-        <div class="w-2/3 mx-auto py-32 flex gap-10" id="about">
-            <div class="flex flex-col gap-10 w-2/3 z-10 fade">
-                <h1 class="text-red-500 flex gap-5 items-end"><span class="font-bold text-6xl">Nya!</span> <span class="text-3xl">Welcome to the fire cat place!</span></h1>
+        <div class="lg:w-2/3 mx-auto lg:py-32 flex flex-col lg:flex-row gap-5 lg:gap-10 px-3 lg:px-0" id="about">

-                <p class="w-3/4 text-xl text-gray-300">
+            <div class="flex lg:hidden flex-col gap-5 -mt-10 z-10 fade w-full">
+                <div class="flex flex-row gap-0 -mb-3 items-end">
+                    <h1 class="text-red-500 flex flex-col gap-5 w-1/2 font-bold text-6xl">Nya!</h1>
+                    <div class="fade w-1/2">
+                        <img src="/images/sticker1.png" alt="Alex Fursona" />
+                    </div>
+                </div>
+                <h2 class="text-red-500 text-2xl">Welcome to the fire cat place!</h2>
+
+                <p class="lg:w-3/4 text-xl text-gray-300">
+                    It's really warm and cozy in here, wanna stay with me for a moment? I'm going to tell you a story about me... And I have cookies!
+                </p>
+
+                <br/>
+
+                <div class="flex flex-col lg:flex-row gap-5">
+                    <Social link="https://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
+                    <Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></Social>
+                    <Social link="https://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
+                    <Social link="https://discord.gg/YedfABNp7A" icon="💬" text="Discord"></Social>
+                </div>
+            </div>
+
+            <div class="hidden lg:flex flex-col gap-10 lg:w-2/3 z-10 fade">
+                <h1 class="text-red-500 flex flex-col lg:flex-row gap-5 lg:items-end"><span class="font-bold text-6xl">Nya!</span> <span class="text-3xl">Welcome to the fire cat place!</span></h1>
+
+                <p class="lg:w-3/4 text-xl text-gray-300">
                    It's really warm and cozy in here, wanna stay with me for a moment? I'm going to tell you a story about me... And I have cookies!
                </p>

                <br/>

-                <div class="flex gap-5">
+                <div class="flex flex-col lg:flex-row gap-5">
                    <Social link="https://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
                    <Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></Social>
                    <Social link="https://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
@ -29,18 +53,13 @@
                </div>
            </div>

-            <div class="w-1/3 fade">
-                <img src="/images/frontpage.png" alt="Alex Fursona" class="-mt-20 float scale-150" />
+            <div class="hidden lg:block lg:w-1/3 fade">
+                <img src="/images/frontpage.png" alt="Alex Fursona" class="lg:-mt-20 lg:float lg:scale-150" />
            </div>
+
        </div>
    </section>

-    <!-- <section class="grid grid-cols-2 gap-5 w-2/3 mx-auto h-screen">
-        <h1 class="font-bold text-right text-red-500 text-6xl">AlexArcher</h1>
-
-        <img src="/images/frontpage.png" alt="Alex Fursona" class="h-4/5 pushup" />
-    </section> -->
-
 </main>

 <style>