2022-03-24 00:25:41 +03:00

51 lines
848 B
Vue

<template>
<div class="topnav rounded">
<div class="left">
<div class="btn">
<PlayBtn />
</div>
<div class="info">
<div class="title">Legends never die</div>
</div>
</div>
<div class="center rounded"></div>
<div class="right"></div>
</div>
</template>
<script setup>
import PlayBtn from "../shared/PlayBtn.vue";
</script>
<style lang="scss">
.topnav {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 $small;
margin: $small $small 0 $small;
.left {
display: flex;
align-items: center;
gap: $small;
.info {
.title {
font-size: 1.5rem;
font-weight: bold;
}
}
}
.center {
display: grid;
.songcard {
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>