FUNCT Add support for landscape and portrait using 1080 and 720

6 files changed, 98 insertions, 37 deletions

diff --git a/src/index.html b/src/index.html
index 6b2ed01..5dac7c5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
             <h1 class="header">
                 Mixer
             </h1>
-            <div id="SliderContainer"></div>
+            <div id="SliderContainer" class="sliderContainer"></div>
             <script id="slider-template" type="x-tmpl-mustache">
                 <div class="entry" id="slider-{{id}}" slider-id="{{ id }}" value="{{ value }}">
                     <div class="label">
diff --git a/src/styles/1080.scss b/src/styles/1080.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/styles/1080.scss
diff --git a/src/styles/720.scss b/src/styles/720.scss
new file mode 100644
index 0000000..aea58eb
--- /dev/null
+++ b/src/styles/720.scss
@@ -0,0 +1,36 @@
+input[type=range] {
+    margin: 13.8px 0;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+      height: 8.4px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+      height: 36px;
+      width: 36px;
+      border-radius: 18px;
+      margin-top: 0px;
+}
+
+progress {
+    height: 12px;
+    margin-top: -6px;
+}
+
+body {
+    font-size: 1.2em;
+
+    a {
+        font-size: 2em;
+    }
+
+
+    .content {
+        .sliderContainer {
+            .entry {
+                height: 90px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d97030b..cbba7fc 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -3,8 +3,28 @@ $colors: (
   font:             #FFFFFF,
   grey:             #848286
 );
+@media (max-device-width: 720px) and (orientation: portrait) {
+    @import "main.scss";
+    @import "portrait.scss";
+    @import "720.scss";
+}
 
-@import "style.css";
-@import "main.scss";
-@import "portrait.scss";
-@import "landscape.scss";
\ No newline at end of file
+@media (max-device-width: 1280px) and (orientation: landscape) {
+    @import "main.scss";
+    @import "landscape.scss";
+    @import "720.scss";
+}
+
+@media (min-device-width: 1080px) and (orientation: portrait) {
+    @import "main.scss";
+    @import "portrait.scss";
+    @import "1080.scss";
+}
+
+@media (min-device-width: 1490px) and (orientation: landscape) {
+    @import "main.scss";
+    @import "landscape.scss";
+    @import "1080.scss";
+}
+
+@import "style.css";
\ No newline at end of file
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
index 4742273..d215960 100644
--- a/src/styles/landscape.scss
+++ b/src/styles/landscape.scss
@@ -5,16 +5,13 @@
     }
 
     body {
-
-        .center {
-            width: 80%;
-            float: left;
-        }
-
-        .bottom {
-            flex-direction: column;
-            width: 20%;
+        .content {
+            .sliderContainer {
+                flex-direction: row;
+                .entry {
+                    flex: 50%;
+                }
+            }
         }
-
     }
 }
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 01373eb..8f388c9 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -90,38 +90,46 @@ body {
     }
 
     .content {
+        height: 100%;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
         justify-content: space-around;
-        height: 100%;
+        flex-wrap: nowrap;
 
         .header {
             text-align: center;
             margin: 0;
         }
 
-        .entry {
-            height: 120px;
-
-            .label {
-                margin: 10px 0;
-            }
-
-            .button {
-                width: 10%;
-                position: relative;
-                float: left;
-                text-align: center;
-                height: 80px;
-                line-height: 80px;
-            }
-
-            .slider {
-                width: 78%;
-                position: relative;
-                float: left;
-                margin: 0 1%;
+        .sliderContainer {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            justify-content: space-around;
+
+            .entry {
+                height: 120px;
+
+                .label {
+                    margin: 10px 0;
+                }
+
+                .button {
+                    width: 10%;
+                    position: relative;
+                    float: left;
+                    text-align: center;
+                    height: 80px;
+                    line-height: 80px;
+                }
+
+                .slider {
+                    width: 78%;
+                    position: relative;
+                    float: left;
+                    margin: 0 1%;
+                }
             }
         }
     }