From 74e7d1d0834c77d9a32c829bdbb66bf16597dee9 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sun, 27 Aug 2023 17:37:39 +0200
Subject: [PATCH] trying something

---
 src/Documentation.ts | 18 +++++++++---------
 src/main.ts          |  9 +++++----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/Documentation.ts b/src/Documentation.ts
index 828667f..bb17e5d 100644
--- a/src/Documentation.ts
+++ b/src/Documentation.ts
@@ -62,10 +62,10 @@ export const documentation_factory = (application: Editor) => {
 
     return `
 <details ${open ? "open" : ""}>
-  <summary>${description}
-    <button class="inline-block pl-2" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">&#9654;</button>
-    <button class="inline-block pl-2" onclick="stop()">&#10074;&#10074;</button>
-    <button class="inline-block pl-2" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">copy</button>
+  <summary >${description}
+    <button class="py-1 align-top text-base rounded-lg pl-2 pr-2 hover:bg-green-700 bg-green-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
+    <button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-600 bg-neutral-500 inline-block pl-2" onclick="stop()">&#x23f8;&#xFE0F; Pause</button>
+    <button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
   </summary>
   \`\`\`javascript
   ${code}
@@ -82,11 +82,11 @@ Welcome to the Topos documentation. These pages are offering you an introduction
   )}.  Press again to make the documentation disappear. All your contributions are welcome!
 
 ${makeExample(
-  "Welcome! Eval to get started",
-  `mod([1/4,1/8,1/16].div(8)):: sound('sine')
-  .freq([100,50].div(16) + 50 * ($(1)%10))
-  .gain(0.5).room(0.9).size(0.9)
-  .sustain(0.1).out()
+  "Welcome! Eval to get started", `
+mod([1/4,1/8,1/16].div(8)):: sound('sine')
+	.freq([100,50].div(16) + 50 * ($(1)%10))
+	.gain(0.5).room(0.9).size(0.9)
+	.sustain(0.1).out()
 mod(1) :: sound('kick').out()`,
   true
 )}
diff --git a/src/main.ts b/src/main.ts
index 83ee53b..c74db86 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,18 +33,19 @@ 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 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",
+  h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 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-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
   ul: "text-underline pl-6",
   li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
-  p: "lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 leading-normal",
+  p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
   a: "lg:text-2xl text-base text-orange-300",
   code: "lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden",
   icode:
     "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
   blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
   details:
-    "lg:mx-12 py-1 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600",
+    "lg:mx-12 py-2 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600",
+	summary: "font-semibold text-xl",
   table:
     "justify-center lg:my-8 my-2 lg:mx-8 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
   thead: