feat: optimize for mobiles

Author: liborjelinek

app/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="flex justify-between gap-4 border-t border-slate-300 px-6 py-2 text-sm text-slate-500"
+    class="flex flex-col justify-between gap-4 border-t border-slate-300 px-6 py-2 text-sm text-slate-500 lg:flex-row"
   >
     <span
       >🚀 Do you want to try Sphinx as service?

app/components/Header.vue

@@ -1,10 +1,10 @@
 <template>
   <header
-    class="flex items-center justify-between gap-20 border-t border-b border-slate-300 bg-[#f8fafc] px-6 py-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400"
+    class="flex flex-col items-center justify-between gap-4 border-t border-b border-slate-300 bg-[#f8fafc] px-6 py-1 text-slate-500 lg:flex-row dark:bg-slate-800 dark:text-slate-400"
   >
     <!-- Left-side logo and motto -->
-    <div class="flex items-center gap-2">
-      <a href="https://documatt.com">
+    <div class="flex items-center gap-4">
+      <a href="https://documatt.com" class="">
         <NuxtImg
           src="/images/documatt-logo.svg"
           alt="Documatt logo"

app/components/Topbar.vue

@@ -1,34 +1,38 @@
 <template>
   <div
-    class="flex items-center gap-2 border-b border-slate-300 px-6 py-1 text-slate-700 dark:text-slate-300"
+    class="flex flex-col items-center gap-2 border-b border-slate-300 px-6 py-1 text-slate-700 lg:flex-row dark:text-slate-300"
   >
-    I want to preview
+    <div>I want to preview</div>
 
-    <div class="tooltip tooltip-left" data-tip="Switch syntax">
-      <select
-        :value="previewStore.syntax"
-        class="select select-ghost text-base"
-        @change="onSyntaxChange"
-      >
-        <option :value="Syntax.RST" selected>reStructuredText</option>
-        <option :value="Syntax.MD">Markdown</option>
-      </select>
+    <div>
+      <div class="tooltip tooltip-left" data-tip="Switch syntax">
+        <select
+          :value="previewStore.syntax"
+          class="select select-ghost text-base"
+          @change="onSyntaxChange"
+        >
+          <option :value="Syntax.RST" selected>reStructuredText</option>
+          <option :value="Syntax.MD">Markdown</option>
+        </select>
+      </div>
     </div>
 
-    using
+    <div>
+      using
 
-    <NuxtImg
-      src="/images/sphinx-logo.svg"
-      alt="Sphinx logo"
-      class="inline h-[0.75lh] dark:hidden"
-    />
-    <NuxtImg
-      src="/images/sphinx-logo-dark.svg"
-      alt="Sphinx logo"
-      class="inline h-[0.75lh] not-dark:hidden"
-    />
+      <NuxtImg
+        src="/images/sphinx-logo.svg"
+        alt="Sphinx logo"
+        class="inline h-[0.75lh] dark:hidden"
+      />
+      <NuxtImg
+        src="/images/sphinx-logo-dark.svg"
+        alt="Sphinx logo"
+        class="inline h-[0.75lh] not-dark:hidden"
+      />
 
-    Sphinx 8.2.1
+      Sphinx 8.2.1
+    </div>
 
     <!-- More info -->
     <!--