summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/720.scss5
-rw-r--r--src/styles/app.scss22
-rw-r--r--src/styles/main.scss53
-rw-r--r--src/styles/portrait.scss3
4 files changed, 30 insertions, 53 deletions
diff --git a/src/styles/720.scss b/src/styles/720.scss
index e69de29..2e9bd3c 100644
--- a/src/styles/720.scss
+++ b/src/styles/720.scss
@@ -0,0 +1,5 @@
+@media (orientation: portrait) {
+ html {
+ height: 992px;
+ }
+} \ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 1cdeb22..02bfead 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,35 +1,31 @@
-$colors: (
- primary: #00ADDC,
- font: #999999
-);
+$body-bg: transparent;
+$body-color: #FFFFFF;
+$list-group-bg: transparent;
+$font-size-base: 1.5rem;
+$input-bg: transparent;
+$input-color: #FFFFFF;
+@import "~bootstrap/scss/bootstrap";
@media (max-device-width: 720px) and (orientation: portrait) {
- $header_size: 145px;
-
@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;
-
+@media (min-device-width: 1490px) and (orientation: landscape) {
@import "main.scss";
@import "landscape.scss";
@import "1080.scss";
}
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6861663..4cededc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -24,56 +24,29 @@ html {
}
body {
- font-size: 1.2rem;
- font-family: Arial;
- color: map-get($colors, font);
- margin: 0 5%;
-
- .parent {
+ .list-group.scrollable {
+ height: 720px;
+ overflow: scroll;
+ }
+ .grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
- align-items: flex-start;
+ align-items: center;
height: 100%;
.item {
- &:active {
- .icon {
- &.inactive {
- display: none;
- }
-
- &.enabled{
- display: block;
- }
- }
- }
-
- color: map-get($colors, font);
- text-decoration: none;
+ display: flex;
+ justify-content: center;
- -webkit-animation-name: animation;
- -webkit-animation-duration: 2s;
+ button {
+ width: 300px;
+ height: 300px;
- .icon {
-
- &.inactive {
- display: block;
- }
-
- &.enabled{
- display: none;
+ .icon {
+ font-size: 7rem;
}
-
- width: 70%;
- margin: 5% 15%;
- }
-
- .name {
- width: 100%;
- text-align: center;
- text-transform: uppercase;
}
}
}
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index a4eb732..18ba52c 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -2,6 +2,9 @@
html {
background-image: url('../images/vertical_background.png');
+ background-position: top center;
+ background-repeat: no-repeat;
+ background-color: transparent;
}
body {