feat: Implement desktop-only mode for the ASCII art generator and sidebar, update breakpoints to 1600px, and simplify the blog page layout with a new back link.

src/components/ControlPanel.astro

@@ -586,7 +586,7 @@ import {
         // --- State Management ---
         const checkMode = () => {
             // Match CSS breakpoint
-            const isMobile = window.innerWidth <= 1024;
+            const isMobile = window.innerWidth <= 1600;
 
             if (isMobile && !isMobileMode) {
                 // Entering Mobile
@@ -891,7 +891,7 @@ import {
     }
 
     /* --- MOBILE STYLES --- */
-    @media (max-width: 1024px) {
+    @media (max-width: 1600px) {
         .control-panel {
             padding: 0;
             position: fixed;

src/components/Sidebar.astro

@@ -1,12 +1,8 @@
 ---
-import { ChevronDown, Zap, FileText, Mail } from "@lucide/astro";
+import { Zap, FileText, Mail } from "@lucide/astro";
 ---
 
 <aside class="sidebar">
-    <div class="mobile-header">
-        <span class="mobile-brand">SYNTAXBULLET</span>
-        <ChevronDown class="mobile-toggle-icon" size={24} />
-    </div>
     <div class="sidebar-content">
         <div class="brand-group">
             <a href="/" class="brand-link">
@@ -25,7 +21,7 @@ import { ChevronDown, Zap, FileText, Mail } from "@lucide/astro";
         </p>
 
         <div class="sidebar-actions">
-            <a href="/" class="sidebar-link">
+            <a href="/" class="sidebar-link desktop-only">
                 <span class="icon"><Zap size={20} /></span> GENERATE
             </a>
             <a href="/blog" class="sidebar-link">
@@ -206,59 +202,31 @@ import { ChevronDown, Zap, FileText, Mail } from "@lucide/astro";
     }
 
     /* Responsive */
-    @media (max-width: 1024px) {
+    @media (max-width: 1600px) {
         .sidebar {
             width: 100%;
+            height: 100%;
             max-width: none;
             min-width: 0;
             border-right: none;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 0; /* Remove padding from container, move to toggle */
+            border-bottom: none;
+            padding: 0;
+            align-items: center; /* Center horizontally */
         }
 
         .mobile-header {
-            display: flex; /* Show on mobile */
-            justify-content: space-between;
-            align-items: center;
-            padding: 1.5rem;
-            cursor: pointer;
-            background: #000;
-        }
-
-        .mobile-brand {
-            font-size: 1.25rem;
-            font-weight: 900;
-            color: #fff;
-            letter-spacing: -0.5px;
-        }
-
-        .mobile-toggle-icon {
-            color: rgba(255, 255, 255, 0.5);
-            transition: transform 0.3s ease;
-        }
-
-        .sidebar.collapsed .mobile-toggle-icon {
-            transform: rotate(-90deg);
+            display: none;
         }
 
         .sidebar-content {
-            padding: 0 3rem 3rem 3rem; /* Adjust padding */
+            padding: 2rem;
             align-items: center;
             text-align: center;
-            overflow: hidden;
-            transition:
-                max-height 0.4s ease,
-                opacity 0.4s ease,
-                padding 0.4s ease;
-            max-height: 1000px; /* Arbitrary large height */
-            opacity: 1;
-        }
-
-        .sidebar.collapsed .sidebar-content {
-            max-height: 0;
-            opacity: 0;
-            padding: 0 3rem; /* Collapse padding */
-            pointer-events: none;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 100%;
         }
 
         .brand-subtitle,
@@ -267,28 +235,12 @@ import { ChevronDown, Zap, FileText, Mail } from "@lucide/astro";
             align-items: center;
         }
 
-        /* Hide the large title in the content on mobile since we have the header, 
-           or keep it? The user might want the full bio etc. 
-           Let's keep the content as is, but maybe hide the "SYNTAXBULLET" big text in content if it's redundant?
-           Actually, the design seems to desire the big brand text. I'll leave it. */
+        .desktop-only {
+            display: none !important;
+        }
     }
 </style>
 
 <script>
-    const sidebar = document.querySelector(".sidebar");
-    const toggleBtn = document.querySelector(".mobile-header");
-
-    if (sidebar && toggleBtn) {
-        // Default to collapsed on mobile initially?
-        // User didn't specify, but usually "collapsible" implies starting collapsed or having the ability.
-        // Let's start expanded or collapsed? "Make... collapsible".
-        // I'll default to collapsed to save space as requested "mobile friendly".
-        if (window.innerWidth <= 1024) {
-            sidebar.classList.add("collapsed");
-        }
-
-        toggleBtn.addEventListener("click", () => {
-            sidebar.classList.toggle("collapsed");
-        });
-    }
+    // No script needed for sidebar anymore as it is always visible and static
 </script>