Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Km/pixel art maker #2

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open

Km/pixel art maker #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
4f3ff80
Start setting up layout grid
Dec 15, 2020
47804fd
Setup grid container and grid cells
Dec 15, 2020
1940fe8
Setup color pallate grid
Dec 16, 2020
f0250c3
Added all colors are variables to css
Dec 16, 2020
187caaf
Assign color variables to all color divs
Dec 16, 2020
5e791e6
Color pallate and grid layout complete
Dec 16, 2020
d88853d
Remove CSS grid
Dec 16, 2020
54f5196
Add js file and edit color hex codes
Dec 17, 2020
49b32f7
Add title
Dec 17, 2020
8940867
Add clear and save buttons and style
Dec 18, 2020
297db95
Add id to all colors
Dec 18, 2020
482ced2
Edit id names on colors
Dec 18, 2020
90b9051
Fix flex distribution of colors
Dec 18, 2020
84e2b81
Fix flex on current color container
Dec 18, 2020
c9fab22
Did some stuff, can't remember what
Dec 21, 2020
1d40547
Add JS to change current color and setup grid
Dec 25, 2020
661813c
Add comments and clear grid function
Dec 26, 2020
c4dfa97
Rename clear function
Dec 26, 2020
d9edc8f
Add comment for change current color
Dec 26, 2020
d93a2ac
Add tooltip template - still needs work
Dec 27, 2020
20bf2d4
Add tooltip to top color row
Dec 27, 2020
2f70ab0
Fix clearGrid button
Dec 27, 2020
dfe427a
Add tooltip to all colors
Dec 28, 2020
0f35bc4
Remove unnecessary comments
Jan 3, 2021
2c8690d
Add Save to PDF function
Jan 3, 2021
e7d254c
Test git push
Jan 3, 2021
d0cc969
Test git push - passphrase
Jan 3, 2021
ccbe87f
Change var to let
Jan 4, 2021
567909b
Change all color divs to buttons
Jan 8, 2021
077dd36
Edit tooltip placement
Jan 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 284 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap");

:root {
--bg-grey: #d3d3d3;
--bg-dark-grey: #f5f5f5;
--dropshadow-grey: #888888;
--border: 2px solid white;
--border-radius: 10px;

/* Pallate colors variables */
--color-dark-red: #800000;
--color-red: #ff0000;
--color-pink: #ff00ff;
--color-dark-orange: #cc3300;
--color-orange: #ff3300;
--color-flesh: #ffc57e;
--color-lime: #00ff00;
--color-yellow: #ffff00;
--color-light-yellow: #ffff99;
--color-green: #009900;
--color-light-green: #66ff66;
--color-royal-blue: #0000ff;
--color-blue: #000099;
--color-light-purple: #91a3ff;
--color-purple: #6432b2;
--color-violet: #8f48ff;
--color-light-violet: #bb91ff;
--color-black: #000000;
--color-black-80: #323232;
--color-black-60: #666666;
--color-black-40: #999999;
--color-black-20: #cccccc;
--color-white: #ffffff;
--color-dark-brown: #3a2119;
--color-brown: #754233;
--color-light-brown: #ac8d84;

/* Font variables*/
--primary-font: "Montserrat", sans-serif;
}

body {
font-family: var(--primary-font);
font-weight: 200;
margin: 0;
}

.container {
position: relative;
width: 100vw;
height: 100vh;
background-color: var(--bg-grey);
}

.content-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--bg-dark-grey);
box-shadow: 0px 0px 8px var(--dropshadow-grey);
width: 70vw;
border-radius: 25px;
padding: 40px;
}

.grid-container {
display: flex;
flex-wrap: wrap;
width: 1140px;
height: 475px;
background-color: white;
margin-bottom: 20px;
}

.grid-cell {
margin: 0;
width: 17px;
height: 17px;
border: 1px solid var(--bg-dark-grey);
background-color: white;
}

.bottom-content-container {
display: flex;
justify-content: space-between;
}

.colors-container {
width: 70%;
}

.colors-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1em;
}

.colors-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.color {
border: var(--border);
width: 30px;
height: 30px;
padding: 15px;
border-radius: var(--border-radius);
}

.color:hover {
border: 2px solid grey;
}

.current-color-container {
display: flex;
align-items: center;
}

.current-color {
border: var(--border);
width: 60px;
height: 60px;
margin-left: 20px;;
border-radius: var(--border-radius);
}

.btn-container {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}

.btn {
margin-left: 20px;
font-family: var(--primary-font);
background-color: var(--color-black-20);
color: white;
letter-spacing: 1px;
text-transform: uppercase;
border: none;
padding: 15px 35px;
border: var(--border);
border-radius: var(--border-radius);
}

.btn:hover {
border: 2px solid grey;
background-color: var(--color-black-40);
}

.color-dark-red {
background-color: var(--color-dark-red);
}

.color-red {
background-color: var(--color-red);
}

.color-pink {
background-color: var(--color-pink);
}

.color-dark-orange {
background-color: var(--color-dark-orange);
}

.color-orange {
background-color: var(--color-orange);
}

.color-flesh {
background-color: var(--color-flesh);
}

.color-lime {
background-color: var(--color-lime);
}

.color-yellow {
background-color: var(--color-yellow);
}

.color-light-yellow {
background-color: var(--color-light-yellow);
}

.color-green {
background-color: var(--color-green);
}

.color-light-green {
background-color: var(--color-light-green);
}

.color-royal-blue {
background-color: var(--color-royal-blue);
}

.color-blue {
background-color: var(--color-blue);
}

.color-light-purple {
background-color: var(--color-light-purple);
}

.color-purple {
background-color: var(--color-purple);
}

.color-violet {
background-color: var(--color-violet);
}

.color-light-violet {
background-color: var(--color-light-violet);
}

.color-black {
background-color: var(--color-black);
}

.color-black-80 {
background-color: var(--color-black-80);
}

.color-black-60 {
background-color: var(--color-black-60);
}

.color-black-40 {
background-color: var(--color-black-40);
}

.color-black-20 {
background-color: var(--color-black-20);
}

.color-white {
background-color: var(--color-white);
}

.color-dark-brown {
background-color: var(--color-dark-brown);
}

.color-brown {
background-color: var(--color-brown);
}

.color-light-brown {
background-color: var(--color-light-brown);
}

/* Tool tip from w3Schools */
.tooltip {
position: relative;
display: inline-block;
/* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
visibility: hidden;
width: 110px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
bottom: 40px;
left: 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
Loading