Fix features projects on mobile

Kord-Extensions · Jul 13, 2024 · 455185d · 455185d
1 parent 19bbc68
commit 455185d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/lib/components/ui/project/project.svelte b/src/lib/components/ui/project/project.svelte
@@ -17,9 +17,9 @@
 	export let donationUrl: string | undefined = undefined
 </script>
 
-<div class="flex flex-row mb-4">
+<div class="flex flex-col items-center md:items-start md:flex-row mb-4">
 	<div class={cn(
-		"mr-4 bg-accent rounded-lg h-56 w-56",
+		"mb-4 md:mr-4 md:mb-0 bg-accent rounded-lg h-56 w-56",
 		padImage ? "p-4" : "",
 	)}>
 		{#if image !== undefined}
@@ -72,5 +72,7 @@
 		<div class="prose dark:prose-invert mt-2">
 			<slot></slot>
 		</div>
+
+		<hr class="mt-4 mb-2 md:hidden" />
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -243,6 +243,8 @@ ${Prism.highlight(mavenCode, Prism.languages.xml, "xml")}
 			Please note that we are not responsible for the projects linked to below, and you use them at your own risk.
 		</p>
 
+		<hr class="mt-4 mb-5 md:hidden" />
+
 		<Project
 			name="LilyBot"
 			image="/projects/lilybot.png"