BinarySandia04
09b44952df
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 30s
88 lines
1.6 KiB
Vue
88 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface Post {
|
|
slug: string;
|
|
title: string;
|
|
date: string;
|
|
description: string;
|
|
}
|
|
|
|
defineProps<{
|
|
posts: Post[];
|
|
linkTo?: (slug: string) => string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<section class="blog-section">
|
|
<ul class="tui-list">
|
|
<li v-for="post in posts" :key="post.slug" class="blog-entry">
|
|
<NuxtLink v-if="linkTo" class="entry-link" :to="linkTo(post.slug)">
|
|
<span class="entry-title">{{ post.title }}</span>
|
|
</NuxtLink>
|
|
<NuxtLink v-else class="entry-link" :to="`#${post.slug}`">
|
|
<span class="entry-title">{{ post.title }}</span>
|
|
</NuxtLink>
|
|
<span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.tui-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.blog-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 8px 16px;
|
|
border-left: 2px solid var(--color-border-color);
|
|
margin-bottom: 4px;
|
|
transition: all 0.1s steps(2, end);
|
|
|
|
&:hover {
|
|
border-left-color: var(--color-link);
|
|
background-color: var(--color-hover);
|
|
}
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.entry-link {
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
|
|
&:hover {
|
|
color: var(--color-link);
|
|
text-shadow: 0 0 6px var(--color-link);
|
|
}
|
|
}
|
|
|
|
.entry-title {
|
|
font-size: 1rem;
|
|
transition: all 0.1s steps(2, end);
|
|
}
|
|
|
|
.entry-meta {
|
|
color: var(--color-text);
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.blog-entry {
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.entry-title {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
</style>
|