모바일 태블릿 대응

src/components/layouts/landing/LandingNavigation.vue

@@ -45,6 +45,16 @@ watchEffect(() => {
 </template>
 
 <style lang="scss">
+
+@media (width <= 768px) {
+  .navbar-brand {
+    .navbar-item {
+      max-width: 80%;
+      padding: 0.5rem 1.75rem;
+    }
+  }
+
+}
 .hero {
   .navbar {
     top: 15px;

src/pages/auth/login.vue

@@ -368,6 +368,12 @@ useHead({
     z-index: 0;
   }
 
+  @media (width <= 768px) {
+    .top-tools {
+      margin-top: 1rem !important;
+      margin-bottom: 3rem !important;
+    }
+  }
   .top-tools {
     display: flex;
     align-items: center;
@@ -734,9 +740,9 @@ useHead({
       inset-inline-end: 44px;
     }
 
-    .is-form {
-      padding-top: 100px;
-    }
+    //.is-form {
+    //  padding-top: 100px;
+    //}
   }
 }
 

src/pages/auth/signup.vue

@@ -529,7 +529,11 @@ useHead({
   width: 100%;
   height: 65px;
   z-index: 99;
-
+  @media (width <= 768px) {
+    .signup-nav-inner {
+      padding: 0 3rem;
+    }
+  }
   .signup-nav-inner {
     position: relative;
     width: 100%;
@@ -1258,7 +1262,11 @@ useHead({
   max-width: 200px;
   margin: 7px auto 10px;
 }
-
+@media (hover: none) and (pointer: coarse) {
+  .username-form {
+    padding-top: 140px !important;
+  }
+}
 .username-form {
   padding-top: 80px;
 }

src/scss/css-variables/_rtl.scss

@@ -4,7 +4,11 @@
   --transform-direction: 1;
   zoom:1.4;
 }
-
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    zoom:1.3 !important;
+  }
+}
 [dir='rtl'] {
   --transform-direction: -1;
 }