feat: login and register view

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

@@ -221,15 +221,15 @@ export default {
 .menu {
   width: 200px;
   background-color: var(--menu-background-color);
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height) - 20px);
   border-right: 1px solid var(--menu-border-color);
   display: flex;
   flex-direction: column;
+  padding: 10px;
   overflow-y: auto;
 }
 
 .menu-item-container {
-  padding: 10px;
 }
 
 .menu-item {
@@ -296,7 +296,7 @@ export default {
 }
 
 .menu-section {
-  padding: 10px;
+  margin-top: 10px;
 }
 
 .section-header {
@@ -358,7 +358,7 @@ export default {
 @media (max-width: 768px) {
   .menu {
     position: fixed;
-    width: 100%;
+    width: calc(100% - 20px);
     z-index: 1000;
   }
 

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

@@ -18,8 +18,10 @@
         >
           {{ topic }}
         </div>
-        <CategorySelect v-model="selectedCategory" :options="categoryOptions" />
+        <div class="topic-select-container">
-        <TagSelect v-model="selectedTags" :options="tagOptions" />
+          <CategorySelect v-model="selectedCategory" :options="categoryOptions" />
+          <TagSelect v-model="selectedTags" :options="tagOptions" />
+        </div>
       </div>
     </div>
 
@@ -396,6 +398,15 @@ export default {
   flex-direction: row;
   align-items: center;
   gap: 10px;
+  font-size: 16px;
+  flex-wrap: wrap;
+}
+
+.topic-select-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
 }
 
 .topic-item {
@@ -440,6 +451,20 @@ export default {
   padding-left: 20px;
 }
 
+/* .article-member-avatars-container,
+.header-item.avatars, */
+.article-comments,
+.header-item.comments,
+.article-views,
+.header-item.views,
+.article-time,
+.header-item.activity {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
 .article-member-avatars-container,
 .header-item.avatars {
   width: 20%;
@@ -581,7 +606,7 @@ export default {
 @container home-page (max-width: 768px) {
   .article-main-container,
   .header-item.main-item {
-    width: calc(80% - 20px);
+    width: calc(70% - 20px);
     padding-left: 20px;
   }
   
@@ -603,12 +628,35 @@ export default {
   .article-time,
   .header-item.activity {
     width: 10%;
+    margin-right: 3%;
   }
 
+  .header-container {
+    display: none;
+  }
 
   .article-member-avatar-item:nth-child(n+2) {
     display: none;
   }
+  
+  .header-item-text {
+    font-size: 12px;
+  }
+
+  .article-item-title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .article-item-description {
+    margin-top: 2px;
+    font-size: 10px;
+  }
+
+  .main-info-text {
+    font-size: 10px;
+    opacity: 0.5;
+  }
 }
 
 </style>

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

@@ -267,4 +267,37 @@ export default {
 .login-page-button-secondary-link {
   color: var(--primary-color);
 }
+
+@media (max-width: 768px) {
+  .login-page {
+    flex-direction: column;
+  }
+
+  .login-page-content {
+    width: calc(100% - 40px);
+    border-right: none;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .login-page-button-primary {
+    margin-top: 0px;
+  }
+
+  .login-page-button-secondary {
+    margin-top: 0px;
+    font-size: 13px;
+  }
+
+  .other-login-page-content {
+    margin-top: 20px;
+    margin-left: 0px;
+    width: calc(100% - 40px);
+    gap: 10px;
+  }
+
+  .login-page-button {
+    width: calc(100% - 40px);
+  }
+}
 </style>

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

@@ -374,4 +374,42 @@ export default {
   margin-top: -10px;
   margin-bottom: 10px;
 }
+
+@media (max-width: 768px) {
+  .signup-page {
+    flex-direction: column;
+  }
+
+  .email-signup-page-content {
+    margin-top: 20px;
+    gap: 15px;
+  }
+
+  .signup-page-content {
+    width: calc(100% - 40px);
+    border-right: none;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .signup-page-button-primary {
+    margin-top: 0px;
+  }
+
+  .signup-page-button-secondary {
+    margin-top: 0px;
+    font-size: 13px;
+  }
+
+  .other-signup-page-content {
+    margin-top: 20px;
+    margin-left: 0px;
+    width: calc(100% - 40px);
+    gap: 10px;
+  }
+
+  .signup-page-button {
+    width: calc(100% - 40px);
+  }
+}
 </style>