From 9cf5d57a7338a94988d1607b4cb827d28c9fbd2f Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Wed, 6 Nov 2019 12:00:33 +0100
Subject: FUNCT Add support for 720p and 1080p

---
 src/styles/1080.scss |  0
 src/styles/720.scss  |  0
 src/styles/app.scss  | 33 ++++++++++++++++++++++++++++++---
 src/styles/main.scss |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/1080.scss
 create mode 100644 src/styles/720.scss

(limited to 'src')

diff --git a/src/styles/1080.scss b/src/styles/1080.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/720.scss b/src/styles/720.scss
new file mode 100644
index 0000000..e69de29
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;
-- 
cgit 1.2.3-korg