Small bug fixes

README.md

@@ -17,7 +17,7 @@ Go to [releases](https://github.com/mvaneijgen/wled-draw-something/releases/) an
 I've made this tool so I could send pixel art to my SO, just as a fun way to leave a digital note at a at a random time in the day.
 
 ## Road map
-- [x] Version 1 🎉
+- [x] ~~Version 1~~ 🎉
 - [ ] Drag on mobile
 - [ ] minify .html file
 - [ ] Setup proper JSON object
@@ -30,4 +30,4 @@ This tool is build using Vue.js and there is some SCSS to easily write CSS
 ## Build process
 I use [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) and [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) to work on the app localy.
 
-And there is a `build.js` file which creates a `drawsomething.html` with inline CSS and JS. Use Yarn or NPM to install the dependencies and then use `node build.js` to genrate the file in the `/dist` folder
+And there is a `build.js` file which creates a `drawsomething.html` with inline CSS and JS. Use Yarn or NPM to install the dependencies and then use `node build.js` to genrate the file in the `/dist` folder

assets/css/style.css

@@ -222,14 +222,24 @@ template {
   display: none;
 }
 
+body,
+html {
+  font-size: 18px;
+}
+@media screen and (max-width: 999px) {
+  body,
+  html {
+    font-size: 24px;
+  }
+}
 
 body {
   background-color: #19233b;
   color: #fff;
 }
 
 svg {
-  width: 95vmin;
+  width: 80vmin;
   cursor: pointer;
 }
 @media screen and (min-width: 999px) {
@@ -255,7 +265,6 @@ h4 {
 
 label {
   font-weight: 700;
-  font-size: 18px;
   margin-bottom: 10px;
   display: block;
 }
@@ -276,10 +285,19 @@ label {
 }
 .alloy-input-group [type=color] {
   padding: 0;
+  -moz-appearance: none;
+       appearance: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   border: 0;
+  border: none;
+  height: 40px;
+  border-radius: 0;
+}
+.alloy-input-group [type=color]::-webkit-color-swatch-wrapper {
+  padding: 3px;
+}
+.alloy-input-group [type=color]::-webkit-color-swatch {
+  border: none;
 }
 
 select {
@@ -327,7 +345,6 @@ ul li {
 }
 
 #app {
-  font-size: 18px;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -337,10 +354,6 @@ ul li {
     flex-direction: row;
   }
 }
-#app > * {
-  overflow-y: scroll;
-}
-
 .view {
   width: 100vw;
   display: flex;
@@ -362,8 +375,6 @@ aside {
   }
 }
 aside > .inner {
-  height: 100%;
-  overflow-y: auto;
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -379,6 +390,8 @@ aside > .inner {
 @media screen and (min-width: 999px) {
   aside > .inner {
     gap: 30px;
+    overflow-y: auto;
+    height: 100%;
   }
 }
 aside .controls {
@@ -412,12 +425,11 @@ aside .title {
 }
 aside .title h1 {
   opacity: 0.7;
-  font-size: 30px;
+  font-size: 1.7rem;
 }
 aside .title h3 {
+  font-size: 0.8rem;
   text-transform: uppercase;
-  font-size: 14px;
-  letter-spacing: 2px;
   font-weight: normal;
   transform: translatex(2px) translatey(-5px);
 }
@@ -450,11 +462,11 @@ aside #logo img {
 }
 aside #logo span {
   display: block;
-  font-size: 12px;
+  font-size: 1rem;
 }
 aside #logo span:last-of-type {
   font-weight: 700;
-  font-size: 20px;
+  font-size: 1.4rem;
 }
 
 form {
@@ -544,15 +556,6 @@ button[disabled] {
   color: #666;
 }
 
-#copyFunctionContent {
-  height: 0;
-  overflow: hidden;
-}
-#copyFunctionContent > * {
-  height: 0;
-  overflow: hidden;
-}
-
 .container {
   width: 100%;
   height: 100%;

assets/css/style.scss

@@ -11,14 +11,24 @@ $brand-dark-light: #19233b;
 
 $brake-point: 999px;
 
-/*# sourceMappingURL=normalize.min.css.map */
+body,
+html {
+  font-size: 18px;
+
+  @media screen and (max-width: $brake-point) {
+    font-size: 24px;
+  }
+
+
+}
+
 body {
   background-color: $brand-dark-light;
   color: #fff;
 }
 
 svg {
-  width: 95vmin;
+  width: 80vmin;
   cursor: pointer;
 
   @media screen and (min-width: $brake-point) {
@@ -44,7 +54,7 @@ h4 {
 
 label {
   font-weight: 700;
-  font-size: 18px;
+  // font-size: 18px;
   margin-bottom: 10px;
   display: block;
 }
@@ -69,7 +79,20 @@ label {
   [type="color"] {
     padding: 0;
     appearance: none;
+    -webkit-appearance: none;
     border: 0;
+    border: none;
+    // width: 40px;
+    height: 40px;
+    border-radius: 0;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 3px;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+    }
   }
 }
 
@@ -122,7 +145,6 @@ ul {
 }
 
 #app {
-  font-size: 18px;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -132,7 +154,7 @@ ul {
   }
 
   >* {
-    overflow-y: scroll;
+    // overflow-y: scroll;
   }
 }
 
@@ -157,8 +179,7 @@ aside {
 
   >.inner {
     height: 100%;
-    overflow-y: auto;
-    height: 100%;
+
     display: flex;
     flex-direction: row;
     padding: 30px;
@@ -171,6 +192,8 @@ aside {
 
     @media screen and (min-width: $brake-point) {
       gap: 30px;
+      overflow-y: auto;
+      height: 100%;
     }
   }
 
@@ -181,6 +204,7 @@ aside {
 
     flex-flow: row wrap;
 
+
     @media screen and (max-width: $brake-point) {
       justify-content: center;
       flex-direction: row;
@@ -214,14 +238,14 @@ aside {
 
     h1 {
       opacity: 0.7;
-      font-size: 30px;
+      font-size: 1.7rem;
       // line-height: 0.8em;
     }
 
     h3 {
+      font-size: 0.8rem;
       text-transform: uppercase;
-      font-size: 14px;
-      letter-spacing: 2px;
+      // font-size: 14px;
       font-weight: normal;
       transform: translatex(2px) translatey(-5px);
     }
@@ -263,11 +287,11 @@ aside {
 
     span {
       display: block;
-      font-size: 12px;
+      font-size: 1rem;
 
       &:last-of-type {
         font-weight: 700;
-        font-size: 20px;
+        font-size: 1.4rem;
       }
     }
   }
@@ -368,16 +392,6 @@ button[disabled] {
   color: #666;
 }
 
-#copyFunctionContent {
-  height: 0;
-  overflow: hidden;
-
-  >* {
-    height: 0;
-    overflow: hidden;
-  }
-}
-
 .container {
   width: 100%;
   height: 100%;