rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

styling implemented

This commit is contained in:
ManjaroOne666 2019-01-22 17:45:30 +00:00
parent 6d12a3e0bc
commit 303f25fa0b
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages/index.vue
View File

@ -9,7 +9,9 @@
<div class="background background-overlay"></div> <div class="background background-overlay"></div>
</div> </div>
<div class="content"> <div class="content">
<h1 class="heading">Marc Leopold Photography</h1> <transition name="fade">
<h1 v-if="showHeading" class="heading">Marc Leopold Photography</h1>
</transition>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<p class="tagline" <p class="tagline"
:key="currentTaglineIndex"> :key="currentTaglineIndex">
@ -34,6 +36,7 @@ export default {
data() { data() {
return { return {
showHeading: false,
currentImageIndex: -1, currentImageIndex: -1,
bgImages: [ bgImages: [
'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider.jpg', 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/slider.jpg',
@ -72,7 +75,7 @@ export default {
mounted () { mounted () {
if (this.bgImages.length > 1) { if (this.bgImages.length > 1) {
this.setNextIndex() this.setNextIndex()
// this.nextTagline() this.showHeading = true
} }
}, },
@ -185,14 +188,14 @@ $padding: 1rem;
} }
.heading { .heading {
color: #fff; color: $color__neutral-900;
font-size: $heading-height; font-size: $heading-height;
@include font-title(400); @include font-title(400);
text-align: center; text-align: center;
} }
.tagline { .tagline {
color: #fff; color: $color__neutral-600;
font-size: $tagline-height; font-size: $tagline-height;
text-align: right; text-align: right;
@include font-cursive; @include font-cursive;