1
1
Fork 0

mobile update

main
Midnight 2 years ago
parent e9511cc473
commit 16cb73526c

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body class="bg-zinc-900">
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>
</html> </html>

@ -1,4 +1,4 @@
<main class="py-10"> <main class="px-3 lg:px-0 py-10">
<div class="container mx-auto"> <div class="container mx-auto">
Made by <a class="hover:underline" href="https://bartindustries.com/" target="_blank">Midblep</a>. Made by <a class="hover:underline" href="https://bartindustries.com/" target="_blank">Midblep</a>.
</div> </div>

@ -3,17 +3,18 @@ import MenuItem from "./MenuItem.svelte";
import MenuTitle from "./MenuTitle.svelte"; import MenuTitle from "./MenuTitle.svelte";
</script> </script>
<main class="flex gap-5 justify-between"> <main class="flex flex-col lg:flex-row gap-3 lg:gap-5 justify-between w-full appear">
<section class="flex gap-3 items-end justify-start appear"> <MenuTitle text="AlexArcher" classes="w-full lg:w-fit" />
<MenuTitle text="AlexArcher" />
<section class="flex px-2 gap-3 items-end justify-start">
<MenuItem link="#about" text="About"/> <MenuItem link="#about" text="About"/>
<MenuItem link="#socials" text="Socials"/> <MenuItem link="#socials" text="Socials"/>
<MenuItem link="#fursona" text="Fursona"/> <MenuItem link="#fursona" text="Fursona"/>
</section> </section>
<section class="flex gap-3 items-end justify-end"> <!-- <section class="flex gap-3 items-end justify-end">
</section> </section> -->
</main> </main>
<style> <style>

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
export let text: string|null = null; export let text: string|null = null;
export let classes: string = "";
</script> </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} {text}
</div> </div>

@ -9,19 +9,26 @@
<main> <main>
<section class="relative h-screen"> <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="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">
<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>
<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! 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> </p>
<br/> <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://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
<Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></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://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
@ -29,17 +36,29 @@
</div> </div>
</div> </div>
<div class="w-1/3 fade"> <div class="hidden lg:flex flex-col gap-10 lg:w-2/3 z-10 fade">
<img src="/images/frontpage.png" alt="Alex Fursona" class="-mt-20 float scale-150" /> <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 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> </div>
</section>
<!-- <section class="grid grid-cols-2 gap-5 w-2/3 mx-auto h-screen"> <div class="hidden lg:block lg:w-1/3 fade">
<h1 class="font-bold text-right text-red-500 text-6xl">AlexArcher</h1> <img src="/images/frontpage.png" alt="Alex Fursona" class="lg:-mt-20 lg:float lg:scale-150" />
</div>
<img src="/images/frontpage.png" alt="Alex Fursona" class="h-4/5 pushup" /> </div>
</section> --> </section>
</main> </main>

Loading…
Cancel
Save