Merge pull request #54 from eigilnikolajsen/fix/styles

tighten styles

Author: eigilnikolajsen

src/css/non_essential.css

@@ -23,11 +23,7 @@ button:active {
 
 :focus,
 input:focus + label {
-    animation: flicker 60ms 2;
-}
-
-[contenteditable="true"]:focus {
-    animation: flicker 200ms 2;
+    animation: flicker 50ms 2;
 }
 
 @keyframes flicker {

src/css/section_2.css

@@ -56,25 +56,20 @@ td > div > input + label {
     display: block;
 }
 
-#section_2 input {
+#section_2 input[type="radio"] {
     width: 0;
     height: 0;
     opacity: 0;
     -webkit-user-modify: read-only;
 }
-
-#section_2 input:focus:checked + label {
-    background-color: var(--text);
+#section_2 input[type="radio"]:focus:checked + label {
+    background: var(--text);
     color: var(--bg);
-    transform: scale(4);
+    scale: 4;
     z-index: 2;
 }
-
-#section_2 input:checked + label::before {
-    display: none;
-}
-
-#section_2 input:checked + label:hover::before {
-    display: block;
-    background: var(--bg50);
+#section_2 input[type="radio"]:checked + label {
+    scale: 1;
+    background: var(--bg);
+    color: var(--text);
 }

src/css/section_5.css

@@ -18,54 +18,6 @@ form > div {
     position: relative;
 }
 
-form input,
-input[type="file"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: var(--text);
-    margin: 0;
-    padding: 0;
-    border: none;
-    color: var(--text);
-    width: 0;
-    height: 0;
-    position: relative;
-    opacity: 0;
-    display: block;
-}
-
-form input[type="radio"] + label {
-    position: relative;
-    z-index: 1;
-    cursor: pointer;
-    height: 100%;
-    display: inline-block;
-}
-
-form input[type="radio"] + label::before {
-    z-index: -1;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: var(--bg);
-}
-
-form input[type="radio"]:focus:checked + label::before {
-    background-color: var(--text);
-}
-
-form input[type="radio"]:focus:checked + label {
-    color: var(--bg);
-}
-
-form input[type="radio"]:checked + label::before {
-    background: var(--bg25);
-    background-position: 1px 0.5px;
-}
-
 #canvas {
     transform-origin: top left;
 }

src/css/section_7.css

@@ -58,6 +58,12 @@ button:focus a {
     position: relative;
 }
 .button_link:hover {
+    background: var(--bg75);
+    color: var(--bg);
+    text-decoration: none;
+}
+.button_link:focus:active,
+.button_link:active {
     background: var(--bg50);
     color: var(--bg);
     text-decoration: none;

src/css/style.css

@@ -153,18 +153,42 @@ h1 {
     outline: none;
 }
 
-form input:hover + label {
-    text-decoration: none;
+form input[type="radio"],
+input[type="file"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--text);
+    color: var(--text);
+    border: none;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    display: block;
+}
+form input[type="radio"] + label {
+    cursor: pointer;
+    display: inline-block;
+}
+form input[type="radio"]:focus:checked + label {
+    background-color: var(--text);
     color: var(--bg);
-    outline: none;
 }
-
-form input:hover + label::before {
-    background: var(--bg50);
+form input[type="radio"]:checked + label {
+    background: var(--bg25);
 }
-
-form input:checked:hover + label::before {
+form input[type="radio"]:hover + label,
+form input[type="radio"]:checked:hover + label {
     background: var(--bg75);
+    color: var(--bg);
+}
+form input[type="radio"]:focus:hover + label {
+    background: var(--text);
+}
+form input[type="radio"]:focus + label:active,
+form input[type="radio"]:checked + label:active,
+form input[type="radio"] + label:active {
+    background: var(--bg50);
+    color: var(--bg);
 }
 
 ul li,

src/js/nav.js

@@ -65,7 +65,7 @@ function enterTextField() {
         active.blur()
         active.focus()
         insideTextField = true
-    }, 40)
+    }, 50)
 }
 function exitTextField() {
     // console.log("exitTextField")