improved mobile support

src/lib/components/post.svelte

@@ -62,10 +62,18 @@
         cursor: pointer;
         user-select: none;
         width: 100%;
-        height: 150px;
         padding: 10px 0;
         display: flex;
         align-items: center;
+        justify-content: center;
+    }
+    .data {
+        flex-grow: 1;
+    }
+    @media (max-width: 768px) {
+        .post {
+            flex-wrap: wrap;
+        }
     }
     h4 {
         margin: 5px 0;
@@ -82,13 +90,13 @@
         margin-top: 5px;
         object-fit: cover;
         box-shadow: 0 0 5px rgb(145, 145, 145);
+        border-radius: 5px;
     }
     .dark .thumbnail {
         box-shadow: 0 0 5px rgb(0, 0, 0);
     }
     img {
         height: 100%;
-        border-radius: 5px;
     }
     /* .author img {
         height: 100%;

src/lib/layouts/post.svelte

@@ -55,7 +55,7 @@
 <hr class:dark={$darkmode}>
 
 <footer>
-    Daniel Bulant - Blog posts CC-BY-SA (unless otherwise specified)
+    Daniel Bulant - Blog&nbsp;posts CC-BY-SA (unless&nbsp;otherwise&nbsp;specified)
 </footer>
 
 <style>

src/routes/posts/quick-comparison-of-s3/_compare/Compare.svelte

@@ -12,26 +12,31 @@
     const data = [
         {
             name: "Cloudflare R2",
+            nameShort: "R2",
             price: ({ storage, egress, fileCount, dataRetention }) => 10 * storage + Math.max(0, fileCount-10e6)*0.36/1e6,
             color: "orange",
             link: "cloudflare-r2"
         }, {
             name: "Wasabi",
+            nameShort: "Wasabi",
             price: ({ storage, egress, fileCount, dataRetention }) => 5 * storage * (90/dataRetention),
             color: "green",
             link: "wasabi"
         }, {
             name: "Backblaze B2",
+            nameShort: "B2",
             price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 10 * egress + Math.max(0, fileCount - 2500)*4/10e6,
             color: "red",
             link: "backblaze-b2"
         }, {
             name: "DO Spaces",
+            nameShort: "Spaces",
             price: ({ storage, egress, fileCount, dataRetention }) => 20 * storage + 10 * egress,
             color: "blue",
             link: "digitalocean-spaces"
         }, {
             name: "Storj.io",
+            nameShort: "Storj",
             price: ({ storage, egress, fileCount, dataRetention }) => 4 * storage + 7 * egress,
             color: "rgb(0,120,180)",
             link: "storjio"
@@ -51,7 +56,7 @@
         return num;
 	}
 	const m = spring();
-	$: size = w < 480 ? 'small' : w < 640 ? 'medium' : 'large';
+	$: size = w < 640 ? 'small' : 'large';
     $: $m = data.map((d, i) => ({ x: i, y: d.price({ storage, egress, fileCount, dataRetention }) }));
 	let max = spring();
     $: $max = Math.max(50, ...data.map(d => d.price({ storage, egress, fileCount, dataRetention }) + d.price({ storage, egress, fileCount, dataRetention }) * 0.2));
@@ -100,7 +105,7 @@
 
 			<Pancake.Grid vertical count={5} let:value>
 				<span class="x label">
-                    <a href="#{data[value].link}">{data[value].name}</a>
+                    <a href="#{data[value].link}">{size === "large" ? data[value].name : data[value].nameShort}</a>
 				</span>
 			</Pancake.Grid>
 		</Pancake.Chart>