update layout and descriptions

css/style.css

@@ -11,9 +11,12 @@
   --surface-container-low: #f2f4f6;
   --surface-container: #eceef0;
   --surface-container-high: #e6e8ea;
-  --on-surface: #191c1e;
-  --on-surface-variant: #3c4a45;
-  --on-background: #191c1e;
+  /* --on-surface: #191c1e; */
+  --on-surface: #000000;
+  /* --on-surface-variant: #3c4a45; */
+  --on-surface-variant: #000000;
+  /* --on-background: #191c1e; */
+  --on-background: #000000;
   --text-muted: #64748b;
   --border-subtle: #e2e8f0;
   --outline-variant: #bbcac3;
@@ -145,7 +148,8 @@ body {
   gap: var(--space-7);
   max-width: 1200px;
   margin: auto;
-  padding: var(--space-7) var(--space-6) var(--space-9);
+  /* padding: var(--space-7) var(--space-6) var(--space-9); */
+  padding: 0 var(--space-6) var(--space-9);
   align-items: flex-start;
 }
 
@@ -221,6 +225,13 @@ h1 {
   margin-bottom: var(--space-2);
 }
 
+.v2 {
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 500;
+  color: var(--secondary);
+}
+
 h2 {
   font-size: 20px;
   line-height: 28px;
@@ -244,12 +255,12 @@ p {
 
 a {
   color: var(--primary);
-  text-decoration: none;
+  text-decoration: underline;
   font-weight: 500;
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 code {
@@ -266,18 +277,25 @@ code {
   background: var(--surface-container-lowest);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-xl);
-  padding: var(--space-4);
+  padding: var(--space-2);
 }
 
 /* First (intro) section: keep it flush/light */
 .section.first-step {
   background: transparent;
   border: none;
-  padding: var(--space-2) 0 0;
+  /* padding: var(--space-5) 0 0; */
+  /* border: 10px solid red; */
+  padding: 0;
+}
+
+.section.first-step p {
+  margin-top: 0;
+  padding-top: 0;
 }
 
 .section h2 {
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--space-1);
 }
 
 /* Legacy divider no longer needed; cards separate content */
@@ -346,7 +364,7 @@ code {
 
 .table {
   display: table;
-  margin: var(--space-2) 0 0;
+  /* margin: var(--space-2) 0 0; */
   width: 100%;
   border-collapse: collapse;
 }
@@ -507,7 +525,7 @@ select {
   background: var(--surface-container);
   border: 1px solid transparent;
   border-radius: var(--radius-lg);
-  padding: 8px 10px;
+  padding: 4px 4px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -630,7 +648,7 @@ input[type="file"] {
   /* border: 2px dashed var(--outline-variant); */
   border-radius: var(--radius-lg);
   font-size: var(--font-size);
-  padding: 16px 20px;
+  padding: 4px 4px;
   margin: var(--space-2) 0 0;
   cursor: pointer;
   width: 100%;

index.html

@@ -14,7 +14,7 @@
   <header class="topnav">
     <div class="topnav-inner">
       <div class="topnav-left">
-        <span class="brand">image2cpp</span>
+        <span class="brand">image2cpp <span class="v2">v2</span></span>
         <nav class="topnav-links">
           <a href="https://github.com/javl/image2cpp" target="_blank">view GitHub Repository</a>
         </nav>
@@ -34,7 +34,6 @@
 
     <main class="wrapper">
     <section class="section step first-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
         has been expanded by the community to be useful in all kind of (embedded) projects.</p>
@@ -95,7 +94,7 @@
           <div class="table-row">
             <div class="table-cell"><label>Canvas size(s): </label>
               <div class="note" id="glyph-name-note">
-                Glyph name is used to identify the image in the code.
+                Glyph name is used to identify the image in the output code.
               </div>
             </div>
             <div class="table-cell">
@@ -107,13 +106,13 @@
                     <span class="file-info file-name js-file-name"></span>
                     <button type="button" class="remove-button js-remove">remove image</button>
                   </div>
-                  <div class="image-size-row">
+                  <div class="image-size-row"><span class="file-info">Canvas size:</span>
                     <input type="number" min="1" class="size-input js-width" name="width" />
                     <span>x</span>
                     <input type="number" min="1" class="size-input js-height" name="height" />
                   </div>
                   <div class="image-size-row">
-                    <span class="file-info">glyph name</span>
+                    <span class="file-info">glyph name:</span>
                     <input type="text" class="glyph-input js-glyph" name="glyph" />
                   </div>
                 </li>
@@ -274,7 +273,7 @@
                 </div>
                 <div data-caption="arduino">
                   <i>Adds some extra Arduino code around the output.
-                  If multiple images are loaded, generates a byte array for each and appends a counter to the identifier.</i>
+                  If multiple images are loaded, generates a byte array for each and appends its glyph name (from step 2 above) to the identifier.</i>
                 </div>
                 <div data-caption="arduino_single">
                   <i>Adds some extra Arduino code around the output.
@@ -313,14 +312,14 @@
                     <div class="table-cell"><label for="fullExample">Full example code:</label></div>
                     <div class="table-cell">
                       <input id="fullExample" type="checkbox" onchange="updateBoolean('fullExample')" />
-                      <span class="note">Include a full example displaying the first image.</span>
+                      <label for="fullExample" class="note">Include a full example displaying the first image.</label>
                     </div>
                   </div>
                   <div class="table-row">
                     <div class="table-cell"><label for="esp32Format">ESP32 formatting:</label></div>
                     <div class="table-cell">
                       <input id="esp32Format" type="checkbox" onchange="updateBoolean('esp32Format')" />
-                      <span class="note">Use <code>uint8_t</code> instead of <code>unsigned char</code> and <code>PROGMEM</code>.</span>
+                      <label for="esp32Format" class="note">Use <code>uint8_t</code> instead of <code>unsigned char</code> and <code>PROGMEM</code>.</label>
                     </div>
                   </div>
                 </div>

js/script.js

@@ -868,7 +868,7 @@ function handleImageSelection(evt) {
           checkImagesAvailable();
         };
 
-        imageEntry.querySelector('.js-file-name').textContent = `${file.name} (file resolution: ${img.width} x ${img.height})`;
+        imageEntry.querySelector('.js-file-name').textContent = `${file.name} (image size: ${img.width} x ${img.height} px)`;
         imageEntry.querySelector('.js-remove').onclick = removeButtonOnClick;
 
         fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;