🔧 Mobile fixes

Author: EightBitByte

README.md

@@ -4,13 +4,6 @@ Rebuilding [my website](https://jacobmoy.com) in Next.js to do some more
 cool stuff!
 
 ### TO-DO
-#### Main
-- [ ] Add mobile responsiveness to:
-  - [ ] Blog list
-    - [ ] Design new mobile-friendly tag filter
-  - [ ] Blog post
-- [ ] Move theme and achievements to a hamburger menu button in toolbar for mobile 
-- [X] Add CI/CD for staging
 
 #### Strech/Misc.
 - [ ] Add hobbies/niche projects
@@ -21,7 +14,4 @@ cool stuff!
   - [ ] SFX?
 
 ### KNOWN BUGS
-- [ ] Footnote hyperlinks aren't working (thanks remark-gfm)
-- [ ] Achievements hide content in the drawer and are unclickable in drawer
-- [ ] The light mode theme box does not appear correctly in dark mode drawer
-- [ ] Sometimes secret achievements count towards "Completionist" achievement
+- [ ] Footnote hyperlinks aren't working (thanks remark-gfm)

src/app/globals.css

@@ -97,7 +97,7 @@ body {
   scroll-behavior: smooth;
 }
 
-:root {
+:root, .light {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
@@ -132,13 +132,13 @@ body {
   --sidebar-ring: oklch(0.705 0.015 286.067);
   --divider: #3f3f3f;
 
-  --rarity-common: var(--color-zinc-700);
-  --rarity-uncommon: var(--color-green-700);
-  --rarity-rare: var(--color-sky-700);
-  --rarity-epic: var(--color-purple-700);
-  --rarity-legendary: var(--color-yellow-600);
-  --flavor: var(--color-yellow-600);
-  --selected: var(--color-green-600)
+  --rarity-common: var(--color-zinc-400);
+  --rarity-uncommon: var(--color-green-400);
+  --rarity-rare: var(--color-sky-400);
+  --rarity-epic: var(--color-purple-400);
+  --rarity-legendary: var(--color-yellow-500);
+  --flavor: var(--color-amber-600);
+  --selected: var(--color-green-500)
 }
 
 .dark {

src/app/quick-links/page.tsx

@@ -119,8 +119,8 @@ const links = [
 
 export default function QuickLinks() {
   return (
-    <div className="flex flex-col flex-wrap w-full items-center justify-evenly gap-12
-                    md:flex-row md:w-4xl md:mx-auto md:items-start">
+    <div className="flex flex-col items-center w-full gap-12 pb-12
+                    md:flex-row md:w-4xl md:mx-auto md:items-start md:pb-0">
       {links.map((category) => (
         <div key={category.title} className="grid grid-cols-1 gap-2 md:p-8 h-fit w-fit">
           <div className="flex flex-row gap-4 items-center justify-center border-b-2 pb-1

src/components/ui/achievement.tsx

@@ -29,7 +29,7 @@ export default function Achievement({
 
   return (
     <div className="w-full">
-      <div className="grid grid-cols-[1fr_7fr] w-full">
+      <div className="grid grid-cols-[1fr_7fr] gap-2 w-full">
         <div className={cn(
           "w-10 h-10 md:w-12 md:h-12 rounded-md flex items-center justify-center",
           !unlocked && "",

src/components/ui/blog-entry.tsx

@@ -20,7 +20,7 @@ export default function BlogEntry({
   createdAt,
 }: BlogEntryProps) {
   return (
-    <a className="w-sm h-100 flex flex-col gap-2" href={`blog/posts/${slug}`}>
+    <a className="md:w-sm h-100 flex flex-col gap-2" href={`blog/posts/${slug}`}>
       <AspectRatio ratio={5 / 3}>
         <Image
           src={prevImgSrc}

src/components/ui/blog-list.tsx

@@ -4,7 +4,6 @@ import { useMemo, useState } from "react";
 import BlogEntry from "@/components/ui/blog-entry";
 import FilterList from "@/components/ui/filter-list";
 import type { FilterCategory, PostData } from "@/utils/types";
-import { useIsMobile } from "@/hooks/useIsMobile";
 
 interface BlogListProps {
   posts: PostData[];
@@ -13,7 +12,6 @@ interface BlogListProps {
 
 export default function BlogList({ posts, categories }: BlogListProps) {
   const [activeFilters, setActiveFilters] = useState<string[]>([]);
-  const isMobile = useIsMobile();
 
   function handleFilterToggle(filter: string) {
     setActiveFilters((prevFilters) => {
@@ -47,8 +45,8 @@ export default function BlogList({ posts, categories }: BlogListProps) {
 
   return (
     <div className="flex flex-col items-center
-                    md:flex-row md:justify-center md:items-start md:gap-12">
-      <div className="grid grid-cols-1 place-items-center md:grid-cols-2 w-fit px-2 gap-12">
+                    md:flex-row md:justify-center md:items-start md:gap-12 md:px-0 px-4">
+      <div className="grid grid-cols-1 place-items-center md:grid-cols-2 w-fit gap-12">
         {filteredPosts.map((post) => (
           <BlogEntry
             key={post.slug}
@@ -61,15 +59,13 @@ export default function BlogList({ posts, categories }: BlogListProps) {
           />
         ))}
       </div>
-      {!isMobile && 
-        <div className="h-fit sticky top-24 w-0">
+        <div className="h-fit sticky top-24 w-0 md:block hidden">
           <FilterList
             categories={dynamicCategories}
             activeFilters={activeFilters}
             onFilterToggle={handleFilterToggle}
           />
         </div>
-      }
     </div>
   );
 }

src/components/ui/home-section.tsx

@@ -27,7 +27,12 @@ export default function HomeSection({
       >
         {title}
       </p>
-      <div className={`flex flex-col gap-${gap} pl-5.5`}>{children}</div>
+      <div 
+        className={`flex flex-col pl-5.5`}
+        style={{
+          gap: `${0.25 * gap}rem`
+        }}
+      >{children}</div>
     </div>
   );
 }

src/components/ui/mobile-settings-content.tsx

@@ -78,7 +78,7 @@ export function MobileAchievementContent() {
   const [fetchedAchievements, setFetchedAchievements] = useState<AchievementProps[]>([]);
   const [page, setPage] = useState<number>(0);
   const [maxPages, setMaxPages] = useState<number>(0);
-  const achievementsPerPage = 4;
+  const achievementsPerPage = 3;
 
   useEffect(() => {
     setFetchedAchievements(achievements.fetchAchievements());

src/components/ui/toolbar-button.tsx

@@ -14,7 +14,7 @@ export default function ToolbarButton({
   return (
     <StatLink
       href={toLink(title)}
-      className="underline-anim text-xl md:text-2xl font-bold tracking-normal"
+      className="underline-anim text-lg md:text-2xl font-bold tracking-normal"
     >
       {title}
     </StatLink>