RESTRUCT Split style into several files

5 files changed, 75 insertions, 0 deletions

diff --git a/src/styles/app.scss b/src/styles/app.scss
new file mode 100644
index 0000000..f986a37
--- /dev/null
+++ b/src/styles/app.scss
@@ -0,0 +1,4 @@
+@import "main.scss";
+@import "svg.scss";
+@import "portrait.scss";
+@import "landscape.scss";
\ No newline at end of file
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss
new file mode 100644
index 0000000..39ac270
--- /dev/null
+++ b/src/styles/landscape.scss
@@ -0,0 +1,12 @@
+@media (orientation: landscape) {
+
+    html {
+        background-image: url('../images/horizontal_background.png');
+    }
+
+    body {
+        .item {
+            flex-basis: 25%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..226509e
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,29 @@
+html {
+    height: 100%;
+    background-size: cover;
+}
+
+body {
+    font-size: 1.2rem;
+    font-family: Arial;
+    color: #999999;
+    margin: 5%;
+
+    .parent {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        height: 100%;
+
+        .item {
+            .name {
+                width: 100%;
+                text-align: center;
+                text-transform: uppercase;
+                margin-top: -20%;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
new file mode 100644
index 0000000..a4eb732
--- /dev/null
+++ b/src/styles/portrait.scss
@@ -0,0 +1,12 @@
+@media (orientation: portrait) {
+
+    html {
+        background-image: url('../images/vertical_background.png');
+    }
+
+    body {
+        .item {
+            flex-basis: 33%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/svg.scss b/src/styles/svg.scss
new file mode 100644
index 0000000..eddbbe5
--- /dev/null
+++ b/src/styles/svg.scss
@@ -0,0 +1,18 @@
+body {
+    svg {
+        path,
+        polygon,
+        linearGradient,
+        rect {
+            fill: #00ADDC !important;
+        }
+
+        circle {
+            fill: none !important;
+        }
+
+        text {
+            display: none !important;
+        }
+    }
+}
\ No newline at end of file