diff --git a/sass/main.scss b/sass/main.scss index e7170b6d..5e56b63a 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -3,6 +3,7 @@ $BASE_URL: '<%= BASE_URL %>'; +@import 'mixins'; @import 'ascribe_variables'; @import 'variables'; @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap'; @@ -506,4 +507,4 @@ hr { margin-bottom: .1em; border-color: #ccc; } -} \ No newline at end of file +} diff --git a/sass/mixins.scss b/sass/mixins.scss new file mode 100644 index 00000000..ec5202bf --- /dev/null +++ b/sass/mixins.scss @@ -0,0 +1,16 @@ +// keyframes mixin +@mixin keyframes($name) { + @-webkit-keyframes #{$name} { + @content; + } + @-moz-keyframes #{$name} { + @content; + } + @-ms-keyframes #{$name} { + @content; + } + @keyframes #{$name} { + @content; + } +} + diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss index c25517e1..5ce970b8 100644 --- a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -1,9 +1,16 @@ -$ikono--landing-bg-color: #06c; -$ikono--bg-color: #939; +$ikono--landing-bg-color: #093; +$ikono--bg-color: #06c; $ikono--button-color: $ikono--bg-color; $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png'; +@include keyframes(color-loop) { + 0% { background: $ikono--landing-bg-color; } + 33% { background: #099; } + 66% { background: #09f; } +} + + .client--ikonotv { font-family: 'Helvetica Neue', 'Helvetica', sans-serif; } @@ -84,6 +91,10 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik .client--ikonotv .route--landing { background-color: $ikono--landing-bg-color; + animation: color-loop 20s; + -moz-animation: color-loop 20s infinite; + -webkit-animation: color-loop 20s infinite; + margin: 0; width: 100%; padding: 5em 1em; @@ -212,7 +223,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik margin-bottom: 2em; > h1 { - font-size: 9em; + font-size: 7em; font-weight: bold; margin-top: 10px;