Basic styling done.

frontend/package.json

@@ -16,6 +16,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "fork-awesome": "^1.2.0",
     "pinia": "^2.0.14",
     "sparkson": "^1.3.6",
     "vue": "^3.2.36",

frontend/src/App.vue

@@ -15,14 +15,22 @@ import PageFooter from "@/components/PageFooter.vue";
 </template>
 
 <style lang="scss">
+@import "fork-awesome";
 @import "scss/variables";
 
 body {
     background-color: $page-background-color;
     color: $page-text-color;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 0;
+}
+
+main {
+    padding: $page-padding;
 }
 
 a {
     color: $link-color;
+    text-decoration: none;
 }
 </style>

frontend/src/components/PageFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useConfigStore } from "@/stores/config";
+import {useConfigStore} from "@/stores/config";
-import { useVersionStore } from "@/stores/version";
+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" target="_blank">
-        <a href="https://github.com/freifunkhamburg/ffffng/issues" target="_blank">Fehler melden</a>
+            <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="/">
+            <RouterLink class="logo" to="/">
-                <img src="icon.svg" alt="Symbol: Gelbes Zahnrad in zwei konzentrischen Kreisen (hellgrau und magenta)"/>
+                <!--suppress HtmlUnknownTarget -->
-                {{ config.getConfig.community.name }} – Knotenverwaltung
+                <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;
+    background-color: $nav-bar-background-color;
-    top: 0;
+    padding: $nav-header-padding;
-    left: 0;
-    right: 0;
 
-    img {
+    * {
-        width: 2em;
+        vertical-align: middle;
-        height: 2em;
+    }
+
+    .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>

frontend/src/scss/_variables.scss

@@ -1,4 +1,5 @@
 // Grays
+$gray-darkest: #222222;
 $gray-darker: #333333;
 $gray-dark: #444444;
 $gray: #666666;
@@ -13,8 +14,20 @@ $color-danger: #c9302c;
 $color-info: #009ee0;
 
 // Page
-$page-background-color: $gray-darker;
+$page-background-color: $gray-darkest;
 $page-text-color: $gray-lighter;
+$page-padding: 0.5em;
 
 // Links
-$link-color: $color-primary;
+$link-color: $color-warning;
+
+// Navigation
+$nav-bar-background-color: $gray-darker;
+$nav-link-color: $page-text-color;
+$nav-link-spacing: 1.5em;
+
+$nav-header-padding: 0.75em;
+$nav-header-logo-size: 2em;
+$nav-header-logo-margin: 0 0.5em 0 0;
+
+$nav-footer-padding: 0.75em;

frontend/src/views/HomeView.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div>
-        <h1>Willkommen!</h1>
+        <h2>Willkommen!</h2>
 
         <p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb ist löschen? Dann bist Du hier richtig!</p>
     </div>

frontend/yarn.lock

@@ -1064,6 +1064,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+fork-awesome@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fork-awesome/-/fork-awesome-1.2.0.tgz#acd43f1e1f54510fa45209c31385b4fde3a95003"
+  integrity sha512-MNwTBnnudMIweHfDtTY8TeR5fxIAZ2w9o8ITn5XDySqdxa4k5AH8IuAMa89RVxDxgPNlosZxqkFKN5UmHXuYSw==
+
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"