summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/styles/1080.scss0
-rw-r--r--src/styles/720.scss16
-rw-r--r--src/styles/app.scss26
-rw-r--r--src/styles/landscape.scss28
-rw-r--r--src/styles/main.scss15
-rw-r--r--src/styles/portrait.scss23
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