fix mobile entries order

LukaHarambasic · Feb 13, 2024 · c0e53ae · c0e53ae
1 parent 8995589
commit c0e53ae
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/lib/components/Entries/Entries.svelte b/src/lib/components/Entries/Entries.svelte
@@ -8,7 +8,9 @@
 	<div class="entries">
 		<slot name="entries" />
 	</div>
-	<slot name="sidebar" />
+	<div class="sidebar">
+		<slot name="sidebar" />
+	</div>
 	<div class="rss rich-text">
 		<p>
 			<a href={rssPath}>RSS Feed</a>
@@ -32,13 +34,24 @@
 		}
 		.entries {
 			width: 100%;
+			@media screen and (max-width: 50rem) {
+				grid-template-columns: 1fr;
+				order: 1;
+			}
+		}
+		.sidebar {
+			@media screen and (max-width: 50rem) {
+				grid-template-columns: 1fr;
+				order: 0;
+			}
 		}
 		.rss {
 			grid-column: 1 / -1;
 			margin: var(--l) 0 0 0;
 			text-align: center;
 			@media screen and (max-width: 50rem) {
 				grid-column: 1 / 1;
+				order: 2;
 			}
 		}
 	}