ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2025-12-13 07:46:08 +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> <template>
<section class="mini-blog"> <section class="mini-blog">
<h2 class="mini-blog__title">Neueste Artikel</h2>
<div v-if="items.length" class="mini-blog__grid"> <div v-if="items.length" class="mini-blog__grid">
<article v-for="post in items" :key="post.path" class="card"> <article v-for="post in items" :key="post.path" class="card">
<RouterLink :to="post.path" class="card__media" aria-label="Zum Artikel"> <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> <p>Keine Artikel im aktuellen Locale gefunden.</p>
</div> </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> <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> </section>
</template> </template>
<style scoped> <style scoped>
/* Abschnitt */ /* Abschnitt */
.mini-blog { margin-top: 2rem; } .mini-blog {
.mini-blog__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } max-width: 1100px;
margin-top: 2rem;
}
.mini-blog__title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* Grid */ /* Grid */
.mini-blog__grid { .mini-blog__grid {
margin: auto 20px;
display: grid; display: grid;
gap: 1rem; gap: 1.8rem 1.2rem;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@media (min-width: 720px) { @media (min-width: 720px) {