display label for expression

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent c67f6a95f4
commit d427a83279
2 changed files with 19 additions and 8 deletions

View File

@ -9,8 +9,10 @@
<body>
<div id="calculator">
<div id="input-row">
<label for="expr">Expression</label>
<input id="expr" required type="text" inputmode="none" />
<div id="expr-box">
<label id="expr-label" for="expr">Expression</label>
<input id="expr" required type="text" inputmode="none" />
</div>
<div id="modulus-box">
<label id="modulus-label" for="modulus">mod</label>

View File

@ -4,19 +4,26 @@
gap: 0.3rem;
}
label[for="expr"] {
display: none;
}
#input-row {
grid-column: 1 / 5;
display: flex;
flex-flow: wrap;
}
#expr {
#expr-box {
flex: 4 auto;
display: flex;
flex-flow: column;
min-width: 0;
}
#expr-label {
flex: initial;
font-size: medium;
}
#expr {
flex: auto;
font-size: xx-large;
}
@ -25,13 +32,15 @@ label[for="expr"] {
display: flex;
flex-flow: wrap;
justify-content: end;
align-items: end;
min-width: 0;
}
#modulus-label {
flex: initial;
font-size: xx-large;
margin: auto 0.3rem;
margin-left: 0.3rem;
margin-right: 0.3rem;
}
#modulus {