Merge pull request #28 from DREDGE-Mods/dev

Fix mod header layouts, make thumbnails clickable
DREDGE-Mods · Dec 6, 2023 · 41184a3 · 41184a3
2 parents 2a7bc05 + fd702d2
commit 41184a3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/components/ModPreview.astro b/src/components/ModPreview.astro
@@ -8,12 +8,14 @@ const { mod: mod } = Astro.props;
 
 <div class="p-2 pb-1 card bg-secondary h-100">
     <div class="d-flex flex-column text-center h-100">
-        <a href={"/mods/" + mod.name.toLowerCase().trim().split(" ").join("_")}><h5 class="text-center">{mod.name}</h5></a>
-        {(mod.first_image != undefined) && 
-            <div class="pb-2">
-                <img class="w-75" src={mod.first_image}>
-            </div>
-         }
+        <a href={"/mods/" + mod.name.toLowerCase().trim().split(" ").join("_")}>
+            <h5 class="text-center">{mod.name}</h5>
+            {(mod.first_image != undefined) && 
+                <div class="pb-2">
+                    <img class="w-75" src={mod.first_image}>
+                </div>
+            }
+        </a>
         <div class="flex-grow-1"></div>
         <div class="bg-black bg-opacity-25 rounded p-1">
             <div style="height: 80px; max-height:80px; overflow: hidden; text-overflow:ellipsis; whitespace: nowrap" class="d-block align-text-top">

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -65,7 +65,7 @@ const { title } = Astro.props;
 		h1 {
 			font-size: 3rem;
 			font-weight: 800;
-			margin: 0;
+
 		}
 		.text-gradient {
 			background-image: var(--accent-gradient);

diff --git a/src/layouts/ModPage.astro b/src/layouts/ModPage.astro
@@ -21,18 +21,18 @@ const authorGithubLink = frontmatter.mod.repo.split("/")[0];
 					{frontmatter.mod.description}
 				</div>
 
-				<div class="p-2 d-flex d-flex justify-content-around flex-wrap">
-					<span class="ps-2 pe-2">
+				<div class="p-2 d-flex d-flex flex-wrap justify-content-center">
+					<span class="ps-2 pe-2" style="min-width: 33%; text-align:center">
 						📈 {frontmatter.mod.downloads} Downloads
 					</span>
 
-					<span class="ps-2 pe-2">
+					<span class="ps-2 pe-2" style="min-width: 33%; text-align:center">
 						<a href={"https://www.github.com/" + frontmatter.mod.repo}>
 							<i class="fa-brands fa-github"></i> Source Code
 						</a>
 					</span>
 
-					<span class="ps-2 pe-2">
+					<span class="ps-2 pe-2" style="min-width: 33%; text-align:center">
 						<a href={"https://www.github.com/" + frontmatter.mod.repo + "/releases/latest/download/" + frontmatter.mod.download}>
 							<i class="fa fa-download"></i> Download zip ({frontmatter.mod.latest_version})
 						</a>