Fixed project content spacing for mobile

gridlocdev · Sep 7, 2023 · 0cfdb20 · 0cfdb20
1 parent 26f1fdf
commit 0cfdb20
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 5 deletions.
diff --git a/.github/workflows/deploy-azure-static-webapps.yml b/.github/workflows/deploy-azure-static-webapps.yml
@@ -29,4 +29,4 @@ jobs:
           action: 'upload'
           app_location: '/'
           api_location: ''
-          app_artifact_location: 'build'
+          app_artifact_location: 'build'
diff --git a/src/app.html b/src/app.html
@@ -10,7 +10,7 @@
 	</head>
 	<body
 		data-sveltekit-preload-data="hover"
-		class="h-screen bg-background bg-gradient-to-tl from-secondary bg-fixed font-sora text-[white] md:mx-[5dvw] lg:mx-[15dvw]"
+		class="mx-[10dvw] h-screen bg-background bg-gradient-to-tl from-secondary bg-fixed font-sora text-[white] lg:mx-[15dvw]"
 	>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>

diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
@@ -11,7 +11,7 @@
 		/></a
 	>
 	<section
-		class="fixed bottom-0 z-10 flex w-screen items-center justify-around gap-x-8 p-4 text-center backdrop-blur-3xl md:relative md:bottom-auto md:top-0 md:ml-auto md:w-fit md:p-8 md:backdrop-blur-0"
+		class="fixed bottom-0 left-0 z-10 flex w-screen items-center justify-around gap-x-8 p-4 text-center backdrop-blur-3xl md:relative md:bottom-auto md:top-0 md:ml-auto md:w-fit md:p-8 md:backdrop-blur-0"
 	>
 		<a
 			class="flex flex-col items-center gap-1 transition-opacity hover:opacity-50 md:text-lg"

diff --git a/src/routes/ProjectList.svelte b/src/routes/ProjectList.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <h2 id="projects" class="mt-12 p-12 text-center text-3xl font-bold">Projects</h2>
-<div class="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-5 lg:gap-10">
+<div class="grid grid-cols-1 gap-10 md:grid-cols-2">
 	<ProjectListItem
 		title="Username Generator"
 		description="A set of applications for creating randomly-generated usernames"

diff --git a/src/routes/ProjectListItem.svelte b/src/routes/ProjectListItem.svelte
@@ -10,7 +10,9 @@
 	export let projectType;
 </script>
 
-<article class="flex flex-col justify-between gap-2 rounded-lg bg-text/[.1] p-10 shadow-2xl ring ring-[#ccc] ring-opacity-20">
+<article
+	class="flex flex-col justify-between gap-2 rounded-lg bg-text/[.1] p-8 shadow-2xl ring ring-[#ccc] ring-opacity-20 lg:p-10"
+>
 	<div class="flex flex-col gap-2">
 		<h2 class="text-xl font-bold">{title}</h2>
 		<p class="text-base">{description}</p>