FUNCT First dummy release

7 files changed, 78 insertions, 141 deletions

diff --git a/src/styles/app.scss b/src/styles/app.scss
index c2a4c72..a67dbfe 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -4,6 +4,7 @@ $colors: (
   grey:             #848286
 );
 
+@import "style.css";
 @import "main.scss";
 @import "portrait.scss";
 @import "landscape.scss";
\ No newline at end of file
diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot
new file mode 100755
index 0000000..1de3233
--- /dev/null
+++ b/src/styles/fonts/icomoon.eot
diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg
new file mode 100755
index 0000000..c58b9e7
--- /dev/null
+++ b/src/styles/fonts/icomoon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xea2b;" glyph-name="volume-increase" d="M1024 384h-192v-192h-128v192h-192v128h192v192h128v-192h192v-128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
+<glyph unicode="&#xea2c;" glyph-name="volume-decrease" d="M512 512h512v-128h-512v128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf
new file mode 100755
index 0000000..520b0ff
--- /dev/null
+++ b/src/styles/fonts/icomoon.ttf
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
new file mode 100755
index 0000000..d1c4591
--- /dev/null
+++ b/src/styles/fonts/icomoon.woff
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6c3ed5a..07fc408 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -22,9 +22,9 @@ input[type=range]::-webkit-slider-runnable-track {
 }
 
 input[type=range]::-webkit-slider-thumb {
-      height: 32px;
-      width: 32px;
-      border-radius: 16px;
+      height: 64px;
+      width: 64px;
+      border-radius: 32px;
       background: #FFFFFF;
       cursor: pointer;
       -webkit-appearance: none;
@@ -34,11 +34,11 @@ input[type=range]::-webkit-slider-thumb {
 
 progress {
     -webkit-appearance: none;
-    height: 8.4px;
+    height: 16px;
     width: 100%;
-    margin-top: -22px;
-    position: absolute;
+    margin-top: -12px;
     z-index: -1000;
+    display: block;
 }
 
 ::-webkit-progress-bar {
@@ -56,10 +56,11 @@ html {
 }
 
 body {
-    font-size: 1.2rem;
+    font-size: 2rem;
     font-family: Arial;
     color: map-get($colors, font);
-    margin: 5%;
+    margin: 0 5%;
+    height: 100%;
 
     a {
         color: map-get($colors, font);
@@ -86,148 +87,38 @@ body {
         }
     }
 
-    .top {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 10%;
-        margin-bottom: 15%;
-
-        .icon {
-            flex-basis: 10%;
-        }
-
-        .fanSpeed {
-            flex-basis: 85%;
-            height: 100%;
-
-            .fanSpeedContainer {
-                position: relative;
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    .center {
+    .content {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         flex-wrap: wrap;
-        justify-content: flex-start;
-        align-items: flex-start;
+        justify-content: space-around;
         height: 100%;
 
-        .item {
-            &:before {
-                content:'';
-                float:left;
-                padding-top:75%;
-            }
-
-            &.ac, &.auto {
-                .label {
-                    font-weight: bold;
-                    font-size: 2.5rem;
-                    text-align: center;
-                    margin-top: -50%;
-                }
-            }
-
-            &.seat {
-                img {
-                    width: 50%;
-                    margin: 0 25%;
-                }
-
-                &[value="0"] {
-                    .one, .two {
-                        display: none;
-                    }
-                    .off {
-                        display: block;
-                    }
-                }
-
-                &[value="1"] {
-                    .off, .two {
-                        display: none;
-                    }
-                    .one {
-                        display: block;
-                    }
-                }
-
-                &[value="2"] {
-                    .one, .off {
-                        display: none;
-                    }
-                    .two {
-                        display: block;
-                    }
-                }
+        .entry {
+            height: 100px;
 
+            .label {
+                margin: 10px 0;
             }
 
-            &.circulation {
-
-            }
-
-            &.block {
-                &:before {
-                    padding-top:150%;
-                }
-
-                .item {
-                    height: 50%;
-                    position: relative;
-                    float: left;
-                    width: 100%;
-                }
-            }
-
-            &.temperatures {
-                .temperatures-container {
-                    width: 100%;
-                    height: 240px;
-                    overflow-y: scroll;
-
-                    .temperature {
-                        &[enabled='true'] {
-                            color: map-get($colors, primary);
-                        }
-                        &[enabled='false'] {
-                            color: map-get($colors, grey);
-                        }
-                        font-size: 5rem;
-                        font-weight: bold;
-                        text-align: center;
-                        width: 100%;
-                    }
-                }
+            .button {
+                width: 10%;
+                position: relative;
+                float: left;
+                text-align: center;
+                height: 80px;
+                line-height: 80px;
+                background-color: map-get($colors, primary);
+                color: #FFFFFF;
+                border-radius: 20px;
+                text-decoration: none;
             }
 
-            text-decoration: none;
-            flex-basis: 33%;
-        }
-    }
-
-    .bottom {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        align-items: flex-start;
-        height: 100%;
-        margin-top: 10%;
-
-        .button {
-            flex-basis: 20%;
-
-            img {
-                width: 80%;
-                margin: 0 10%;
+            .slider {
+                width: 78%;
+                position: relative;
+                float: left;
+                margin: 0 1%;
             }
         }
     }
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100755
index 0000000..e86165c
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?41hzv3');
+  src:  url('fonts/icomoon.eot?41hzv3#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?41hzv3') format('truetype'),
+    url('fonts/icomoon.woff?41hzv3') format('woff'),
+    url('fonts/icomoon.svg?41hzv3#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-volume-increase:before {
+  content: "\ea2b";
+}
+.icon-volume-decrease:before {
+  content: "\ea2c";
+}