106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<article class="project-card">
|
||
|
|
<div class="project-card__screenshot">
|
||
|
|
<a :href="url" target="_blank" title=""></a>
|
||
|
|
<img :src="screenshot">
|
||
|
|
</div>
|
||
|
|
<div class="project-card__content">
|
||
|
|
<h3>{{ title }}</h3>
|
||
|
|
<p>{{ description }}</p>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
|
||
|
|
// --------------------------------------------------
|
||
|
|
// DATA
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
title: String,
|
||
|
|
url: String,
|
||
|
|
screenshot: String,
|
||
|
|
description: String
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
// --------------------------------------------------
|
||
|
|
// STYLE
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
.project-card {
|
||
|
|
display: grid;
|
||
|
|
place-items: start;
|
||
|
|
|
||
|
|
&:nth-of-type(odd) {
|
||
|
|
align-self: flex-start;
|
||
|
|
grid-template-columns: [screenshot-start] 4fr [content-start] 1fr [screenshot-end] 2fr [content-end];
|
||
|
|
text-align: end;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-of-type(even) {
|
||
|
|
align-self: flex-end;
|
||
|
|
grid-template-columns: [content-start] 2fr [screenshot-start] 1fr [content-end] 4fr [screenshot-end];
|
||
|
|
}
|
||
|
|
|
||
|
|
&__screenshot {
|
||
|
|
grid-area: screenshot;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
a {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 10px;
|
||
|
|
// background-color: var(--accent-color-transparent);
|
||
|
|
// backdrop-filter: grayscale(100%) contrast(120%);
|
||
|
|
backdrop-filter: brightness(90%);
|
||
|
|
transition:
|
||
|
|
background-color 200ms ease-in-out,
|
||
|
|
backdrop-filter 200ms ease-in-out;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active {
|
||
|
|
// background-color: transparent;
|
||
|
|
backdrop-filter: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__content {
|
||
|
|
grid-area: content;
|
||
|
|
z-index: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.5rem;
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
p {
|
||
|
|
padding: 1rem;
|
||
|
|
color: var(--primary-color);
|
||
|
|
background-color: var(--secondary-color-transparent);
|
||
|
|
border-radius: 5px;
|
||
|
|
backdrop-filter: blur(2px);
|
||
|
|
box-shadow: var(--regular-box-shadow);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|