feat: improve css styles for better layoutpage-layout

5 files changed, 56 insertions, 38 deletions

diff --git a/src/assets/main.css b/src/assets/main.css
index 890703f..b8365e8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,8 +3,7 @@
 #app {
   max-width: 90dvi;
   margin: 0 auto;
-  padding: 2rem;
-
+  padding: 4rem 0 2rem 0;
   font-weight: normal;
 }
 
diff --git a/src/views/index/Notepad/changelog.ts b/src/views/index/Notepad/changelog.ts
index 9d2b523..00ff4a4 100644
--- a/src/views/index/Notepad/changelog.ts
+++ b/src/views/index/Notepad/changelog.ts
@@ -6,7 +6,7 @@ export const changelog = async ():Promise<NotepadContent> =>
     const title = "Changelog"
     return http.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest')
       .then(res => {
-        const message = "## " + res.data['tag_name'] + "\n" + res.data['body'];
+        const message = "## " + res.data['tag_name'] + "\n" + res.data['body'].trimEnd();
         return new NotepadContent(title,message)
       })
       .catch(err => {
diff --git a/src/views/index/Notepad/index.vue b/src/views/index/Notepad/index.vue
index 2d4f037..4dcde33 100644
--- a/src/views/index/Notepad/index.vue
+++ b/src/views/index/Notepad/index.vue
@@ -14,35 +14,42 @@ export default {
 
 
 <template>
-  <div class="details" style="overflow-y:hidden;overflow-x:hidden;height:100%">
+  <div class="details" style="height:100%">
     <h3>
       {{ content.title }}
     </h3>
-    <v-md-preview :text="content.message" ></v-md-preview>
+    <div class="content">
+      <v-md-preview :text="content.message"></v-md-preview>
+    </div>  
   </div>
 </template>
 
 
 <style scoped>
 
+.details {
+  flex: 1;
+  float: right;
+  height: 100%;
+  padding: 0 10dvw;
+}
 
 h3 {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: 500;
   margin-bottom: 0.4rem;
   color: var(--color-heading);
 }
 
-.details {
-  flex: 1;
-  width: 60dvw;
-  float: right;
+.content {
+  overflow-x: auto;
 }
 
 @media screen and (orientation:landscape) {
   .details {
     flex: 1;
     width: 32dvw;
+    padding: 0;
   }
 }
 </style>
diff --git a/src/views/index/Right.vue b/src/views/index/Right.vue
index c415aee..706b8c4 100644
--- a/src/views/index/Right.vue
+++ b/src/views/index/Right.vue
@@ -77,23 +77,24 @@ export default {
 
 .messageBar {
   display: flex;
+  flex-direction: column;
   height: 500px;
   margin-top: 2rem;
   position: relative;
-  flex-direction: row;
 }
 
 .messageBar .options{
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  margin: auto;
   flex-grow: 1;
-  width: 32px;
   color: var(--color-text);
 }
 
 .messageBar .options .item{
   display: flex;
   margin: auto;
+  padding: 0.7rem;
 }
 
 .messageBar .messageBox {
@@ -116,46 +117,57 @@ i {
 
 @media screen and (orientation:landscape) {
   .messageBar {
+    flex-direction: row;
     height: 600px;
     margin-top: 0;
-    padding: 5rem 0 5rem calc(var(--section-gap) / 2);
+    padding: 5rem 0 5rem 0rem;
+  }
+
+  .messageBar .options{
+    flex-direction: column;
+  }
+
+  .messageBar .options .item{
+    padding: 1.8rem;
+  }
+
+  .item {
+    text-align: center;
+    width: 100%;
   }
 
   i {
-    left: -21px;
-    position: absolute;
+    margin: auto;
     border-radius: 8px;
-    width: 40px;
-    height: 40px;
-  }
 
-  // 黑线
-  .messageBar:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
   }
 
+  // .messageBar:before {
+  //   content: ' ';
+  //   border-left: 1px solid var(--color-border);
+  //   position: absolute;
+  //   left: 0;
+  //   bottom: calc(50% + 25px);
+  //   height: calc(50% - 25px);
+  // }
+
   // 画白线
-  .messageBar:after {
+  .options:after {
     content: ' ';
     border-left: 1px solid var(--vt-c-divider-dark-2);
     position: absolute;
-    left: 0;
-    top: calc(15%);
-    height: calc(75%);
+    left: 3.25rem;
+    top: calc(10%);
+    height: calc(80%);
     z-index: -10;
   }
 
-  .messageBar:first-of-type:before {
-    display: none;
-  }
+  // .messageBar:first-of-type:before {
+  //   display: none;
+  // }
 
-  .item:last-of-type:after {
-    display: none;
-  }
+  // .item:last-of-type:after {
+  //   display: none;
+  // }
 }
 </style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 782a393..90926cb 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -54,7 +54,7 @@ header {
   header {
     place-items: center;
     flex-flow: row;
-    padding-right: calc(var(--section-gap) / 2);
+    padding-right: 0rem;
   }
 
   .logo {