52 lines
998 B
Vue
52 lines
998 B
Vue
<template>
|
|
<div class="card project-card">
|
|
<div class="card-image">
|
|
<img :src="require('~/assets/projects/'+codename+'/1.png')"></img>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-title">
|
|
<h1><nuxt-link :to="'/projects/'+codename">{{name}}</nuxt-link></h1>
|
|
</div>
|
|
<div class="card-content my-4">
|
|
<p>{{description}}</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [ 'name', 'description', 'codename', 'noimage' ],
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.project-card {
|
|
@apply w-full flex flex-col;
|
|
min-height: 12rem;
|
|
}
|
|
@screen md {
|
|
.project-card {
|
|
@apply flex-row;
|
|
}
|
|
}
|
|
.card-image {
|
|
@apply w-full px-2 py-2;
|
|
}
|
|
@screen md {
|
|
.card-image {
|
|
@apply w-1/4;
|
|
}
|
|
}
|
|
.card-content {
|
|
@apply w-full px-2;
|
|
}
|
|
@screen md {
|
|
.card-content {
|
|
@apply w-3/4;
|
|
}
|
|
}
|
|
</style>
|