fix: change navBar algobootstrap font size

Author: ATRIOR-LCL

src/client/components/nav-bar.vue

@@ -236,11 +236,6 @@ export default class NavBar extends Vue {
     position: fixed;
     top: 0;
   }
-  @media screen and (max-width: 768px) {
-    height: 40px;
-    position: fixed;
-    top: 0;
-  }
   width: 100vw;
   display: flex;
   justify-content: center;
@@ -287,13 +282,15 @@ export default class NavBar extends Vue {
       }
 
       & .logo .goHome {
+        font-size: var(--font-small-size);
         color: var(--font-primary-color);
       }
     }
 
     & .logo {
       flex-basis: 40%;
       height: 100%;
+      // background-color: red;
       display: flex;
       justify-content: left;
       padding-left: 50px;
@@ -313,8 +310,8 @@ export default class NavBar extends Vue {
         &::after {
           content: '';
           position: absolute;
-          width: 110%;
-          height: 100%;
+          width: calc(var(--font-medium-size) * 1.6);
+          height: calc(var(--font-medium-size) * 1.6);
           left: 0;
           bottom: 0;
           z-index: -1;
@@ -331,15 +328,14 @@ export default class NavBar extends Vue {
         }
 
         & img {
-          width: 100%;
-          height: 100%;
+          width: calc(var(--font-medium-size) * 1.2);
           object-fit: contain;
         }
       }
 
       & .goHome {
         margin-left: 10px;
-        font-size: var(--font-medium-size);
+        font-size: var(--font-small-size);
         white-space: nowrap;
         color: var(--font-secondary-color);
         transition: color 0.5s ease;
@@ -368,6 +364,7 @@ export default class NavBar extends Vue {
         justify-content: center;
         align-items: center;
         transition: color 0.5s ease;
+        font-size: var(--font-small-size);
 
         & svg {
           width: 20px;

src/client/modules/home/display.vue

@@ -105,12 +105,14 @@ export default class Display extends Vue {
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
+              class="start-svg"
             >
               <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
               <rect x="2" y="6" width="14" height="12" rx="2" />
             </svg>
             快速上手
             <svg
+              class="start-svg lucide lucide-chevron-down-icon lucide-chevron-down"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -120,7 +122,6 @@ export default class Display extends Vue {
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-              class="lucide lucide-chevron-down-icon lucide-chevron-down"
               :style="{ transform: isStartOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }"
             >
               <path d="m6 9 6 6 6-6" />
@@ -254,14 +255,13 @@ export default class Display extends Vue {
   }
 
   & .start {
-    padding: 5px 15px;
+    padding: 10px 15px;
     @media screen and (min-width: 768px) {
       padding: 15px 20px;
     }
     @media screen and (min-width: 1700px) {
       padding: 20px 25px;
     }
-    background-color: transparent;
     border: none;
     outline: none;
     border-radius: 100px;
@@ -282,6 +282,17 @@ export default class Display extends Vue {
       color: var(--font-primary-color);
     }
   }
+
+  & .start-svg {
+    width: calc(var(--font-small-size) * 1.5);
+    height: calc(var(--font-small-size) * 1.5);
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+    max-height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 .content {

src/client/modules/releases/releases.view.vue

@@ -45,8 +45,7 @@ export default class Releases extends Vue {
   background-color: var(--bg-color);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-
+  justify-content: space-around;
   align-items: center;
 
   &-header {
@@ -71,7 +70,10 @@ export default class Releases extends Vue {
   }
   .old-version {
       position: absolute;
-      bottom: 200px;
+      bottom: 300px;
+      @media screen and (max-width: 1200px) {
+        bottom: 250px;
+      }
       transform: translateY(50px);
       font-size: var(--font-small-size);
       color: var(--font-secondary-color);