remove sidebar

css/style.css

@@ -137,7 +137,7 @@ body {
   margin: 0;
 }
 
-/* ---- Layout: sidebar + main ---- */
+/* ---- Layout: main ---- */
 
 .layout {
   display: flex;
@@ -148,65 +148,6 @@ body {
   align-items: flex-start;
 }
 
-.sidebar {
-  position: sticky;
-  top: 96px;
-  flex: 0 0 220px;
-  width: 220px;
-  background: var(--surface-container-low);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl);
-  /* padding: 24px 0; */
-}
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar-link {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-6);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--secondary);
-  border-right: 3px solid transparent;
-}
-
-.sidebar-link:hover {
-  background: var(--surface-container-high);
-  text-decoration: none;
-}
-
-.sidebar-link.active {
-  color: var(--primary);
-  font-weight: 700;
-  background: rgba(26, 188, 156, 0.1);
-  border-right-color: var(--primary);
-}
-
-.sidebar-num {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  background: var(--surface-container-high);
-  color: var(--secondary);
-  font-size: 12px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.sidebar-link.active .sidebar-num {
-  background: var(--primary);
-  color: var(--on-primary);
-}
-
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -877,26 +818,6 @@ input[type="file"]::file-selector-button {
     flex-direction: column;
   }
 
-  .sidebar {
-    position: static;
-    width: 100%;
-    flex: none;
-  }
-
-  .sidebar-nav {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .sidebar-link {
-    border-right: none;
-    border-radius: var(--radius-lg);
-  }
-
-  .sidebar-link.active {
-    border-right: none;
-  }
-
   .settings-preview-row {
     flex-direction: column;
   }
@@ -982,7 +903,3 @@ input[type="file"]::file-selector-button {
 :root[data-theme="dark"] .theme-icon-light {
   display: inline;
 }
-
-:root[data-theme="dark"] .sidebar-link.active {
-  background: rgba(26, 188, 156, 0.18);
-}

index.html

@@ -30,15 +30,7 @@
   </header>
 
   <div class="layout">
-    <aside class="sidebar">
+
-      <nav class="sidebar-nav">
-        <a href="#step-0" class="sidebar-link" data-step="step-0">About and support</a>
-        <a href="#step-1" class="sidebar-link" data-step="step-1"><span class="sidebar-num">1</span>Select Image</a>
-        <a href="#step-2" class="sidebar-link" data-step="step-2"><span class="sidebar-num">2</span>Settings</a>
-        <a href="#step-3" class="sidebar-link" data-step="step-3"><span class="sidebar-num">3</span>Preview</a>
-        <a href="#step-4" class="sidebar-link" data-step="step-4"><span class="sidebar-num">4</span>Output</a>
-      </nav>
-    </aside>
 
     <main class="wrapper">
     <section class="section step first-step" id="step-0">
@@ -59,14 +51,16 @@
       <div class="step-num">1</div>
       <section class="sub-section input-methods-row">
         <div class="column-left" id="file-input-column">
-          <h2 class="sub-section-title">Select image</h2>
+          <!-- // <h2 class="sub-section-title">Select image</h2> // -->
+          <h2>Select image</h2>
           <div class="note upload-note">You can import multiple images at once.<br>All processing is done locally in your browser: your images are not uploaded or stored anywhere online.</div>
           <input type="file" id="file-input" name="file-input" multiple/><br />
           <div id="file-input-column-items"></div>
           <div class="note" id="continue-note">Add more images or <a href="#step-2">continue to step 2</a></div>
         </div>
         <div class="column-right">
-          <h2 class="sub-section-title">or paste existing byte array</h2>
+          <!-- // <h2 class="sub-section-title">or paste existing byte array</h2> // -->
+          <h2>Or paste existing byte array</h2>
           <textarea id="byte-input" class="byte-input" placeholder="i.e. 0xff, 0x81, 0x0d, 0x8d, 0xb1, 0xb1, 0x80, 0xfc"></textarea><br />
           <div class="text-input-size">
             <input type="number" min="1" id="text-input-width" class="size-input" value="128" /> x