filifa
/
mcalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adapt for small screens

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent becee9632f
commit dacf8caecf
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -8,13 +8,15 @@
</head>
<body>
<div id="calculator">
<div id="input-row">
<label for="expr">Expression</label>
<input id="expr" required type="text" />
<div id="modulus-row">
<label for="modulus">mod</label>
<div id="modulus-box">
<label id="modulus-label" for="modulus">mod</label>
<input id="modulus" required type="number" min="1" step="1" />
</div>
</div>
<output id="result" for="expr modulus"></output>

27
styles.css
View File

@ -7,13 +7,32 @@ label[for="expr"] {
display: none;
}
#expr {
#input-row {
grid-column: 1 / 5;
display: flex;
flex-flow: wrap;
}
#modulus-row {
grid-column: 1 / 5;
text-align: right;
#expr {
flex: 4 auto;
min-width: 0;
}
#modulus-box {
flex: auto;
display: flex;
flex-flow: wrap;
justify-content: end;
min-width: 0;
}
#modulus-label {
flex: initial;
}
#modulus {
flex: auto;
min-width: 0;
}
#result {