fix(homepage-grid): Fixes issue with the homepage grid breaking on sm…

…aller browser window sizes. (#39) Closes #38 I rearranged the grid contents a little: ![1A90B946-6259-4DB3-B4B3-B48CF25C416C-28703-0000F825C533ED51](https://github.com/infinitered/ir-docs/assets/139261/455c8255-7463-46ae-a10a-54608f65d576)
infinitered · Feb 15, 2024 · 0794de1 · 0794de1
1 parent cc42a98
commit 0794de1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 41 deletions.
diff --git a/src/components/HomePageProjects/index.tsx b/src/components/HomePageProjects/index.tsx
@@ -1,42 +1,49 @@
-import Link from '@docusaurus/Link';
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from "@docusaurus/Link";
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 type FeatureItem = {
-    title: string; Svg: React.ComponentType<React.ComponentProps<'svg'>>; description: JSX.Element;
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  description: JSX.Element;
 };
 
-
-function Feature({title, description}: FeatureItem) {
-    return (<div className={clsx('col col--4')}>
-        <div className="text--center padding-horiz--md">
-            <h3>{title}</h3>
-            <p>{description}</p>
-            <p>Check it out</p>
-        </div>
-    </div>);
+function Feature({ title, description }: FeatureItem) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+        <p>Check it out</p>
+      </div>
+    </div>
+  );
 }
 
 export default function HomePageProjects() {
-    const context = useDocusaurusContext();
-    const packages = context.globalData['custom-homepage-plugin'].default['packages'];
-    console.log(packages.map(pkg => pkg.projectName))
+  const context = useDocusaurusContext();
+  const packages = context.globalData["custom-homepage-plugin"].default["packages"];
+  console.log(packages.map((pkg) => pkg.projectName));
 
-    return (<div className={"container"}><section className={styles.projects}>
-        {packages.map((item: any) => (<Link to={`/${item.projectName}`} key={item.projectName}>
+  return (
+    <div className={"container"}>
+      <section className={styles.projects}>
+        {packages.map((item: any) => (
+          <Link to={`/${item.projectName}`} key={item.projectName}>
             <div className={styles.project}>
-                <div className={styles.projectHead}>
-                    <h2 className={styles.projectHeadText}>{item.label}</h2>
-                </div>
-                <div className={styles.projectBody}>
-                    <p className={styles.projectText}>
-                        {item.description}
-                    </p>
-                    <p className={styles.callToAction}>Check it out</p>
-                </div>
+              <div className={styles.projectHead}>
+                <h2 className={styles.projectHeadText}>{item.label}</h2>
+              </div>
+              <div className={styles.projectBody}>
+                <p className={styles.projectText}>{item.description}</p>
+              </div>
+              <p className={styles.callToAction}>Check it out</p>
             </div>
-        </Link>))}
-    </section></div>);
+          </Link>
+        ))}
+      </section>
+    </div>
+  );
 }
diff --git a/src/components/HomePageProjects/styles.module.css b/src/components/HomePageProjects/styles.module.css
@@ -15,10 +15,11 @@
   box-sizing: border-box;
   background: var(--ifm-card-background-color);
   color: var(--ifm-color-gray-700);
-  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0 0 0 1px inset;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0 0.125em 0.5em,
+    rgba(255, 255, 255, 0.1) 0 0 0 1px inset;
   overflow: hidden;
   height: 14rem;
-  padding: 2rem;
+  padding: 1.5rem;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -27,7 +28,9 @@
 
 [data-theme="dark"] .projects .project {
   background: var(--ifm-card-background-color);
-  box-shadow: rgba(99,99,99, 0.07) 0 1px 2px, rgba(99,99,99, 0.07) 0 2px 4px, rgba(99,99,99, 0.07) 0 4px 8px, rgba(99,99,99, 0.07) 0 8px 16px, rgba(99,99,99, 0.07) 0 16px 32px, rgba(99,99,99, 0.07) 0 32px 64px;
+  box-shadow: rgba(99, 99, 99, 0.07) 0 1px 2px, rgba(99, 99, 99, 0.07) 0 2px 4px,
+    rgba(99, 99, 99, 0.07) 0 4px 8px, rgba(99, 99, 99, 0.07) 0 8px 16px,
+    rgba(99, 99, 99, 0.07) 0 16px 32px, rgba(99, 99, 99, 0.07) 0 32px 64px;
 }
 
 .projects a {
@@ -36,7 +39,6 @@
   text-decoration: none; /* No need to repeat this for every state */
 }
 
-
 .projects a:link {
   color: var(--ifm-color-gray-700);
 }
@@ -66,19 +68,18 @@
   text-align: left;
   flex-grow: 1;
   margin: 0;
-
 }
 
 [data-theme="dark"] .projectHeadText {
-  color: var(--ifm-color-white)
+  color: var(--ifm-color-white);
 }
 
 .projectText {
   width: 100%;
   text-align: left;
   font-size: 1rem;
   margin-top: 1rem;
-  height: 5rem;
+  flex-grow: 1;
 }
 
 .projectBody {
@@ -91,7 +92,7 @@
 }
 
 [data-theme="dark"] .projectBody {
-    color: var(--ifm-color-gray-100)
+  color: var(--ifm-color-gray-100);
 }
 
 .logo {
@@ -105,8 +106,7 @@
   min-width: 50px;
 }
 
-
 .callToAction {
   color: var(--ifm-color-primary);
-  flex-grow: 1;
+  margin-bottom: 0;
 }