From e0a6ece571f6cd61780772e74749cb1f2285fa16 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sun, 20 Aug 2023 18:46:15 +0200
Subject: [PATCH] better looking docs on phone

---
 index.html           | 22 +++++++++++-----------
 src/Documentation.ts |  2 +-
 src/main.ts          | 12 ++++++------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 79a2f35..d31d3bd 100644
--- a/index.html
+++ b/index.html
@@ -75,25 +75,25 @@
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row">
         <aside class="h-screen w-50 p-1 lg:p-8 h-100 bg-neutral-900 text-white">
-          <nav class="space-y-8 text-xl sm:text-lg">
+          <nav class="space-y-8 text-xl sm:text-sm">
             <div class="space-y-2">
               <h2 class="font-semibold text-gray-400">Basics</h2>
               <div class="flex flex-col">
-                <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
-                <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
-                <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</p>
-                <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</p>
-                <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</p>
-                <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
-                <p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
-                <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</p>
-                <p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
+                <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
+                <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
+                <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</p>
+                <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</p>
+                <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</p>
+                <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
+                <p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
+                <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</p>
+                <p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
               </div>
             </div>
             <div class="space-y-2">
               <h2 class="font-semibold dark:text-gray-400">More</h2>
               <div class="flex flex-col">
-                <a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
+                <a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
               </div>
             </div>
          </nav>
diff --git a/src/Documentation.ts b/src/Documentation.ts
index 25a3d4b..3f63aa5 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -1,5 +1,5 @@
 const key_shortcut = (shortcut: string): string => {
-  return `<kbd class="px-2 py-1.5 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
+  return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
 };
 
 const introduction: string = `
diff --git a/src/main.ts b/src/main.ts
index f21bdca..ad11987 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,13 +28,13 @@ import showdown from "showdown";
 showdown.setFlavor("github");
 import showdownHighlight from "showdown-highlight";
 const classMap = {
-  h1: "text-white lg:text-4xl text-xl lg:ml-4 sml-2 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
-  h2: "text-white lg:text-3xl text-lg mx-4 mx-2 lg:my-4 my-2 lg:mt-12 mb-2 mb-6 bg-neutral-900 rounded-lg py-2 px-2",
+  h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
+  h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
   ul: "text-underline",
-  li: "ml-12 list-disc text-2xl sm:text-base text-white mx-4 my-4 leading-normal",
-  p: "text-2xl sm:text-base text-white mx-4 my-4 leading-normal",
-  a: "text-2xl sm:text-base text-orange-300",
-  code: "my-4 block whitespace-pre overflow-x-scroll",
+  li: "ml-12 list-disc lg:text-2xl text-base text-white mx-4 my-4 leading-normal",
+  p: "lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 leading-normal",
+  a: "lg:text-2xl text-base text-orange-300",
+  code: "my-4 text-base lg:text-xl block whitespace-pre overflow-x-scroll",
   icode: "my-4 text-white font-mono bg-neutral-600",
   blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
   table: