FUNCT Add support for 720p and 1080p

4 files changed, 31 insertions, 4 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..e69de29
--- /dev/null
+++ b/src/styles/720.scss
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 5e7fbd4..1cdeb22 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -2,7 +2,34 @@ $colors: (
   primary:          #00ADDC,
   font:             #999999
 );
+@media (max-device-width: 720px) and (orientation: portrait) {
+    $header_size: 145px;
 
-@import "main.scss";
-@import "portrait.scss";
-@import "landscape.scss";
\ No newline at end of file
+    @import "main.scss";
+    @import "portrait.scss";
+    @import "720.scss";
+}
+
+@media (max-device-width: 1280px) and (orientation: landscape) {
+    $header_size: 145px;
+
+    @import "main.scss";
+    @import "landscape.scss";
+    @import "720.scss";
+}
+
+@media (min-device-width: 1080px) and (orientation: portrait) {
+    $header_size: 218px;
+
+    @import "main.scss";
+    @import "portrait.scss";
+    @import "1080.scss";
+}
+
+@media (min-device-width: 1920px) and (orientation: landscape) {
+    $header_size: 218px;
+
+    @import "main.scss";
+    @import "landscape.scss";
+    @import "1080.scss";
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b190206..6861663 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -27,7 +27,7 @@ body {
     font-size: 1.2rem;
     font-family: Arial;
     color: map-get($colors, font);
-    margin: 5%;
+    margin: 0 5%;
 
     .parent {
         display: flex;