Hide sidebar on home and center category grid

hdyc-svelte/src/app.css

@@ -448,10 +448,30 @@ a:hover {
 
 /* ─── Category Grid ──────────────────────────────────────── */
 
+.category-section {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2.5rem);
+}
+.category-section__inner {
+  width: min(1200px, 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+.category-section .section-heading {
+  text-align: center;
+  margin: 0;
+  width: 100%;
+}
 .category-grid {
+  width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
+  gap: clamp(0.75rem, 1.3vw, 1.25rem);
+  justify-items: stretch;
 }
 
 /* ─── Calculator List (category page) ────────────────────── */
@@ -589,8 +609,14 @@ a:hover {
   .hero h1 {
     font-size: 1.8rem;
   }
+  .category-section {
+    padding: 1.25rem 1rem 2rem;
+  }
+  .category-section__inner {
+    gap: 1rem;
+  }
   .category-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
   .stats-row {
     gap: 1.5rem;

hdyc-svelte/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { onMount } from 'svelte';
+  import { page } from '$app/stores';
 
   import '../app.css';
   import Sidebar from '$lib/components/Sidebar.svelte';
@@ -254,6 +255,10 @@
   let sidebarOpen = false;
   let theme: ThemeMode = 'dark';
   let selectedPaletteIndex = 0;
+  $: isHomepage = $page.url.pathname === '/';
+  $: if (isHomepage && sidebarOpen) {
+    sidebarOpen = false;
+  }
 
   const applyPalette = (index: number, persist = false) => {
     const normalizedIndex = Math.max(0, Math.min(index, palettes.length - 1));
@@ -337,9 +342,11 @@
 
 <header class="site-header">
   <div style="display:flex;align-items:center;gap:0.75rem;">
+    {#if !isHomepage}
       <button class="hamburger" on:click={() => (sidebarOpen = !sidebarOpen)} aria-label="Toggle menu">
         ☰
       </button>
+    {/if}
     <a href="/" class="site-logo">
       <span>How Do You</span><span class="logo-accent">Convert</span><span style="opacity:0.4;font-weight:400">.com</span>
     </a>
@@ -350,7 +357,9 @@
 </header>
 
 <div class="site-body">
+  {#if !isHomepage}
     <Sidebar bind:open={sidebarOpen} />
+  {/if}
   <main class="main-content">
     <slot />
   </main>

hdyc-svelte/src/routes/+page.svelte

@@ -32,9 +32,13 @@
   </div>
 </div>
 
-<h2 class="section-heading">Browse by Category</h2>
+<section class="category-section">
-<div class="category-grid">
+  <div class="category-section__inner">
+    <h2 class="section-heading">Browse by Category</h2>
+    <div class="category-grid">
       {#each cats as cat}
         <CategoryCard icon={cat.icon} label={cat.label} href="/category/{cat.key}" />
       {/each}
-</div>
+    </div>
+  </div>
+</section>