src/App.svelte

@@ -1,15 +1,13 @@
 <script>
-  import Head from "./lib/Head.svelte";
+  import Head from "./lib/sections/Head.svelte";
-  import Header from "./lib/Header.svelte";
+  import Header from "./lib/sections/Header.svelte";
-  import FileViewer from "./lib/FileViewer.svelte";
+  import Footer from "./lib/sections/Footer.svelte";
-  import Footer from "./lib/Footer.svelte";
+  import Main from "./lib/sections/Main.svelte";
 </script>
 
 <Head/>
 <Header />
-<main>
+<Main />
-  <FileViewer />
-</main>
 <Footer />
 
 <style>

src/app.css

@@ -23,12 +23,6 @@ body {
   height: 100%;
 }
 
-main {
-  flex: 1; /* This pushes footer to bottom */
-  padding: 20px;
-  min-height: 85vh;
-}
-
 #app {
   display: flex;
   flex-direction: column;

src/lib/components/CardList.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { t } from "../i18n"
+  import { t } from "../../i18n"
-  import renderFileToCanvas from "../file-renderer";
+  import renderFileToCanvas from "../../file-renderer";
 
   export let files = [];
   let canvasRefs = [];

src/lib/components/Dropzone.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { t } from "../i18n"
+  import { t } from "../../i18n"
 
   export let files;
   export let supportedFormats;

src/lib/components/FileViewer.svelte

@@ -3,9 +3,9 @@
   import Dropzone from "./Dropzone.svelte";
   import FileList from "./FileList.svelte";
 
-  import { filterFiles } from "../utils/filterFiles";
+  import { filterFiles } from "../../utils/filterFiles";
-  import { supportedFormats } from "../format-readers";
+  import { supportedFormats } from "../../format-readers";
-  import { t } from "../i18n"
+  import { t } from "../../i18n"
 
   let acceptedFiles;
   let rejectedFiles;

src/lib/sections/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { t } from "../i18n"
+  import { t } from "../../i18n"
-  import { appVersion } from "../utils/env";
+  import { appVersion } from "../../utils/env";
 </script>
 
 <footer>
@@ -43,7 +43,7 @@
     }
 
     footer p {
-      font-size: 12px; 
+      font-size: 12px;
     }
   }
 </style>

src/lib/sections/Head.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { t, locale } from "../i18n";
+    import { t, locale } from "../../i18n";
-    import thumbnail from "../assets/thumbnail.webp";
+    import thumbnail from "../../assets/thumbnail.webp";
 
     $: document.documentElement.lang = $locale;
 </script>

src/lib/sections/Header.svelte

@@ -1,7 +1,7 @@
 <script>
-  import MediaQuery from "../lib/MediaQuery.svelte";
+  import MediaQuery from "../MediaQuery.svelte";
-  import logo from "../assets/logo.webp";
+  import logo from "../../assets/logo.webp";
-  import { t, locale, locales } from "../i18n"
+  import { t, locale, locales } from "../../i18n"
 
   const configsFor = (matches) => {
     return matches

src/lib/sections/Main.svelte

@@ -0,0 +1,14 @@
+<script>
+    import FileViewer from "../components/FileViewer.svelte";
+</script>
+<main>
+    <FileViewer />
+</main>
+
+<style>
+    main {
+        flex: 1; /* This pushes footer to bottom */
+        padding: 20px;
+        min-height: 85vh;
+    }
+</style>