Basic styling done.

frontend/src/components/PageFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useConfigStore } from "@/stores/config";
-import { useVersionStore } from "@/stores/version";
+import {useConfigStore} from "@/stores/config";
+import {useVersionStore} from "@/stores/version";
 
 const config = useConfigStore();
 const version = useVersionStore();
@@ -16,8 +16,12 @@ refresh();
 <template>
     <footer v-if="config.getConfig">
         ffffng ({{ version.getVersion }})
-        <a href="https://github.com/freifunkhamburg/ffffng" target="_blank">Source Code</a>
-        <a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">Fehler melden</a>
+        <a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
+            <i class="fa fa-code" aria-hidden="true" /> Source Code
+        </a>
+        <a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">
+            <i class="fa fa-bug" aria-hidden="true" /> Fehler melden
+        </a>
         <a
             v-if="config.getConfig.legal.privacyUrl"
             :href="config.getConfig.legal.privacyUrl"
@@ -30,6 +34,7 @@ refresh();
 </template>
 
 <style lang="scss" scoped>
+@use "sass:math";
 @import "../scss/variables";
 
 footer {
@@ -37,6 +42,15 @@ footer {
     bottom: 0;
     left: 0;
     right: 0;
+
     text-align: center;
+
+    background-color: $nav-bar-background-color;
+    padding: $nav-footer-padding;
+
+    a {
+        color: $nav-link-color;
+        padding: 0 math.div($nav-link-spacing, 2);
+    }
 }
 </style>

frontend/src/components/PageHeader.vue

@@ -13,11 +13,24 @@ refresh();
 <template>
     <header v-if="config.getConfig">
         <nav>
-            <RouterLink to="/">
-                <img src="icon.svg" alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"/>
-                {{ config.getConfig.community.name }} – Knotenverwaltung
+            <RouterLink class="logo" to="/">
+                <!--suppress HtmlUnknownTarget -->
+                <img
+                    src="icon.svg"
+                    alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"
+                    aria-hidden="true"
+                />
+            </RouterLink>
+
+            <h1>
+                <RouterLink to="/">
+                    {{ config.getConfig.community.name }} – Knotenverwaltung
+                </RouterLink>
+            </h1>
+
+            <RouterLink class="admin-link" to="/admin">
+                <i class="fa fa-wrench" aria-hidden="true" /> Admin-Panel
             </RouterLink>
-            <RouterLink to="/admin">Admin-Panel</RouterLink>
         </nav>
     </header>
 </template>
@@ -26,14 +39,38 @@ refresh();
 @import "../scss/variables";
 
 header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    background-color: $nav-bar-background-color;
+    padding: $nav-header-padding;
 
-    img {
-        width: 2em;
-        height: 2em;
+    * {
+        vertical-align: middle;
+    }
+
+    .logo {
+        padding: 0;
+
+        img {
+            width: $nav-header-logo-size;
+            height: $nav-header-logo-size;
+
+            margin: $nav-header-logo-margin;
+        }
+    }
+
+    h1 {
+        display: inline;
+        margin: 0;
+    }
+
+    a {
+        color: $nav-link-color;
+        padding: 0 $nav-link-spacing 0 0;
+    }
+
+    a.admin-link {
+        display: inline-block;
+        padding: 0;
+        line-height: 2em;
     }
 }
 </style>