Make home, legal, and blog post cards up to 4 wide and fix quick link card gutters

Fixes #162

Author: UnsignedArduino

src/components/Blog/Post/Preview.tsx

@@ -24,7 +24,7 @@ export default function BlogPostPreviewRenderer({
   const [showCardActions, setShowCardActions] = React.useState(false);
 
   return (
-    <>
+    <div className="col h-100">
       <motion.div
         // initial={{ x: 300, opacity: 0 }}
         // animate={{ x: 0, opacity: 1 }}
@@ -36,7 +36,7 @@ export default function BlogPostPreviewRenderer({
           stiffness: 260,
           damping: 20,
         }}
-        className="card mb-2"
+        className="card h-100"
       >
         {preview.heroImage && (
           // eslint-disable-next-line @next/next/no-img-element
@@ -95,6 +95,6 @@ export default function BlogPostPreviewRenderer({
           </Link>
         </div>
       </motion.div>
-    </>
+    </div>
   );
 }

src/components/QuickLinks/QuickLinkCards.tsx

@@ -6,7 +6,7 @@ import { CARD_VARIANTS } from "@/animations/card";
 
 export default function QuickLinkCards({
   quickLinks,
-  divColumnClasses = "row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4",
+  divColumnClasses = "row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 px-1 pt-1 pb-3",
 }: {
   quickLinks: QuickLink[];
   divColumnClasses?: string;
@@ -28,7 +28,6 @@ export default function QuickLinkCards({
                 stiffness: 260,
                 damping: 20,
               }}
-              className="p-3"
               key={`help-card-${index}`}
             >
               <div className="col h-100" key={`help-card-${index}`}>

src/pages/blog/all.tsx

@@ -33,7 +33,7 @@ export default function AllBlogPosts(props: BlogProps) {
       <h1>All blog posts</h1>
       <p>Here is a list of all blog posts on Awesome Arcade. Enjoy reading!</p>
       {
-        <div className="p-2">
+        <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 px-1 pt-1 pb-3">
           {props.blogPostPreviews.map((preview, index) => {
             return (
               <motion.div

src/pages/blog/index.tsx

@@ -63,7 +63,7 @@ export default function BlogPage(props: BlogProps) {
       </p>
       <h2>Latest blog posts</h2>
       {
-        <div className="p-2">
+        <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 px-1 pt-1 pb-3">
           {props.blogPostPreviews.map((preview, index) => {
             return (
               <motion.div
@@ -131,7 +131,7 @@ export async function getStaticProps(): Promise<{
 
   await fs.writeFile("./public/rss.xml", await generateRSSFeed(previews));
 
-  previews.splice(5);
+  previews.splice(4);
 
   return {
     props: {

src/pages/index.tsx

@@ -53,10 +53,7 @@ export function Home({ appProps }: HomeProps): React.ReactNode {
         This is a website of awesome MakeCode Arcade extensions and tools that I
         find super useful (or just plain cool) in my projects.
       </p>
-      <QuickLinkCards
-        quickLinks={quickLinks}
-        divColumnClasses="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2"
-      />
+      <QuickLinkCards quickLinks={quickLinks} />
       <p>
         Please note that this website is not developed, affiliated, or endorsed
         by Microsoft, the owner of MakeCode Arcade.

src/pages/legal/legal.tsx

@@ -66,10 +66,7 @@ export function Legal({ appProps }: { appProps: AppProps }): React.ReactNode {
         </a>
         .
       </p>
-      <QuickLinkCards
-        quickLinks={legalLinks}
-        divColumnClasses="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-2"
-      />
+      <QuickLinkCards quickLinks={legalLinks} />
       <p>
         If you have any problems, you can join me on{" "}
         <a