Custom
-
-
Custom Binary
-
Custom Denary
-
-
Random
+
+ Custom Binary
+ Custom Denary
-
Random runs briefly then stops automatically.
-
+
+ Random
+
-
-
+ Random runs briefly then stops automatically.
+
+
+
+
Tools
- â–¼
- â–²
+ â–¼
+ â–²
-
-
+
Reset
+
+
+
+
-
-
-
- Denary
- 0
-
- Binary
- 0000 0000
-
-
-
-
-
-
-
-
-
-
+
+
diff --git a/src/scripts/binary.js b/src/scripts/binary.js
index 5d7af61..197efa9 100644
--- a/src/scripts/binary.js
+++ b/src/scripts/binary.js
@@ -1,6 +1,6 @@
// src/scripts/binary.js
-// Computing:Box — Binary page logic (Unsigned + Two's Complement)
-// Matches IDs/classes in your current binary.astro HTML.
+// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement)
+// Matches IDs/classes in binary.astro
(() => {
/* -----------------------------
@@ -13,10 +13,11 @@
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");
-
const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnShiftRight = document.getElementById("btnShiftRight");
@@ -28,7 +29,7 @@
const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown");
- // Toolbox toggle
+ const toolbox = document.getElementById("toolbox");
const toolboxToggle = document.getElementById("toolboxToggle");
/* -----------------------------
@@ -94,22 +95,18 @@
const u = bitsToUnsignedBigInt();
const signBit = bits[bitCount - 1] === true;
if (!signBit) return u;
-
- // negative: u - 2^n
- return u - pow2Big(bitCount);
+ return u - pow2Big(bitCount); // negative: u - 2^n
}
function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); // 2^n
- let v = vSigned;
-
- // Convert to unsigned representative: v mod 2^n
- v = ((v % span) + span) % span;
+ // convert to unsigned representative: v mod 2^n
+ const v = ((vSigned % span) + span) % span;
unsignedBigIntToBits(v);
}
function formatBinaryGrouped() {
- // MSB..LSB with a space every 4 bits
+ // MSB..LSB with space every 4 bits
let s = "";
for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0";
@@ -122,11 +119,9 @@
function updateModeHint() {
if (!modeHint) return;
if (isTwosMode()) {
- modeHint.textContent =
- "Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
+ 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 = "Tip: In unsigned binary, all bits represent positive values.";
}
}
@@ -137,7 +132,7 @@
bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount);
- // resize bits array, preserve existing LSBs where possible
+ // 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];
@@ -150,7 +145,7 @@
bitEl.className = "bit";
bitEl.innerHTML = `
-
💡
+
@@ -161,8 +156,8 @@
bitsGrid.appendChild(bitEl);
}
- // Hook switches
- bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+ // Hook switches (only the bit switches, not the mode toggle)
+ bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => {
const i = Number(input.dataset.index);
bits[i] = input.checked;
@@ -190,7 +185,7 @@
}
function syncSwitchesToBits() {
- bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+ bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
const i = Number(input.dataset.index);
input.checked = !!bits[i];
});
@@ -200,18 +195,7 @@
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue;
-
- const on = bits[i] === true;
- if (on) {
- bulb.style.opacity = "1";
- bulb.style.filter = "grayscale(0)";
- bulb.style.textShadow =
- "0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45)";
- } else {
- bulb.style.opacity = "0.45";
- bulb.style.filter = "grayscale(1)";
- bulb.style.textShadow = "none";
- }
+ bulb.classList.toggle("on", bits[i] === true);
}
}
@@ -223,7 +207,6 @@
} else {
denaryEl.textContent = bitsToUnsignedBigInt().toString();
}
-
binaryEl.textContent = formatBinaryGrouped();
}
@@ -236,26 +219,21 @@
}
/* -----------------------------
- SET FROM BINARY STRING
+ SET FROM INPUTS
----------------------------- */
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];
bits[i] = charFromRight === "1";
}
-
updateUI();
return true;
}
- /* -----------------------------
- SET FROM DENARY INPUT
- ----------------------------- */
function setFromDenaryInput(vStr) {
const raw = String(vStr ?? "").trim();
if (!raw) return false;
@@ -287,14 +265,21 @@
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() {
- for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
- bits[bitCount - 1] = false;
+ // ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit)
+ const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false;
+
+ for (let i = 0; i < bitCount - 1; i++) {
+ bits[i] = bits[i + 1];
+ }
+ bits[bitCount - 1] = preserveMSB;
updateUI();
}
@@ -311,7 +296,7 @@
const min = twosMin(bitCount);
const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() + 1n;
- if (v > max) v = min;
+ if (v > max) v = min; // wrap
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
@@ -326,7 +311,7 @@
const min = twosMin(bitCount);
const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() - 1n;
- if (v < min) v = max;
+ if (v < min) v = max; // wrap
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
@@ -337,7 +322,7 @@
}
/* -----------------------------
- RANDOM (BigInt-safe)
+ RANDOM (crypto, BigInt-safe)
----------------------------- */
function cryptoRandomBigInt(maxExclusive) {
if (maxExclusive <= 0n) return 0n;
@@ -361,19 +346,23 @@
function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount); // 2^n
- const u = cryptoRandomBigInt(span);
+ const u = cryptoRandomBigInt(span); // 0..2^n-1
unsignedBigIntToBits(u);
updateUI();
}
+ function stopRandomPulse() {
+ btnRandom?.classList.remove("running");
+ }
+
function runRandomBriefly() {
+ // stop any existing run first
if (randomTimer) {
clearInterval(randomTimer);
randomTimer = null;
}
- // pulse while running
- btnRandom?.classList.add("is-running");
+ btnRandom?.classList.add("running");
const start = Date.now();
const durationMs = 900;
@@ -384,44 +373,37 @@
if (Date.now() - start >= durationMs) {
clearInterval(randomTimer);
randomTimer = null;
- btnRandom?.classList.remove("is-running");
+ stopRandomPulse();
}
}, tickMs);
}
/* -----------------------------
- BIT WIDTH CONTROLS
+ BIT WIDTH
----------------------------- */
function setBitWidth(n) {
- buildBits(clampInt(n, 1, 64));
+ const v = clampInt(n, 1, 64);
+ buildBits(v);
}
/* -----------------------------
- TOOLBOX TOGGLE (never disappears)
+ TOOLBOX TOGGLE
----------------------------- */
function setToolboxHidden(hidden) {
- document.body.classList.toggle("toolbox-hidden", hidden);
- if (toolboxToggle) toolboxToggle.setAttribute("aria-expanded", String(!hidden));
- try { localStorage.setItem("computingbox.toolboxHidden", hidden ? "1" : "0"); } catch {}
+ if (!toolbox) return;
+ toolbox.style.display = hidden ? "none" : "";
+ toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true");
}
- function initToolboxState() {
- let hidden = false;
- try { hidden = localStorage.getItem("computingbox.toolboxHidden") === "1"; } catch {}
- setToolboxHidden(hidden);
- }
+ toolboxToggle?.addEventListener("click", () => {
+ const hidden = toolbox?.style.display === "none";
+ setToolboxHidden(!hidden);
+ });
/* -----------------------------
EVENTS
----------------------------- */
- toolboxToggle?.addEventListener("click", () => {
- const hidden = document.body.classList.contains("toolbox-hidden");
- setToolboxHidden(!hidden);
- });
-
- modeToggle?.addEventListener("change", () => {
- updateUI();
- });
+ modeToggle?.addEventListener("change", () => updateUI());
btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -446,19 +428,18 @@
btnDec?.addEventListener("click", decrement);
btnClear?.addEventListener("click", clearAll);
+
btnRandom?.addEventListener("click", runRandomBriefly);
btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1));
btnBitsDown?.addEventListener("click", () => setBitWidth(bitCount - 1));
- bitsInput?.addEventListener("change", () => {
- setBitWidth(Number(bitsInput.value));
- });
+ bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));
/* -----------------------------
INIT
----------------------------- */
- initToolboxState();
updateModeHint();
buildBits(bitCount);
+ setToolboxHidden(false);
})();
diff --git a/src/styles/binary.css b/src/styles/binary.css
index c18fa48..5a41e34 100644
--- a/src/styles/binary.css
+++ b/src/styles/binary.css
@@ -6,9 +6,6 @@
--accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12);
-
- --toolbox-width: 320px; /* adjust if needed */
- --toolbox-gap: 28px;
}
@font-face{
@@ -22,7 +19,7 @@
}
@font-face{
- font-family: "SevenSegment";
+ font-family: "Seven-Segment";
src:
url("/fonts/Seven-Segment.woff2") format("woff2"),
url("/fonts/Seven-Segment.woff") format("woff");
@@ -31,98 +28,26 @@
font-display: swap;
}
-html, body{
- height: 100%;
-}
-
body{
margin:0;
background: var(--bg);
color: var(--text);
- font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+ font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
-/* ---------------------------------
- Toolbox toggle (always visible)
----------------------------------- */
-.toolboxToggle{
- position: fixed;
- top: 18px;
- right: 18px;
- z-index: 9999;
- display:flex;
- align-items:center;
- gap: 10px;
-
- background: rgba(255,255,255,.06);
- border: 1px solid rgba(255,255,255,.14);
- color: #fff;
- border-radius: 12px;
- padding: 10px 12px;
- cursor: pointer;
- font-weight: 800;
- letter-spacing: .12em;
- text-transform: uppercase;
-}
-
-.toolboxToggleIcon{
- display:inline-block;
- transform: translateY(1px);
-}
-
-.toolboxToggleText{
- font-size: 12px;
-}
-
-/* ---------------------------------
- Fixed toolbox panel
----------------------------------- */
-.toolbox{
- position: fixed;
- top: 74px; /* leaves room for the toggle button */
- right: 18px;
- width: var(--toolbox-width);
- z-index: 9998;
-}
-
-.toolboxInner{
- display:flex;
- flex-direction:column;
- gap: 14px;
-}
-
-/* When hidden, toolbox slides out but toggle stays */
-body.toolbox-hidden .toolbox{
- transform: translateX(calc(var(--toolbox-width) + 40px));
- opacity: 0;
- pointer-events: none;
- transition: transform .22s ease, opacity .18s ease;
-}
-
-.toolbox{
- transition: transform .22s ease, opacity .18s ease;
-}
-
-/* ---------------------------------
- Main wrap: reserve space for toolbox
----------------------------------- */
.wrap{
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 60px;
-
- /* Reserve space so toolbox never overlaps bits */
- padding-right: calc(var(--toolbox-width) + var(--toolbox-gap) + 20px);
- transition: padding-right .22s ease;
}
-body.toolbox-hidden .wrap{
- padding-right: 20px;
+.topGrid{
+ display:grid;
+ grid-template-columns: 1fr 340px;
+ gap: 28px;
+ align-items:start;
}
-/* ---------------------------------
- Readout
----------------------------------- */
.readout{
text-align:center;
padding: 10px 10px 0;
@@ -144,27 +69,19 @@ body.toolbox-hidden .wrap{
text-shadow: 0 0 18px var(--accent-dim);
}
-/* (You previously wanted these 25% smaller than earlier large sizes) */
.denaryValue{
- font-size: 52px;
+ font-size: 52px; /* smaller than earlier */
line-height: 1.0;
margin: 6px 0 10px;
}
.binaryValue{
- font-size: 40px;
- letter-spacing: .14em; /* +1-2px feel */
- line-height: 1.08;
+ font-size: 40px; /* smaller than earlier */
+ letter-spacing: .14em;
+ line-height: 1.05;
margin: 6px 0 14px;
-
- /* Allow wrapping at spaces between nibbles */
white-space: pre-wrap;
- word-break: normal;
- overflow-wrap: anywhere;
-
- /* Prevent absurd-wide overflow; respects toolbox space */
- max-width: calc(100vw - var(--toolbox-width) - 120px);
- display:inline-block;
+ word-break: break-word;
}
.divider{
@@ -172,9 +89,39 @@ body.toolbox-hidden .wrap{
border-top: 1px solid var(--line);
}
-/* ---------------------------------
- Cards & common controls
----------------------------------- */
+/* 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 */
+.panelCol{
+ display:flex;
+ flex-direction:column;
+ gap: 14px;
+ position: sticky;
+ top: 16px;
+}
+
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
@@ -184,7 +131,7 @@ body.toolbox-hidden .wrap{
.cardTitle{
letter-spacing: .18em;
- font-weight: 900;
+ font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
@@ -194,38 +141,10 @@ body.toolbox-hidden .wrap{
.hint{
color: var(--muted);
font-size: 12px;
- margin-top: 10px;
+ margin-top: 8px;
line-height: 1.35;
}
-.btn{
- background: rgba(255,255,255,.06);
- border: 1px solid rgba(255,255,255,.14);
- color: #fff;
- padding: 12px 14px;
- border-radius: 12px;
- font-weight: 800;
- cursor: pointer;
- min-width: 0;
- font-family: "SevenSegment", system-ui, sans-serif;
- letter-spacing: .12em;
- text-transform: uppercase;
-}
-.btn:active{ transform: translateY(1px); }
-
-.btnAccent{
- background: rgba(51,255,122,.18);
- border-color: rgba(51,255,122,.45);
-}
-
-.btnSmall{
- padding: 10px 10px;
- font-size: 12px;
-}
-
-/* ---------------------------------
- Settings toggle
----------------------------------- */
.toggleRow{
display:flex;
align-items:center;
@@ -235,10 +154,11 @@ body.toolbox-hidden .wrap{
.toggleLabel{
color: var(--text);
- font-weight: 800;
+ font-weight: 700;
font-size: 14px;
}
+/* Switch */
.switch{
position: relative;
width: 56px;
@@ -279,33 +199,52 @@ body.toolbox-hidden .wrap{
background: var(--accent);
}
-/* ---------------------------------
- Settings: Bit width subcard full width
----------------------------------- */
+/* Buttons */
+.btn{
+ background: rgba(255,255,255,.06);
+ border: 1px solid rgba(255,255,255,.14);
+ color: #fff;
+ padding: 12px 14px;
+ border-radius: 12px;
+ font-weight: 800;
+ cursor: pointer;
+}
+.btn:active{ transform: translateY(1px); }
+.btnAccent{
+ background: rgba(51,255,122,.18);
+ border-color: rgba(51,255,122,.45);
+}
+
+.twoBtnRow{
+ display:grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+}
+
+/* Sub card */
.subCard{
margin-top: 12px;
background: rgba(255,255,255,.03);
- border: 1px solid rgba(255,255,255,.10);
+ border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 12px;
}
-
-.subCardTitle{
- letter-spacing: .18em;
+.subTitle{
+ font-size: 12px;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
- font-size: 11px;
- margin: 0 0 10px;
+ letter-spacing: .18em;
+ margin-bottom: 10px;
}
+/* Bit width control */
.bitWidthRow{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
}
-
.miniBtn{
height:44px;
width:44px;
@@ -316,9 +255,7 @@ body.toolbox-hidden .wrap{
cursor:pointer;
font-weight:900;
font-size:18px;
- font-family: "SevenSegment", system-ui, sans-serif;
}
-
.bitInputWrap{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
@@ -328,8 +265,8 @@ body.toolbox-hidden .wrap{
align-items:center;
justify-content:space-between;
gap:12px;
+ min-width: 140px; /* ensures 2 digits fits comfortably */
}
-
.bitInputLabel{
color:var(--muted);
font-size:12px;
@@ -337,9 +274,8 @@ body.toolbox-hidden .wrap{
letter-spacing:.18em;
text-transform:uppercase;
}
-
.bitInput{
- width: 90px; /* fits 2 digits comfortably */
+ width:60px;
text-align:right;
background:transparent;
border:none;
@@ -354,35 +290,10 @@ body.toolbox-hidden .wrap{
margin:0;
}
-/* ---------------------------------
- Custom card (includes Random)
----------------------------------- */
-.customGrid{
- display:grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
-}
-
-.customGrid .btnRandom{
- grid-column: 1 / -1;
-}
-
-/* Random running pulse (green) */
-@keyframes pulseGreen{
- 0% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
- 50% { box-shadow: 0 0 18px rgba(51,255,122,0.55), 0 0 34px rgba(51,255,122,0.25); }
- 100% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
-}
-.btnRandom.is-running{
- animation: pulseGreen .8s ease-in-out infinite;
-}
-
-/* ---------------------------------
- Tools card
----------------------------------- */
+/* Tools layout */
.toolsTopRow{
display:flex;
- justify-content:center; /* centred to the card */
+ justify-content:center;
gap: 10px;
margin-bottom: 10px;
}
@@ -395,56 +306,52 @@ body.toolbox-hidden .wrap{
color: #fff;
cursor: pointer;
font-weight: 900;
- font-family: "SevenSegment", system-ui, sans-serif;
- letter-spacing: .12em;
- text-transform: uppercase;
+ letter-spacing: .08em;
}
-.toolSpin{
- width: 64px; /* narrower */
+.toolWide{
+ width: 100%;
+ margin-top: 10px;
+}
+
+.toolArrow{
+ width: 72px;
font-size: 22px;
}
-.toolDec{
- background: rgba(255, 60, 60, .22);
- border-color: rgba(255, 60, 60, .40);
+.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);
}
-.toolInc{
- background: rgba(51,255,122,.18);
- border-color: rgba(51,255,122,.45);
+/* 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);
}
-.toolsShiftRow{
- display:grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
- margin-bottom: 10px;
-}
-
-.toolReset{
- width: 100%;
- height: 54px;
- font-size: 14px;
-}
-
-/* Reset hover pulse (red) */
-@keyframes pulseRed{
- 0% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
- 50% { box-shadow: 0 0 18px rgba(255,60,60,0.55), 0 0 34px rgba(255,60,60,0.25); }
- 100% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
+/* 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 .75s ease-in-out infinite;
- border-color: rgba(255, 60, 60, .55);
+ animation: pulseRed .85s ease-in-out infinite;
+ border-color: rgba(255,0,0,.40);
}
-/* ---------------------------------
- Bits grid
----------------------------------- */
-.bitsWrap{
- margin-top: 22px;
-}
+/* Bits */
+.bitsWrap{ margin-top: 22px; }
.bitsGrid{
display:grid;
@@ -454,7 +361,6 @@ body.toolbox-hidden .wrap{
padding-top: 18px;
}
-/* Each bit tile */
.bit{
display:flex;
flex-direction:column;
@@ -464,60 +370,47 @@ body.toolbox-hidden .wrap{
text-align:center;
}
-/* Bulb emoji only (no circle), +25% larger */
+/* Bulb (25% bigger) */
.bulb{
- width:auto;
- height:auto;
- border:none;
- background:transparent;
- border-radius:0;
- box-shadow:none;
-
+ width: 42px;
+ height: 42px;
display:flex;
align-items:center;
justify-content:center;
-
- font-size: 33px; /* ~25% up from ~26px */
+ font-size: 26px;
line-height: 1;
- opacity: .45;
+ opacity: .55;
+ background: transparent;
+ border: none;
+}
+.bulb::before{
+ content:"💡";
filter: grayscale(1);
}
+.bulb.on{
+ opacity: 1;
+ text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
+}
+.bulb.on::before{
+ filter: grayscale(0);
+}
-/* Weight label */
+/* Bit values MUST NOT WRAP */
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
- font-size: 28px; /* keep readable */
+ font-size: 28px;
color: var(--text);
opacity: .95;
- line-height: 1.05;
+ line-height: 1;
min-height: 32px;
-
- /* prevent overlap: allow wrapping + constrain */
- max-width: 90px;
- white-space: normal;
- overflow-wrap: anywhere;
- text-align:center;
+ white-space: nowrap; /* IMPORTANT FIX */
}
/* Responsive */
@media (max-width: 980px){
- .wrap{ max-width: 980px; }
- .bitsGrid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); }
+ .topGrid{ grid-template-columns: 1fr; }
+ .panelCol{ position: static; }
}
-
-@media (max-width: 720px){
- .wrap{
- padding-right: 20px; /* on small screens, don’t reserve fixed space */
- }
- .toolbox{
- right: 10px;
- width: min(var(--toolbox-width), calc(100vw - 20px));
- }
- .binaryValue{
- max-width: calc(100vw - 40px);
- }
-}
-
@media (max-width: 520px){
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}