chore: staged changes

Author: rayriffy

src/packlets/new-front/logo.astro

@@ -0,0 +1,15 @@
+---
+import Kanok from '$sprites/kanok.svelte'
+---
+
+<div class="absolute top-8 left-8 z-50 hidden md:block">
+    <Kanok size="xl" color="orange" />
+    <h1 class="text-brand-orange text-right text-[2.2rem] font-extrabold">JavaScript</h1>
+    <h1 class="text-brand-orange text-right text-[2.2rem] font-extrabold">Bangkok 2.0.0</h1>
+</div>
+
+<div class="absolute top-8 left-8 z-50 md:hidden">
+    <Kanok size="l" color="orange" />
+    <h1 class="text-brand-orange text-right text-xl font-extrabold">JavaScript</h1>
+    <h1 class="text-brand-orange text-right text-xl font-extrabold">Bangkok 2.0.0</h1>
+</div>

src/packlets/playground/kanokLines.svelte

@@ -4,15 +4,18 @@
   import { fly } from 'svelte/transition'
   import { flip } from 'svelte/animate'
 
+  export let size: 's' | 'm' | 'l' = 'l'
   export let padding: number = 0
   export let length: number
+
+  const basePadding = size === 'l' ? 8 : size === 'm' ? 4 : 2
 </script>
 
 <div class="flex">
-  <div style={`padding-left: ${8 * padding}rem`}></div>
+  <div style={`padding-left: ${basePadding * padding}rem`}></div>
   {#each Array.from({ length }) as _}
     <Kanok
-      size="l"
+      size={size}
       color={pickRandom(['yellow', 'orange', 'blue', 'green'])}
       variant={pickRandom(['invert-x', 'invert-xy', 'normal'])}
       animate

src/packlets/playground/mobileStrip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import KanokLines from "$playground/kanokLines.svelte";
+</script>
+
+<KanokLines size="m" padding={0} length={12} />
+<KanokLines size="m" padding={0} length={12} />
+<KanokLines size="m" padding={0} length={12} />
+<KanokLines size="m" padding={0} length={12} />

src/pages/index.astro

@@ -1,27 +1,24 @@
 ---
 import Base from '$layouts/base.astro'
 
-import Kanok from '$sprites/kanok.svelte'
+import Logo from '$new-front/logo.astro'
 import Patterns from '$playground/patterns.svelte'
 import Schedule from '$new-front/schedule.astro'
 import Map from '$new-front/map.astro'
 import Speakers from '$new-front/speakers.astro'
 import Sponsors from '$new-front/sponsors.astro'
-
+import MobileStrip from '$playground/mobileStrip.svelte'
 ---
 
 <Base title="JavaScript Bangkok 2.0.0">
-  <div class="h-[64rem] bg-white overflow-hidden">
-    <div class="max-w-[88rem] mx-auto relative">
-      <div class="absolute top-8 left-8">
-        <Kanok size="xl" color="orange" />
-        <h1 class="text-brand-orange text-right text-[2.2rem] font-extrabold">JavaScript</h1>
-        <h1 class="text-brand-orange text-right text-[2.2rem] font-extrabold">Bangkok 2.0.0</h1>
-      </div>
-    </div>
-    <div class="max-w-[128rem] mx-auto">
+  <div class="max-w-[88rem] mx-auto h-screen md:h-[64rem] bg-white overflow-hidden relative">
+    <Logo />
+    <div class="max-w-[128rem] mx-auto hidden md:block">
       <Patterns client:idle />
     </div>
+    <div class="max-w-[128rem] mx-auto md:hidden absolute bottom-0 -left-8">
+      <MobileStrip client:idle />
+    </div>
   </div>
   <Schedule />
   <Map />