removed old code, migrated to fontawesome

css/color.css

@@ -3,12 +3,13 @@ button{color:#303030;background-color:#cfcfcf}
 button:hover{color:#bebebe;background-color:#323234}
 input[type="text"]{color:#404040;background-color:#cfcfcf}
 input[type="text"]:hover{background-color:#a6a6a6}
-polygon{fill:#cfcfcf}
-polygon:hover{fill:#a6a6a6}
+#logo-svg{fill:#cfcfcf}
+#logo-svg:hover{fill:#a6a6a6}
 body.dark{color:#bebebe;background-color:#0c0c0d}
 body.dark button{color:#bebebe;background-color:#323234}
 body.dark button:hover{color:#303030;background-color:#cfcfcf}
 body.dark input[type="text"]{color:#bebebe;background-color:#323234}
 body.dark input[type="text"]:hover{background-color:#474749}
-body.dark polygon{fill:#323234}
-body.dark polygon:hover{fill:#474749}
+body.dark #logo-svg{fill:#323234}
+body.dark #logo-svg:hover{fill:#474749}
+body,button,input,#logo-svg{-webkit-transition:200ms;transition:200ms}

css/options.css

@@ -4,13 +4,13 @@
 .label{display:inline-block;width:30px}
 .field{display:inline}
 .label span{display:table-cell;vertical-align:middle}
-#mode{position:absolute;top:calc(50%+75px);left:0;right:0;margin:auto;z-index:9}
+#mode{position:absolute;left:0;right:0;margin:auto;z-index:9}
 #quad1 .group{text-align:right;bottom:0}
 #quad2 .group{bottom:0}
 #quad3 .group{text-align:right}
 button{top:calc(50% + 75px);height:60px;width:60px;border-radius:30px;outline:0;font-size:16px}
 button:hover{cursor:pointer}
-input[type="text"]{display:inline-block;height:48px;width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
+input[type="text"]{display:inline-block;height:48px;width:80%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
 .colorwrapper{height:70px;width:70px;display:inline-block;vertical-align:middle;overflow:hidden}
 input[type="color"]{height:100px;width:100px;position:relative;top:-15px;left:-15px}
 input[type="color"]:hover{cursor:pointer}

css/style.css

@@ -1,14 +1,6 @@
-*{padding:0;margin:0;border:0;-webkit-transition:300ms;transition:300ms}
-body,html,.content{width:100%;height:100%;-webkit-transition:none;transition:none}
+*{padding:0;margin:0;border:0}
+body,html,.content{width:100%;height:100%}
 .content{position:relative}
-a,svg,rect{position:absolute}
-svg{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:10}
-polygon{transition:fill .2s}
-@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?evxobq');src:url('../fonts/icomoon.eot?evxobq#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?evxobq') format('truetype'),url('../fonts/icomoon.woff?evxobq') format('woff'),url('../fonts/icomoon.svg?evxobq#icomoon') format('svg');font-weight:normal;font-style:normal}
-[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
-.icon-sun:before{content:"\e900"}
-.icon-moon:before{content:"\e901"}
-.icon-paint-format:before{content:"\e902"}
-.icon-link:before{content:"\e904"}
-.icon-sun,.icon-moon{font-size:36px}
+a,rect{position:absolute}
+#logo{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:10%;max-width:100px;height:10%;max-height:100px;-index:10}
 .quadrant{position:relative;width:50%;height:50%;float:left}