Improve layout for smaller devices

src/lib/components/FooterComponent.svelte

@@ -5,21 +5,25 @@
 
 <div class="footer">
   <div>
-        <span>Made with &#x1F918; by&nbsp;</span>
-        <a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
+    <span class="label"
+      >Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
+    >
+    <a href="https://metalhead.club/@aymm" rel="me"
+      >@aymm<span class="mastodonInstance">@metalhead.club</span></a
+    >
   </div>
   |
   <div>
     <a href="https://phlaym.net/git/phlaym/moshing-mammut">
       <img alt="Git branch" src={git} class="icon" />
-            Source Code
+      <span class="label">Source Code</span>
     </a>
   </div>
   |
   <div>
     <a href="/feed.xml">
       <img alt="RSS" src={rss} class="icon" />
-            RSS Feed
+      <span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
     </a>
   </div>
 </div>
@@ -53,4 +57,27 @@
       background-color: var(--color-grey-translucent);
     }
   }
+  @media only screen and (max-device-width: 620px) {
+    .mastodonInstance,
+    .feedSuffix {
+      display: none;
+    }
+    .footer {
+      justify-content: center;
+    }
+  }
+
+  @media only screen and (max-device-width: 430px) {
+    .mastodonInstance,
+    .feedSuffix,
+    .secretIngredient {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-device-width: 370px) {
+    .label {
+      display: none;
+    }
+  }
 </style>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FooterComponent from '$lib/components/FooterComponent.svelte'
+  import FooterComponent from '$lib/components/FooterComponent.svelte';
   import { SvelteToast } from '@zerodevx/svelte-toast';
 
   const options = {
@@ -7,6 +7,7 @@
     classes: ['toast']
   };
 </script>
+
 <slot />
 <SvelteToast {options} />
 <div class="footer">
@@ -33,4 +34,9 @@
     align-items: center;
     gap: 10px;
   }
+  @media only screen and (max-device-width: 620px) {
+    .footer {
+      width: calc(100% + 16px);
+    }
+  }
 </style>

src/routes/+page.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-import { onMount } from "svelte";
+  import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import type { Post } from '$lib/mastodon/response';
-import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
+  import {
+    PUBLIC_REFRESH_INTERVAL,
+    PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME
+  } from '$env/static/public';
   import PostComponent from '$lib/components/PostComponent.svelte';
   import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
   import { fly, type FlyParams } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
-import { errorToast } from '$lib/errorToast'
-
+  import { errorToast } from '$lib/errorToast';
 
   export let data: PageData;
 
   interface FetchOptions {
-  since?: string,
-  before?: string,
-  count?: number
+    since?: string;
+    before?: string;
+    count?: number;
   }
 
   interface EdgeFlyParams extends FlyParams {
-  created_at: string
+    created_at: string;
   }
 
   const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
@@ -39,7 +41,8 @@ let oldestBeforeLastFetch: number | null = null;
   function edgeFly(node: Element, opts: EdgeFlyParams) {
     const createdAt = new Date(opts.created_at).getTime();
     const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
-  const oldest = oldestBeforeLastFetch !== null
+    const oldest =
+      oldestBeforeLastFetch !== null
         ? oldestBeforeLastFetch
         : new Date(data.posts[data.posts.length - 1].created_at).getTime();
     const diffOldest = Math.abs(oldest - createdAt);
@@ -70,7 +73,7 @@ async function fetchPosts(options: FetchOptions): Promise<Post[]> {
 
   function filterDuplicates(posts: Post[]): Post[] {
     return posts.filter((obj, index, arr) => {
-    return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+      return arr.map((mapObj) => mapObj.url).indexOf(obj.url) === index;
     });
   }
 
@@ -79,7 +82,8 @@ function refresh() {
     if (data.posts.length > 0) {
       filter = { since: data.posts[0].created_at };
     }
-  fetchPosts(filter).then(resp => {
+    fetchPosts(filter)
+      .then((resp) => {
         if (resp.length > 0) {
           // Prepend new posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
@@ -109,9 +113,9 @@ onMount(async () => {
 
     return () => {
       if (interval !== null) {
-      clearInterval(interval)
-    }
+        clearInterval(interval);
       }
+    };
   });
 
   function loadOlderPosts() {
@@ -123,8 +127,8 @@ function loadOlderPosts() {
       oldestBeforeLastFetch = new Date(before).getTime();
     }
 
-
-  fetchPosts(filter).then(resp => {
+    fetchPosts(filter)
+      .then((resp) => {
         if (resp.length > 0) {
           // Append old posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
@@ -136,20 +140,19 @@ function loadOlderPosts() {
         }
         loadingOlderPosts = false;
       })
-  .catch(e => {
+      .catch((e) => {
         loadingOlderPosts = false;
         errorToast('Error loading older posts: ' + e.message);
       });
-
   }
-
 </script>
+
 <svelte:head>
   <title>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</title>
 </svelte:head>
 <h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
 <div class="wrapper">
-  <div></div>
+  <div />
   <div class="posts">
     {#if data.posts.length === 0}
       Sorry, no posts recommending music aave been found yet
@@ -157,7 +160,12 @@ function loadOlderPosts() {
     {#each data.posts as post (post.url)}
       <div
         class="post"
-        transition:edgeFly="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}"
+        transition:edgeFly={{
+          y: 10,
+          created_at: post.created_at,
+          duration: 300,
+          easing: cubicInOut
+        }}
       >
         <PostComponent {post} />
       </div>
@@ -165,10 +173,12 @@ function loadOlderPosts() {
     <LoadMoreComponent
       on:loadOlderPosts={loadOlderPosts}
       moreAvailable={moreOlderPostsAvailable}
-    isLoading={loadingOlderPosts}/>
+      isLoading={loadingOlderPosts}
+    />
   </div>
-  <div></div>
+  <div />
 </div>
+
 <style>
   .posts {
     display: flex;
@@ -191,4 +201,10 @@ function loadOlderPosts() {
     text-align: center;
     z-index: 100;
   }
+
+  @media only screen and (max-device-width: 650px) {
+    .post {
+      max-width: 100vw;
+    }
+  }
 </style>