Rework mobile device detection

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}

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`;

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>

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' : ''}
       `}>

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

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)}
       >

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) {

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) {

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) {

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"],