42 lines
757 B
Vue
42 lines
757 B
Vue
<template>
|
|
<div class="card game-card">
|
|
<div class="card-content">
|
|
<div class="card-title">
|
|
<p class="card-caption"><a :href="link">{{title}}</a></p>
|
|
</div>
|
|
<div class="card-content">
|
|
<p><slot></slot></p>
|
|
</div>
|
|
<div class="card-footer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props : [ 'title', 'link' ],
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.game-card {
|
|
padding: 0.25rem 1rem;
|
|
@apply w-full flex flex-row transition duration-300 ease-in-out;
|
|
}
|
|
.game-card:hover {
|
|
@apply bg-yuika-blue-200;
|
|
}
|
|
.card-caption {
|
|
@apply text-2xl my-1;
|
|
}
|
|
.card-content {
|
|
@apply my-2 w-full;
|
|
}
|
|
.card-content p {
|
|
@apply my-1;
|
|
}
|
|
|
|
|
|
</style>
|