fixed appearance on mobile devices

assets/css/_mixins.scss

@@ -33,7 +33,7 @@
 }
 
 @mixin container {
-  max-width: 1280px;
+  max-width: min(1280px, 100vw);
   margin: auto;
   padding: 0 40px;
 

assets/css/main.scss

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Roboto:wght@400;700&display=swap");
 @import "./variables";
+@import "./mixins";
 @import "./transitions.scss";
 
 body,
@@ -63,6 +64,11 @@ h1 {
   &:not(:first-child) {
     margin-top: 3rem;
   }
+
+  @include phone {
+    font-size: 2rem;
+    line-height: 2.4rem;
+  }
 }
 
 h2 {

components/home/HomeHeader.vue

@@ -60,14 +60,7 @@
 }
 
 .title {
-  font-size: 3rem;
-  line-height: 3.4rem;
   margin: 0.8rem 0;
-
-  @include phone {
-    font-size: 2.2rem;
-    line-height: 3rem;
-  }
 }
 
 .subtitle {

layouts/default.vue

@@ -19,9 +19,11 @@
     </div>
 
     <div :class="$style.main">
-      <NuxtLayout name="content">
-        <slot />
-      </NuxtLayout>
+      <div :class="$style.content">
+        <NuxtLayout name="content">
+          <slot />
+        </NuxtLayout>
+      </div>
     </div>
   </div>
 </template>
@@ -165,4 +167,9 @@ export default defineComponent({
 .footer {
   margin-top: 40px;
 }
+
+.content {
+  width: 100%;
+  padding-top: 40px;
+}
 </style>

pages/bio.vue

@@ -36,6 +36,7 @@ definePageMeta({ layout: "landing" });
 .heading {
   @include desktop {
     padding-top: 0;
+    padding-top: 20px;
   }
 }
 </style>