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

looking better

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-16 01:49:03 +01:00
parent 96959e7b8f
commit 46d4562012
3 changed files with 67 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@ -79,18 +79,25 @@
@apply inline-block lg:px-4 px-8 py-1 text-selection_foreground @apply inline-block lg:px-4 px-8 py-1 text-selection_foreground
} }
.doc_header {
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-blue hover:bg-red
}
.doc_subheader {
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-blue hover:bg-red
}
</style> </style>
<body id="all" class="z-0 overflow-y-hidden bg-black"> <body id="all" class="z-0 overflow-y-hidden bg-black">
<!-- The header is hidden on smaller devices --> <!-- The header is hidden on smaller devices -->
<header class="py-0 block"> <header class="py-0 block">
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background text-selection_foreground"> <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
<a class="flex title-font font-medium items-center mb-0 text-selection_foreground"> <a class="flex title-font font-medium items-center mb-0">
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/> <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background" id="renamer" type="text" placeholder="Topos"> <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-blue placeholder-blue" id="renamer" type="text" placeholder="Topos">
</a> </a>
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0"> <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
<!-- Play Button --> <!-- Play Button -->
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button"> <a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16"> <svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
@ -147,108 +154,102 @@
<div id="documentation" class="hidden"> <div id="documentation" class="hidden">
<div id="documentation-page" class="flex flex-row transparent"> <div id="documentation-page" class="flex flex-row transparent">
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-foreground"> <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-foreground"> <nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
<details class="" open> <details class="" open>
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary> <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_introduction" <p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg text-color1">Welcome </p> <p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Interface</p> <p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Interaction</p> <p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Keyboard</p> <p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Mouse</p> <p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Coding</p>
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary> <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<!-- Time --> <!-- Time -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 ">Time</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Dealing with time</p> <p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Time & Transport</p> <p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p> <p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Time & Structure</p> <p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
</div> </div>
</details> </details>
<!-- Audio Engine --> <!-- Audio Engine -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 ">Audio Engine</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Playing a sound</p> <p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Amplitude</p> <p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Sampler</p> <p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Synths</p> <p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
<p rel="noopener noreferrer" id="docs_filters" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Filters</p> <p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
<p rel="noopener noreferrer" id="docs_effects" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Effects</p> <p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
</div> </div>
</details> </details>
<!-- Samples --> <!-- Samples -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 ">Samples</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">List of samples</p> <p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">External samples</p> <p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
</div> </div>
</details> </details>
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">MIDI</p> <p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
<p rel="noopener noreferrer" id="docs_osc" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">OSC</p> <p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary> <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Array patterns</p> <p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
<!-- Ziffers --> <!-- Ziffers -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 ">Ziffers</summary> <summary class="doc_header">Ziffers</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Basics</p> <p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Scales</p> <p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Rhythm</p> <p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Algorithmic</p> <p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Tonnetz</p> <p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Syncing</p> <p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
</div> </div>
</details> </details>
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Global Variables</p> <p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p> <p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Probabilities</p> <p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Chaining</p> <p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Functions</p> <p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
<!--
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Reference</p>
-->
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl text-orange-300">More</summary> <summary class="font-semibold lg:text-xl doc_header">More</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Synchronisation</a> <a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a> <a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a> <a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">About Topos</a> <a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
</div> </div>
</details> </details>
<details class="" open> <details class="" open>
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary> <summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
<form action="https://github.com/Bubobubobubobubo/topos"> <form action="https://github.com/Bubobubobubobubo/topos">
<input rel="noopener noreferrer" id="github_link" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" /> <input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
</form> </form>
<form action="https://discord.gg/6T67DqBNNT"> <form action="https://discord.gg/6T67DqBNNT">
<input rel="noopener noreferrer" id="discord_link" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" /> <input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
</form> </form>
<form action="https://ko-fi.com/raphaelbubo"> <form action="https://ko-fi.com/raphaelbubo">
<input rel="noopener noreferrer" id="support_link" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" type="submit" value="Support" /> <input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
</form> </form>
</details> </details>
</nav> </nav>
@ -551,7 +552,7 @@
<canvas id="scope" class="fullscreencanvas"></canvas> <canvas id="scope" class="fullscreencanvas"></canvas>
<canvas id="feedback" class="fullscreencanvas"></canvas> <canvas id="feedback" class="fullscreencanvas"></canvas>
</div> </div>
<p id="error_line" class="hidden text-red-400 w-screen neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p> <p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div> </div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>

2
src/API.ts
View File

@ -221,7 +221,7 @@ export class UserAPI {
clearTimeout(this.printTimeoutID); clearTimeout(this.printTimeoutID);
clearTimeout(this.errorTimeoutID); clearTimeout(this.errorTimeoutID);
this.app.interface.error_line.innerHTML = message as string; this.app.interface.error_line.innerHTML = message as string;
this.app.interface.error_line.style.color = "white"; this.app.interface.error_line.style.color = "red";
this.app.interface.error_line.classList.remove("hidden"); this.app.interface.error_line.classList.remove("hidden");
// @ts-ignore // @ts-ignore
this.printTimeoutID = setTimeout( this.printTimeoutID = setTimeout(

12
src/DomElements.ts
View File

@ -76,21 +76,21 @@ export const createDocumentationStyle = (app: Editor) => {
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2", h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16", h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
ul: "text-underline ml-12", ul: "text-underline ml-12",
li: "list-disc lg:text-2xl text-base text-foreground_selection lg:mx-4 mx-2 my-4 my-2 leading-normal", 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-background_selection lg:mx-6 mx-2 my-4 leading-normal", p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
warning: warning:
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal", "animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
a: "lg:text-2xl text-base text-orange-300", 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`, code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
icode: icode:
"lg:my-1 my-1 lg:text-xl sm:text-xs text-foreground_selection font-mono bg-neutral-600", "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-foreground_selection font-mono bg-neutral-600", ic: "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", blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
details: details:
"lg:mx-20 py-2 px-6 lg:text-2xl text-foreground_selection border-l-8 box-border bg-neutral-900", "lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
summary: "font-semibold text-xl", summary: "font-semibold text-xl",
table: table:
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-foreground_selection border-collapse", "justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
thead: thead:
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400", "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
th: "", th: "",