webbandd/src/components/Webbandd.vue

<template>
  <div class="weband">
    <section class="cover">
    </section>

    <section v-for="album in albums" v-bind:key="album.title" class="album" v-on:click="albumSelected(album)">
            <div>{{album.title}} | {{album.year}}</div>
            <img :src="album.cover"/>
    </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;
    background-color: var(--main-color);
    color: var(--text-color);
}

section h2 {
    font-size: 2rem;
}

/* section.album:nth-of-type(even){
    color: var(--main-color);
    background-color: var(--secondary-color);
}

section.album:nth-of-type(odd){
    background-color: var(--main-color);
    color: var(--secondary-color);
} */

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

section.album{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;

}
section.album img{
  max-height: 80vh;
  max-width: 80vh;
  border : 2px solid var(--secondary-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;
}

section.contact{
    display : flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position :relative;
    color:var(--secondary-color);

}


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

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