From f3403a9513ab42103c5aac13a8fac1536b915b1a Mon Sep 17 00:00:00 2001
From: Zenkie Bear <zq@zenkie.cn>
Date: Thu, 26 Jan 2023 13:52:23 +0800
Subject: [PATCH] feat: UI adapted to mobile terminal

---
 src/assets/style/common.less  | 3 +++
 src/views/Home.vue            | 8 +++++++-
 src/views/Welcome.vue         | 4 ++--
 src/views/global/GlFooter.vue | 8 +++++++-
 vite.config.js                | 2 +-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/assets/style/common.less b/src/assets/style/common.less
index 89022c0..1a0a134 100644
--- 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;
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1921dff..ba846e7 100644
--- 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>
\ No newline at end of file
diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
index 8208cbf..22d64f8 100644
--- 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
index 6a89c96..d153a7f 100644
--- 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>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index fa059d2..6585d93 100644
--- 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: {