fix - layout on mobile

yatho · May 7, 2024 · 880b985 · 880b985
1 parent d2ed2c6
commit 880b985
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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>
diff --git 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 {