CentreMetre/CodeList
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Improve Styling

Browse Source
This commit is contained in:
CentreMetre
2026-06-01 21:29:56 +01:00
parent 3ba7d94441
commit ed7efdcaa3
2 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/index.html
View File

@@ -7,28 +7,31 @@
<title>HTML 5 Boilerplate</title> <title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body class="layer-0">
<h1>CodeList</h1> <div class="layer-1 content">
<div> <h1>CodeList</h1>
<h3>Generate new list</h3> <div>
<div> <h3>Generate new list</h3>
<label for="input-length"> <div>
Code Length (<i>n</i>) <label for="input-length">
</label> Code Length (<i>n</i>)
<input id="input-length" placeholder="4" min="1" type="number"> </label>
</div> <input id="input-length" placeholder="4" min="1" type="number">
<div> </div>
<label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label> <div>
<input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text"> <label>Character Set (<i>Σ</i>) <span title="Input comma seperated values. For example `1, 3, 6, 8` means that the code has 1, 3, 6, and 8 in it.">ⓘ</span></label>
</div> <input id="input-char-set" placeholder="1, 2, 3, 4" min="1" type="text">
</div> </div>
<div>
<h3>
Output
</h3>
<div id="output">
<div id="output-area" class="output-area"></div>
</div> </div>
<div>
<h3>
Output
</h3>
<div id="output">
<div id="output-area" class="output-area"></div>
</div>
</div>
</div> </div>
<script> <script>
@@ -95,7 +98,7 @@
outputArea.append(row) outputArea.append(row)
} }
setRows(["1","2","3","4","5"]) setRows(["0123","4567","89Aa","BbCC","DdEe"])
</script> </script>
</body> </body>
</html> </html>

48
public/style.css
View File

@@ -1,22 +1,54 @@
#output-area { body {
border-right: 2px solid grey; font-family: sans-serif;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
width: 30ch;
} }
#output-area:focus { .layer-0 {
outline: none; background-color: #F2F4F6;
}
.layer-1 {
background-color: #F7F9FB;
}
.content {
padding-left: 2rem;
padding-right: 2rem;
margin-left: 1rem;
margin-right: 1rem;
border: 1px solid #dcd9e5;
border-radius: .5rem;
}
#output-area {
border-right: 2px solid #DCDBE6;
border-top: 1px solid #DCDBE6;
border-bottom: 1px solid #DCDBE6;
border-left: 1px solid #DCDBE6;
/* border-radius: .5rem; */
width: 30ch;
font-family: 'Courier New', Courier, monospace;
} }
.gutter-row { .gutter-row {
background-color: rgb(179, 179, 179); background-color: #F2F4F6;
height: 4ch;
padding-right: 0.4rem;
padding-left: 2rem;
} }
.output-row { .output-row {
display: flex; display: flex;
background-color: white;
} }
.strike { .strike {
text-decoration: line-through; text-decoration: line-through;
} }
.content-row {
padding-top: 0.1rem;
padding-left: .5rem;
}