diff options
| -rw-r--r-- | src/index.html | 2 | ||||
| -rw-r--r-- | src/styles/1080.scss | 0 | ||||
| -rw-r--r-- | src/styles/720.scss | 36 | ||||
| -rw-r--r-- | src/styles/app.scss | 28 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 17 | ||||
| -rw-r--r-- | src/styles/main.scss | 52 |
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%; + } } } } |