fix responsive behavior

components/BadgeSection.vue

@@ -4,7 +4,9 @@
     <v-row>
       <v-col
         v-for="col in cols"
-        cols="4"
+        cols="12"
+        sm="6"
+        md="4"
       >
         <div
           v-for="item in col"

components/Banner/Logo.vue

@@ -47,6 +47,11 @@ defineProps({
   :deep(.v-img) {
     width: 100%;
   }
+
+  @media (max-width: 540px) {
+    width: 100%;
+    margin: 12px auto;
+  }
 }
 
 :deep(.v-img__img) {

components/Topbar.vue

@@ -71,6 +71,10 @@
 
     > * {
       margin-left: 24px;
+
+      @media (max-width: 540px) {
+        margin-left: 4px;
+      }
     }
 
     .logo {

pages/index.vue

@@ -143,6 +143,10 @@ const showLongIntro: Ref<boolean> = ref(false)
   margin: 0 auto;
   width: 100%;
 
+  @media (max-width: 600px) {
+    padding: 36px 10%;
+  }
+
   :deep(a) {
     color: rgb(var(--v-theme-on-primary-alt--clickable));
   }
@@ -178,6 +182,10 @@ const showLongIntro: Ref<boolean> = ref(false)
     margin: 0 auto;
     justify-content: center;
     align-items: center;
+
+    @media (max-width: 540px) {
+      flex-direction: column;
+    }
   }
 }
 

plugins/vuetify.ts

@@ -50,8 +50,8 @@ export const lightTheme: Theme = {
     'code-background': '#f6f8fa',
     'on-code-background': '#000000',
 
-    'surface': '#ffffff',
-    'on-surface': '#000000',
+    'surface': '#f9f9f9',
+    'on-surface': '#4d4d4d',
 
     'primary': '#334467',
     'on-primary': '#ffffff',