ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2025-12-12 23:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine implemention mini blog on home page

Browse Source
This commit is contained in:
Wolfgang Huß 2025-08-25 21:37:06 +02:00
parent fd80239896
commit 8c70c2ba37
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/.vuepress/components/MiniBlog.vue
View File

@ -22,8 +22,6 @@ const formatDate = (d) =>
<template>
<section class="mini-blog">
<h2 class="mini-blog__title">Neueste Artikel</h2>
<div v-if="items.length" class="mini-blog__grid">
<article v-for="post in items" :key="post.path" class="card">
<RouterLink :to="post.path" class="card__media" aria-label="Zum Artikel">
@ -54,21 +52,34 @@ const formatDate = (d) =>
<p>Keine Artikel im aktuellen Locale gefunden.</p>
</div>
<div class="mini-blog__footer">
<!-- <div id="hero-button" class="mini-blog__footer">
<RouterLink :to="articleIndex" class="mini-blog__all">Alle Artikel ansehen</RouterLink>
</div>
</div> -->
<a id="hero-button mini-blog__footer" :href="articleIndex">
<Button class="mini-blog__all">
Alle Artikel ansehen
</Button>
</a>
</section>
</template>
<style scoped>
/* Abschnitt */
.mini-blog { margin-top: 2rem; }
.mini-blog__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.mini-blog {
max-width: 1100px;
margin-top: 2rem;
}
.mini-blog__title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* Grid */
.mini-blog__grid {
margin: auto 20px;
display: grid;
gap: 1rem;
gap: 1.8rem 1.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {