diff --git a/index.html b/index.html index 2c5ebfb..790432b 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,14 @@
-

Pen Colors

+

Pen Colors

- +
@@ -40,7 +40,7 @@

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