FUNCT Add support for 1080 and 720

6 files changed, 40 insertions, 9 deletions

diff --git a/src/images/horizontal_background_720.png b/src/images/horizontal_background_720.png
new file mode 100644
index 0000000..3bef6ce
--- /dev/null
+++ b/src/images/horizontal_background_720.png
diff --git a/src/images/vertical_background_720.png b/src/images/vertical_background_720.png
new file mode 100644
index 0000000..f25adbf
--- /dev/null
+++ b/src/images/vertical_background_720.png
diff --git a/src/styles/1080.scss b/src/styles/1080.scss
new file mode 100644
index 0000000..6f81af5
--- /dev/null
+++ b/src/styles/1080.scss
@@ -0,0 +1,3 @@
+body {
+    font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/src/styles/720.scss b/src/styles/720.scss
new file mode 100644
index 0000000..8e6d5ee
--- /dev/null
+++ b/src/styles/720.scss
@@ -0,0 +1,3 @@
+body {
+    font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 74edfcc..955a9b6 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -5,10 +5,36 @@ $colors: (
   button:           #313131,
   background:       #363636
 );
+@media (max-device-width: 720px) and (orientation: portrait) {
+    $header_size: 145px;
 
-$header_size: 218px;
+    @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";
+}
 
-@import "main.scss";
-@import "portrait.scss";
-@import "landscape.scss";
 @import "style.css";
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1da7565..b3f56e1 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -9,7 +9,6 @@ html {
 }
 
 body {
-    font-size: 1.2rem;
     font-family: Arial;
     color: map-get($colors, font);
     margin: 0;
@@ -37,7 +36,7 @@ body {
                 width: 100%;
                 height: $header_size*0.70;
                 line-height: $header_size*0.70;
-                font-size: 90px;
+                font-size: 6em;
             }
 
             .label {
@@ -62,7 +61,7 @@ body {
             }
 
             .hour {
-                font-size: 40px;
+                font-size: 2em;
                 border-bottom: 1px solid map-get($colors, grey);
                 width: 80%;
                 margin: 0 10% 10px 10%;
@@ -70,7 +69,7 @@ body {
             }
 
             .wheater {
-                font-size: 30px;
+                font-size: 1.5em;
                 letter-spacing: 2px;
             }
         }
@@ -79,7 +78,7 @@ body {
             display: flex;
             justify-content: space-around;
             text-align: center;
-            font-size: 42px;
+            font-size: 2em;
             color: map-get($colors, grey);
 
             .powered {