separate repository grid styles/logic from the card component

components/page-header/Header.module.scss

@@ -20,6 +20,6 @@
 
 @media screen and (max-width: 800px) {
   .header {
-    padding: 0.5em 1.25em;
+    padding: 0.75em 1.25em;
   }
 }

components/page-header/Menu.module.scss

@@ -43,12 +43,16 @@
 }
 
 @media screen and (max-width: 800px) {
-  .item {
-    margin-left: 1.75em;
+  .menu {
+    max-width: 380px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
 
+  .item {
     .icon {
-      width: 1.75em;
-      height: 1.75em;
+      width: 1.8em;
+      height: 1.8em;
     }
 
     // hide text next to emojis on mobile
@@ -56,8 +60,4 @@
       display: none;
     }
   }
-
-  .theme_toggle {
-    margin-left: 1.4em;
-  }
 }

components/projects/RepoCard.module.scss

@@ -1,8 +1,6 @@
 .card {
-  flex-grow: 1;
-  width: 416px; // magic number
+  width: 100%;
   padding: 1em 1.2em;
-  margin: 0.6em;
   border: 1px solid;
   border-radius: 0.5em;
   font-size: 0.85em;
@@ -15,7 +13,7 @@
   }
 
   .description {
-    margin: 0.25em 0 0.75em;
+    margin: 0.4em 0 0.7em;
     line-height: 1.7;
   }
 

components/projects/RepoCard.tsx

@@ -1,7 +1,7 @@
 import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
 import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
 
-import styles from "./RepositoryCard.module.scss";
+import styles from "./RepoCard.module.scss";
 
 type Props = {
   name: string;
@@ -16,7 +16,7 @@ type Props = {
   updatedAt: string;
 };
 
-export default function RepositoryCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
+export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
   return (
     <div className={styles.card}>
       <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">

components/projects/RepositoryGrid.module.scss

@@ -1,12 +0,0 @@
-.grid {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.view_more {
-  text-align: center;
-  margin-bottom: 0;
-}

components/projects/RepositoryGrid.tsx

@@ -1,21 +0,0 @@
-import RepositoryCard from "./RepositoryCard";
-
-import styles from "./RepositoryGrid.module.scss";
-
-export default function RepositoryGrid({ repos }) {
-  return (
-    <>
-      <div className={styles.grid}>
-        {repos.map((repo) => (
-          <RepositoryCard key={repo.name} {...repo} />
-        ))}
-      </div>
-
-      <p className={styles.view_more}>
-        <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
-          View more on GitHub...
-        </a>
-      </p>
-    </>
-  );
-}