From db46f7d6ba2dffa8cf41242483eb6518b40c9d68 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <mail@timmypidashev.dev>
Date: Mon, 6 Apr 2026 15:35:46 -0700
Subject: [PATCH] Rework mobile device detection

---
 src/components/animation-switcher/index.tsx | 2 +-
 src/components/background/index.tsx         | 4 ++--
 src/components/footer/index.tsx             | 2 +-
 src/components/header/index.tsx             | 2 +-
 src/components/mobile-nav/index.tsx         | 2 +-
 src/components/theme-switcher/index.tsx     | 2 +-
 src/layouts/content.astro                   | 2 +-
 src/layouts/index.astro                     | 2 +-
 src/layouts/resource.astro                  | 2 +-
 tailwind.config.cjs                         | 9 +++++++++
 10 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/animation-switcher/index.tsx b/src/components/animation-switcher/index.tsx
index 935883b..cc87035 100644
--- a/src/components/animation-switcher/index.tsx
+++ b/src/components/animation-switcher/index.tsx
@@ -41,7 +41,7 @@ export default function AnimationSwitcher() {
 
   return (
     <div
-      className="fixed bottom-4 left-4 z-[101] pointer-events-auto hidden lg:block"
+      className="fixed bottom-4 left-4 z-[101] pointer-events-auto hidden desk:block"
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
       onClick={handleClick}
diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx
index bbd9010..fa59c5b 100644
--- a/src/components/background/index.tsx
+++ b/src/components/background/index.tsx
@@ -333,11 +333,11 @@ const Background: React.FC<BackgroundProps> = ({
   const getContainerClasses = () => {
     if (isIndex) {
       return mobileOnly
-        ? "fixed inset-0 -z-10 lg:hidden"
+        ? "fixed inset-0 -z-10 desk:hidden"
         : "fixed inset-0 -z-10";
     }
 
-    const baseClasses = "fixed top-0 bottom-0 hidden lg:block -z-10";
+    const baseClasses = "fixed top-0 bottom-0 hidden desk:block -z-10";
     return position === "left"
       ? `${baseClasses} left-0`
       : `${baseClasses} right-0`;
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 01a24e0..2139d4f 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -12,7 +12,7 @@ export default function Footer({ fixed = false }) {
 
   return (
     <footer className={`w-full font-bold pointer-events-none ${fixed ? "fixed bottom-0 left-0 right-0" : ""}`}>
-      <div className="hidden lg:flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20 pointer-events-none [&_a]:pointer-events-auto">
+      <div className="hidden desk:flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20 pointer-events-none [&_a]:pointer-events-auto">
         {footerLinks}
       </div>
     </footer>
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index ca1c6d6..cb6fae5 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -92,7 +92,7 @@ export default function Header({ transparent = false }: { transparent?: boolean
       `}
     >
       <div className={`
-        w-full hidden lg:flex flex-row items-center justify-center
+        w-full hidden desk:flex flex-row items-center justify-center
         pointer-events-none
         ${!isIndexPage ? 'bg-background md:bg-transparent' : ''}
       `}>
diff --git a/src/components/mobile-nav/index.tsx b/src/components/mobile-nav/index.tsx
index 798e11e..7f2f2c0 100644
--- a/src/components/mobile-nav/index.tsx
+++ b/src/components/mobile-nav/index.tsx
@@ -54,7 +54,7 @@ export default function MobileNav({ transparent = false }: { transparent?: boole
   return (
     <>
       <nav
-        className={`fixed bottom-0 left-0 right-0 z-50 lg:hidden transition-transform duration-300 ${
+        className={`fixed bottom-0 left-0 right-0 z-50 desk:hidden transition-transform duration-300 ${
           visible ? "translate-y-0" : "translate-y-full"
         } ${
           transparent
diff --git a/src/components/theme-switcher/index.tsx b/src/components/theme-switcher/index.tsx
index 13006ca..d0e9812 100644
--- a/src/components/theme-switcher/index.tsx
+++ b/src/components/theme-switcher/index.tsx
@@ -89,7 +89,7 @@ export default function ThemeSwitcher() {
   return (
     <>
       <div
-        className="fixed bottom-4 right-4 z-[101] pointer-events-auto hidden lg:block"
+        className="fixed bottom-4 right-4 z-[101] pointer-events-auto hidden desk:block"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >
diff --git a/src/layouts/content.astro b/src/layouts/content.astro
index 916fd17..a7fd097 100644
--- a/src/layouts/content.astro
+++ b/src/layouts/content.astro
@@ -40,7 +40,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
       handleFocus={false}
     />
     <script is:inline>
-      if (window.innerWidth < 1024) {
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
         document.addEventListener('click', function(e) {
           var a = e.target.closest('a[href]');
           if (a && a.href && !a.target && a.origin === location.origin) {
diff --git a/src/layouts/index.astro b/src/layouts/index.astro
index b10daed..2b9be39 100644
--- a/src/layouts/index.astro
+++ b/src/layouts/index.astro
@@ -39,7 +39,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
     <link rel="sitemap" href="/sitemap-index.xml" />
     <ClientRouter />
     <script is:inline>
-      if (window.innerWidth < 1024) {
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
         document.addEventListener('click', function(e) {
           var a = e.target.closest('a[href]');
           if (a && a.href && !a.target && a.origin === location.origin) {
diff --git a/src/layouts/resource.astro b/src/layouts/resource.astro
index f51a0f0..17f77a4 100644
--- a/src/layouts/resource.astro
+++ b/src/layouts/resource.astro
@@ -40,7 +40,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
       handleFocus={false}
     />
     <script is:inline>
-      if (window.innerWidth < 1024) {
+      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
         document.addEventListener('click', function(e) {
           var a = e.target.closest('a[href]');
           if (a && a.href && !a.target && a.origin === location.origin) {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 1b48399..df29fd5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,15 @@
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+      // Desktop = wide screen + non-touch pointer. Used for mobile/desktop layout split.
+      desk: { raw: "(min-width: 1024px) and (hover: hover) and (pointer: fine)" },
+    },
     extend: {
       fontFamily: {
         "comic-code": ["Comic Code", "monospace"],