RESTRUCT Split style into several files

7 files changed, 76 insertions, 73 deletions

diff --git a/src/app.js b/src/app.js
index c62f79e..7c9b244 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,4 +5,4 @@ console.log('Arrancada la aplicación compilando CSS y SaSS');
 
 /* CSS */
 // import 'bootstrap/dist/css/bootstrap.min.css';
-import './app.scss';
+import './styles/app.scss';
diff --git a/src/app.scss b/src/app.scss
deleted file mode 100644
index 40d2929..0000000
--- a/src/app.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@media (orientation: portrait) {
-
-    html {
-        background-image: url('./images/vertical_background.png');
-    }
-
-    body {
-        .item {
-            flex-basis: 33%;
-        }
-    }
-}
-
-@media (orientation: landscape) {
-
-    html {
-        background-image: url('./images/horizontal_background.png');
-    }
-
-    body {
-        .item {
-            flex-basis: 25%;
-        }
-    }
-}
-
-html {
-    height: 100%;
-    background-size: cover;
-}
-
-body {
-    font-size: 1.2rem;
-    font-family: Arial;
-    color: #999999;
-    margin: 5%;
-
-    svg {
-        path,
-        polygon,
-        linearGradient,
-        rect {
-            fill: #00ADDC !important;
-        }
-
-        circle {
-            fill: none !important;
-        }
-
-        text {
-            display: none !important;
-        }
-    }
-
-    .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/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