58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<header
|
||
|
|
class="flex | text-center"
|
||
|
|
style="
|
||
|
|
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<!-- $inspiration->cover()->url() -->
|
||
|
|
<h2 class="inspiration__title | font-serif | text-lg | new">
|
||
|
|
Shape of Nature
|
||
|
|
</h2>
|
||
|
|
<!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
|
||
|
|
<time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
|
||
|
|
>Avril 2024</time
|
||
|
|
>
|
||
|
|
<!-- $inspiration->date() -->
|
||
|
|
<p class="inspiration__description">
|
||
|
|
Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
|
||
|
|
consequat porta mauris hendrerit malesuada viverra turpis.
|
||
|
|
</p>
|
||
|
|
<!-- $inspiration->description() -->
|
||
|
|
</header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.inspiration > header {
|
||
|
|
--direction: column;
|
||
|
|
--justify: center;
|
||
|
|
--row-gap: var(--space-8);
|
||
|
|
clear: both;
|
||
|
|
height: 15rem; /* 240px */
|
||
|
|
background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
|
||
|
|
var(--image);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
margin-bottom: var(--space-16);
|
||
|
|
border-radius: var(--rounded-lg);
|
||
|
|
}
|
||
|
|
.inspiration__title.new::after {
|
||
|
|
content: "Nouveauté";
|
||
|
|
display: inline-block;
|
||
|
|
font-family: var(--font-sans);
|
||
|
|
font-size: var(--text-sm);
|
||
|
|
font-weight: 500;
|
||
|
|
border-radius: var(--rounded-sm);
|
||
|
|
background-color: var(--color-primary-10);
|
||
|
|
color: var(--color-primary-100);
|
||
|
|
margin-left: var(--space-16);
|
||
|
|
padding: var(--space-4) var(--space-12);
|
||
|
|
transform: translateY(-0.1em);
|
||
|
|
}
|
||
|
|
.inspiration__date,
|
||
|
|
.inspiration__description {
|
||
|
|
color: var(--color-grey-700);
|
||
|
|
}
|
||
|
|
</style>
|