-
@@ -40,7 +40,7 @@
Pen Colors
+Pen Colors
-
+
Grid Tools
-
+
@@ -52,7 +52,7 @@
-
+
diff --git a/style.css b/style.css
index a0b8eea..f47814d 100644
--- a/style.css
+++ b/style.css
@@ -32,19 +32,36 @@ main {
flex: 1;
}
-h3 {
-
+.tool-labels {
+ margin: 13px 0;
+ font-size: 24px;
+ color: #68ffd8;
}
footer {
width: 100%;
background-color: #111;
opacity: .8;
+ flex: 0 0 auto;
}
-button, .container, .color-input {
+button, .container, .color-input, .knob-shadow {
box-shadow: 1px 2px 10px 1px #555;
+}
+
+button, .container, .color-input, .knob {
cursor: pointer;
+ background-color: #f0fbf8;
+ border: none;
+ color: #000;
+}
+button:hover, .container:hover, .color-input:hover {
+ background-color: #68ffd8;
+}
+
+button:active, .container:active, .color-input:active{
+ background-color: #017070;
+ color: #f0fbf8;
}
.pen-input, .grid-input {
@@ -67,9 +84,10 @@ button, .container, .color-input {
padding: 0 10px;
}
-.tool-sub-labels {
+.sub-labels {
padding-bottom: 5px;
font-size: 18px;
+ color: #f0fbf8;
}
.color-input {
@@ -88,7 +106,7 @@ button {
.container{
border: 1px solid #bbb;
height: 500px;
- width: 500px;
+ max-width: 500px;
display: flex;
flex-wrap: wrap;
background: rgb(180, 254, 235);
@@ -128,7 +146,6 @@ button {
width: 95px;
height: 95px;
border-radius: 50%;
- box-shadow: 1px 2px 10px 1px #555;
position: absolute;
top: 5%;
left: 1%;
@@ -139,8 +156,6 @@ button {
width: 95px;
height: 95px;
border-radius: 50%;
- cursor: pointer;
- background: #bbb;
margin-top: 5px;
position: relative;
z-index: 1;
@@ -173,6 +188,10 @@ button {
}
@media screen and (max-width: 900px) {
+ header {
+ font-size: 20px;
+ }
+
main {
flex-direction: column;
}
@@ -184,9 +203,18 @@ button {
flex-wrap: wrap;
}
- .tool-sub-labels {
+ #h3-pen-color{
+ margin-bottom: -13px;
+ }
+
+ .sub-labels {
display: flex;
flex-direction: column;
}
- }
-
+}
+
+@media screen and (max-width: 559px) {
+ #h3-pen-color {
+ margin: 13px 0;
+ }
+}
\ No newline at end of file