From cf7fbba2e3d9af286053be6ff0338a150cca6db2 Mon Sep 17 00:00:00 2001 From: Matt Isenhower Date: Wed, 2 Aug 2017 18:35:22 -0700 Subject: [PATCH] Improve appearance --- src/css/_variables.scss | 4 ++ src/css/main.scss | 46 ++++++++++++++++-- src/img/bkg-header.png | Bin 0 -> 782 bytes src/js/components/App.vue | 30 +++++++----- src/js/components/ScheduleBox.vue | 77 ++++++++++++++++-------------- 5 files changed, 104 insertions(+), 53 deletions(-) create mode 100644 src/img/bkg-header.png diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 5de6026..4fdfa6c 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -6,3 +6,7 @@ $family-sans-serif: Splatoon2, $family-sans-serif; $text: $grey-lighter; $text-strong: $white-ter; $title-color: $white-ter; +$subtitle-color: $grey-lighter; + +// Temp: This can be removed after Bulma 0.5.1 +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7; diff --git a/src/css/main.scss b/src/css/main.scss index 171936f..a219405 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -2,10 +2,29 @@ @import './variables'; @import '~bulma'; -.title { +.alt-font { font-family: Splatoon1, $original-family-sans-serif; } +.title-effect { + color: $title-color; + background: #460fc8 url(../img/bkg-stripes.png); + + display: inline-block; + + padding: 2px 48px 2px 20px; + margin: 0 0 10px -20px; + + -webkit-mask-image: url(../img/bkg-header.png); + mask-image: url(../img/bkg-header.png); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-position: right center; + mask-position: right center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + html { background: #191919 url(../img/bkg-squid.png) top; background-size: 360px 360px; @@ -20,15 +39,25 @@ html { padding: 35px 10px 10px 10px; margin: auto; - mask-image: url(../img/bkg-mask-product.png); -webkit-mask-image: url(../img/bkg-mask-product.png); - mask-repeat: no-repeat; + mask-image: url(../img/bkg-mask-product.png); -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; // Original value: 500px 800px - mask-size: 600px 960px; -webkit-mask-size: 600px 960px; - mask-position: center top; + mask-size: 600px 960px; -webkit-mask-position: center top; + mask-position: center top; + + &.tilt-right { + -webkit-transform: rotate(1.4deg); + transform: rotate(1.4deg); + } + + &.tilt-left { + -webkit-transform: rotate(-1.4deg); + transform: rotate(-1.4deg); + } .schedule-icon { display: inline-block; @@ -78,6 +107,13 @@ html { } } +.upcoming-schedule { + .rule-name { + color: $title-color; + font-size: 1.1rem; + } +} + .stage-image { background-size: contain; background-repeat: no-repeat; diff --git a/src/img/bkg-header.png b/src/img/bkg-header.png new file mode 100644 index 0000000000000000000000000000000000000000..cbea47c9dd0ce93e42346a6ef35418c47e1e71d2 GIT binary patch literal 782 zcmeAS@N?(olHy`uVBq!ia0y~yU_A$9J8>`r$;c;L#eoz{x}&cn1H;CC?mvmFKt5w} zkh>GZx^prwfgIxipAc8~0v{lgByihNPYb9)pd`pIm_cE|1Azk<92!1MNHEw?5HKU* ziWdU|Q>>?pV@SoVw|CD@T4W&75a>`RbY$B1`dgB$O9IXJK3;Y%(zj~n(QwV@Y9Yo9 zjZfZ1y}gvWZ^_g7+t?IlJPZB&Z|A!wG73w6mzl+1_dLg_Bz1kx^U}MgEgf7=uh+i% z@c%ZVh^sD(co(Cdom!t1h_=|I6x>kt3@ zV>TzRoZ(SL+wRH54MKj;?9r_L9omXXfAE zzQK`U`PHR=R~H?x;$IuRkRh<|akKY723CnZH<u!|v_UE?+;f?`9Ry|NL9@; -
-
- Loading... -
-
-
-
- +
+
+
+
+ Loading...
-
- -
-
- +
+
+
+ +
+
+ +
+
+ +
+
diff --git a/src/js/components/ScheduleBox.vue b/src/js/components/ScheduleBox.vue index 0a12036..874bf47 100644 --- a/src/js/components/ScheduleBox.vue +++ b/src/js/components/ScheduleBox.vue @@ -1,6 +1,6 @@ @@ -89,16 +96,16 @@ export default { }, }, methods: { - nextSchedule() { - this.upcomingScheduleIndex++; - if (this.upcomingScheduleIndex >= this.upcomingSchedules.length) - this.upcomingScheduleIndex = 0; - }, - previousSchedule() { - this.upcomingScheduleIndex--; - if (this.upcomingScheduleIndex < 0) - this.upcomingScheduleIndex = this.upcomingSchedules.length - 1; - }, + // nextSchedule() { + // this.upcomingScheduleIndex++; + // if (this.upcomingScheduleIndex >= this.upcomingSchedules.length) + // this.upcomingScheduleIndex = 0; + // }, + // previousSchedule() { + // this.upcomingScheduleIndex--; + // if (this.upcomingScheduleIndex < 0) + // this.upcomingScheduleIndex = this.upcomingSchedules.length - 1; + // }, }, }