feat: increase JetBrainsMono font and optimize UI

frontend/src/App.vue

@@ -86,6 +86,7 @@ export default {
 
 <style lang="scss">
 @import url("./assets/css/reset.css");
+@import url("./assets/css/font.css");
 
 html,
 body {
@@ -93,6 +94,7 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: "JetBrainsMono";
 }
 
 #app {

frontend/src/assets/css/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("../fonts/JetBrainsMono-Medium.woff2");
+}

frontend/src/components/HelloWorld.vue

@@ -14,9 +14,9 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hello-world {
-  height: 30px;
+  height: 76px;
-  line-height: 30px;
+  line-height: 38px;
-  margin: 16px auto;
+  margin: 16px 150px;
   text-align: center;
   font-size: 26px;
 }

frontend/src/views/Home.vue

@@ -38,7 +38,7 @@ export default {
     display: block;
     width: 620px;
     height: 280px;
-    margin: 30px auto 10px;
+    margin: 10px auto 10px;
   }
   .link {
     display: flex;
@@ -46,12 +46,13 @@ export default {
     flex-wrap: nowrap;
     align-items: center;
     justify-content: center;
-    margin: 24px auto;
+    margin: 16px auto;
     .btn {
       display: block;
       width: 150px;
       height: 50px;
       line-height: 50px;
+      padding: 0 5px;
       margin: 12px 30px;
       border-radius: 8px;
       text-align: center;