chore(styles): responsiveness adjustments

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>

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;
+  }
+}

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);
+  }
 }
 
 *,

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 {

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,