112 lines
2.5 KiB
Vue
112 lines
2.5 KiB
Vue
<!-- components/ArticleCard.vue -->
|
|
<template>
|
|
<div class="article">
|
|
<NuxtLinkLocale
|
|
:to="link"
|
|
class="article-link"
|
|
>
|
|
<div class="image-wrapper">
|
|
<NuxtImg
|
|
v-if="image?.url"
|
|
:src="image.url"
|
|
provider="strapi"
|
|
:alt="image.alternativeText"
|
|
format="webp"
|
|
class="article-image"
|
|
/>
|
|
<div class="overlay">
|
|
<h2>{{ header }}</h2>
|
|
</div>
|
|
<button class="btn mintBtn">{{ readmoreText }}</button>
|
|
</div>
|
|
</NuxtLinkLocale>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
header: String,
|
|
image: Object,
|
|
link: String,
|
|
readmoreText: {
|
|
type: String,
|
|
default: 'Weiterlesen'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.article
|
|
width: 100%
|
|
max-width: 500px
|
|
border: 1px solid $beige
|
|
background: linear-gradient(to bottom right, white, $lightgrey)
|
|
border-radius: 1rem
|
|
position: relative
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: flex-start
|
|
overflow: hidden
|
|
cursor: pointer
|
|
transition: transform 0.3s ease, opacity 0.3s ease
|
|
|
|
&:hover
|
|
transform: scale(1.05)
|
|
|
|
.article-link
|
|
position: relative
|
|
display: block
|
|
color: white
|
|
text-decoration: none
|
|
|
|
.image-wrapper
|
|
position: relative
|
|
width: 100%
|
|
height: 220px
|
|
border: 1px solid $lightgrey
|
|
|
|
.article-image
|
|
width: 100%
|
|
min-height: 500px
|
|
object-fit: cover
|
|
border-top-left-radius: 1rem
|
|
border-top-right-radius: 1rem
|
|
opacity: .6
|
|
|
|
button
|
|
position: absolute
|
|
bottom: .6rem
|
|
right: 0rem
|
|
border: 1px solid $darkgrey
|
|
font-size: 1rem
|
|
box-shadow: 1px 1px 4px 2px rgba(black, .2)
|
|
background-color: lighten($darkgrey, 10%)
|
|
letter-spacing: .05rem
|
|
|
|
.overlay
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 80%
|
|
height: auto
|
|
min-height: 80%
|
|
background-image: linear-gradient(to bottom right, rgba(darken(white, 0), 1), rgba(darken($beige, 0), 0.9))
|
|
margin: 0 20% 7rem 0
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: flex-start
|
|
padding: 1rem 3vw
|
|
border-top-left-radius: 1rem
|
|
border-bottom-right-radius: 50%
|
|
box-shadow: 2px 2px 5px 3px rgba(black, .2)
|
|
|
|
h2
|
|
color: $darkgrey
|
|
font-size: 1rem
|
|
line-height: 140%
|
|
font-family: 'Mainfont-Bold'
|
|
margin: .2rem 0
|
|
hyphens: auto
|
|
</style>
|
|
|