42bfd7e208
- Changed beta notice to service notice on home page translations for English, Spanish, and French. - Updated privacy information to reflect transparency and continuous maintenance. - Added new public guides content with detailed sections for various topics. - Implemented routing for guide list and individual guide articles. - Created new components for displaying guides and articles.
108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<main class="guide-list-page">
|
|
<header class="guide-list-header">
|
|
<p class="guide-kicker">YourPart Ratgeber</p>
|
|
<h1>Ratgeber zu Falukant, Vokabeltrainer, Community und Browsergames</h1>
|
|
<p>
|
|
Oeffentliche Artikel erklaeren die wichtigsten Bereiche von YourPart und geben neuen Besuchern genug Kontext,
|
|
bevor sie ein Konto erstellen oder einen Kurs beziehungsweise ein Spiel starten.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="guide-grid" aria-label="Ratgeber">
|
|
<article v-for="guide in guides" :key="guide.slug" class="guide-card">
|
|
<p>{{ guide.category }}</p>
|
|
<h2>
|
|
<router-link :to="`/ratgeber/${guide.slug}`">{{ guide.title }}</router-link>
|
|
</h2>
|
|
<span>{{ guide.description }}</span>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { publicGuides } from '@/content/publicGuides.js';
|
|
|
|
export default {
|
|
name: 'GuideListView',
|
|
computed: {
|
|
guides() {
|
|
return publicGuides;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.guide-list-page {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
padding: 44px 20px 72px;
|
|
color: #253043;
|
|
}
|
|
|
|
.guide-list-header {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.guide-kicker {
|
|
margin: 0 0 10px;
|
|
color: #245da8;
|
|
font-size: 0.85rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.guide-list-header h1 {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 4vw, 3.2rem);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.guide-list-header p:last-child {
|
|
margin: 18px 0 0;
|
|
color: #46556a;
|
|
font-size: 1.08rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.guide-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 18px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.guide-card {
|
|
padding: 22px;
|
|
border: 1px solid rgba(36, 93, 168, 0.14);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.guide-card p {
|
|
margin: 0 0 8px;
|
|
color: #245da8;
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.guide-card h2 {
|
|
margin: 0 0 10px;
|
|
font-size: 1.16rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.guide-card a {
|
|
color: #1d2b3f;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.guide-card span {
|
|
color: #536276;
|
|
line-height: 1.62;
|
|
}
|
|
</style>
|