feat: automatically enable low cpu mode on mobiles

- linked /root discord

src/App.tsx

@@ -100,6 +100,21 @@ export default function App() {
     return () => window.clearTimeout(t);
   }, [showThemePillTooltip]);
 
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 639px)');
+
+    const enforceCpuMode = () => {
+      setCpuModeEnabled(mediaQuery.matches);
+    };
+
+    enforceCpuMode();
+    mediaQuery.addEventListener('change', enforceCpuMode);
+
+    return () => {
+      mediaQuery.removeEventListener('change', enforceCpuMode);
+    };
+  }, []);
+
   return (
     <div className="min-h-screen bg-(--bg-base) text-(--text-main) font-mono selection:bg-(--color-accent) selection:text-(--bg-base) relative overflow-x-hidden">
 

src/components/HeroTitle.tsx

@@ -4,7 +4,7 @@ export function HeroTitle() {
             I overdesign <span className="accent-text relative inline-block">
                 controllable systems
                 <svg className="absolute w-full h-3 -bottom-1 left-0 accent-text" viewBox="0 0 100 20" preserveAspectRatio="none" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M2,15 Q50,-5 98,15" /></svg>
-            </span>,<br /> deconstruct black boxes, and build tools.
+            </span><br /> deconstruct black boxes and build tools.
         </h1>
     );
 }

src/components/NavigationBar.tsx

@@ -12,17 +12,23 @@ export function NavigationBar({ cpuModeEnabled, onCpuModeToggle }: NavigationBar
                 <Terminal className="w-5 h-5 accent-text transform -rotate-12 group-hover:rotate-12 transition-transform" />
                 <span className="font-sketch text-2xl text-(--text-main) tracking-wide">aditya_gupta <span className="text-(--text-dim)">//</span> sortedcord</span>
 
-                <div className="absolute -top-6 -right-16 font-sketch text-sm accent-text rotate-12 flex items-center gap-1 opacity-80">
+                <a
+                    href="https://discord.gg/mDvfbSTQjJ"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="absolute -top-10 left-80 -translate-y-2 z-50 font-sketch text-sm accent-text rotate-12 flex items-center gap-1 opacity-80 hover:text-(--text-main) transition-colors sm:absolute sm:-top-6 sm:-right-16 sm:mt-0 sm:translate-y-0"
+                    aria-label="Open root link"
+                >
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-x-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
                     <span>root</span>
-                </div>
+                </a>
             </div>
 
             <div className="flex items-center gap-6 flex-wrap">
                 <button
                     type="button"
                     onClick={onCpuModeToggle}
-                    className="flex items-center gap-2 text-(--text-muted) hover:text-(--text-main) transition-colors"
+                    className="hidden sm:flex items-center gap-2 text-(--text-muted) hover:text-(--text-main) transition-colors"
                     aria-pressed={cpuModeEnabled}
                     aria-label="Toggle low CPU mode"
                 >

src/components/ThemeMapperModal.tsx

@@ -63,7 +63,7 @@ export function ThemeMapperModal({
                             <span className="text-(--text-dim)">{viewerIp ?? 'unknown'}</span>
                         </div>
                         <div className="flex flex-col items-center gap-1">
-                            <span className="text-[10px] uppercase tracking-wide text-(--text-dim)">(hashing function)</span>
+                            <span className="text-[10px] uppercase tracking-wide text-(--text-dim)">fnv1a function</span>
                             <span className="arrow-trail-text" aria-hidden="true">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span>
                         </div>
                         <div className="flex flex-col gap-2">
@@ -71,7 +71,7 @@ export function ThemeMapperModal({
                             <span className="text-(--text-dim)">{deterministicIndex ?? '—'}</span>
                         </div>
                         <div className="flex flex-col items-center gap-1">
-                            <span className="text-[10px] uppercase tracking-wide text-(--text-dim)">(theme select)</span>
+                            <span className="text-[10px] uppercase tracking-wide text-(--text-dim)">theme select</span>
                             <span className="arrow-trail-text" aria-hidden="true">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span>
                         </div>
                         <div className="flex flex-col gap-2">