feat: UI adapted to mobile terminal

ZacharyBear · Jan 26, 2023 · f3403a9 · f3403a9
1 parent 75e797b
commit f3403a9
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/src/assets/style/common.less b/src/assets/style/common.less
@@ -99,4 +99,7 @@ html {
 }
 .space-lg {
     height: 100px;
+}
+.nowrap {
+    white-space: nowrap;
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -154,7 +154,7 @@ main {
     justify-content: center;
     #code-box {
         width: 450px;
-        height: 250px;
+        min-height: 250px;
         border-radius: 15px;
         background-color: rgba(255, 255, 255, .2);
         padding: 10px;
@@ -208,4 +208,10 @@ footer {
 .language-css {
     white-space: pre-wrap;
 }
+
+@media screen and (max-width: 786px) {
+    .side-bar {
+        padding: 20px;
+    }
+}
 </style>
diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
@@ -7,7 +7,7 @@
                 <div class="title">
                     Glassmorphism Generator
                 </div>
-                <span class="slogan">
+                <span class="desc">
                     {{ $t('welcome.desc') }}
                 </span>
                 <div class="panel">
@@ -57,7 +57,7 @@ main {
             color: transparent;
             line-height: 10vw * 1;
         }
-        .slogan {
+        .desc {
             font-size: 1.2rem;
             color: @font-color;
         }

diff --git a/src/views/global/GlFooter.vue b/src/views/global/GlFooter.vue
@@ -12,7 +12,8 @@
         <div class="copyright">
             {{ $t('footer.license.prefix') }}
             <a href="https://github.com/ZenkieBear/glassmorphism/blob/main/LICENSE'" class="link">MIT</a>
-            {{ $t('footer.license.suffix') }} |
+            {{ $t('footer.license.suffix') }}
+            |
             {{ $t('footer.copyPrefix', {year: 2022}) }} <a href="https://github.com/ZenkieBear" class="link">Zenkie Bear</a> .
         </div>
     </footer>
@@ -72,4 +73,9 @@ footer {
         margin-top: 1rem;
     }
 }
+@media screen and (max-width: 768px) {
+    footer {
+        font-size: 3vw;
+    }
+}
 </style>
diff --git a/vite.config.js b/vite.config.js
@@ -9,7 +9,7 @@ const resolve = (relativePath) => {
 export default defineConfig({
   server: {
     port: 5000,
-    host: 'localhost',
+    host: '0.0.0.0',
   },
   plugins: [vue()],
   resolve: {