From 880b9850723031e19770c4d83a1aa239e390d8db Mon Sep 17 00:00:00 2001
From: Yann-Thomas Le Moigne <yann.tho.le.moigne@gmail.com>
Date: Tue, 7 May 2024 18:46:45 +0200
Subject: [PATCH] fix - layout on mobile

---
 src/routes/[slug]/+page.svelte |  1 -
 src/routes/posts/+page.svelte  | 25 ++++++++++++++++++-------
 src/routes/styles.css          |  1 +
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 2120c51..ae24ddf 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -27,7 +27,6 @@
       <p>Published at {formatDate(data.meta.date)}</p>
   </div>
 
-  <!-- Tags -->
 	<div class="tags">
 		{#each data.meta.categories as category}
 			<span>{category}</span>
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
index a7f6127..8116ff2 100644
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@@ -43,6 +43,10 @@
 		text-decoration: underline;
 	}
 
+	ul {
+		padding: 0;
+	}
+
 	.post {
 		margin-bottom: 1rem;
 		list-style: none;
@@ -53,21 +57,28 @@
 			border-color: hsl(0, 0%, 90%);
 		}
 
-		& section {
-			display: flex;
-			align-items: baseline;
-			justify-content: space-between;
+		& .title {
+			@media screen and (width >= 768px){
+				display: flex;
+				align-items: baseline;
+				justify-content: space-between;
+			}
 
 			& .data {
 				display: flex;
 				flex-direction: column;
 				align-items: flex-end;
+
+				@media screen and (width < 768px){
+					flex-direction: row-reverse;
+					justify-content: space-between;
+				}
 			}
 
 			& .time {
-			font-size: 0.8rem;
-			color: #666;
-		}
+				font-size: 0.8rem;
+				color: #666;
+			}
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/styles.css b/src/routes/styles.css
index e7e2788..ff1f25b 100644
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -11,6 +11,7 @@
 body {
 	margin: 0;
 	background-color: var(--color-bg);
+	min-width: 200px;
 }
 
 h1 {