You've already forked computing-box
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"
This commit is contained in:
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user