Small UI tweaks

css/style.css

@@ -19,6 +19,7 @@
   --outline-variant: #bbcac3;
   --editor-bg: #ffffff;
   --error: #ba1a1a;
+  --focus-ring: rgba(0, 107, 88, 0.25);
 
   /* Radii */
   --radius-lg: 0.25rem;
@@ -144,7 +145,7 @@ body {
   background: var(--surface-container-low);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-xl);
-  padding: 24px 0;
+  /* padding: 24px 0; */
 }
 
 .sidebar-nav {
@@ -211,6 +212,10 @@ body {
   scroll-margin-top: 88px;
 }
 
+.section.first-step {
+
+}
+
 .step-num {
   position: absolute;
   left: 16px;
@@ -245,7 +250,7 @@ body {
   z-index: 1;
 }
 
-#step-4.step::before {
+#step-0.step::before, #step-4.step::before {
   display: none;
 }
 
@@ -396,6 +401,42 @@ code {
   margin: 0;
 }
 
+/* ---- Settings grid (step 2) ---- */
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 28px 32px;
+}
+
+.settings-grid.table {
+  margin: 8px 0 0;
+}
+
+.settings-grid .table-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-grid .table-row.full-row {
+  grid-column: 1 / -1;
+}
+
+.settings-grid .table-cell {
+  display: block;
+  padding: 0;
+}
+
+.settings-grid .table-cell:first-child {
+  width: auto;
+  padding-right: 0;
+}
+
+.settings-grid .table-cell:last-child {
+  width: auto;
+}
+
 .nested-table .table-cell {
   color: var(--text-muted);
   font-size: 0.9em;
@@ -465,7 +506,7 @@ textarea:focus,
 select:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(0, 107, 88, 0.25);
+  box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
 select {
@@ -676,7 +717,7 @@ input[type="file"]::file-selector-button {
   width: 100%;
   /* margin-top: 16px; */
   background: var(--editor-bg);
-  color: #000000;
+  color: var(--on-surface);
   border: 1px solid var(--on-surface-variant);
   border-radius: var(--radius-xl);
   font-family: var(--font-mono);
@@ -689,7 +730,7 @@ input[type="file"]::file-selector-button {
 .code-output:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(0, 107, 88, 0.25);
+  box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
 /* ---- Hidden by default (toggled via JS) ---- */
@@ -806,6 +847,7 @@ input[type="file"]::file-selector-button {
   --border-subtle: #2d3133;
   --outline-variant: #414a47;
   --editor-bg: #0b0e0f;
+  --focus-ring: rgba(78, 221, 187, 0.35);
 }
 
 :root[data-theme="dark"] .theme-icon-dark {

index.html

@@ -32,6 +32,7 @@
   <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>
@@ -40,7 +41,7 @@
     </aside>
 
     <main class="wrapper">
-    <section class="section">
+    <section class="section step" id="step-0">
       <h1>image2cpp</h1>
       <p><strong>image2cpp</strong> is a simple tool to convert images into byte arrays (and vice versa) for use with (monochrome) displays such as OLEDs on your Arduino or Raspberry Pi.<br>
         It was originally made to work with the Adafruit OLED library (for which your can find an example Arduino sketch <a href="https://github.com/javl/image2cpp/blob/master/oled_example/oled_example.ino" target="_blank">here</a>) but
@@ -65,13 +66,13 @@
           <div class="note" id="continue-note">Select more images or <a href="#step-2">continue to step 2</a></div>
         </div>
         <div class="column column-right">
-          <h2 class="sub-section-title">or paste byte array</h2>
-          <textarea id="byte-input" class="byte-input"></textarea><br />
+          <h2 class="sub-section-title">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
             <input type="number" min="1" id="text-input-height" class="size-input" value="64" /> px
           </div>
-          <div class="note">Set this to the size of your image.<br>Common sizes: <a href="#" class="size-preset" onclick="setTextInputSize(16, 16); return false;"><code>16x16</code></a>, <a href="#" class="size-preset" onclick="setTextInputSize(32, 32); return false;"><code>32x32</code></a>, <a href="#" class="size-preset" onclick="setTextInputSize(64, 48); return false;"><code>64x48</code></a>, <a href="#" class="size-preset" onclick="setTextInputSize(128, 32); return false;"><code>128x32</code></a>, <a href="#" class="size-preset" onclick="setTextInputSize(128, 64); return false;"><code>128x64</code></a>.</div>
+          <div class="note">Set this to the size of your image.<br>Common sizes: <a href="#" class="size-preset" onclick="setTextInputSize(16, 16); return false;"><code>16x16</code></a> <a href="#" class="size-preset" onclick="setTextInputSize(32, 32); return false;"><code>32x32</code></a> <a href="#" class="size-preset" onclick="setTextInputSize(64, 48); return false;"><code>64x48</code></a> <a href="#" class="size-preset" onclick="setTextInputSize(128, 32); return false;"><code>128x32</code></a> <a href="#" class="size-preset" onclick="setTextInputSize(128, 64); return false;"><code>128x64</code></a>.</div>
           <div>
             <button onclick="handleTextInput('horizontal')">Read as horizontal</button>
             <button onclick="handleTextInput('vertical')">Read as vertical</button>
@@ -86,9 +87,9 @@
       <div class="step-num">2</div>
       <h2>Image Settings</h2>
       <section class="sub-section">
-        <div class="table">
+        <div class="table settings-grid">
 
-          <div class="table-row">
+          <div class="table-row full-row">
             <div class="table-cell"><label>Canvas size(s): </label></div>
             <div class="table-cell">
               <ul id="image-size-settings"></ul>
@@ -165,13 +166,9 @@
               <label for="centerHorizontally">horizontally</label>
               <input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" />
               <label for="centerVertically">vertically</label>
-            </div>
-          </div>
-
-          <div class="table-row note-row">
-            <div class="table-cell"></div>
-            <div class="table-cell">
-              <i class="note">Centering the image only works when using a canvas larger than the original image.</i>
+              <div class="note">
+                <i>Centering the image only works when using a canvas larger than the original image.</i>
+              </div>
             </div>
           </div>