Make layout responsive

src/App.svelte

@@ -1,11 +1,24 @@
 <script>
   import FileViewer from "./lib/FileViewer.svelte";
+  import MediaQuery from "./lib/MediaQuery.svelte";
   import logo from "./assets/logo.webp";
+  import logoMobile from "./assets/logo-mobile.webp";
 </script>
 
 <header>
   <a href="/">
-    <img src={logo} alt="Embroidery viewer logo." width="460" height="200" />
+    <MediaQuery query="(min-width: 481px) and (max-width: 812px)" let:matches>
+      {@const configs = matches
+        ? { src: logoMobile, width: 350, height: 96 }
+        : { src: logo, width: 460, height: 200 }}
+      <img
+        class="logo"
+        alt="Embroidery viewer logo."
+        src={configs.src}
+        width={configs.width}
+        height={configs.height}
+      />
+    </MediaQuery>
   </a>
 </header>
 <main>
@@ -22,11 +35,22 @@
 </footer>
 
 <style>
+  .logo {
+    background-image: logo;
+  }
   main {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     box-sizing: border-box;
+    padding: 15px;
+  }
+
+  @media only screen and (max-device-width: 812px) {
+    .logo {
+      width: 100%;
+      padding: 20px;
+    }
   }
 </style>

src/lib/FileViewer.svelte

@@ -98,13 +98,8 @@
 {#if files && files.length !== 0 && filesRendered}
   <div id="canvas-container" style="width: 100%; heigth: 100vh;">
     {#each Array.from(files) as file, i}
-      <div
-        style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 550px; height: 550px; margin-bottom: 15px; border: 2px solid black;"
-      >
-        <canvas
-          bind:this={filesRefs[i]}
-          style="height: 80%; width: fit-content;"
-        />
+      <div class="card-canvas">
+        <canvas bind:this={filesRefs[i]} class="canvas" />
         <p>{file.name}</p>
       </div>
       {filesRefs[i] && startFileRead(file, filesRefs[i])}
@@ -113,6 +108,20 @@
 {/if}
 
 <style>
+  .canvas {
+    height: 80%;
+    width: fit-content;
+  }
+  .card-canvas {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 550px;
+    height: 550px;
+    margin-bottom: 15px;
+    border: 2px solid black;
+  }
   input[type="submit"] {
     width: 100%;
     font-size: 20px;
@@ -121,6 +130,8 @@
     font-weight: 700;
     color: white;
     padding: 10px;
+    -webkit-appearance: none;
+    border-radius: 0;
   }
 
   input[type="submit"]:hover {
@@ -167,4 +178,31 @@
     border: 5px dotted #05345f;
     color: #05345f;
   }
+
+  @media only screen and (max-device-width: 812px) {
+    #form {
+      width: 100%;
+    }
+
+    #dropzone {
+      width: 100%;
+    }
+
+    #selected-files-container {
+      width: 100%;
+    }
+
+    #selected-file-card {
+      width: 100%;
+    }
+
+    #canvas-container {
+      width: 100%;
+    }
+
+    .card-canvas {
+      width: 100%;
+      height: 400px;
+    }
+  }
 </style>

src/lib/MediaQuery.svelte

@@ -0,0 +1,39 @@
+<script>
+  import { onMount } from "svelte";
+
+  export let query;
+
+  let mql;
+  let mqlListener;
+  let wasMounted = false;
+  let matches = false;
+
+  onMount(() => {
+    wasMounted = true;
+    return () => {
+      removeActiveListener();
+    };
+  });
+
+  $: {
+    if (wasMounted) {
+      removeActiveListener();
+      addNewListener(query);
+    }
+  }
+
+  function addNewListener(query) {
+    mql = window.matchMedia(query);
+    mqlListener = (v) => (matches = v.matches);
+    mql.addListener(mqlListener);
+    matches = mql.matches;
+  }
+
+  function removeActiveListener() {
+    if (mql && mqlListener) {
+      mql.removeListener(mqlListener);
+    }
+  }
+</script>
+
+<slot {matches} />