feat: login and register view

open-isle-cli/src/assets/global.css

@@ -165,4 +165,22 @@ body {
 .info-content-text tbody tr:hover {
   background-color: var(--menu-selected-background-color);
   transition: background-color 0.2s ease;
+}
+
+@media (max-width: 768px) {
+  .info-content-text h1 {
+    font-size: 20px;
+  }
+
+  .info-content-text h2 {
+    font-size: 18px;
+  }
+
+  .info-content-text p {
+    font-size: 12px;
+  }
+
+  .info-content-text li {
+    font-size: 12px;
+  }
 }

open-isle-cli/src/components/ArticleCategory.vue

@@ -57,4 +57,15 @@ export default {
   width: 16px;
   height: 16px;
 }
+
+@media (max-width: 768px) {
+  .article-info-item-img {
+    width: 10px;
+    height: 10px;
+  }
+
+  .article-info-item {
+    font-size: 10px;
+  }
+}
 </style>

open-isle-cli/src/components/ArticleTags.vue

@@ -63,5 +63,17 @@ export default {
   width: 16px;
   height: 16px;
 }
+
+@media (max-width: 768px) {
+  .article-info-item-img {
+    width: 10px;
+    height: 10px;
+  }
+
+  .article-info-item {
+    font-size: 10px;
+  }
+}
+
 </style>
 

open-isle-cli/src/views/LoginPageView.vue

@@ -271,9 +271,11 @@ export default {
 @media (max-width: 768px) {
   .login-page {
     flex-direction: column;
+    justify-content: flex-start;
   }
 
   .login-page-content {
+    margin-top: 20px;
     width: calc(100% - 40px);
     border-right: none;
     padding-left: 20px;

open-isle-cli/src/views/PostPageView.vue

@@ -811,4 +811,15 @@ export default {
 .comment-editor-wrapper {
   position: relative;
 }
+
+@media (max-width: 768px) {
+  .post-page-main-container {
+    width: calc(100% - 20px);
+    padding: 10px;
+  }
+
+  .post-page-scroller-container {
+    display: none;
+  }
+}
 </style>

open-isle-cli/src/views/SignupPageView.vue

@@ -378,14 +378,16 @@ export default {
 @media (max-width: 768px) {
   .signup-page {
     flex-direction: column;
+    justify-content: flex-start;
   }
 
   .email-signup-page-content {
     margin-top: 20px;
-    gap: 15px;
+    gap: 20px;
   }
 
   .signup-page-content {
+    margin-top: 20px;
     width: calc(100% - 40px);
     border-right: none;
     padding-left: 20px;