mobile

src/lib/calculator/Calculator.svelte

@@ -201,7 +201,7 @@
     </section>
 
     <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col w-full gap-10">
-        <div class="flex gap-1 flex-wrap -ml-2 -mr-2">
+        <div class="flex flex-col lg:flex-row gap-5 lg:gap-1 flex-wrap -ml-2 -mr-2">
             <span class="flex-grow"><Button added_classes="w-full" on:click={createNew}>➕ Add Commission</Button></span>
             <span><Button on:click={save}>💾 Save to Clipboard</Button></span>
             <span><Button on:click={load}>📋 Load from Clipboard</Button></span>
@@ -210,7 +210,7 @@
 
         <div class="flex items-center justify-between">
             <div class="flex items-center gap-5">
-                <h3 class="text-6xl">🧮</h3>
+                <h3 class="hidden lg:block text-6xl">🧮</h3>
                 <div class="flex flex-col gap-2">
                     <div class="flex gap-3 items-center">
                         <p class="font-bold bg-green-500 py-1 px-5 rounded-lg text-lg">${total}</p>
@@ -223,33 +223,33 @@
     </section>
 
     {#if error}
-        <section class="bg-slate-800 text-yellow-500 font-bold rounded-lg shadow-lg p-5 flex flex-col gap-5">
+        <section class="bg-slate-800 text-yellow-500 font-bold rounded-lg shadow-lg p-5 flex flex-col gap-5 text-center lg:text-left">
             ⚠️ {error}
         </section>
     {/if}
 
     {#if commissions.length == 0}
-        <section class="bg-slate-800 rounded-lg shadow-lg p-5 flex justify-between items-center w-full gap-5">
-            <div class="flex flex-col">
+        <section class="bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col lg:flex-row justify-between items-center w-full gap-5">
+            <div class="flex flex-col text-center lg:text-left">
                 <p class="text-green-500 font-bold text-xl">It's alone here :'(</p>
-                <p>You currently have no commissions selected. Add one --></p>
+                <p>You currently have no commissions selected. <span class="hidden lg:block">Add one --></span></p>
             </div>
             <span><Button on:click={createNew}>➕ Add Commission</Button></span>
         </section>
     {/if}
 
     {#if commissions.length > 10}
-        <section class="bg-slate-800 rounded-lg shadow-lg p-5 flex items-end w-full gap-5">
+        <section class="bg-slate-800 rounded-lg shadow-lg p-5 flex items-end w-full gap-5 text-center lg:text-left">
             <p><span class="text-green-500 font-bold text-xl">Calm down Elon Musk!</span>
             Your list is becoming quite long. Loading and saving long lists is not supported and may cause considerable lag or result in loss of data.</p>
         </section>
     {/if}
 
     {#each [...commissions].reverse() as commission}
-        <section class="flex gap-5">
-            <div class="w-3/5">
+        <section class="flex flex-col lg:flex-row gap-5">
+            <div class="w-full lg:w-3/5">
                 <div class="bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
-                    <div class="flex justify-between">
+                    <div class="flex justify-between flex-col lg:flex-row gap-5 lg:gap-0">
                         <h3 class="text-xl font-bold flex gap-5">{commission.name}<p class="bg-green-500 py-1 text-sm px-5 rounded-lg">${commission.price}</p></h3>
                         <span>
                             <Button on:click={() => {copy(commission)}}>⤴️</Button>
@@ -302,7 +302,7 @@
                 </div>
             </div>
 
-            <div class="w-2/5">
+            <div class="w-full lg:w-2/5">
                 {#if commission.example != ""}
                     <div class="relative bg-black bg-opacity-50 rounded-xl shadow-xl">
                         <p class="xl:block hidden absolute top-0 right-0 text-right -rotate-12 font-bold text-4xl -mb-40 -mr-40">

src/lib/calculator/CalculatorHeader.svelte

@@ -3,7 +3,7 @@
     console.log($page.url.pathname);
 </script>
 
-<header class="relative flex flex-col gap-10 max-w-[1400px] mx-auto my-20 dropanim">
+<header class="relative flex flex-col xl:gap-10 max-w-[1400px] mx-auto mt-10 lg:my-20 dropanim">
     <img src="/calculator/bannername.png" class="w-3/6 mb-10 lg:mb-0 mx-auto drop-shadow-2xl" alt="header siv kyne" />
     <h1>
         <img src="/calculator/banner.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />