sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
rachel.koldenhoven 2018-06-10 13:43:10 +05:30 committed by Brent Gardner
parent 8f162092f4
commit 307079543c
2 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.js
View File

@ -4,6 +4,11 @@ const HEIGHT = 24;
// State
let brushColor = '';
// Container
const container = document.createElement('div');
container.className = 'container';
container.style.width = `${WIDTH * 16}px`;
// Canvas
const canvas = document.createElement('div');
canvas.className = 'canvas';
@ -20,7 +25,7 @@ for(let y = 0; y < HEIGHT; y++) {
}
canvas.appendChild(row);
}
document.body.appendChild(canvas);
container.appendChild(canvas);
// Palette
const colors = ['#b23232', '#ff4848', '#ff6c6c', '#e59b40', '#ffad48', '#ffc57e', '#e5de40', '#fff748', '#fffa91', '#39cc4b', '#48ff5e', '#91ff9e', '#3248b2', '#4867ff', '#91a3ff', '#6432b2', '#8f48ff', '#bb91ff', '#7c2b99', '#cf48ff', '#e291ff', '#000000', '#323232', '#666666', '#999999', '#cccccc', '#ffffff', '#3a2119', '#512e23', '#754233', '#90675b', '#ac8d84'];
@ -32,7 +37,13 @@ for(let color of colors) {
swatch.style.backgroundColor = color;
swatch.addEventListener('click', () => {
brushColor = color;
title.style.backgroundColor = color;
});
palette.appendChild(swatch);
}
document.body.appendChild(palette);
const title = document.createElement('h2');
title.innerText = 'BRUSH COLOR';
palette.appendChild(title);
container.appendChild(palette);
document.body.appendChild(container);

27
style.css
View File

@ -1,6 +1,24 @@
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2 {
font-family: "Gill Sans";
font-size: 24px;
font-weight: 400;
color: rgb(153, 153, 153);
margin: 0;
}
.container {
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 15px;
background-color: rgb(229, 229, 229);
}
.row {
@ -11,18 +29,27 @@ body {
width: 14px;
height: 14px;
border: 1px solid rgb(229, 229, 229);
background-color: white;
}
.palette {
display: flex;
flex-wrap: wrap;
background-color: rgb(229, 229, 229);
align-items: center;
}
.swatch {
width: 35px;
height: 35px;
border: 1px solid rgb(187, 187, 187);
border-radius: 50%;
display: flex;
margin: 2px;
}
.currentSwatch {
width: 50px;
height: 35px;
display: flex;
}