From d21cc62c34a215c68af5a9a2aa395b3ad58c4d76 Mon Sep 17 00:00:00 2001 From: javl Date: Tue, 18 Aug 2026 09:26:39 +0200 Subject: [PATCH] layout tweaks --- css/style.css | 91 ++++++++++++++++++++++++++++++--------------------- index.html | 87 ++++++++++++++++++++++++------------------------ js/script.js | 2 +- 3 files changed, 99 insertions(+), 81 deletions(-) diff --git a/css/style.css b/css/style.css index ca20caf..90e5084 100644 --- a/css/style.css +++ b/css/style.css @@ -39,6 +39,7 @@ /* Fonts */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + --font-size: 14px; } * { @@ -49,7 +50,7 @@ body { font-family: var(--font-body); - font-size: 16px; + font-size: var(--font-size); line-height: 24px; color: var(--on-background); background-color: var(--background); @@ -67,7 +68,7 @@ body { } .topnav-inner { - max-width: 1400px; + max-width: 1200px; margin: auto; height: 64px; padding: 0 var(--space-6); @@ -96,7 +97,7 @@ body { .topnav-links a { color: var(--secondary); font-weight: 500; - font-size: 14px; + font-size: var(--font-size); text-decoration: underline; } @@ -142,7 +143,7 @@ body { .layout { display: flex; gap: var(--space-7); - max-width: 1400px; + max-width: 1200px; margin: auto; padding: var(--space-7) var(--space-6) var(--space-9); align-items: flex-start; @@ -353,6 +354,7 @@ code { .table-row { display: table-row; width: 100%; + border-bottom: 1px solid var(--border-subtle); } .table-cell { @@ -370,66 +372,71 @@ code { width: 70%; } -.table-cell:first-child label { +.table-cell:first-child > label { font-family: var(--font-mono); font-size: 13px; - font-weight: 500; + /* font-weight: 500; */ color: var(--primary); } -.table-cell:last-child label { +.table-cell:last-child > label { margin-right: var(--space-2); color: var(--on-surface-variant); - font-size: 14px; + font-size: var(--font-size); } .nested-table { margin: 0; } -/* ---- Settings grid (step 2) ---- - 2-column min-width forces a predictable 2-up (or 1-up) grid instead of - auto-fitting 3 columns, which paired short/tall fields at random and - left ragged whitespace between rows. */ +/* ---- Settings rows (step 2) ---- + Single-column label-left / value-right rows, hairline-divided. Denser + than the old 2-up grid, and keeps each setting's note attached under + its label instead of floating below the control in the value column. */ .settings-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: var(--space-6) var(--space-7); -} - -.settings-grid.table { + display: block; margin: var(--space-2) 0 0; } .settings-grid .table-row { display: flex; - flex-direction: column; - gap: var(--space-2); + align-items: flex-start; + gap: var(--space-6); + padding: var(--space-1) 0; + border-top: 1px solid var(--border-subtle); } -.settings-grid .table-row.full-row { - grid-column: 1 / -1; +.settings-grid .table-row:first-child { + border-top: none; + padding-top: 0; } .settings-grid .table-cell { - display: block; padding: 0; } .settings-grid .table-cell:first-child { - width: auto; - padding-right: 0; + width: 34%; + flex-shrink: 0; } .settings-grid .table-cell:last-child { width: auto; + flex: 1; + min-width: 0; +} + +.settings-grid .table-cell:first-child .note { + font-size: 13px; + line-height: 1.45em; + margin: var(--space-1) 0 0; } .nested-table .table-cell { color: var(--text-muted); font-size: 0.9em; - width: 200px; + /* width: 200px; */ } #format-caption-container { @@ -442,14 +449,14 @@ code { /* Reserve space for the tallest combination (Adafruit GFX shows both its own fields and the Arduino identifier fields) so the Generate/Copy/ Download buttons don't jump around when switching output format. */ - min-height: 278px; + /* min-height: 278px; */ transition: min-height 0.15s ease; } #format-caption-container div { color: var(--text-muted); display: none; - font-size: 14px; + font-size: var(--font-size); line-height: 1.5em; padding: var(--space-2) 0 var(--space-4); width: 100%; @@ -459,7 +466,7 @@ code { .note { color: var(--text-muted); - font-size: 14px; + font-size: var(--font-size); line-height: 1.5em; margin: var(--space-1) 0; } @@ -468,9 +475,9 @@ code { display: none; } -.upload-note { +/* .upload-note { max-width: 320px; -} +} */ #continue-note { display: none; @@ -494,7 +501,7 @@ input[type="number"], textarea, select { font-family: var(--font-body); - font-size: 14px; + font-size: var(--font-size); color: var(--on-surface-variant); background: var(--surface-container); border: 1px solid transparent; @@ -530,13 +537,13 @@ input[type="radio"] { min-width: 360px; width: 100%; font-family: var(--font-mono); - font-size: 14px; + font-size: var(--font-size); line-height: 22px; resize: vertical; } #text-input-error { color: var(--error); - font-size: 14px; + font-size: var(--font-size); margin-top: var(--space-2); display: none; } @@ -558,7 +565,7 @@ input[type="radio"] { .text-input-size { margin: var(--space-2) 0; color: var(--on-surface-variant); - font-size: 14px; + font-size: var(--font-size); } .size-input { @@ -577,7 +584,10 @@ input[type="radio"] { } .sub-field-label { - min-width: 160px; + min-width: 200px; + font-family: var(--font-mono); + font-size: 13px; + color: var(--primary); } .glyph-input { @@ -618,7 +628,7 @@ input[type="file"] { color: var(--on-surface-variant); /* border: 2px dashed var(--outline-variant); */ border-radius: var(--radius-lg); - font-size: 14px; + font-size: var(--font-size); padding: 16px 20px; margin: var(--space-2) 0 0; cursor: pointer; @@ -778,7 +788,7 @@ input[type="file"]::file-selector-button { border: 1px solid var(--on-surface-variant); border-radius: var(--radius-xl); font-family: var(--font-mono); - font-size: 14px; + font-size: var(--font-size); line-height: 22px; padding: 20px; resize: vertical; @@ -870,6 +880,11 @@ input[type="file"]::file-selector-button { .table-cell:first-child { padding-bottom: 0; } + + .settings-grid .table-row { + flex-direction: column; + gap: var(--space-1); + } } /* ---- Dark theme ---- */ diff --git a/index.html b/index.html index df319cd..e559b2a 100644 --- a/index.html +++ b/index.html @@ -85,7 +85,7 @@
-
+
    @@ -99,7 +99,10 @@
    -
    +
    + +
    Used for parts of the canvas that are not covered by your image.
    +
    @@ -107,43 +110,11 @@ -
    - Used for parts of the canvas that are not covered by your image. -
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    - -
    - 0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead. Default is 128. -
    -
    -
    - -
    -
    +
    +
    +
    + +
    +
    +
    Different dithering algorithms produce different results.
    +
    +
    + +
    +
    + +
    +
    + +
    0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead. Default is 128.
    +
    +
    + +
    +
    + +
    +
    + +
    Centering the image only works when using a canvas larger than the original image.
    +
    -
    - Centering the image only works when using a canvas larger than the original image. -
    @@ -288,7 +290,7 @@
    - Uses uint8_t instead of unsigned char and drops PROGMEM, which is a no-op on ESP32. + Use uint8_t instead of unsigned char and drops PROGMEM, which is a no-op on ESP32.
    @@ -323,10 +325,11 @@ Set to 0 to wrap using the image's width instead, e.g. an 8px wide image adds a newline every 8th byte.
    + - - Adds a dot/hash ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row". + Add an ascii-art comment after each row of bytes. Forces one image row per output line, regardless of "Bytes per row".
    + diff --git a/js/script.js b/js/script.js index 4a2ddb5..97b5b94 100644 --- a/js/script.js +++ b/js/script.js @@ -16,7 +16,7 @@ const settings = { drawMode: 'horizontal', prefix: '0x', ditheringThreshold: 128, - ditheringMode: 2, + ditheringMode: 0, outputFormat: 'plain', separator: ', ', outputComments: true,