feat: change grid size in about page and listings page

ReMod-Software · Feb 17, 2024 · 25ff2d7 · 25ff2d7
1 parent 1c6080c
commit 25ff2d7
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 23 deletions.
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-	<footer class="flex flex-col p-12 bg-[#262626] gap-12">
+	<footer class="flex flex-col p-12 bg-[#262626] gap-12 md:px-16">
 		<div class="flex flex-col md:flex-row justify-between gap-4">
 			<img
 				src="/branding/beacon_logo_base.png"

diff --git a/deploy.ps1 b/deploy.ps1
@@ -8,4 +8,4 @@ git commit -m "Deploy: $(Get-Date)"
 git remote add master "https://github.com/LePichu/tk24-beacon-deploy"
 git push master master --force
 
-Set-Location "../"
+Set-Location "../"
diff --git a/pages/about.vue b/pages/about.vue
@@ -1,6 +1,6 @@
 <template>
 	<Header />
-	<main class="m-4 mb-16 md:mx-40 rounded-lg flex flex-col gap-4">
+	<main class="m-4 mb-16 md:mx-40 rounded-lg flex flex-col gap-8">
 		<h1
 			class="text-2xl text-black hover:underline gap-4 font-semibold pt-8"
 		>
@@ -35,7 +35,7 @@
 		</p>
 
 		<div
-			class="grid grid-cols-1 md:grid-cols-2 gap-4 md:px-20 py-8 rounded-xl"
+			class="grid grid-cols-1 md:grid-cols-3 gap-4 md:px-20 py-8 rounded-xl"
 		>
 			<div
 				v-for="([k, v]) in Object.entries(AUTHORS)"
@@ -84,10 +84,10 @@
 					placeholder="Email"
 					class="p-4 rounded-xl border-solid border border-gray-300"
 				/>
-				<textarea
+				<input
 					placeholder="Feedback/Complaint"
 					class="p-4 rounded-xl border-solid border border-gray-300"
-				></textarea>
+				/>
 				<button
 					class="text-white rounded-lg uppercase font-semibold bg-gradient-to-br from-[#E49DDC] to-[#86B5FC] p-4"
 				>Submit</button>
@@ -109,20 +109,20 @@ const AUTHORS: Array<Author> = [
 		"name": "Ishat Gupta",
 		"pfp": "https://avatars.githubusercontent.com/u/62379502",
 		"description":
-			"Hello! I'm a 17-year-old weaving digital tapestries, always curious, always exploring. Dive into my world and discover the magic I create! ",
+			"Hello! I'm a 17-year-old weaving digital tapestries. Dive into my world and discover the magic I create! ",
 	},
 	{
 		"name": "Pranav Purwar",
 		"pfp": "https://avatars.githubusercontent.com/u/75154889",
 		"description":
-			"Hello! I'm a 16-year-old developer, always curious, always exploring. Dive into the technological world and discover the magic I create!",
+			"Hello! I'm a 16-year-old developer, always curious, always exploring!",
 	},
 	{
 		"name": "Sambhav Arora",
 		"pfp":
 			"https://media.discordapp.net/attachments/1208100360925741076/1208100712333185146/image.png?ex=65e20e77&is=65cf9977&hm=cb0c9c78767fbdf2d0d602f3f189186126a03c14a7470187d38c3ba37254d2f7&=&format=webp&quality=lossless&width=1052&height=1052",
 		"description":
-			"Hello! I'm a 17-year-old tech enthusiast, always curious, always exploring. Dive into the technological world and discover the magic I create!",
+			"Hello! I'm a 17-year-old tech enthusiast, always curious, always exploring.",
 	},
 ]
 </script>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -15,7 +15,7 @@
 			possibilities that await!
 		</p>
 
-		<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
 			<div
 				v-for="([k, v]) in Object.entries(BLOG_POSTS)"
 				class="border-solid border border-gray-600 flex flex-col rounded-xl"

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<Header />
 
-	<main class="p-4 rounded-3xl flex flex-col gap-12 md:gap-8">
+	<main class="p-4 rounded-3xl flex flex-col gap-8 md:gap-24 ">
 		<div
 			class="rounded-lg flex gap-8 md:gap-16 flex-col justify-center items-center h-full w-full aspect-[4/3] md:aspect-[21/9] p-8 md:p-0 text-white"
 			id="main-hero"
@@ -32,7 +32,7 @@
 					class="font-serif italic font-semibold"
 				>consumers</span>, and their quality of place...
 			</h1>
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4 xl:grid-cols-4">
 				<div
 					v-for="ft in CONSUMER_FEATURES"
 					class="border border-solid border-gray-500 flex flex-col gap-4 p-6 rounded-lg grad-box"
@@ -58,7 +58,7 @@
 					class="font-serif italic font-semibold"
 				>agents!</span>
 			</h1>
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4 xl:grid-cols-4">
 				<div
 					v-for="ft in PROVIDER_FEATURES"
 					class="border border-solid border-gray-500 flex flex-col gap-4 p-6 rounded-lg grad-box"
@@ -78,11 +78,6 @@
 			</div>
 		</div>
 
-		<div class="flex grid-cols-3 w-full rounded-xl md:ms-40">
-			<div class="md:mx-40">
-				<div class="grid grid-cols-2"></div>
-			</div>
-		</div>
 
 		<div class="content md:mx-40 flex flex-col gap-8 items-center">
 			<h1 class="text-center text-2xl">
@@ -92,7 +87,7 @@
 				in...
 			</h1>
 
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-8 xl:grid-cols-4">
 				<div
 					class="flex flex-col grid-item w-full text-xl font-semibold uppercase gap-4"
 				>
@@ -123,7 +118,7 @@
 				>kinds!</span>
 			</h1>
 
-			<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+			<div class="grid grid-cols-1 md:grid-cols-4 xl:grid-cols-4 gap-4 mb-4">
 				<div
 					class="flex flex-col grid-item w-full text-xl font-semibold uppercase gap-4"
 				>

diff --git a/pages/properties/index.vue b/pages/properties/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<header
-		class="p-4 flex justify-between bg-transparent backdrop-blur-lg sticky top-0 items-center"
+		class="p-4 flex justify-between bg-transparent backdrop-blur-lg sticky top-0 items-center md:px-16"
 	>
 		<a class="flex aspect-square h-12 w-12" href="/">
 			<img src="/branding/beacon_logo_base.png" class="h-12 w-12" />
@@ -37,7 +37,7 @@
 		<img src="/svg/menu.svg" class="h-12 w-12 p-2 block md:hidden" />
 	</header>
 
-	<main class="mb-16 md:mx-20 rounded-lg flex flex-col gap-4 min-h-[80rem]">
+	<main class="mb-16 md:mx-20 rounded-lg flex flex-col gap-4 min-h-[40rem]">
 		<div
 			class="flex flex-row gap-2 mb-128 h-full"
 			style="grid-template-columns: 25% 75%;"
@@ -236,7 +236,7 @@
 						Listings</span>"
 				</p>
 
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+				<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mt-4">
 					<div
 						v-for="([k, v]) in Object.entries(PROPERTIES)"
 						class="border-solid border border-gray-300 rounded-[32px] p-4"