fix: Awards adjust to smaller screens, add margin bottom to all pages.

Author: MerchantCalico

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mod-garden-website",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "dev": "astro dev --api real",
     "dev_local": "astro dev --api local",

src/layouts/Layout.astro

@@ -22,7 +22,7 @@ description = description ? description : "Mod Garden: A longer term mod creatio
 
     />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <script is:inline>

src/pages/blog/[post].astro

@@ -19,7 +19,7 @@ const { Content } = await render(post);
 
 <Layout title={post.data.title} page="blog" description={post.data.description}>
   <div class="flex min-h-screen w-full flex-col items-center justify-center">
-    <div class="mt-2 flex w-full max-w-4xl flex-col space-y-6 px-4">
+    <div class="mt-2 mb-4 flex w-full max-w-4xl flex-col space-y-6 px-4">
       <div
         class="w-full rounded-lg border-0 border-b-4 border-leaf-200 bg-white p-6 text-black shadow-md dark:bg-zinc-800 dark:text-white"
       >

src/pages/blog/index.astro

@@ -5,7 +5,7 @@ import Layout from "../../layouts/Layout.astro";
 const posts = await getCollection('blog');
 ---
 <Layout title="Mod Garden Blog" page="blog" description="Blog posts from Mod Garden">
-  <div class="mx-auto mt-3 mb-3 grid w-3/4 grid-flow-row contents-col-2 gap-2">
+  <div class="mx-auto mt-4 mb-4 grid w-3/4 grid-flow-row contents-col-2 gap-2">
     {
       posts.map((blogPost) => (
         <a

src/pages/events/[event].astro

@@ -19,7 +19,7 @@ const projects = await getEventProjects(eventData.id);
 ---
 
 <Layout title={eventData?.display_name}>
-  <div class="mt-5 mb-5 flex items-center justify-center">
+  <div class="mt-4 mb-4 flex items-center justify-center">
     <div class="flex max-w-4xl flex-col space-y-6">
       <div class="flex flex-row space-x-4">
         <div

src/pages/events/index.astro

@@ -6,7 +6,7 @@ const events = await getEvents();
 
 <Layout title="Mod Garden Events" page="events">
     {events.length == 0 &&
-      <div class="mx-auto mt-3 w-3/4 rounded-lg bg-white p-6 text-black shadow-md dark:bg-zinc-800 dark:text-white">
+      <div class="mx-auto mt-4 mb-4 w-3/4 rounded-lg bg-white p-6 text-black shadow-md dark:bg-zinc-800 dark:text-white">
         <h1 class="mb-4 border-0 border-b-4 border-leaf-200 text-xl font-bold text-black dark:text-white">
           Mod Garden Presents:
         </h1>
@@ -20,7 +20,7 @@ const events = await getEvents();
    }
 
   <div 
-    class="mx-auto mt-3 mb-3 grid w-3/4 grid-flow-row contents-col-2 gap-2"
+    class="mx-auto mt-4 mb-4 grid w-3/4 grid-flow-row contents-col-2 gap-2"
   >
     {
       events.map((modGardenEvent) => (

src/pages/index.astro

@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="Mod Garden" page="home">
-  <div class="mt-5 flex items-center justify-center">
+  <div class="mt-4 mb-4 flex items-center justify-center">
     <div class="flex max-w-4xl flex-col space-y-6">
       <div
         class="rounded-lg bg-white p-6 text-black shadow-md dark:bg-zinc-800 dark:text-white"

src/pages/user/[user].astro

@@ -86,7 +86,7 @@ let bio =
 ---
 
 <Layout title={userData?.display_name}>
-  <div class="mx-auto mt-5 w-4/5">
+  <div class="mx-auto mt-4 w-4/5">
     <div
       class="rounded-lg bg-white p-6 text-black shadow-md dark:bg-zinc-800 dark:text-white"
     >
@@ -96,7 +96,7 @@ let bio =
           style=`background-image: url(${modrinthUserIcon});`
         >
         </span>
-        <h1 class="mt-5 text-xl font-bold text-black dark:text-white">
+        <h1 class="mt-4 text-xl font-bold text-black dark:text-white">
           {userData?.display_name}
         </h1>
       </div>
@@ -107,10 +107,10 @@ let bio =
   </div>
 
   <div
-    class="mx-auto mt-5 min-h-24 w-4/5 rounded-lg border-4 border-gray-100 bg-repeat dark:border-zinc-700"
+    class="mx-auto mt-4 min-h-24 w-4/5 rounded-lg border-4 border-gray-100 bg-repeat dark:border-zinc-700"
     style="background-image: url('/images/soil.png');"
   >
-    <div class="grid grid-cols-10 gap-2 p-4">
+    <div class="grid awards-col gap-2 p-4">
       {awards.map((award) => <AwardPlant award={award} />)}
     </div>
   </div>

src/styles/global.css

@@ -66,4 +66,14 @@
   @media screen and (max-width: 800px) {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+}
+
+@utility awards-col {
+  grid-template-columns: repeat(16, minmax(0, 1fr));
+  @media screen and (max-width: 1400px) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  @media screen and (max-width: 800px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }