add: backlink, technical aspects, nav

Add "Wissen" to navigation, fix some smaller issues, add backlink to posts

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);
 }

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)
     }

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',

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>