Set font for mobile menu

Author: ysthakur

.husky/pre-commit

@@ -0,0 +1 @@
+npx astro check

package-lock.json

@@ -7,14 +7,16 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "prepare": "husky"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.2",
     "@astrojs/mdx": "^3.1.3",
     "@astrojs/rss": "^4.0.8",
     "@astrojs/sitemap": "^3.1.6",
     "astro": "^4.14.2",
+    "husky": "^9.1.6",
     "sass": "^1.77.8",
     "typescript": "^5.5.4"
   },

package.json

@@ -1,22 +1,17 @@
 ---
 import { PAGES } from "../../../consts";
 import { themes } from "../../../theme";
+import PageLink from "./PageLink.astro";
 ---
 
 <div id="mobile-header" class="header">
   <div id="mobile-nav-dropdown" class="dropdown">
     <i id="burger-menu-icon" class="fa-solid fa-bars"></i>
     <div class="dropdown-items">
       <nav class="dropdown-item">
-        {
-          PAGES.map(({ link, name, leetName }) => (
-            <a href={link} title={name}>
-              {leetName}
-            </a>
-          ))
-        }
+        {PAGES.map((pageProps) => <PageLink {...pageProps} />)}
       </nav>
-      <div class="dropdown-item">
+      <div id="theme-row" class="dropdown-item">
         <label for="theme">Theme:</label>
         <select name="theme" id="theme-select">
           {
@@ -36,12 +31,14 @@ import { themes } from "../../../theme";
   const dropdown = document.getElementById("mobile-nav-dropdown")!;
   const burgerIcon = document.getElementById("burger-menu-icon")!;
   burgerIcon.addEventListener("click", () =>
-    dropdown.classList.toggle("active")
+    dropdown.classList.toggle("active"),
   );
 
-  document.getElementById("theme-select")!.addEventListener("change", (e: any) => {
-    setTheme(e.currentTarget.value);
-  });
+  document
+    .getElementById("theme-select")!
+    .addEventListener("change", (e: any) => {
+      setTheme(e.currentTarget.value);
+    });
 </script>
 
 <style lang="scss">
@@ -60,14 +57,24 @@ import { themes } from "../../../theme";
 
   .dropdown-items {
     background-color: var(--bg-color);
+    padding-top: 15px;
+    background-clip: padding-box;
   }
 
   .dropdown-item {
     background-color: var(--bg-hoverable);
+    padding-left: 15px;
+    padding-right: 15px
   }
 
   nav {
     display: flex;
     flex-direction: column;
+    padding-top: 15px;
+    padding-bottom: 10px;
+  }
+
+  #theme-row {
+    padding-bottom: 15px;
   }
 </style>

src/components/header/mobile/Menu.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  link: string;
+  name: string;
+  leetName: string;
+}
+
+const { link, name, leetName } = Astro.props;
+---
+
+<a href={link} title={name}>
+  {leetName}
+</a>
+
+<style>
+  :global(a) {
+    font-family: "PixeloidMono";
+    text-decoration: none;
+  }
+</style>

src/components/header/mobile/PageLink.astro

@@ -7,13 +7,14 @@ import MobileHeader from "../components/header/mobile/Menu.astro";
 
 interface Props {
   title: string;
-  isBlogPost: boolean;
+  isBlogPost?: boolean;
   frontmatter?: { title: string };
-  description: string;
+  description?: string;
 }
 
-const { frontmatter, isBlogPost } = Astro.props;
-let { title } = Astro.props;
+const { frontmatter} = Astro.props;
+let { title, isBlogPost } = Astro.props;
+isBlogPost = isBlogPost ?? false;
 // If a title wasn't explicitly passed in, get it from the frontmatter
 if (!title && frontmatter && "title" in frontmatter) {
   title = frontmatter.title;

src/layouts/BaseLayout.astro

@@ -31,7 +31,7 @@ We are grateful to the Gemstone program for giving us the opportunity to work on
 
 <div style="display: flex; width: 100%; align-items: center; justify-content: space-around;">
   <Sponsor name="Gemstone Program" url="https://gemstone.umd.edu/">
-    <img loading="lazy" src="/img/gemstone.png" alt="Gemstone logo" />
+    <img loading="lazy" src="/img/gemstone.png" alt="Gemstone logo" style="background-color: white;" />
   </Sponsor>
   <Sponsor name="Honors College" url="https://honors.umd.edu/">
     <img loading="lazy" src="/img/umdhonors.png" alt="Honors College logo" />