Added support for mobile devices

docs/.vitepress/theme/layout/Layout.vue

@@ -36,4 +36,9 @@ const { frontmatter, page } = useData();
   width: 100%;
   margin: 0 auto;
 }
+@media (max-width: 600px) {
+  .content-container {
+    padding: 0 1em;
+  }
+}
 </style>

docs/.vitepress/theme/layout/TopBar.vue

@@ -141,4 +141,68 @@ const indexList = computed(() => {
   color: var(--text-color);
   padding: 0 0.5em;
 }
+@media (max-width: 600px) {
+  html,
+  body {
+    overflow-x: hidden;
+  }
+
+  .TopBar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1em;
+    gap: 0.5em;
+  }
+
+  .ProfileImageContainer {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto;
+  }
+
+  .title {
+    font-size: 2em;
+    margin: 0.5em 0 0;
+    text-align: center;
+  }
+
+  .subtitle {
+    font-size: 1.2em;
+    margin: 0.25em 0 0;
+    text-align: center;
+  }
+
+  .RightSideTop,
+  .RightSideBottom {
+    width: 100%;
+    display: none;
+  }
+
+  .TopBar::after {
+    content: "";
+    display: block;
+    width: 100%;
+  }
+
+  .social-icons {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5em;
+  }
+
+  .Separator {
+    width: 90%;
+    margin: 1em auto;
+  }
+
+  .IndexList {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1em;
+    padding: 0;
+    margin: 1em auto 2em;
+  }
+}
 </style>

docs/.vitepress/theme/style.css

@@ -46,3 +46,20 @@ a::after {
 a:hover::after {
   width: 100%;
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  overflow-x: hidden;
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 14px;
+  }
+}

docs/.vitepress/theme/styles/blogpost.css

@@ -103,3 +103,16 @@
 .caution .custom-block-title {
   color: #ff5722;
 }
+
+@media (max-width: 600px) {
+  .table-of-contents {
+    margin: 1em 0;
+    padding: 0.75em;
+    font-size: 0.9em;
+  }
+
+  .custom-block {
+    margin: 1em 0;
+    padding: 0.75em 1em;
+  }
+}

docs/.vitepress/theme/styles/cards.css

@@ -76,3 +76,18 @@
   color: var(--secondary-text-color);
   line-height: 1.5;
 }
+
+@media (max-width: 600px) {
+  .card {
+    margin-bottom: 1em;
+    border-radius: 4px;
+  }
+
+  .card-content {
+    padding: 1em;
+  }
+
+  .card-title {
+    font-size: 1em;
+  }
+}