Update mobile style

src/components/Check.svelte

@@ -1,6 +1,7 @@
 <script>
   export let checked = false;
   export let disabled = false;
+  export let className = '';
 </script>
 
 <style>
@@ -27,7 +28,7 @@
   }
 </style>
 
-<label class="checkbox-wrapper flex flex-1 pl-4 items-center bg-background rounded-2xl h-14 cursor-pointer">
+<label class={`checkbox-wrapper flex flex-1 pl-4 items-center bg-background rounded-2xl h-14 cursor-pointer ${className}`}>
   <span class="flex-1 text-white"><slot /></span>
   <input {disabled} class="w-0 h-0 opacity-0" on:change bind:checked type="checkbox" />
   <svg class="checkbox border-4 border-item w-10 h-10 rounded-xl mr-2" viewBox="0 0 100 100">

src/components/Header.svelte

@@ -13,7 +13,7 @@
   .header::after {
     content: '';
     top: -40px;
-    left: 120px;
+    left: 100px;
     height: 198px;
     width: 168px;
     position: absolute;
@@ -24,7 +24,7 @@
 </style>
 
 <div class="flex items-center lg:hidden fixed w-full h-16 header bg-background z-30 shadow-md overflow-hidden">
-  <h1 class="flex-1 pl-8 font-display text-3xl font-black text-white relative z-10 pt-2">
+  <h1 class="flex-1 pl-4 md:pl-8 font-display text-3xl font-black text-white relative z-10 pt-2">
     Paimon<span class="text-xl text-primary">.moe</span>
   </h1>
   <div class="p-8 cursor-pointer" on:click={showMenu}>

src/components/Input.svelte

@@ -1,6 +1,7 @@
 <script>
   import Icon from './Icon.svelte';
 
+  export let className = '';
   export let icon = null;
   export let placeholder = '';
   export let type = 'text';
@@ -19,7 +20,7 @@
 </script>
 
 <div
-  class="flex flex-1 relative items-center bg-background rounded-2xl h-14 focus-within:border-primary border-2 border-transparent ease-in duration-100">
+  class={`flex flex-1 relative items-center bg-background rounded-2xl h-14 focus-within:border-primary border-2 border-transparent ease-in duration-100 ${className}`}>
   {#if icon}
     <Icon path={icon} color="white" className="absolute ml-4 w-6 h-6" />
   {/if}

src/routes/_layout.svelte

@@ -40,7 +40,7 @@
     </main>
   </DataSync>
 </Modal>
-<p class="lg:ml-64 px-8 py-4 text-gray-600">
+<p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
   Paimon.moe is not affiliated with miHoYo.<br />
   Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.
 </p>

src/routes/calculator/_character.svelte

@@ -397,15 +397,16 @@
 <div class="bg-item rounded-xl p-4">
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
     <div>
-      <div class="grid gap-2">
+      <div>
-        <Check on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
+        <Check className="mb-2" on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
         {#if withAscension}
           <CharacterSelect on:change={onChange} bind:selected={selectedCharacter} placeholder="Select character" />
         {/if}
 
-        <div class="grid gap-2">
+        <div>
-          <p class="text-white text-center mt-3">Current Character Level, Exp, & Ascension</p>
+          <p class="text-white text-center mt-3 mb-2">Current Character Level, Exp, & Ascension</p>
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={1}
@@ -413,6 +414,7 @@
             bind:value={currentLevel}
             placeholder="Input current character level..." />
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={0}
@@ -422,9 +424,10 @@
             <AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
           {/if}
         </div>
-        <div class="grid gap-2">
+        <div>
-          <p class="text-white text-center mt-3">Intended Character Level & Ascension</p>
+          <p class="text-white text-center mt-3 mb-2">Intended Character Level & Ascension</p>
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={currentLevel}

src/routes/calculator/_weapon.svelte

@@ -326,8 +326,8 @@
 <div class="bg-item rounded-xl p-4">
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
     <div>
-      <div class="grid gap-2">
+      <div>
-        <Check on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
+        <Check className="mb-2" on:change={onChange} bind:checked={withAscension}>Calculate Ascension Material?</Check>
         {#if !withAscension}
           <Select
             on:change={onChange}
@@ -339,9 +339,10 @@
           <WeaponSelect on:change={onChange} bind:selected={selectedWeapon} placeholder="Select weapon" />
         {/if}
 
-        <div class="grid gap-2">
+        <div>
-          <p class="text-white text-center mt-3">Current Weapon Level, Exp, & Ascension</p>
+          <p class="text-white text-center mt-3 mb-2">Current Weapon Level, Exp, & Ascension</p>
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={1}
@@ -349,6 +350,7 @@
             bind:value={currentLevel}
             placeholder="Input current weapon level..." />
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={0}
@@ -358,9 +360,10 @@
             <AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
           {/if}
         </div>
-        <div class="grid gap-2">
+        <div>
-          <p class="text-white text-center mt-3">Intended Weapon Level & Ascension</p>
+          <p class="text-white text-center mt-3 mb-2">Intended Weapon Level & Ascension</p>
           <Input
+            className="mb-2"
             on:change={onChange}
             type="number"
             min={currentLevel}

src/routes/calculator/index.svelte

@@ -25,7 +25,7 @@
 <svelte:head>
   <title>Calculator - Paimon.moe</title>
 </svelte:head>
-<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
+<div class="pt-20 lg:ml-64 lg:pt-8 p-4 md:p-8">
   <div
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
     bind:this={weaponCalc}>

src/routes/characters.svelte

@@ -98,13 +98,13 @@
   <title>Characters - Paimon.moe</title>
 </svelte:head>
 <div class="lg:ml-64 pt-20 lg:pt-8">
-  <h1 class="font-display px-8 font-black text-5xl text-white">Characters</h1>
+  <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Characters</h1>
-  <p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
+  <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
     ※ Stat numbers are at level 80 Ascension 6. You can also click the header to sort!
   </p>
 
   <div class="block overflow-x-auto whitespace-no-wrap pb-8">
-    <div class="px-8 table">
+    <div class="px-4 md:px-8 table">
       <table class="w-full block p-4 bg-item rounded-xl">
         <thead>
           <th style="min-width: 4rem;" />

src/routes/items.svelte

@@ -94,12 +94,12 @@
   <title>Item List - Paimon.moe</title>
 </svelte:head>
 <div class="lg:ml-64 pt-20 lg:pt-8">
-  <h1 class="font-display px-8 font-black text-5xl text-white">Item List</h1>
+  <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Item List</h1>
-  <p class="text-gray-400 px-8 font-medium pb-4" style="margin-top: -1rem;">
+  <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
     ※ Click the item image to add it to the todo list
   </p>
   <div class="block overflow-x-auto whitespace-no-wrap pb-8">
-    <div class="px-8 table max-w-full">
+    <div class="px-4 md:px-8 table max-w-full">
       <table class="w-full block p-4 bg-item rounded-xl">
         <thead>
           <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">
@@ -180,7 +180,7 @@
     </div>
   </div>
   <div class="block overflow-x-auto whitespace-no-wrap pb-8">
-    <div class="px-8 table max-w-full">
+    <div class="px-4 md:px-8 table max-w-full">
       <table class="w-full block p-4 bg-item rounded-xl">
         <thead>
           <th class="text-gray-400 select-none font-display text-lg text-left px-4 pb-2 border-gray-700 border-b">

src/routes/settings.svelte

@@ -46,7 +46,7 @@
   <title>Settings - Paimon.moe</title>
 </svelte:head>
 
-<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
+<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
   <div class="bg-item rounded-xl mb-4 p-4">
     <p class="text-white">Data Version: <b>1.2</b></p>
   </div>

src/routes/todo.svelte

@@ -101,7 +101,7 @@
 <svelte:head>
   <title>Todo List - Paimon.moe</title>
 </svelte:head>
-<div class="lg:ml-64 pt-20 px-8 lg:pt-8">
+<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
   <Masonry stretchFirst={true} bind:refreshLayout>
     <h1 class="font-display font-black text-3xl lg:text-left lg:text-5xl text-white">Todo List</h1>
     <div class="bg-item rounded-xl p-4 text-white">

src/routes/wish/index.svelte

@@ -5,7 +5,7 @@
 <svelte:head>
   <title>Wish Counter - Paimon.moe</title>
 </svelte:head>
-<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
+<div class="pt-20 lg:ml-64 lg:pt-8 p-4 md:p-8">
   <h1 class="font-display font-black text-5xl text-white mb-2">Wish Counter</h1>
   <div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 max-w-screen-xl">
     <Counter id="character-event" name="Character Event" />