From 8b3c58c8d9c5ba272a0e3e362a597b40ffb50498 Mon Sep 17 00:00:00 2001 From: Alexander Lyall Date: Tue, 16 Dec 2025 19:56:40 +0000 Subject: [PATCH] Recent Changes: - Make the navigation bar 3 times it's current height - The navbar needs the Computing:Box logo to the left of the site name - Move the toolbox button to appear below the navigation bar - Make the background of the random button glow/pulse green when random is running - Make Random run a little longer (like 25% more) - Rename the "Custom" card to "Custom Number" --- public/images/computing-box-logo.svg | 1017 ++++++++++++++++++++++++++ src/layouts/BaseLayout.astro | 134 +++- src/scripts/binary.js | 116 ++- src/styles/binary.css | 290 ++++---- 4 files changed, 1318 insertions(+), 239 deletions(-) create mode 100644 public/images/computing-box-logo.svg diff --git a/public/images/computing-box-logo.svg b/public/images/computing-box-logo.svg new file mode 100644 index 0000000..7bf11ef --- /dev/null +++ b/public/images/computing-box-logo.svg @@ -0,0 +1,1017 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 9d59a34..95ef8ae 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,5 +1,7 @@ --- -const { title = "Computing:Box" } = Astro.props; +const { + title = "Computing:Box", +} = Astro.props; --- @@ -8,34 +10,124 @@ const { title = "Computing:Box" } = Astro.props; {title} - + -
-
-
Computing:Box
+
+
+ + + + Computing:Box + -
-
- -
+ -
-
-
Computer Science Concept Simulators
-
© 2025 Computing:Box · Created with 💜 by Mr Lyall
-
Powered by ADCM Networks
-
-
+ diff --git a/src/scripts/binary.js b/src/scripts/binary.js index 197efa9..a557ff9 100644 --- a/src/scripts/binary.js +++ b/src/scripts/binary.js @@ -1,6 +1,5 @@ // src/scripts/binary.js -// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement) -// Matches IDs/classes in binary.astro +// Computing:Box — Binary page logic (Unsigned + Two's Complement) (() => { /* ----------------------------- @@ -13,8 +12,6 @@ const modeToggle = document.getElementById("modeToggle"); const modeHint = document.getElementById("modeHint"); - const lblUnsigned = document.getElementById("lblUnsigned"); - const lblTwos = document.getElementById("lblTwos"); const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnCustomDenary = document.getElementById("btnCustomDenary"); @@ -29,18 +26,15 @@ const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsDown = document.getElementById("btnBitsDown"); - const toolbox = document.getElementById("toolbox"); const toolboxToggle = document.getElementById("toolboxToggle"); + const toolboxPanel = document.getElementById("toolboxPanel"); /* ----------------------------- STATE ----------------------------- */ let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64); - - // bits[i] is bit value 2^i (LSB at i=0) let bits = new Array(bitCount).fill(false); - // Random run timer (brief) let randomTimer = null; /* ----------------------------- @@ -60,7 +54,7 @@ } function unsignedMaxExclusive(nBits) { - return pow2Big(nBits); // 2^n + return pow2Big(nBits); } function unsignedMaxValue(nBits) { @@ -95,18 +89,16 @@ const u = bitsToUnsignedBigInt(); const signBit = bits[bitCount - 1] === true; if (!signBit) return u; - return u - pow2Big(bitCount); // negative: u - 2^n + return u - pow2Big(bitCount); } function signedBigIntToBitsTwos(vSigned) { - const span = pow2Big(bitCount); // 2^n - // convert to unsigned representative: v mod 2^n - const v = ((vSigned % span) + span) % span; + const span = pow2Big(bitCount); + let v = ((vSigned % span) + span) % span; unsignedBigIntToBits(v); } function formatBinaryGrouped() { - // MSB..LSB with space every 4 bits let s = ""; for (let i = bitCount - 1; i >= 0; i--) { s += bits[i] ? "1" : "0"; @@ -118,11 +110,9 @@ function updateModeHint() { if (!modeHint) return; - if (isTwosMode()) { - modeHint.textContent = "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."; - } else { - modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values."; - } + modeHint.textContent = isTwosMode() + ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value." + : "Tip: In unsigned binary, all bits represent positive values."; } /* ----------------------------- @@ -132,32 +122,27 @@ bitCount = clampInt(count, 1, 64); if (bitsInput) bitsInput.value = String(bitCount); - // preserve existing LSBs where possible const oldBits = bits.slice(); bits = new Array(bitCount).fill(false); for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i]; bitsGrid.innerHTML = ""; - // Render MSB..LSB left-to-right for (let i = bitCount - 1; i >= 0; i--) { const bitEl = document.createElement("div"); bitEl.className = "bit"; - bitEl.innerHTML = ` - +
`; - bitsGrid.appendChild(bitEl); } - // Hook switches (only the bit switches, not the mode toggle) - bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => { + bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => { input.addEventListener("change", () => { const i = Number(input.dataset.index); bits[i] = input.checked; @@ -176,6 +161,9 @@ const label = document.getElementById(`bitLabel-${i}`); if (!label) continue; + // Keep label on ONE LINE (no wrapping) + label.style.whiteSpace = "nowrap"; + if (isTwosMode() && i === bitCount - 1) { label.textContent = `-${pow2Big(bitCount - 1).toString()}`; } else { @@ -185,7 +173,7 @@ } function syncSwitchesToBits() { - bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => { + bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => { const i = Number(input.dataset.index); input.checked = !!bits[i]; }); @@ -201,12 +189,7 @@ function updateReadout() { if (!denaryEl || !binaryEl) return; - - if (isTwosMode()) { - denaryEl.textContent = bitsToSignedBigIntTwos().toString(); - } else { - denaryEl.textContent = bitsToUnsignedBigInt().toString(); - } + denaryEl.textContent = (isTwosMode() ? bitsToSignedBigIntTwos() : bitsToUnsignedBigInt()).toString(); binaryEl.textContent = formatBinaryGrouped(); } @@ -219,12 +202,11 @@ } /* ----------------------------- - SET FROM INPUTS + INPUT SETTERS ----------------------------- */ function setFromBinaryString(binStr) { const clean = String(binStr ?? "").replace(/\s+/g, ""); if (!/^[01]+$/.test(clean)) return false; - const padded = clean.slice(-bitCount).padStart(bitCount, "0"); for (let i = 0; i < bitCount; i++) { const charFromRight = padded[padded.length - 1 - i]; @@ -265,21 +247,19 @@ SHIFTS ----------------------------- */ function shiftLeft() { - for (let i = bitCount - 1; i >= 1; i--) { - bits[i] = bits[i - 1]; - } + for (let i = bitCount - 1; i >= 1; i--) bits[i] = bits[i - 1]; bits[0] = false; updateUI(); } function shiftRight() { - // ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit) - const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false; + // Unsigned: logical right shift (MSB becomes 0) + // Two's complement: arithmetic right shift (MSB preserved) + const msb = bits[bitCount - 1]; - for (let i = 0; i < bitCount - 1; i++) { - bits[i] = bits[i + 1]; - } - bits[bitCount - 1] = preserveMSB; + for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1]; + + bits[bitCount - 1] = isTwosMode() ? msb : false; updateUI(); } @@ -296,7 +276,7 @@ const min = twosMin(bitCount); const max = twosMax(bitCount); let v = bitsToSignedBigIntTwos() + 1n; - if (v > max) v = min; // wrap + if (v > max) v = min; signedBigIntToBitsTwos(v); } else { const span = unsignedMaxExclusive(bitCount); @@ -311,7 +291,7 @@ const min = twosMin(bitCount); const max = twosMax(bitCount); let v = bitsToSignedBigIntTwos() - 1n; - if (v < min) v = max; // wrap + if (v < min) v = max; signedBigIntToBitsTwos(v); } else { const span = unsignedMaxExclusive(bitCount); @@ -322,7 +302,7 @@ } /* ----------------------------- - RANDOM (crypto, BigInt-safe) + RANDOM (with running pulse + longer run) ----------------------------- */ function cryptoRandomBigInt(maxExclusive) { if (maxExclusive <= 0n) return 0n; @@ -346,26 +326,22 @@ function setRandomOnce() { const span = unsignedMaxExclusive(bitCount); // 2^n - const u = cryptoRandomBigInt(span); // 0..2^n-1 + const u = cryptoRandomBigInt(span); unsignedBigIntToBits(u); updateUI(); } - function stopRandomPulse() { - btnRandom?.classList.remove("running"); - } - function runRandomBriefly() { - // stop any existing run first if (randomTimer) { clearInterval(randomTimer); randomTimer = null; } - btnRandom?.classList.add("running"); + // pulse while running + btnRandom?.classList.add("is-running"); const start = Date.now(); - const durationMs = 900; + const durationMs = 1125; // 25% longer than 900ms const tickMs = 80; randomTimer = setInterval(() => { @@ -373,7 +349,7 @@ if (Date.now() - start >= durationMs) { clearInterval(randomTimer); randomTimer = null; - stopRandomPulse(); + btnRandom?.classList.remove("is-running"); } }, tickMs); } @@ -382,28 +358,22 @@ BIT WIDTH ----------------------------- */ function setBitWidth(n) { - const v = clampInt(n, 1, 64); - buildBits(v); + buildBits(clampInt(n, 1, 64)); } /* ----------------------------- - TOOLBOX TOGGLE + TOOLBOX VISIBILITY ----------------------------- */ - function setToolboxHidden(hidden) { - if (!toolbox) return; - toolbox.style.display = hidden ? "none" : ""; - toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true"); + function setToolboxVisible(isVisible) { + if (!toolboxPanel) return; + toolboxPanel.style.display = isVisible ? "flex" : "none"; + toolboxToggle?.setAttribute("aria-expanded", String(isVisible)); } - toolboxToggle?.addEventListener("click", () => { - const hidden = toolbox?.style.display === "none"; - setToolboxHidden(!hidden); - }); - /* ----------------------------- EVENTS ----------------------------- */ - modeToggle?.addEventListener("change", () => updateUI()); + modeToggle?.addEventListener("change", updateUI); btnCustomBinary?.addEventListener("click", () => { const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`); @@ -428,7 +398,6 @@ btnDec?.addEventListener("click", decrement); btnClear?.addEventListener("click", clearAll); - btnRandom?.addEventListener("click", runRandomBriefly); btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1)); @@ -436,10 +405,15 @@ bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value))); + toolboxToggle?.addEventListener("click", () => { + const isOpen = toolboxToggle.getAttribute("aria-expanded") !== "false"; + setToolboxVisible(!isOpen); + }); + /* ----------------------------- INIT ----------------------------- */ updateModeHint(); buildBits(bitCount); - setToolboxHidden(false); + setToolboxVisible(true); })(); diff --git a/src/styles/binary.css b/src/styles/binary.css index 5a41e34..610e1a9 100644 --- a/src/styles/binary.css +++ b/src/styles/binary.css @@ -8,6 +8,7 @@ --line: rgba(255,255,255,.12); } +/* NUMBERS font */ @font-face{ font-family: "DSEG7ClassicRegular"; src: @@ -18,8 +19,9 @@ font-display: swap; } +/* TEXT font */ @font-face{ - font-family: "Seven-Segment"; + font-family: "SevenSegment"; src: url("/fonts/Seven-Segment.woff2") format("woff2"), url("/fonts/Seven-Segment.woff") format("woff"); @@ -30,24 +32,50 @@ body{ margin:0; + font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); - font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .wrap{ - max-width: 1200px; + max-width: 1400px; margin: 0 auto; - padding: 32px 20px 60px; + padding: 26px 22px 60px; } +/* MAIN GRID */ .topGrid{ display:grid; - grid-template-columns: 1fr 340px; + grid-template-columns: 1fr 360px; gap: 28px; align-items:start; } +/* Toolbox toggle BELOW navbar */ +.toolboxToggle{ + position: sticky; + top: calc(var(--nav-height) + 10px); + z-index: 900; + float: right; + + display:inline-flex; + align-items:center; + gap: 10px; + + background: rgba(255,255,255,.06); + border: 1px solid rgba(255,255,255,.14); + color: #fff; + padding: 10px 14px; + border-radius: 12px; + font-weight: 900; + cursor: pointer; + letter-spacing: .10em; + text-transform: uppercase; + font-size: 12px; +} +.toolboxToggle:hover{ background: rgba(255,255,255,.09); } + +/* Readout */ .readout{ text-align:center; padding: 10px 10px 0; @@ -55,10 +83,10 @@ body{ .label{ letter-spacing: .18em; - font-weight: 700; + font-weight: 900; color: var(--muted); text-transform: uppercase; - font-size: 14px; + font-size: 13px; margin-top: 10px; } @@ -70,13 +98,13 @@ body{ } .denaryValue{ - font-size: 52px; /* smaller than earlier */ + font-size: 52px; line-height: 1.0; margin: 6px 0 10px; } .binaryValue{ - font-size: 40px; /* smaller than earlier */ + font-size: 46px; letter-spacing: .14em; line-height: 1.05; margin: 6px 0 14px; @@ -89,37 +117,11 @@ body{ border-top: 1px solid var(--line); } -/* TOOLBOX BUTTON (must never disappear) */ -.toolboxToggle{ - position: fixed; - top: 16px; - right: 16px; - z-index: 9999; - display: inline-flex; - align-items: center; - gap: 10px; - padding: 10px 14px; - border-radius: 12px; - background: rgba(255,255,255,.06); - border: 1px solid rgba(255,255,255,.14); - color: #fff; - cursor: pointer; - font-weight: 800; -} -.toolboxLabel{ - letter-spacing: .12em; -} -.toolboxIcon{ - filter: saturate(1.1); -} - -/* Toolbox column */ +/* RIGHT COLUMN */ .panelCol{ display:flex; flex-direction:column; gap: 14px; - position: sticky; - top: 16px; } .card{ @@ -131,13 +133,30 @@ body{ .cardTitle{ letter-spacing: .18em; - font-weight: 800; + font-weight: 900; color: var(--muted); text-transform: uppercase; font-size: 12px; margin: 0 0 10px; } +.subCard{ + margin-top: 12px; + background: rgba(255,255,255,.04); + border: 1px solid rgba(255,255,255,.10); + border-radius: 12px; + padding: 12px; +} + +.subTitle{ + letter-spacing: .18em; + font-weight: 900; + color: var(--muted); + text-transform: uppercase; + font-size: 11px; + margin: 0 0 10px; +} + .hint{ color: var(--muted); font-size: 12px; @@ -154,8 +173,10 @@ body{ .toggleLabel{ color: var(--text); - font-weight: 700; - font-size: 14px; + font-weight: 900; + font-size: 13px; + letter-spacing: .08em; + text-transform: uppercase; } /* Switch */ @@ -166,11 +187,7 @@ body{ display:inline-block; flex: 0 0 auto; } -.switch input{ - opacity:0; - width:0; - height:0; -} +.switch input{ opacity:0; width:0; height:0; } .slider{ position:absolute; inset:0; @@ -206,38 +223,91 @@ body{ color: #fff; padding: 12px 14px; border-radius: 12px; - font-weight: 800; + font-weight: 900; cursor: pointer; + letter-spacing: .10em; + text-transform: uppercase; + font-size: 12px; } .btn:active{ transform: translateY(1px); } + .btnAccent{ background: rgba(51,255,122,.18); border-color: rgba(51,255,122,.45); } -.twoBtnRow{ +.customRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; + margin-bottom: 10px; } -/* Sub card */ -.subCard{ - margin-top: 12px; - background: rgba(255,255,255,.03); - border: 1px solid rgba(255,255,255,.08); - border-radius: 12px; - padding: 12px; +.btnRandom{ + width: 100%; } -.subTitle{ - font-size: 12px; - font-weight: 900; - color: var(--muted); - text-transform: uppercase; - letter-spacing: .18em; + +/* Random pulse ONLY while running */ +@keyframes pulseGreen { + 0% { box-shadow: 0 0 0 rgba(51,255,122,0); } + 50% { box-shadow: 0 0 18px rgba(51,255,122,.55), 0 0 28px rgba(51,255,122,.25); } + 100% { box-shadow: 0 0 0 rgba(51,255,122,0); } +} +.btnRandom.is-running{ + animation: pulseGreen 0.9s ease-in-out infinite; +} + +/* Tools */ +.toolRowCenter{ + display:flex; + justify-content:center; + gap: 10px; margin-bottom: 10px; } +.toolBtn{ + height: 48px; + width: 66px; + border-radius: 12px; + background: rgba(255,255,255,.06); + border: 1px solid rgba(255,255,255,.14); + color: #fff; + cursor: pointer; + font-weight: 900; + font-size: 22px; +} + +.toolDec{ + background: rgba(255,0,0,.18); + border-color: rgba(255,0,0,.35); +} +.toolInc{ + background: rgba(51,255,122,.18); + border-color: rgba(51,255,122,.35); +} + +.shiftRow{ + display:grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-bottom: 10px; +} + +/* Reset full-width + red hover pulse/background */ +.btnReset{ + width: 100%; +} + +@keyframes pulseRedBg { + 0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); } + 50% { box-shadow: 0 0 18px rgba(255,0,0,.45), 0 0 28px rgba(255,0,0,.20); background: rgba(255,0,0,.28); } + 100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); } +} +.btnReset:hover{ + border-color: rgba(255,0,0,.45); + animation: pulseRedBg 0.9s ease-in-out infinite; +} + /* Bit width control */ .bitWidthRow{ display:grid; @@ -245,6 +315,7 @@ body{ gap: 10px; align-items:center; } + .miniBtn{ height:44px; width:44px; @@ -256,6 +327,7 @@ body{ font-weight:900; font-size:18px; } + .bitInputWrap{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); @@ -265,7 +337,6 @@ body{ align-items:center; justify-content:space-between; gap:12px; - min-width: 140px; /* ensures 2 digits fits comfortably */ } .bitInputLabel{ color:var(--muted); @@ -275,7 +346,7 @@ body{ text-transform:uppercase; } .bitInput{ - width:60px; + width: 86px; text-align:right; background:transparent; border:none; @@ -290,74 +361,14 @@ body{ margin:0; } -/* Tools layout */ -.toolsTopRow{ - display:flex; - justify-content:center; - gap: 10px; - margin-bottom: 10px; -} - -.toolBtn{ - height: 48px; - border-radius: 12px; - background: rgba(255,255,255,.06); - border: 1px solid rgba(255,255,255,.14); - color: #fff; - cursor: pointer; - font-weight: 900; - letter-spacing: .08em; -} - -.toolWide{ - width: 100%; - margin-top: 10px; -} - -.toolArrow{ - width: 72px; - font-size: 22px; -} - -.toolDown{ - background: rgba(255,0,0,.16); - border-color: rgba(255,0,0,.30); -} -.toolUp{ - background: rgba(51,255,122,.16); - border-color: rgba(51,255,122,.30); -} - -/* Random pulses only while running (class added via JS) */ -@keyframes pulseGreen { - 0% { box-shadow: 0 0 0 rgba(51,255,122,0); } - 50% { box-shadow: 0 0 18px rgba(51,255,122,.45); } - 100% { box-shadow: 0 0 0 rgba(51,255,122,0); } -} -.toolRandom.running{ - animation: pulseGreen .9s ease-in-out infinite; - border-color: rgba(51,255,122,.55); -} - -/* Reset pulses red on hover INCLUDING background */ -@keyframes pulseRed { - 0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); } - 50% { box-shadow: 0 0 18px rgba(255,0,0,.35); background: rgba(255,0,0,.22); } - 100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); } -} -.toolReset:hover{ - animation: pulseRed .85s ease-in-out infinite; - border-color: rgba(255,0,0,.40); -} - -/* Bits */ +/* Bits grid */ .bitsWrap{ margin-top: 22px; } .bitsGrid{ display:grid; gap: 18px; justify-content:center; - grid-template-columns: repeat(8, minmax(90px, 1fr)); + grid-template-columns: repeat(8, minmax(92px, 1fr)); padding-top: 18px; } @@ -370,47 +381,32 @@ body{ text-align:center; } -/* Bulb (25% bigger) */ +/* Bulb 25% bigger */ .bulb{ - width: 42px; - height: 42px; - display:flex; - align-items:center; - justify-content:center; - font-size: 26px; + font-size: 32px; /* was ~26 */ line-height: 1; - opacity: .55; - background: transparent; - border: none; -} -.bulb::before{ - content:"💡"; + opacity: .45; filter: grayscale(1); } .bulb.on{ opacity: 1; + filter: grayscale(0); text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45); } -.bulb.on::before{ - filter: grayscale(0); -} -/* Bit values MUST NOT WRAP */ .bitVal{ font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-size: 28px; color: var(--text); opacity: .95; - line-height: 1; + line-height: 1.05; min-height: 32px; - white-space: nowrap; /* IMPORTANT FIX */ + + /* prevent “run together” when huge values */ + white-space: nowrap; } -/* Responsive */ @media (max-width: 980px){ .topGrid{ grid-template-columns: 1fr; } - .panelCol{ position: static; } -} -@media (max-width: 520px){ - .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); } + .toolboxToggle{ float:none; } }