Responsive news (+ import svelte-media-queries lib)

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "deprived-main-website",
 			"version": "0.0.1",
+			"dependencies": {
+				"svelte-media-queries": "^1.6.2"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/adapter-static": "^3.0.1",
@@ -1184,6 +1187,11 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-media-queries": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz",
+			"integrity": "sha512-SMz6od/vIeZEGlc4P0HKJK4G0fZotuwFhCSpBQaPqh75h6sL6sNf+4+IjbegFKXbP7b+SOfyzVOIMXTr8jynkA=="
+		},
 		"node_modules/svelte/node_modules/@ampproject/remapping": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",

package.json

@@ -19,5 +19,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-media-queries": "^1.6.2"
+	}
 }

src/routes/+page.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
+    import MediaQuery from 'svelte-media-queries';
     import NewsCard from '$lib/posts/NewsCard.svelte';
     import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
 
     export let data; // <- contains post data
+
+    $: most_recent_post = data.summaries[0];
+
+    const mobileThreshold : string = '1000px';
+    const post_show_count : number = 3;
+    let mobile : boolean;
 </script>
 
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+
 <div class="main-title">
     <h1>The Deprived Devs</h1>
 </div>
@@ -14,10 +24,10 @@
     <h1 id="news-header">Recent News</h1>
     <div class="news-container">
         <!-- The newest blog post being showcased -->
-        <ShowcaseNewsCard post_url={data.summaries[0].url} title={data.summaries[0].title} summary={data.summaries[0].summary} creation_date={data.summaries[0].creation_date} />
+        <ShowcaseNewsCard post_url={most_recent_post.url} title={most_recent_post.title} summary={most_recent_post.summary} creation_date={most_recent_post.creation_date} />
 
         <div class="news-list">
-            {#each data.summaries as summary}
+            {#each data.summaries.slice(1, post_show_count) as summary}
                 <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
             {/each}
         </div>
@@ -33,7 +43,7 @@
         align-items: center;
 
         width: 60%;
-        margin: auto;
+        margin-inline: auto;
     }
 
     #news-header {
@@ -71,4 +81,17 @@
     h1 {
         color: var(--text1);
     }
+
 </style>
+
+{#if mobile}
+    <style>
+        #news-section {
+            width: 90vw !important;
+        }
+        .news-container {
+            flex-direction: column !important;
+        }
+    </style>
+{/if}
+

src/routes/post/posts_data.ts

@@ -27,4 +27,11 @@ export const posts : Post[] = [
         creation_date: 1708382491,
         modification_date: 1708382491,
     },
+    {
+        url: 'lorem1',
+        title: 'Idk some arcticle bruh!',
+        summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        creation_date: 1708558377,
+        modification_date: 1708558377,
+    },
 ];