diff options
| -rw-r--r-- | src/app.js | 2 | ||||
| -rw-r--r-- | src/app.scss | 72 | ||||
| -rw-r--r-- | src/styles/app.scss | 4 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 12 | ||||
| -rw-r--r-- | src/styles/main.scss | 29 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 12 | ||||
| -rw-r--r-- | src/styles/svg.scss | 18 |
7 files changed, 76 insertions, 73 deletions
@@ -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 |