diff options
| -rw-r--r-- | src/styles/1080.scss | 0 | ||||
| -rw-r--r-- | src/styles/720.scss | 0 | ||||
| -rw-r--r-- | src/styles/app.scss | 33 | ||||
| -rw-r--r-- | src/styles/main.scss | 2 |
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; |