110 lines
2.6 KiB
Plaintext
110 lines
2.6 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
import dayjs from "dayjs";
|
|
import de from "dayjs/locale/de";
|
|
dayjs.locale(de);
|
|
|
|
interface Props {
|
|
project: CollectionEntry<"projects">;
|
|
}
|
|
|
|
const { project } = Astro.props;
|
|
---
|
|
|
|
<a href=`/projects/${project.id}` class="card-link">
|
|
<div class="glass">
|
|
<hgroup>
|
|
<h2>{project.data.title}</h2>
|
|
<p class="date">{dayjs(project.data.published ?? project.data.lastModified).format("DD.MM.YYYY")}</p>
|
|
</hgroup>
|
|
<hr />
|
|
<p>{project.data.summary}</p>
|
|
{ project.data.tags ?
|
|
<div class="tag-area">Tags: <ul>{project.data.tags.map(tag => <li>{ tag }</li>)}</ul></div>
|
|
: null
|
|
}
|
|
</div>
|
|
</a>
|
|
|
|
<style lang="scss">
|
|
.card-link {
|
|
display: inline-block;
|
|
width: min-content;
|
|
min-width: 250px;
|
|
max-width: 350px;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.date {
|
|
font-size: 80%;
|
|
color: var(--text-color-dark, var(--projects-text-color-dark));
|
|
margin-top: 0rem;
|
|
}
|
|
|
|
div {
|
|
--border-width: 1px;
|
|
padding: 1rem;
|
|
z-index: 1;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
color: var(--accent-color, var(--projects-accent-color));
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -4px;
|
|
z-index: -9999;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background: transparent;
|
|
border: 5px solid var(--glass-color, var(--projects-glass-color));
|
|
filter: blur(4px);
|
|
opacity: 0;
|
|
transition: opacity .3s, filter 1s;
|
|
}
|
|
|
|
&:hover::after {
|
|
opacity: 1;
|
|
animation: glow 3s infinite cubic-bezier(.45,.05,.55,.95);
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
filter: blur(4px);
|
|
}
|
|
50% {
|
|
filter: blur(9px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-area {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: .5em;
|
|
|
|
ul {
|
|
list-style: "#";
|
|
list-style-position: inside;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: start;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: .3em;
|
|
|
|
li {
|
|
font-size: 80%;
|
|
border: 1px solid #888;
|
|
border-radius: .8rem;
|
|
padding: .3em .5em;
|
|
}
|
|
}
|
|
}
|
|
</style> |