Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styles

Browse source
This commit is contained in:
lolabird 2023-11-11 08:24:33 -07:00
commit 9de03d4721
2 changed files with 32 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -18,8 +18,8 @@
<button class="pen" id="rgbColor">RGB</button> <button class="pen" id="rgbColor">RGB</button>
<div class="col-picker"> <div class="col-picker">
<label for="custom-color">Pen color:</label> <label class="color-label" for="custom-color">Pen color:</label>
<input type="color" id="custom-color" value="#ff0000"> <input class="color-input" type="color" id="custom-color" value="#ff0000">
</div> </div>
<button class="pen" id="erase">Erase</button> <button class="pen" id="erase">Erase</button>
@ -46,8 +46,8 @@
</div> </div>
<div class="background-col-picker"> <div class="background-col-picker">
<label for="back-col-picker">Canvas color:</label> <label class="color-label" for="back-col-picker">Canvas color:</label>
<input type="color" id="back-col-picker" value="#ff0000"> <input class="color-input" type="color" id="back-col-picker" value="#ff0000">
</div> </div>
<button id="gridToggle">Grid</button> <button id="gridToggle">Grid</button>

28
style.css
View file

@ -14,9 +14,37 @@ body{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
margin: 20px; margin: 20px;
} }
.pen-color, .pen-tools, .grid-tools,
.col-picker, .background-col-picker {
display: flex;
flex-direction: column;
align-items: center;
}
.col-picker, .background-col-picker {
margin: 5px;
width: 100px;
}
.color-label {
padding-bottom: 5px;
}
.color-input {
width: 100%
}
button {
display: block;
width: 100px;
margin: 5px;
}
.container{ .container{
border: 1px solid #bbb; border: 1px solid #bbb;
height: 500px; height: 500px;