Added PageContainer handling responsive breakpoints.

frontend/src/components/page/PageContainer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page-container">
+        <div class="content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+.page-container {
+    display: flex;
+    justify-content: center;
+}
+
+@each $breakpoint, $width in $page-container-widths {
+    @include page-breakpoint($breakpoint) {
+        .content {
+            width: $width;
+        }
+    }
+}
+</style>

frontend/src/scss/_mixins.scss

@@ -0,0 +1,17 @@
+@import "variables";
+
+@mixin page-breakpoint($name) {
+    $breakpoint: map-get($page-breakpoints, $name);
+    $lower-bound: nth($breakpoint, 1);
+    $upper-bound: nth($breakpoint, 2);
+    @if ($upper-bound == null) {
+        @media ($lower-bound <= width) {
+            @content;
+        }
+    }
+    @else {
+        @media ($lower-bound <= width < $upper-bound) {
+            @content;
+        }
+    }
+}

frontend/src/scss/_variables.scss

@@ -31,6 +31,23 @@ $variant-color-danger: map-get($variant-colors, danger);
 $variant-color-info: map-get($variant-colors, info);
 
 // Page
+$page-breakpoints: (
+    // first value is <=, second <
+    xs: (0px, 576px),
+    sm: (576px, 768px),
+    md: (768px, 992px),
+    lg: (992px, 1200px),
+    xl: (1200px, 1400px),
+    xxl: (1400px, null),
+);
+$page-container-widths: (
+    xs: 100%,
+    sm: 100%,
+    md: 768px,
+    lg: 992px,
+    xl: 992px,
+    xxl: 992px,
+);
 $page-background-color: $gray-darkest;
 $page-text-color: $gray-lighter;
 $page-padding: 0.5em 0.5em 4.5em 0.5em;

frontend/src/views/HomeView.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import ActionButton from "@/components/form/ActionButton.vue";
+import PageContainer from "@/components/page/PageContainer.vue";
 import {ButtonSize, ComponentVariant} from "@/types";
 </script>
 
 <template>
-    <div>
+    <PageContainer>
         <h2>Willkommen!</h2>
 
         <p>Du hast einen neuen Freifunk Hamburg Router (Knoten), den Du in Betrieb nehmen möchtest? Du hast schon einen
@@ -31,7 +32,7 @@ import {ButtonSize, ComponentVariant} from "@/types";
                 Knoten löschen
             </ActionButton>
         </div>
-    </div>
+    </PageContainer>
 </template>
 
 <style lang="scss" scoped>