studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix

Browse source
This commit is contained in:
isUnknown 2024-12-16 17:52:49 +01:00
parent 24dbf5bf8d
commit b1e8848fcd
1 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/project/ProjectStep.vue
View file

@ -154,16 +154,28 @@
</template> </template>
</template> </template>
<template v-if="step.id === 'physicalSample'"> <template v-if="step.id === 'physicalSample' && step.files[0]">
<div class="card | physical-sample"> <div class="card | physical-sample">
<header class="text-center rounded-lg py-32" :style="'--cover: url('+step.cover+')'"> <header
class="text-center rounded-lg py-32"
:style="'--cover: url(' + step.cover + ')'"
>
<h3 class="text-lg font-serif"> <h3 class="text-lg font-serif">
<router-link :to="'/' + step.uri" class="link-full">{{ step.title }}</router-link> <router-link :to="'/' + step.uri" class="link-full">{{
step.title
}}</router-link>
</h3> </h3>
<time class="font-medium text-sm py-8" :datetime="step.date">{{ step.date }}</time> <time class="font-medium text-sm py-8" :datetime="step.date">{{
step.date
}}</time>
<p>{{ step.description }}</p> <p>{{ step.description }}</p>
</header> </header>
<img :src="step.files[0].url" alt="" loading="lazy" class="rounded-lg mt-16"> <img
:src="step.files[0].url"
alt=""
loading="lazy"
class="rounded-lg mt-16"
/>
</div> </div>
</template> </template>
<template v-else></template> <template v-else></template>
@ -206,7 +218,13 @@ const mergedFiles = computed(() => {
<style scoped> <style scoped>
.physical-sample header { .physical-sample header {
color: var(--color-white); color: var(--color-white);
background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black); background: linear-gradient(
90deg,
hsla(0, 0%, 10%, 0.5) 0%,
hsla(0, 0%, 10%, 0.9) 50%,
hsla(0, 0%, 10%, 0.9) 100%
),
var(--cover), var(--color-black);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }