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

7
public/index.html
View File

@@ -7,7 +7,8 @@
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body class="layer-0">
<div class="layer-1 content">
<h1>CodeList</h1>
<div>
<h3>Generate new list</h3>
@@ -31,6 +32,8 @@
</div>
</div>
</div>
<script>
const outputArea = document.getElementById("output-area");
@@ -95,7 +98,7 @@
outputArea.append(row)
}
setRows(["1","2","3","4","5"])
setRows(["0123","4567","89Aa","BbCC","DdEe"])
</script>
</body>
</html>

48
public/style.css
View File

@@ -1,22 +1,54 @@
#output-area {
border-right: 2px solid grey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
width: 30ch;
body {
font-family: sans-serif;
}
#output-area:focus {
outline: none;
.layer-0 {
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 {
background-color: rgb(179, 179, 179);
background-color: #F2F4F6;
height: 4ch;
padding-right: 0.4rem;
padding-left: 2rem;
}
.output-row {
display: flex;
background-color: white;
}
.strike {
text-decoration: line-through;
}
.content-row {
padding-top: 0.1rem;
padding-left: .5rem;
}