feat: refactor layout and styling for improved responsiveness and accessibility; add Footer component

public/global.css

@@ -66,9 +66,9 @@ body {
 }
 
 .container {
-  max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   background: var(--color-bg);
   color: var(--color-text);
 }
@@ -398,24 +398,7 @@ div.logo-image img {
   color: var(--color-text);
 }
 
-.preview-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background-color: var(--color-card);
-  color: var(--color-text);
-  margin-bottom: 1rem;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-}
 
-.preview-container img {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
 
 .logo-details {
   margin-top: 1rem;

src/App.svelte

@@ -1,15 +1,10 @@
 <script>
   import { onMount } from "svelte";
-  import Router from 'svelte-spa-router';
+  // Import Router component directly with explicit path
+  import Router from 'svelte-spa-router/Router.svelte';
 
-  // Import pages for routing
+  // Import routes from centralized router.js file
-  import Home from './pages/Home.svelte';
+  import { routes } from './router.js';
-  import PreviewPage from './pages/Preview.svelte';
-
-  const routes = {
-    '/': Home,
-    '/preview/:id': PreviewPage,
-  };
 
   let viewMode = "grid"; // 'grid' or 'list'
   let searchQuery = "";
@@ -510,8 +505,9 @@
   }
 </script>
 
-<main class="container app-flex">
+<div class="container app-flex">
   <Router {routes} />
+</div>
 
 <style>
   .app-flex {
@@ -519,47 +515,9 @@
     display: flex;
     flex-direction: column;
   }
-    .main-content {
+  .app-flex {
-      flex: 1 0 auto;
+    min-height: 100vh;
-    }
-    footer {
-      flex: 0 0 auto;
-    }
-    .footer-flex {
     display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      gap: 1em;
-    }
-    .footer-left {
-      flex: 1;
-      text-align: left;
-    }
-    .footer-center {
-      flex: 2;
-      text-align: left;
-    }
-    .footer-github {
-      flex: 0;
-      margin-left: 1em;
-      display: inline-flex;
-      align-items: center;
-    }
-    @media (max-width: 700px) {
-      .footer-flex {
     flex-direction: column;
-        align-items: flex-start;
-        gap: 0.3em;
-      }
-      .footer-left, .footer-center {
-        text-align: left;
-        width: 100%;
-      }
-      .footer-github {
-        margin-left: 0;
-        margin-top: 0.5em;
-      }
   }
 </style>
-</main>

src/components/Footer.svelte

@@ -0,0 +1,77 @@
+<script>
+  // No props needed for this simple footer
+</script>
+
+<footer>
+  <div class="footer-flex">
+    <span class="footer-left">shadoll Logo Gallery</span>
+    <span class="footer-center">All logos are property of their respective owners.</span>
+    <a
+      href="https://github.com/shadoll/sLogos"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="footer-github"
+    >
+      <svg
+        width="22"
+        height="22"
+        viewBox="0 0 24 24"
+        fill="#ccc"
+        style="margin-right:0.3em;"
+      ><path
+          d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
+      /></svg>
+    </a>
+  </div>
+</footer>
+
+<style>  footer {
+    padding: 1.5rem;
+    background: var(--color-background);
+    color: var(--color-text-muted);
+    border-top: 1px solid var(--color-border);
+    font-size: 0.9rem;
+    margin-top: auto;
+  }
+
+  .footer-flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 1em;
+  }
+
+  .footer-left {
+    flex: 1;
+    text-align: left;
+  }
+
+  .footer-center {
+    flex: 2;
+    text-align: left;
+  }
+
+  .footer-github {
+    flex: 0;
+    margin-left: 1em;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  @media (max-width: 700px) {
+    .footer-flex {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.3em;
+    }
+    .footer-left, .footer-center {
+      text-align: left;
+      width: 100%;
+    }
+    .footer-github {
+      margin-left: 0;
+      margin-top: 0.5em;
+    }
+  }
+</style>

src/components/Header.svelte

@@ -298,6 +298,14 @@
 </header>
 
 <style>
+  .main-header {
+    padding: 0.5rem 1rem;
+    background: var(--color-card);
+    border-bottom: 1px solid var(--color-border);
+    border-radius: 0; /* Ensure no rounded corners */
+    margin-bottom: 1rem;
+  }
+
   .header-title {
     display: flex;
     align-items: center;

src/components/InlineSvg.svelte

@@ -92,6 +92,7 @@
   }
 
   $: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg();
+
 </script>
 
 <div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}>

src/components/Preview.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
-  import InlineSvg from './InlineSvg.svelte';
+  import InlineSvg from "./InlineSvg.svelte";
-  import Actions from './Actions.svelte';
+  import Actions from "./Actions.svelte";
-  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
+  import { getDefaultLogoColor, getThemeColor } from "../utils/colorTheme.js";
   import { generateColorSetCircle } from "../utils/colorCircles.js";
   import { fetchSvgSource } from "../utils/svgSource.js";
 
@@ -11,7 +11,7 @@
   export let theme;
   export const openLogoByAnchor = () => {};
   export let onDownload = (path, name) => {
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.href = path;
     a.download = name;
     document.body.appendChild(a);
@@ -20,13 +20,13 @@
   };
 
   // For SVG source code display
-  let svgSource = '';
+  let svgSource = "";
   let isFetchingSvgSource = false;
 
   // No event dispatching, parent is fully responsible for controlling the component
 
   function isSvgLogo(logo) {
-    return logo && logo.format && logo.format.toLowerCase() === 'svg';
+    return logo && logo.format && logo.format.toLowerCase() === "svg";
   } // Function to copy SVG source from textarea
   function copySvgSourceFromTextarea() {
     if (svgSource) {
@@ -34,18 +34,21 @@
         navigator.clipboard.writeText(svgSource);
         return true;
       } catch (err) {
-        console.error('Error copying from textarea:', err);
+        console.error("Error copying from textarea:", err);
         // Show content in prompt as fallback
-        window.prompt('Copy the SVG source code:', svgSource);
+        window.prompt("Copy the SVG source code:", svgSource);
         return false;
       }
     }
     return false;
   }
 
-  $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
+  $: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
 
-  $: validColorConfig = logo && typeof logo.colorConfig === 'object' && logo.colorConfig.selector ? logo.colorConfig : undefined;
+  $: validColorConfig =
+    logo && typeof logo.colorConfig === "object" && logo.colorConfig.selector
+      ? logo.colorConfig
+      : undefined;
 
   // No URL manipulation in the component anymore
   // Parent components should handle all URL and navigation concerns
@@ -53,18 +56,21 @@
   // Only fetch SVG source when displayed
   $: if (show && logo) {
     // Fetch SVG source when logo is displayed and is an SVG
-    if (logo.format === 'SVG' && !svgSource) {
+    if (logo.format === "SVG" && !svgSource) {
       isFetchingSvgSource = true;
       fetchSvgSource(logo.path)
-        .then(source => {
+        .then((source) => {
           svgSource = source;
           isFetchingSvgSource = false;
         })
-        .catch(err => {
+        .catch((err) => {
-          console.error('Error fetching SVG source:', err);
+          console.error("Error fetching SVG source:", err);
           isFetchingSvgSource = false;
         });
     }
+
+    // Ensure the page scrolls to the top when preview is shown
+    window.scrollTo(0, 0);
   }
 
   // Component doesn't handle any window events or URL changes
@@ -73,12 +79,12 @@
   // Svelte action to remove width/height from SVGs for responsive scaling
   function removeSvgSize(node) {
     function cleanSvg() {
-      const svgs = node.querySelectorAll('svg');
+      const svgs = node.querySelectorAll("svg");
-      svgs.forEach(svg => {
+      svgs.forEach((svg) => {
-        svg.removeAttribute('width');
+        svg.removeAttribute("width");
-        svg.removeAttribute('height');
+        svg.removeAttribute("height");
-        svg.style.width = '100%';
+        svg.style.width = "100%";
-        svg.style.height = '100%';
+        svg.style.height = "100%";
       });
     }
     cleanSvg();
@@ -88,25 +94,26 @@
     return {
       destroy() {
         observer.disconnect();
-      }
+      },
     };
   }
 </script>
 
-<div class="modal-backdrop fullscreen"
+<div
+  class="preview-wrapper"
   style="display: {show === true ? 'flex' : 'none'}"
-  role="dialog"
+  role="region"
-  aria-modal="true"
+  aria-label="Logo preview"
 >
   {#if logo}
-    <div class="modal-content fullscreen-modal">
     <div class="modal-header">
       <div class="header-spacer"></div>
       <h2>{logo.name}</h2>
       <div class="header-spacer"></div>
     </div>
-      <div class="modal-body fullscreen-body">
+    <div class="preview-body">
-        <div class="preview-container fullscreen-preview"
+      <div
+        class="preview-container fullscreen-preview"
         role="img"
         aria-label={logo.name}
       >
@@ -114,7 +121,9 @@
           {#if isSvgLogo(logo)}
             <InlineSvg
               path={logo.path}
-                color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
+              color={logo.colors
+                ? logo._activeColor || getLogoThemeColor(logo)
+                : undefined}
               colorConfig={validColorConfig}
               targets={logo.targets}
               sets={logo.sets}
@@ -138,10 +147,21 @@
                 role="button"
                 aria-label="Reset to theme color"
                 style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
-                on:click|stopPropagation={() => logo._activeColor = undefined}
+                on:click|stopPropagation={() => (logo._activeColor = undefined)}
-                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
+                on:keydown|stopPropagation={(e) =>
+                  (e.key === "Enter" || e.key === " ") &&
+                  (logo._activeColor = undefined)}
+              >
+                <svg
+                  width="100%"
+                  height="100%"
+                  viewBox="0 0 800 800"
+                  xmlns="http://www.w3.org/2000/svg"
+                  ><path
+                    d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
+                    fill="#33363f"
+                  /></svg
                 >
-                <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
               </span>
               {#if logo.sets}
                 {#each Object.entries(logo.sets) as [setName, setConfig], i}
@@ -151,12 +171,16 @@
                     tabindex="0"
                     role="button"
                     on:click|stopPropagation={() => {
-                      logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                      logo._activeColor = Object.values(logo.colors)[
+                        i % Object.keys(logo.colors).length
+                      ];
                       logo._activeSet = setName;
                     }}
                     on:keydown|stopPropagation={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                      if (e.key === "Enter" || e.key === " ") {
-                        logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
+                        logo._activeColor = Object.values(logo.colors)[
+                          i % Object.keys(logo.colors).length
+                        ];
                         logo._activeSet = setName;
                       }
                     }}
@@ -169,12 +193,15 @@
                 {#each Object.entries(logo.colors) as [colorName, colorValue]}
                   <span
                     class="color-circle"
-                    title={colorName.replace('_', ' ')}
+                    title={colorName.replace("_", " ")}
                     style={`background:${colorValue}`}
                     tabindex="0"
                     role="button"
-                    on:click|stopPropagation={() => logo._activeColor = colorValue}
+                    on:click|stopPropagation={() =>
-                    on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
+                      (logo._activeColor = colorValue)}
+                    on:keydown|stopPropagation={(e) =>
+                      (e.key === "Enter" || e.key === " ") &&
+                      (logo._activeColor = colorValue)}
                   ></span>
                 {/each}
               {/if}
@@ -188,7 +215,11 @@
           {#if logo.tags && logo.tags.length}
             <div class="logo-tags">
               {#each logo.tags as tagObj}
-                <span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
+                <span
+                  class="logo-tag"
+                  style={tagObj.color ? `background:${tagObj.color}` : ""}
+                  >{tagObj.text || tagObj}</span
+                >
               {/each}
             </div>
           {/if}
@@ -197,8 +228,8 @@
         <div class="preview-actions-container">
           <div class="actions-wrapper">
             <Actions
-              logo={logo}
+              {logo}
-              onDownload={onDownload}
+              {onDownload}
               onCopySource={copySvgSourceFromTextarea}
               inPreview={true}
             />
@@ -215,12 +246,10 @@
         {/if}
       </div>
     </div>
-    </div>
   {/if}
 </div>
 
 <style>
-
   .preview-actions-container {
     width: 100%;
     background: var(--color-card);
@@ -253,33 +282,32 @@
     background: #444;
     color: #eee;
   }
-
+  .preview-container {
-  .modal-backdrop.fullscreen {
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0,0,0,0.7); /* match .modal-backdrop in global.css */
-    z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 1rem;
+    background-color: var(--color-card);
+    color: var(--color-text);
+    border-radius: 4px;
     overflow: hidden;
   }
-  .modal-content.fullscreen-modal {
+
-    width: 100vw;
+  .preview-container img {
-    height: 100vh;
+    max-width: 100%;
-    max-width: 100vw;
+    max-height: 100%;
-    max-height: 100vh;
+    object-fit: contain;
-    border-radius: 0;
+  }
-    box-shadow: none;
+  .preview-wrapper {
-    background: var(--color-card);
+    position: relative;
-    color: var(--color-text);
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg);
     display: flex;
     flex-direction: column;
     padding: 0;
     border: none;
-    overflow: hidden;
+    overflow: visible;
   }
   .modal-header {
     display: flex;
@@ -297,24 +325,23 @@
     margin: 0;
   }
   .header-spacer {
-    /* This empty div helps maintain the centered title with the back button on the left */
     width: 70px;
   }
-  .modal-body.fullscreen-body {
+  .preview-body {
     flex: 1 1 auto;
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: stretch;
-    justify-content: center;
+    justify-content: space-between;
-    width: 100vw;
+    width: 100%;
     height: 100%;
     background: var(--color-card);
-    padding: 0 2rem 2rem 2rem;
     gap: 2.5rem;
-    overflow: hidden;
+    overflow: visible;
+    padding: 1rem;
   }
   .preview-container.fullscreen-preview {
-    flex: 2 1 0;
+    flex: 3;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -323,7 +350,7 @@
     background: var(--color-card);
     height: 100%;
     width: 100%;
-    overflow: hidden;
+    overflow: visible;
   }
   .preview-media-wrapper {
     width: 100%;
@@ -331,7 +358,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
+    overflow: visible;
   }
   .preview-media-wrapper img {
     width: 100%;
@@ -385,14 +412,14 @@
   /* These styles are no longer needed as we're using the Actions component */
 
   @media (max-width: 900px) {
-    .modal-body.fullscreen-body {
+    .preview-body {
       flex-direction: column;
       align-items: stretch;
       gap: 1.5rem;
       padding: 0 0.5rem 0.5rem 0.5rem;
+      overflow-y: auto; /* Enable scrolling on smaller screens */
     }
     .logo-details.fullscreen-details {
-      margin: 0 auto 1.5rem auto;
       max-width: 100vw;
       min-width: 0;
       width: 100%;
@@ -403,19 +430,46 @@
     }
     .right-column {
       max-width: 100%;
-      width: 100%;
+      width: 100% !important; /* Force 100% width in mobile view */
+      flex-basis: 100%;
     }
     .preview-actions-container {
       margin: 0 auto;
       width: 100%;
     }
+
+    /* Mobile-specific styles for the preview container */
+    .preview-container.fullscreen-preview {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1 / 1; /* Create a square container */
+      min-height: 50vh; /* Ensure minimum height */
+      position: relative;
+    }
+
+    /* For browsers that don't support aspect-ratio */
+    @supports not (aspect-ratio: 1 / 1) {
+      .preview-container.fullscreen-preview {
+        height: 0;
+        padding-bottom: 100%;
+        position: relative;
+      }
+
+      .preview-media-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .right-column {
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* Keep it as column for proper vertical stacking */
     gap: 2rem;
-    width: 300px;
+    flex: 1;
   }
 
   .source-code-container {
@@ -427,13 +481,6 @@
     box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
     z-index: 1;
     position: relative;
-    margin-top: 2rem;
-  }
-
-  .source-code-container h3 {
-    font-size: 1rem;
-    margin: 0 0 1rem 0;
-    color: var(--color-text);
   }
 
   .source-code-wrapper {

src/pages/Home.svelte

@@ -3,6 +3,7 @@
   import Grid from "../components/Grid.svelte";
   import List from "../components/List.svelte";
   import Header from "../components/Header.svelte";
+  import Footer from "../components/Footer.svelte";
 
   // Use the app's global data without reloading
   let appData = {};
@@ -131,7 +132,6 @@
 </script>
 
 {#if initialized}
-  <div class="home-container">
   <Header
     logos={appData.logos || []}
     displayLogos={appData.displayLogos || []}
@@ -153,7 +153,7 @@
     setCompactMode={appData.setCompactMode || ((val) => {})}
   />
 
-    <div class="logos-container main-content">
+  <main class="logos-container">
     {#if appData.viewMode === "grid"}
       <Grid
         logos={appData.displayLogos || []}
@@ -172,32 +172,9 @@
         setSearchQuery={appData.setSearchQuery || ((q) => {})}
       />
     {/if}
-    </div>
+  </main>
 
-    <!-- Footer -->
+  <Footer />
-    <footer>
-      <div class="footer-flex">
-        <span class="footer-left">shadoll Logo Gallery</span>
-        <span class="footer-center">All logos are property of their respective owners.</span>
-        <a
-          href="https://github.com/shadoll/sLogos"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="footer-github"
-        >
-          <svg
-            width="22"
-            height="22"
-            viewBox="0 0 24 24"
-            fill="#ccc"
-            style="margin-right:0.3em;"
-          ><path
-              d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
-          /></svg>
-        </a>
-      </div>
-    </footer>
-  </div>
 {:else}
   <div class="loading">
     <p>Loading...</p>
@@ -205,18 +182,10 @@
 {/if}
 
 <style>
-  .home-container {
-    width: 100%;
-  }
-
   .logos-container {
     padding: 1rem;
   }
 
-  .main-content {
-    flex: 1 0 auto;
-  }
-
   .loading {
     display: flex;
     justify-content: center;
@@ -225,53 +194,4 @@
     font-size: 1.5rem;
     color: var(--color-text);
   }
-
-  footer {
-    padding: 1.5rem;
-    background: var(--color-background);
-    color: var(--color-text-muted);
-    border-top: 1px solid var(--color-border);
-    font-size: 0.9rem;
-  }
-
-  .footer-flex {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    gap: 1em;
-  }
-
-  .footer-left {
-    flex: 1;
-    text-align: left;
-  }
-
-  .footer-center {
-    flex: 2;
-    text-align: left;
-  }
-
-  .footer-github {
-    flex: 0;
-    margin-left: 1em;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  @media (max-width: 700px) {
-    .footer-flex {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.3em;
-    }
-    .footer-left, .footer-center {
-      text-align: left;
-      width: 100%;
-    }
-    .footer-github {
-      margin-left: 0;
-      margin-top: 0.5em;
-    }
-  }
 </style>

src/pages/Preview.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { push, pop } from 'svelte-spa-router';
   import PreviewComponent from '../components/Preview.svelte';
+  import Footer from '../components/Footer.svelte';
   import { getDefaultLogoColor } from '../utils/colorTheme.js';
 
   // Get preview ID from URL parameter
@@ -71,6 +72,9 @@
     // Initialize theme
     initTheme();
 
+    // Ensure page starts at the top
+    window.scrollTo(0, 0);
+
     // First try to get logos from window.appData if available
     if (window.appData && window.appData.logos && window.appData.logos.length > 0) {
       console.log("Preview page: Using logos from window.appData:", window.appData.logos.length);
@@ -122,16 +126,16 @@
 </script>
 
 {#if logo}
-  <div class="preview-page">
+  <header class="back-button-container">
-    <div class="back-button-container">
     <button class="back-button" on:click={goBack}>
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M19 12H5M12 19l-7-7 7-7"></path>
       </svg>
       Back to Gallery
     </button>
-    </div>
+  </header>
 
+  <main class="preview-content">
     <PreviewComponent
       show={true}
       {logo}
@@ -139,7 +143,9 @@
       {onDownload}
       on:close={handleClose}
     />
-  </div>
+  </main>
+
+  <Footer />
 {:else}
   <div class="loading-container">
     <p>Loading logo...</p>
@@ -147,11 +153,7 @@
 {/if}
 
 <style>
-  .preview-page {
+  /* Page level styles applied to body in global.css */
-    width: 100%;
-    min-height: 100vh;
-    position: relative;
-  }
 
   .back-button-container {
     position: fixed;
@@ -188,4 +190,12 @@
     font-size: 1.2rem;
     color: var(--color-text, #222);
   }
+
+  .preview-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  /* Footer styles now come from the Footer component */
 </style>

src/router.js

@@ -0,0 +1,8 @@
+import Home from './pages/Home.svelte';
+import Preview from './pages/Preview.svelte';
+
+// Define all routes for the application
+export const routes = {
+  '/': Home,
+  '/preview/:id': Preview
+};