Some styling.

frontend/src/App.vue

@@ -53,4 +53,28 @@ a {
         outline: 0.1em solid $link-hover-color;
     }
 }
+
+h2 {
+    font-size: $h2-font-size;
+    margin: $h2-margin;
+}
+input {
+    padding: $input-padding;
+    border: none;
+    border-radius: $input-border-radius;
+
+    background-color: $input-background-color;
+    color: $input-text-color;
+
+    &::placeholder {
+        color: $input-placeholder-color;
+        opacity: $input-placeholder-opacity;
+    }
+
+    &:focus {
+        outline: $input-outline;
+        outline-offset: $input-outline-offset;
+    }
+}
+
 </style>

frontend/src/components/admin/StatisticsCard.vue

@@ -91,7 +91,7 @@ const linkTarget = computed(() => {
             top: 0;
             right: 0;
 
-            font-weight: bold;
+            font-weight: 600;
             font-size: $statistics-card-value-font-size;
         }
     }

frontend/src/components/nodes/NodesFilterPanel.vue

@@ -300,10 +300,10 @@ function doThrottledSearch(): void {
     position: relative;
     background-color: $input-background-color;
     border-radius: $input-border-radius;
-    border: $input-border;
+    outline-offset: $input-outline-offset;
 
     &.focus {
-        outline: $input-focus-outline;
+        outline: $input-outline;
     }
 
     .nodes-filter-input {
@@ -363,6 +363,7 @@ function doThrottledSearch(): void {
         margin: 0.75em 0.25em 0.6em 0;
         padding: 0;
         border: none;
+        border-radius: 0;
         flex-grow: 1;
         height: 1em;
         outline: none;

frontend/src/scss/_variables.scss

@@ -69,18 +69,23 @@ $page-paddings-horizontal: (
     largest: 1.25em,
 );
 
+// Typography
+$h2-font-size: 2.5em;
+$h2-margin: 0.5em 0;
+
 // Links
 $link-color: $variant-color-warning;
 $link-hover-color: $variant-color-warning;
 
 // Inputs
+$input-padding: 0.25em 0.5em;
 $input-background-color: $gray-lighter;
 $input-text-color: $gray-darkest;
 $input-placeholder-color: $gray-darkest;
 $input-placeholder-opacity: 0.8;
-$input-border: 0.1em solid $page-background-color;
 $input-border-radius: 0.5em;
-$input-focus-outline: 0.1em solid $variant-color-info;
+$input-outline: 0.1em solid $variant-color-info;
+$input-outline-offset: 0.125em;
 
 $button-margin: 0.3em;
 $button-padding: 0.25em 0.5em;
@@ -105,6 +110,9 @@ $nav-header-logo-margin: 0 0.5em 0 0;
 
 $nav-footer-padding: 0.75em;
 
+// Home
+$home-actions-margin-top: 2.5em;
+
 // Statistics
 $statistics-card-widths: (
     smallest: 100%,
@@ -127,4 +135,4 @@ $statistics-card-value-font-size: 2.5em;
 $nodes-filter-panel-pill-variant: success;
 $nodes-filter-panel-pill-text-color: map-get($variant-text-colors, $nodes-filter-panel-pill-variant);
 $nodes-filter-panel-pill-background-color: map-get($variant-colors, $nodes-filter-panel-pill-variant);
-$nodes-filter-panel-pill-font-weight: bold;
+$nodes-filter-panel-pill-font-weight: 600;

frontend/src/views/HomeView.vue

@@ -9,9 +9,11 @@ import {ButtonSize, ComponentAlignment, ComponentVariant} from "@/types";
     <PageContainer>
         <h2>Willkommen!</h2>
 
-        <p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen
+        <p>
-            Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb
+            Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon
-            ist löschen? Dann bist Du hier richtig!</p>
+            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>
 
         <ButtonGroup class="actions" :align="ComponentAlignment.CENTER" :button-size="ButtonSize.LARGE">
             <ActionButton
@@ -40,5 +42,7 @@ import {ButtonSize, ComponentAlignment, ComponentVariant} from "@/types";
 @import "../scss/variables";
 @import "../scss/mixins";
 
-
+.actions {
+    margin-top: $home-actions-margin-top;
+}
 </style>