BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better looking docs on phone

Browse Source
This commit is contained in:
Raphaël Forment
2023-08-20 18:46:15 +02:00
parent b4fd041470
commit e0a6ece571
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -75,25 +75,25 @@
<div id="documentation" class="hidden"> <div id="documentation" class="hidden">
<div id="documentation-page" class="flex flex-row"> <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"> <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"> <div class="space-y-2">
<h2 class="font-semibold text-gray-400">Basics</h2> <h2 class="font-semibold text-gray-400">Basics</h2>
<div class="flex flex-col"> <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_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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</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 text-xl hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</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> </div>
<div class="space-y-2"> <div class="space-y-2">
<h2 class="font-semibold dark:text-gray-400">More</h2> <h2 class="font-semibold dark:text-gray-400">More</h2>
<div class="flex flex-col"> <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>
</div> </div>
</nav> </nav>

2
src/Documentation.ts
View File

@ -1,5 +1,5 @@
const key_shortcut = (shortcut: string): string => { 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 = ` const introduction: string = `

12
src/main.ts
View File

@ -28,13 +28,13 @@ import showdown from "showdown";
showdown.setFlavor("github"); showdown.setFlavor("github");
import showdownHighlight from "showdown-highlight"; import showdownHighlight from "showdown-highlight";
const classMap = { 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", 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-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", 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", ul: "text-underline",
li: "ml-12 list-disc text-2xl sm:text-base text-white mx-4 my-4 leading-normal", li: "ml-12 list-disc lg:text-2xl text-base text-white mx-4 my-4 leading-normal",
p: "text-2xl sm: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: "text-2xl sm:text-base text-orange-300", a: "lg:text-2xl text-base text-orange-300",
code: "my-4 block whitespace-pre overflow-x-scroll", code: "my-4 text-base lg:text-xl block whitespace-pre overflow-x-scroll",
icode: "my-4 text-white font-mono bg-neutral-600", 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", blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
table: table: