From b0271ee6229be1f38228ab652fcb593167858eb3 Mon Sep 17 00:00:00 2001
From: Simon Einzinger <info@simon-einzinger.de>
Date: Sat, 1 Feb 2025 10:48:47 +0100
Subject: [PATCH] Added support for mobile devices

---
 docs/.vitepress/theme/layout/Layout.vue   |  5 ++
 docs/.vitepress/theme/layout/TopBar.vue   | 64 +++++++++++++++++++++++
 docs/.vitepress/theme/style.css           | 17 ++++++
 docs/.vitepress/theme/styles/blogpost.css | 13 +++++
 docs/.vitepress/theme/styles/cards.css    | 15 ++++++
 5 files changed, 114 insertions(+)

diff --git a/docs/.vitepress/theme/layout/Layout.vue b/docs/.vitepress/theme/layout/Layout.vue
index 8919e93..2605783 100644
--- a/docs/.vitepress/theme/layout/Layout.vue
+++ b/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>
diff --git a/docs/.vitepress/theme/layout/TopBar.vue b/docs/.vitepress/theme/layout/TopBar.vue
index 66f34f8..0f2555a 100644
--- a/docs/.vitepress/theme/layout/TopBar.vue
+++ b/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>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 18770bd..72e02f3 100644
--- a/docs/.vitepress/theme/style.css
+++ b/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;
+  }
+}
diff --git a/docs/.vitepress/theme/styles/blogpost.css b/docs/.vitepress/theme/styles/blogpost.css
index 508d251..85e04ba 100644
--- a/docs/.vitepress/theme/styles/blogpost.css
+++ b/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;
+  }
+}
diff --git a/docs/.vitepress/theme/styles/cards.css b/docs/.vitepress/theme/styles/cards.css
index cb4a71d..a3cca13 100644
--- a/docs/.vitepress/theme/styles/cards.css
+++ b/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;
+  }
+}