Mobile responsive thanks ai slop

frontend/app/pages/art/[slug].vue

@@ -55,12 +55,12 @@ useSeo({
         a {
             text-decoration: none;
             color: var(--color-text);
-        }   
+        }
     }
 
     img {
         margin: auto;
-        display: flex;
+        display: block;
         max-height: 77vh;
         max-width: 100%;
     }
@@ -73,39 +73,21 @@ useSeo({
   margin-bottom: 16px;
   line-height: 1.3;
 }
-</style>
 
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>
-
-<style lang="scss">
-.extended-container {
-    width: 100%;
-    margin: auto;
-    margin-top: 32px;
-}
-
-.art {
-    h2 {
-        a {
-            text-decoration: none;
-            color: var(--color-text);
-        }   
+@media screen and (max-width: 600px) {
+    .extended-container {
+        margin-top: 16px;
     }
 
-    img {
-        margin: auto;
-        display: flex;
-        max-height: 77vh;
-        max-width: 100%;
+    .art img {
+        max-height: 50vh;
+    }
+
+    .art-title {
+        font-size: 1.4rem;
     }
 }
-</style>
 
-<style lang="scss">
 .no-sprite .undertable-wrapper {
   display: none;
 }

frontend/app/pages/art/index.vue

@@ -248,18 +248,25 @@ const displayedArt = computed(() => {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 600px) {
   .section-title {
     font-size: 1rem;
   }
-  
+
   .grid {
-      grid-template-columns: repeat(1, minmax(200px, 1fr));
+      grid-template-columns: 1fr;
       padding: 16px 0;
   }
-  
+
   .selector {
-      height: 180px;
+      height: 200px;
+  }
+}
+
+@media (max-width: 400px) {
+  .section-title {
+    font-size: 1rem;
+    padding-left: 0;
   }
 }
 </style>

frontend/app/pages/blog/[slug].vue

@@ -60,13 +60,15 @@ useSeo({
         a {
             text-decoration: none;
             color: var(--color-text);
-        }   
+        }
     }
 
     img {
         margin: auto;
-        display: flex;
+        display: block;
         max-height: 400px;
+        width: 100%;
+        object-fit: contain;
     }
 }
 
@@ -77,32 +79,19 @@ useSeo({
   margin-bottom: 16px;
   line-height: 1.3;
 }
-</style>
 
-<style lang="scss">
-.no-sprite .undertable-wrapper {
-  display: none;
-}
-</style>
-
-<style lang="scss">
-.blog {
-    h2 {
-        a {
-            text-decoration: none;
-            color: var(--color-text);
-        }   
+@media screen and (max-width: 600px) {
+    .blog {
+        img {
+            max-height: 250px;
+        }
     }
 
-    img {
-        margin: auto;
-        display: flex;
-        max-height: 400px;
+    .blog-post-title {
+        font-size: 1.4rem;
     }
 }
-</style>
 
-<style lang="scss">
 .no-sprite .undertable-wrapper {
   display: none;
 }

frontend/app/pages/contact/index.vue

@@ -50,17 +50,29 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
 
 <style lang="scss" scoped>
 h2 {
-    margin-left: 20px;
+    padding-left: 20px;
+    margin-left: 0;
 }
 
 p {
-    margin-left: 30px;
+    padding-left: 30px;
+    margin-left: 0;
 }
 
 .two-columns {
     display: flex;
     width: 100%;
 }
+
+@media screen and (max-width: 600px) {
+    h2 {
+        padding-left: 12px;
+    }
+
+    p {
+        padding-left: 18px;
+    }
+}
 </style>
 
 <style lang="scss">

frontend/app/pages/index.vue

@@ -835,11 +835,11 @@ const sectionTargets = {
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 600px) {
   .section-title {
     font-size: 1.1rem;
   }
-  
+
   .project-card {
     padding: 8px 12px;
   }
@@ -853,11 +853,11 @@ const sectionTargets = {
     min-width: auto !important;
     height: 160px !important;
   }
-  
+
   .project-title {
     font-size: 0.95rem;
   }
-  
+
   .project-description {
     font-size: 0.82rem;
   }
@@ -888,14 +888,33 @@ const sectionTargets = {
     width: 28px;
     height: 28px;
   }
-  
+
   .grid {
-      grid-template-columns: repeat(1, minmax(200px, 1fr));
+      grid-template-columns: 1fr;
       padding: 16px 0;
   }
-  
+
   .selector {
       height: 180px;
   }
 }
+
+@media (max-width: 400px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-title {
+    font-size: 1rem;
+    padding-left: 0;
+  }
+
+  .grid {
+      grid-template-columns: 1fr;
+  }
+
+  .selector {
+      height: 200px;
+  }
+}
 </style>