Fix mobile layout issues (#7)

ScottMorris · web-flow · commit e6010d51d176 · 2026-02-18T11:17:35.000-05:00
**Summary**
Fixes mobile layout issues across the homepage and blog, improving
spacing, readability, and navigation on small screens.

**Changes**
- Add a mobile header menu toggle with responsive sizing.
- Make work and lab layouts mobile-first single-column with adjusted
text sizes.
- Tighten section spacing in hero, philosophy, work, lab, and footer.
- Refresh README projects plus configuration, RSS, and testing notes.
diff --git a/README.md b/README.md
@@ -6,9 +6,12 @@ We build software that feels more human without becoming less powerful.
 
 ## Projects
 
+- **[Threshold](https://github.com/liminal-hq/threshold)** – Flexible time window alarms for life-first scheduling.
 - **[Liminal Notes](https://github.com/ScottMorris/liminal-notes)** – Local-first, Markdown-based note-taking.
 - **[City Sim 1000](https://github.com/ScottMorris/city-sim-1000)** – Low-poly city simulation in the browser.
 - **[SMDU](https://github.com/ScottMorris/smdu)** – Terminal disk usage analyser.
+- **[Coherence Chat Exporter](https://github.com/liminal-hq/coherence-chat-exporter)** – CLI for archiving AI conversations into organised, tagged Markdown across providers.
+- **[Keep Note Converter](https://github.com/ScottMorris/keep-note-converter)** – Installable Next.js PWA that converts pasted rich text into Google Keep-compatible markup.
 
 ## Site Architecture
 
@@ -18,6 +21,8 @@ This portfolio is built with modern web standards:
 - **React 19**
 - **Tailwind CSS 4**
 - **TypeScript**
+- **Metadata routes** for `sitemap.xml` and `robots.txt`
+- **RSS feed** generated during build
 
 ## Development
 
@@ -28,6 +33,13 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) to view locally.
 
+## Configuration
+
+Environment variables used by the site:
+
+- `NEXT_PUBLIC_SITE_URL` or `SITE_URL` for metadata, sitemap, robots, and RSS URLs (defaults to `https://liminalhq.ca`).
+- `PAGES_BASE_PATH` for GitHub Pages deployments when the site is served from a subpath.
+
 ## Deployment
 
 Automated via **GitHub Actions** to GitHub Pages. Pushing to `main` builds and deploys the `out/` directory.
@@ -56,4 +68,10 @@ Draft behaviour:
 RSS feed:
 - Generated at build time to `public/blog/feed.xml`.
 - Published URL: `/blog/feed.xml`.
-- Override site URL by setting `SITE_URL` during build (default: `https://liminalhq.ca`).
+- Override site URL by setting `SITE_URL` or `NEXT_PUBLIC_SITE_URL` during build (default: `https://liminalhq.ca`).
+
+## Testing
+
+```bash
+pnpm test
+```
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -86,6 +86,16 @@ h3 {
   padding: 6rem 0;
 }
 
+@media (max-width: 768px) {
+  .container-custom {
+    padding: 0 1.25rem;
+  }
+
+  .section {
+    padding: 4rem 0;
+  }
+}
+
 .blog-prose {
   color: var(--text-color);
   font-size: 1.05rem;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Footer() {
   return (
-    <footer className="py-20 mt-20 border-t border-[rgba(255,255,255,0.14)] text-[var(--text-muted)] text-sm flex justify-between items-center">
+    <footer className="mt-14 flex flex-col gap-6 border-t border-[rgba(255,255,255,0.14)] py-10 text-sm text-[var(--text-muted)] md:flex-row md:items-center md:justify-between md:py-16">
       <div>
         <span className="mb-2 flex items-center gap-2 font-bold tracking-[0.05em] text-white [font-feature-settings:smcp] [font-variant:small-caps]">
           <Image src="/liminalhq-mark-v1.svg" alt="" width={20} height={20} className="h-5 w-5" />
@@ -11,7 +11,7 @@ export default function Footer() {
         <p>Designed & Coded in Canada 🍁</p>
       </div>
 
-      <div className="text-right">
+      <div className="text-left md:text-right">
         <p>&copy; 2026 Liminal HQ</p>
         <p className="mt-2">
           <a href="https://github.com/liminal-hq" className="hover:text-white transition-colors">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -7,40 +10,97 @@ const navItems = [
   { label: "Philosophy", href: "/#philosophy" },
   { label: "Lab", href: "/#lab" },
   { label: "Blog", href: "/blog" },
+  { label: "Contact", href: "mailto:contact@liminalhq.ca", external: true },
 ];
 
 export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen((current) => !current);
+  };
+
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+  };
+
   return (
-    <header className="flex items-center justify-between py-8">
-      <Link
-        href="/"
-        className="flex items-center gap-3 text-xl font-bold tracking-[0.08em] text-white [font-feature-settings:smcp] [font-variant:small-caps]"
-      >
-        <Image src="/liminalhq-mark-v1.svg" alt="" width={28} height={28} className="h-7 w-7" />
-        liminal hq
-      </Link>
-      <nav>
-        <ul className="flex list-none gap-10">
-          {navItems.map((item) => (
-            <li key={item.label}>
-              <Link
-                href={item.href}
-                className="relative text-[0.95rem] font-medium text-[#9ca3af] transition-all duration-200 hover:text-white hover:shadow-[0_0_8px_rgba(255,255,255,0.5)]"
-              >
-                {item.label}
-              </Link>
-            </li>
-          ))}
-          <li>
-            <Link
-              href="mailto:contact@liminalhq.ca"
-              className="relative text-[0.95rem] font-medium text-[#9ca3af] transition-all duration-200 hover:text-white hover:shadow-[0_0_8px_rgba(255,255,255,0.5)]"
-            >
-              Contact
-            </Link>
-          </li>
-        </ul>
-      </nav>
+    <header className="py-6 md:py-8">
+      <div className="flex items-center justify-between">
+        <Link
+          href="/"
+          className="flex items-center gap-3 text-lg font-bold tracking-[0.08em] text-white [font-feature-settings:smcp] [font-variant:small-caps] md:text-xl"
+          onClick={closeMenu}
+        >
+          <Image src="/liminalhq-mark-v1.svg" alt="" width={28} height={28} className="h-7 w-7" />
+          liminal hq
+        </Link>
+
+        <button
+          type="button"
+          className="inline-flex items-center gap-2 rounded-full border border-[rgba(255,255,255,0.2)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:border-[rgba(255,255,255,0.4)] md:hidden"
+          aria-expanded={isMenuOpen}
+          aria-controls="site-nav"
+          onClick={toggleMenu}
+        >
+          {isMenuOpen ? "Close" : "Menu"}
+        </button>
+
+        <nav className="hidden md:block">
+          <ul className="flex list-none gap-8">
+            {navItems.map((item) => (
+              <li key={item.label}>
+                {item.external ? (
+                  <a
+                    href={item.href}
+                    className="relative text-[0.95rem] font-medium text-[#9ca3af] transition-all duration-200 hover:text-white hover:shadow-[0_0_8px_rgba(255,255,255,0.5)]"
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <Link
+                    href={item.href}
+                    className="relative text-[0.95rem] font-medium text-[#9ca3af] transition-all duration-200 hover:text-white hover:shadow-[0_0_8px_rgba(255,255,255,0.5)]"
+                  >
+                    {item.label}
+                  </Link>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+
+      {isMenuOpen ? (
+        <nav
+          id="site-nav"
+          className="mt-5 rounded-2xl border border-[rgba(255,255,255,0.12)] bg-[rgba(12,12,18,0.9)] p-5 shadow-[0_20px_50px_rgba(0,0,0,0.35)] backdrop-blur md:hidden"
+        >
+          <ul className="flex list-none flex-col gap-4">
+            {navItems.map((item) => (
+              <li key={item.label}>
+                {item.external ? (
+                  <a
+                    href={item.href}
+                    className="text-base font-medium text-[#e2e8f0] transition-colors hover:text-white"
+                    onClick={closeMenu}
+                  >
+                    {item.label}
+                  </a>
+                ) : (
+                  <Link
+                    href={item.href}
+                    className="text-base font-medium text-[#e2e8f0] transition-colors hover:text-white"
+                    onClick={closeMenu}
+                  >
+                    {item.label}
+                  </Link>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ) : null}
     </header>
   );
 }
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
@@ -2,17 +2,20 @@ import styles from "./HeroSection.module.css";
 
 export default function HeroSection() {
   return (
-    <section className="py-16 pb-24">
+    <section className="py-10 pb-16 md:py-14 md:pb-20">
       <div className={styles.heroBanner}>
-        <div className="relative z-10 px-16 py-12 flex flex-col justify-center">
+        <div className="relative z-10 flex flex-col justify-center px-8 py-10 md:px-16 md:py-12">
           <span className={styles.taglineBadge}>
             EST. 2025 • Kitchener, ON
           </span>
           <h1 className={styles.heroTitle}>
-            Digital tools for the<br />
+            Digital tools for the{" "}
+            <span className="hidden md:inline">
+              <br />
+            </span>
             spaces in between.
           </h1>
-          <p className="text-lg max-w-[90%] text-[var(--text-muted)] mb-8 font-light">
+          <p className="mb-8 max-w-[90%] text-base font-light text-[var(--text-muted)] md:text-lg">
             We are <strong>Liminal HQ</strong>, an independent software studio building local-first applications.
             We prioritize user agency, privacy, and calm computing.
           </p>
diff --git a/src/components/LabSection.tsx b/src/components/LabSection.tsx
@@ -14,23 +14,26 @@ export default async function LabSection() {
   const latestPosts = posts.slice(0, 3);
 
   return (
-    <section id="lab" className="py-24">
-      <h2 className="mb-3 text-[2rem] font-semibold text-white">From the Blog</h2>
+    <section id="lab" className="py-16 md:py-20">
+      <h2 className="mb-3 text-[1.75rem] font-semibold text-white md:text-[2rem]">From the Blog</h2>
       <p className="mb-8 max-w-3xl text-[var(--text-muted)]">
         Recent writing on local-first software, tooling, and design decisions from current studio work.
       </p>
       <ul className="list-none">
         {latestPosts.map((post, index) => (
           <li
             key={post.slug}
-            className={`grid grid-cols-[120px_1fr] items-center gap-4 border-b border-[rgba(255,255,255,0.1)] py-8 transition-all duration-300 hover:border-l-[3px] hover:border-l-[#22d3ee] hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.03),transparent)] hover:pl-4 ${
+            className={`grid grid-cols-1 items-start gap-2 border-b border-[rgba(255,255,255,0.1)] py-6 transition-all duration-300 md:grid-cols-[120px_1fr] md:items-center md:gap-4 md:py-8 md:hover:border-l-[3px] md:hover:border-l-[#22d3ee] md:hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.03),transparent)] md:hover:pl-4 ${
               index === 0 ? "border-t" : ""
             }`}
           >
-            <span className="font-[var(--font-space-grotesk)] text-[0.9rem] font-semibold text-[#22d3ee]">
+            <span className="font-[var(--font-space-grotesk)] text-[0.8rem] font-semibold text-[#22d3ee] md:text-[0.9rem]">
               {formatLabDate(post.date)}
             </span>
-            <Link href={`/blog/${post.slug}`} className="text-[1.25rem] font-medium text-[#e0e0e0] hover:text-white">
+            <Link
+              href={`/blog/${post.slug}`}
+              className="text-[1.1rem] font-medium text-[#e0e0e0] hover:text-white md:text-[1.25rem]"
+            >
               {post.title}
             </Link>
           </li>
diff --git a/src/components/PhilosophySection.tsx b/src/components/PhilosophySection.tsx
@@ -1,15 +1,15 @@
 export default function PhilosophySection() {
   return (
-    <section id="philosophy" className="py-24">
+    <section id="philosophy" className="py-16 md:py-20">
       <div className="mb-8">
-        <h2 className="mb-3 text-[2rem] font-semibold text-white">Our Approach</h2>
+        <h2 className="mb-3 text-[1.75rem] font-semibold text-white md:text-[2rem]">Our Approach</h2>
         <p className="max-w-3xl text-[var(--text-muted)]">
           We build software that feels more human without becoming less powerful. That means every product decision is
           evaluated against clarity, agency, and long-term ownership.
         </p>
       </div>
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-8 mt-4">
-        <div className="bg-[rgba(20,20,25,0.4)] border border-[rgba(255,255,255,0.1)] p-10 rounded-2xl transition-all duration-300 backdrop-blur-[10px] hover:border-[#a78bfa] hover:-translate-y-[5px] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)]">
+      <div className="mt-4 grid grid-cols-1 gap-6 md:grid-cols-[repeat(auto-fit,minmax(260px,1fr))] md:gap-8">
+        <div className="rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[rgba(20,20,25,0.4)] p-8 backdrop-blur-[10px] transition-all duration-300 hover:-translate-y-[5px] hover:border-[#a78bfa] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)] md:p-10">
           <h3 className="text-xl mb-4 text-white flex items-center gap-3">
             <div className="w-10 h-10 flex items-center justify-center rounded-[10px] text-[1.2rem] text-[#ffaa40] bg-[rgba(255,170,64,0.1)]">
               💾
@@ -21,7 +21,7 @@ export default function PhilosophySection() {
             default.
           </p>
         </div>
-        <div className="bg-[rgba(20,20,25,0.4)] border border-[rgba(255,255,255,0.1)] p-10 rounded-2xl transition-all duration-300 backdrop-blur-[10px] hover:border-[#a78bfa] hover:-translate-y-[5px] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)]">
+        <div className="rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[rgba(20,20,25,0.4)] p-8 backdrop-blur-[10px] transition-all duration-300 hover:-translate-y-[5px] hover:border-[#a78bfa] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)] md:p-10">
           <h3 className="text-xl mb-4 text-white flex items-center gap-3">
             <div className="w-10 h-10 flex items-center justify-center rounded-[10px] text-[1.2rem] text-[#f43f5e] bg-[rgba(244,63,94,0.1)]">
               🛡️
@@ -32,7 +32,7 @@ export default function PhilosophySection() {
             You should be able to leave any tool without losing your work. We prefer open formats and portable data.
           </p>
         </div>
-        <div className="bg-[rgba(20,20,25,0.4)] border border-[rgba(255,255,255,0.1)] p-10 rounded-2xl transition-all duration-300 backdrop-blur-[10px] hover:border-[#a78bfa] hover:-translate-y-[5px] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)]">
+        <div className="rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[rgba(20,20,25,0.4)] p-8 backdrop-blur-[10px] transition-all duration-300 hover:-translate-y-[5px] hover:border-[#a78bfa] hover:bg-[rgba(255,255,255,0.05)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.3)] md:p-10">
           <h3 className="text-xl mb-4 text-white flex items-center gap-3">
             <div className="w-10 h-10 flex items-center justify-center rounded-[10px] text-[1.2rem] text-[#22d3ee] bg-[rgba(34,211,238,0.1)]">
               🧶
diff --git a/src/components/WorkSection.tsx b/src/components/WorkSection.tsx
@@ -14,8 +14,8 @@ export default function WorkSection() {
   const flagshipPrimaryUrl = getPrimaryProjectUrl(flagship);
 
   return (
-    <section id="work" className="py-24">
-      <h2 className="mb-8 text-[2rem] font-semibold text-white">Selected Work</h2>
+    <section id="work" className="py-16 md:py-20">
+      <h2 className="mb-8 text-[1.75rem] font-semibold text-white md:text-[2rem]">Selected Work</h2>
 
       <article className={`${styles.projectCard} group relative cursor-pointer`}>
         <a
@@ -33,8 +33,10 @@ export default function WorkSection() {
           >
             {flagship.label}
           </span>
-          <h3 className="mb-4 text-[2.5rem] text-white">{flagship.title}</h3>
-          <p className="mb-10 max-w-[650px] text-[1.15rem] text-[var(--text-muted)]">{flagship.description}</p>
+          <h3 className="mb-4 text-[2rem] text-white md:text-[2.5rem]">{flagship.title}</h3>
+          <p className="mb-10 max-w-[650px] text-base text-[var(--text-muted)] md:text-[1.15rem]">
+            {flagship.description}
+          </p>
 
           <div className="flex flex-wrap items-center gap-5">
             <span className="inline-flex items-center gap-[10px] rounded-[30px] bg-[rgba(255,255,255,0.1)] px-6 py-3 font-semibold text-white transition-all duration-300 group-hover:translate-x-[5px] group-hover:bg-[var(--accent-orange)] group-hover:text-black">
@@ -54,7 +56,7 @@ export default function WorkSection() {
         </div>
       </article>
 
-      <div className="mb-12 grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-8">
+      <div className="mb-12 grid grid-cols-1 gap-6 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))] md:gap-8">
         {supportingSelectedWork.map((project) => {
           const accent = getProjectAccentStyles(project.accentColour);
           const primaryUrl = getPrimaryProjectUrl(project);
@@ -80,8 +82,8 @@ export default function WorkSection() {
                 >
                   {project.label}
                 </span>
-                <h3 className="mb-4 mt-2 text-[2rem] text-white">{project.title}</h3>
-                <p className="mb-6 text-[var(--text-muted)]">{project.description}</p>
+                <h3 className="mb-4 mt-2 text-[1.6rem] text-white md:text-[2rem]">{project.title}</h3>
+                <p className="mb-6 text-sm text-[var(--text-muted)] md:text-base">{project.description}</p>
 
                 <div className="flex items-center gap-4">
                   <span className="border-b pb-[2px] text-[0.9rem] text-white" style={{ borderColor: project.accentColour }}>
@@ -104,8 +106,8 @@ export default function WorkSection() {
         })}
       </div>
 
-      <h3 className="mb-6 text-[1.35rem] font-semibold text-white">Experiments &amp; Tools</h3>
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-8">
+      <h3 className="mb-6 text-[1.15rem] font-semibold text-white md:text-[1.35rem]">Experiments &amp; Tools</h3>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))] md:gap-8">
         {experiments.map((project) => {
           const accent = getProjectAccentStyles(project.accentColour);
           const primaryUrl = getPrimaryProjectUrl(project);
@@ -131,8 +133,8 @@ export default function WorkSection() {
                 >
                   {project.label}
                 </span>
-                <h4 className="mb-4 mt-2 text-[2rem] text-white">{project.title}</h4>
-                <p className="mb-6 text-[var(--text-muted)]">{project.description}</p>
+                <h4 className="mb-4 mt-2 text-[1.6rem] text-white md:text-[2rem]">{project.title}</h4>
+                <p className="mb-6 text-sm text-[var(--text-muted)] md:text-base">{project.description}</p>
                 <div className="flex items-center gap-4">
                   <span className="border-b pb-[2px] text-[0.9rem] text-white" style={{ borderColor: project.accentColour }}>
                     {project.siteUrl ? "Visit Site" : "View Source"}
