From 5ea91a0c484d684c4301415e3684ad2f96e8075c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 13 Apr 2026 19:58:57 +0200
Subject: [PATCH] chore(styles): responsiveness adjustments

---
 src/components/Navbar.vue   | 20 ++++++++------------
 src/styles/_responsive.scss | 11 +++++++++++
 src/styles/_styles.scss     |  5 ++++-
 src/views/HomeView.vue      |  3 ++-
 src/views/PragotronView.vue | 14 ++++++++------
 5 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 src/styles/_responsive.scss

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index abe0193..e964ddf 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -2,7 +2,9 @@
   <nav class="navbar">
     <div class="navbar-body">
       <router-link class="brand-link" to="/">
-        Pragotron TD2 <span class="text--accent">v{{ version }}</span> <sup>by Spythere</sup>
+        <span>Pragotron TD2</span>
+        <span class="text--accent"> v{{ version }}</span>
+        <sup> by Spythere</sup>
       </router-link>
 
       <div class="lang-switcher">
@@ -42,11 +44,6 @@ export default defineComponent({
 nav.navbar {
   background-color: theme.$accentBg;
   padding: 0 0.5em;
-
-  sup {
-    font-size: 0.8em;
-    color: theme.$dimmedText;
-  }
 }
 
 .navbar-body {
@@ -66,6 +63,11 @@ nav.navbar {
 
 .brand-link {
   font-size: 1.25em;
+
+  sup {
+    font-size: 0.6em;
+    color: theme.$dimmedText;
+  }
 }
 
 .lang-switcher button {
@@ -83,10 +85,4 @@ nav.navbar {
     width: 1.25em;
   }
 }
-
-@media only screen and (max-width: 1400px) {
-  nav.navbar {
-    font-size: calc(0.5em + 0.5vw);
-  }
-}
 </style>
diff --git a/src/styles/_responsive.scss b/src/styles/_responsive.scss
new file mode 100644
index 0000000..848020d
--- /dev/null
+++ b/src/styles/_responsive.scss
@@ -0,0 +1,11 @@
+@mixin smallScreen() {
+  @media only screen and (max-width: 700px) {
+    @content;
+  }
+}
+
+@mixin midScreen() {
+  @media only screen and (max-width: 1400px) {
+    @content;
+  }
+}
diff --git a/src/styles/_styles.scss b/src/styles/_styles.scss
index 7f98943..8bc7a8c 100644
--- a/src/styles/_styles.scss
+++ b/src/styles/_styles.scss
@@ -1,5 +1,6 @@
 @use 'fonts';
 @use 'theme';
+@use 'responsive';
 
 body,
 html {
@@ -10,7 +11,9 @@ html {
   padding: 0;
   margin: 0;
 
-  font-size: 16px;
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
 }
 
 *,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ade98d2..eec60a8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -88,7 +88,8 @@ export default defineComponent({
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 3em;
+
+  padding: 1em;
 }
 
 .region-selector {
diff --git a/src/views/PragotronView.vue b/src/views/PragotronView.vue
index 0d0d76a..d2c2934 100644
--- a/src/views/PragotronView.vue
+++ b/src/views/PragotronView.vue
@@ -489,12 +489,6 @@ export default defineComponent({
   padding: 1em;
 }
 
-@media only screen and (max-width: 1500px) {
-  .pragotron {
-    font-size: calc(0.3em + 0.65vw);
-  }
-}
-
 .pragotron_options {
   display: flex;
   justify-content: space-between;
@@ -520,6 +514,14 @@ export default defineComponent({
   width: 100%;
   min-height: 50em;
   overflow: auto;
+
+  @media only screen and (max-width: 1500px) {
+    font-size: calc(0.3em + 0.65vw);
+  }
+
+  @media only screen and (max-width: 800px) {
+    font-size: 8px;
+  }
 }
 
 .top-pane > .headers,