webbandd/src/components/Weband.vue

<template>
  <div class="weband">
    <section class="cover">
    </section>
    <section class="albums">
        <h2>{{this.artist}} | Albums</h2>
        <ul>
          <li v-for="album in albums" v-bind:key="album.title" v-on:click="albumSelected(album)">
            {{album.title}} | {{album.year}}
          </li>
        </ul>
    </section>

    <section class="icono-2">

    </section>

    <section class="contact">
        <span>contact<span class="point">@</span>{{this.artist.toLowerCase()}}<span class="point">.</span>space</span>
        <footer class="flex-center">
            dede<span class='point'>.</span>space<span class='pipe'>|</span>{{new Date().getFullYear()}}
        </footer>
    </section>

    <Player v-bind:album="currentAlbum"/>

  </div>
</template>

<script>

import Player from './Player.vue'
import * as data from '../data.json';

export default {
  name: 'Weband',
  props: {
    msg: String
  },
  components: {
    Player
  },
   data: function () {
    return {
      artist: data.artist,
      albums: data.albums,
      currentAlbum: data.albums[0]
    }
  },

  methods: {
    albumSelected: function(album){
      this.currentAlbum = album;
    }
  }
}
</script>

<style scoped>


@import '../assets/css/_variables.css';


.point {
    margin: 0px var(--pretty-margin);
}

.pipe {
    margin: 0px calc(3 * var(--pretty-margin));
}

section{
    height: 100vh;
}

section h2 {
    font-size: 2rem;
}

section:nth-of-type(odd){
    background-color: white;
    color: var(--secondary-color);
}

section:nth-of-type(even){
    background-color: var(--secondary-color);
    color: white;
}

section.cover{
    background : url(../assets/images/icono_1.png) no-repeat center center;
    background-color: var(--main-color);

}

section.albums{
    background-color: black;
    color:white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 200%;
}

section.albums > * {
    padding-left: 10vw;
}

section.albums h2 {
    padding-left: 20vw;
    font-weight: normal;
}

section.albums ul {
    list-style-type: none;
}

section.icono-2{
  background : url(../assets/images/icono_2.png) no-repeat center center;
  background-color: var(--secondary-color);
}

section.contact{
    display : flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position :relative;

    /* background : url(../assets/images/contact.png) no-repeat center center; */
     background-color: var(--main-color);
    /*color:white; */

}


footer{
    font-size: 0.92rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.hidden{
    display: none;
}
</style>