diff --git a/src/pages/binary.astro b/src/pages/binary.astro index d4e91a5..8524e1e 100644 --- a/src/pages/binary.astro +++ b/src/pages/binary.astro @@ -59,38 +59,35 @@ import binaryScriptUrl from "../scripts/binary.js?url"; - + diff --git a/src/scripts/binary.js b/src/scripts/binary.js index 6fb1103..5d64896 100644 --- a/src/scripts/binary.js +++ b/src/scripts/binary.js @@ -464,6 +464,17 @@ /* ----------------------------- EVENTS ----------------------------- */ + + // Collapsible right panel + const sidePanel = document.getElementById("sidePanel"); + const btnPanelToggle = document.getElementById("btnPanelToggle"); + + btnPanelToggle?.addEventListener("click", () => { + sidePanel?.classList.toggle("isCollapsed"); + // flip the chevron + btnPanelToggle.textContent = sidePanel?.classList.contains("isCollapsed") ? "❮" : "❯"; + }); + modeToggle?.addEventListener("change", () => { updateUI(); }); @@ -506,3 +517,4 @@ updateModeHint(); buildBits(bitCount); })(); + diff --git a/src/styles/binary.css b/src/styles/binary.css index a62409a..288f2ef 100644 --- a/src/styles/binary.css +++ b/src/styles/binary.css @@ -7,13 +7,14 @@ --accent-dim: rgba(51,255,122,.15); --line: rgba(255,255,255,.12); - --danger: #e24444; - --danger-dim: rgba(226,68,68,.22); - --success: #2fd66b; - --success-dim: rgba(47,214,107,.22); + /* right column sizing */ + --sideW: 720px; + --sidePad: 24px; + + /* header offset (tweak if your header is taller/shorter) */ + --sideTop: 92px; } -/* -------- Fonts -------- */ @font-face{ font-family: "DSEG7ClassicRegular"; src: @@ -41,15 +42,17 @@ body{ color: var(--text); } +/* Leave enough room for the fixed right panel */ .wrap{ max-width: 1200px; margin: 0 auto; padding: 32px 20px 60px; + padding-right: calc(var(--sideW) + (var(--sidePad) * 2)); } .topGrid{ display:grid; - grid-template-columns: 1fr 340px; + grid-template-columns: 1fr; gap: 28px; align-items:start; } @@ -68,7 +71,6 @@ body{ margin-top: 10px; } -/* Anything that is a number uses DSEG7 */ .num{ font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 400; @@ -76,18 +78,20 @@ body{ text-shadow: 0 0 18px var(--accent-dim); } +/* 25% smaller */ .denaryValue{ - font-size: 70px; + font-size: 53px; line-height: 1.0; margin: 6px 0 10px; } +/* 25% smaller + slightly wider spacing */ .binaryValue{ - font-size: 52px; - letter-spacing: .12em; + font-size: 39px; + letter-spacing: calc(.12em + 2px); line-height: 1.0; margin: 6px 0 14px; - white-space: pre; + white-space: pre; /* preserve spaces */ } .controlsStack{ @@ -128,12 +132,45 @@ body{ border-top: 1px solid var(--line); } +/* ------------------------- + RIGHT COLUMN: pinned + collapsible +------------------------- */ .panelCol{ + position: fixed; + right: var(--sidePad); + top: var(--sideTop); + width: var(--sideW); display:flex; flex-direction:column; gap: 14px; + z-index: 50; + transition: transform .2s ease; } +/* collapse leaves a small handle visible */ +.panelCol.isCollapsed{ + transform: translateX(calc(100% - 52px)); +} + +.panelToggle{ + position: absolute; + left: -52px; + top: 0; + width: 44px; + height: 44px; + border-radius: 12px; + border: 1px solid rgba(255,255,255,.14); + background: rgba(255,255,255,.06); + color: #fff; + cursor: pointer; + font-weight: 900; + display:flex; + align-items:center; + justify-content:center; + font-family: "SevenSegment", system-ui, sans-serif; +} + +/* cards */ .card{ background: var(--panel2); border: 1px solid rgba(255,255,255,.10); @@ -168,10 +205,9 @@ body{ color: var(--text); font-weight: 700; font-size: 14px; - font-family: "SevenSegment", system-ui, sans-serif; } -/* Switch */ +/* Shared toggle switch */ .switch{ position: relative; width: 56px; @@ -212,19 +248,23 @@ body{ background: var(--accent); } -/* Tools layout */ -.toolRow{ - display:grid; - grid-template-columns: 1fr 1fr; - gap: 10px; - margin-bottom: 10px; +/* Tools + Bit Width side-by-side */ +.sideRow{ + display:flex; + gap: 14px; } -.toolRow2{ - display:grid; - grid-template-columns: 1fr 1fr; - gap: 10px; +.sideRow .card{ + flex: 1 1 0; } +/* Tools layout: arrows row + reset/random row */ +.toolRow, .toolRow2{ + display:flex; + gap: 10px; + align-items:center; +} + +/* Reset/Random = 50% current width (explicit) */ .toolBtn{ height: 48px; border-radius: 12px; @@ -236,23 +276,26 @@ body{ font-family: "SevenSegment", system-ui, sans-serif; } -/* Narrower arrow buttons (only the arrow pair) */ -.toolSpin{ +/* Reset/Random smaller */ +.toolBtn.toolHalf{ + width: 120px; +} + +/* Arrows half of that */ +.toolBtn.toolQuarter{ + width: 60px; font-size: 22px; - height: 48px; - max-width: 120px; /* narrower */ - justify-self: start; padding: 0; } -/* Down = red, Up = green */ -#btnDec{ - background: var(--danger-dim); - border-color: rgba(226,68,68,.45); +/* colour arrows */ +.toolBtn.toolUp{ + background: rgba(51,255,122,.18); + border-color: rgba(51,255,122,.45); } -#btnInc{ - background: var(--success-dim); - border-color: rgba(47,214,107,.45); +.toolBtn.toolDown{ + background: rgba(255,80,80,.18); + border-color: rgba(255,80,80,.45); } /* Bit width control */ @@ -291,7 +334,6 @@ body{ font-weight:800; letter-spacing:.18em; text-transform:uppercase; - font-family: "SevenSegment", system-ui, sans-serif; } .bitInput{ width:86px; @@ -333,38 +375,22 @@ body{ text-align:center; } -/* Bulb (emoji only — no circle, no ::before so it won't duplicate) */ +/* Bulb: no circle here (JS controls the emoji), but keep sizing if used */ .bulb{ - width: auto; - height: auto; border: none; background: transparent; + width: auto; + height: auto; border-radius: 0; box-shadow: none; - display:flex; align-items:center; justify-content:center; - - font-size: 26px; line-height: 1; - opacity: .45; - filter: grayscale(1); - text-shadow: none; + opacity: .55; + font-size: 33px; /* 25% larger from 26px */ } -/* IMPORTANT: remove the pseudo-element that was causing the 2nd bulb */ -.bulb::before{ - content: none; -} - -.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); -} - -/* Bit value numbers use DSEG7 */ .bitVal{ font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-size: 28px; @@ -374,13 +400,22 @@ body{ min-height: 32px; } +/* responsive: stop pinning on small screens */ @media (max-width: 980px){ - .topGrid{ grid-template-columns: 1fr; } - .denaryValue{ font-size: 62px; } - .binaryValue{ font-size: 46px; } + .panelCol{ + position: static; + width: auto; + transform: none !important; + } + .panelToggle{ display:none; } + .wrap{ + padding-right: 20px; + } } @media (max-width: 520px){ .btn{ min-width: 150px; } .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); } + .toolBtn.toolHalf{ width: 100px; } + .toolBtn.toolQuarter{ width: 52px; } }