diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/1080.scss | 0 | ||||
| -rw-r--r-- | src/styles/720.scss | 16 | ||||
| -rw-r--r-- | src/styles/app.scss | 26 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 28 | ||||
| -rw-r--r-- | src/styles/main.scss | 15 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 23 |
6 files changed, 86 insertions, 22 deletions
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..a92746d --- /dev/null +++ b/src/styles/720.scss @@ -0,0 +1,16 @@ +@media (orientation: landscape) { + + html { + background-image: url('../images/horizontal_background.png'); + } + + body { + .bottom { + .button { + img { + width: 80%; + } + } + } + } +}
\ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index c2a4c72..866fb58 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -4,6 +4,26 @@ $colors: ( grey: #848286 ); -@import "main.scss"; -@import "portrait.scss"; -@import "landscape.scss";
\ No newline at end of file +@media (max-device-width: 720px) and (orientation: portrait) { + @import "main.scss"; + @import "portrait.scss"; + @import "720.scss"; +} + +@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"; +}
\ No newline at end of file diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index 4742273..bdf89ef 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -5,16 +5,36 @@ } body { + width: 90%; + height: 90%; - .center { - width: 80%; + .top { + margin: 0; + } + + .center { + width: 85%; + position: relative; float: left; } .bottom { flex-direction: column; - width: 20%; - } + width: 15%; + position: relative; + float: left; + margin: 0; + height: 90%; + align-items: flex-end; + justify-content: space-between; + flex-wrap: nowrap; + .button { + img { + width: 100%; + height: 80%; + } + } + } } }
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 6c3ed5a..fca72d9 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -38,6 +38,8 @@ progress { width: 100%; margin-top: -22px; position: absolute; + left: 0; + top: 33px; z-index: -1000; } @@ -92,8 +94,6 @@ body { flex-wrap: wrap; justify-content: space-between; align-items: center; - margin-top: 10%; - margin-bottom: 15%; .icon { flex-basis: 10%; @@ -117,7 +117,6 @@ body { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; - height: 100%; .item { &:before { @@ -215,21 +214,11 @@ body { .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%; - } - } } .log { diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index eff553c..0fc0bc5 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -5,8 +5,27 @@ } body { - .center { - width: 100%; + .center { + height: 100%; + } + + .top{ + margin-top: 10%; + margin-bottom: 15%; + } + + .bottom { + flex-direction: row; + margin-top: 10%; + + .button { + flex-basis: 20%; + + img { + width: 80%; + margin: 0 10%; + } + } } } }
\ No newline at end of file |