From a85d924e21d9370831797ab551d5d26f87cd9ef0 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 11 Jul 2025 09:30:45 +0200
Subject: [PATCH] add: backlink, technical aspects, nav

Add "Wissen" to navigation, fix some smaller issues, add backlink to posts
---
 app/assets/styles/general.css    |  6 ++++++
 app/assets/styles/page.css       | 20 +++++++++++++-------
 app/components/Pp/Navigation.vue | 11 ++++++++---
 app/pages/wissen/[slug].vue      |  7 ++++---
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 1028fda..b320d00 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -188,4 +188,10 @@ a:has(button) {
 .grow {
   flex-grow: 1;
   height: var(--padding-s);
+}
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--padding-default);
 }
\ No newline at end of file
diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css
index 9296ef1..345902b 100644
--- a/app/assets/styles/page.css
+++ b/app/assets/styles/page.css
@@ -50,11 +50,7 @@
     background: var(--color-lightest);
     height: 100%;
 
-    h1:first-of-type,
-    h2:first-of-type,
-    h3:first-of-type,
-    p:first-of-type,
-    figure:first-of-type {
+    & :is(h1, h2, h3, p, figure):first-of-type {
         margin-top: 0;
     }
 }
@@ -78,16 +74,26 @@
     padding: var(--padding-l) var(--padding-default);
     color: var(--color-darkest);
 
-    ul {
+    & ul {
         margin: 0 0 0 var(--padding-default);
     }
+
+    & a {
+        color: var(--color-main-dark);
+        text-decoration: none;
+        transition: var(--transition-default);
+
+        &:hover {
+            color: var(--color-main-darkest);
+        }
+    }
 }
 
 ul.link-liste {
     list-style: none;
     margin: var(--padding-default) 0 0;
     
-    a {
+    & a {
         text-decoration: none;
         color: var(--color-text)
     }
diff --git a/app/components/Pp/Navigation.vue b/app/components/Pp/Navigation.vue
index 9e88fb8..3934ca6 100644
--- a/app/components/Pp/Navigation.vue
+++ b/app/components/Pp/Navigation.vue
@@ -7,7 +7,7 @@
       <ul class="flex-col">
         <li v-for="page in pages">
           <NuxtLink :to="page.route" @click="close()" active-class="active">
-            <Icon class="icon" :name="`uil:${page.icon}`" mode="svg" />
+            <Icon class="icon" :name="page.icon" mode="svg" />
             <span>{{ page.label }}</span>
           </NuxtLink>
         </li>
@@ -24,14 +24,19 @@ const open = computed(() => nav.isNavigationVisible.value)
 const pages = [
   {
     label: 'Home',
-    icon: 'home',
+    icon: 'uil:home',
     route: '/'
   },
   {
     label: 'Schnellrechner',
-    icon: 'calculator',
+    icon: 'uil:calculator',
     route: '/rechner'
   },
+  {
+    label: 'Wissen',
+    icon: 'uil:brain',
+    route: '/wissen'
+  },
   // {
   //   label: 'Über uns',
   //   icon: 'users-alt',
diff --git a/app/pages/wissen/[slug].vue b/app/pages/wissen/[slug].vue
index a676879..bc73662 100644
--- a/app/pages/wissen/[slug].vue
+++ b/app/pages/wissen/[slug].vue
@@ -6,7 +6,8 @@ const { data: post } = await useAsyncData(`wissen-${slug}`, () => {
 </script>
 
 <template>
-  <template v-if="post">
-    <ContentRenderer :value="post" :prose="false" class="Wissen flex-col gap-default content full"/>
-  </template>
+  <section class="Wissen content full flex-col gap-default">
+    <NuxtLink class="back" to="/wissen"><Icon name="uil:backward" />Zurück zur Übersicht</NuxtLink>
+    <ContentRenderer v-if="post" :value="post" :prose="false" class="flex-col gap-default"/>
+  </section>
 </template>