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

Merge branch 'new-theming' of https://github.com/Bubobubobubobubo/Topos into new-theming

Browse Source
This commit is contained in:
Miika Alonen
2023-12-16 14:36:46 +02:00
parent b5f9bf05f3 6354a137c9
commit 81beb352e1
3 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -261,7 +261,7 @@
<div id="app">
<!-- This modal is used for switching between buffers -->
<div id="modal-buffers" class="invisible opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
@ -559,7 +559,7 @@
<template id="ui-known-universe-item-template">
<!-- A known universe button in "opening" interface -->
<li class="py-2 px-4 flex justify-between text-cyan">
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
<button class="delete-universe" title="Delete this universe">🗑</button>
</li>

16
src/documentation/learning/samples/sample_list.ts
View File

@ -32,7 +32,7 @@ export const samples_to_markdown = (
markdownList += `
<button
class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
>
${keys[i]}
@ -75,7 +75,7 @@ beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Waveforms")}
</div>
@ -94,7 +94,7 @@ beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
Here is the complete list of available machines:
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Machines")}
</div>
@ -102,7 +102,7 @@ ${samples_to_markdown(application, "Machines")}
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "FoxDot")}
</div>
@ -110,7 +110,7 @@ ${samples_to_markdown(application, "FoxDot")}
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Amiga")}
</div>
@ -128,7 +128,7 @@ beat(4)::sound('amen1').stretch(4).out()
The stretch should be adapted based on the length of each amen break.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Amen")}
</div>
@ -137,7 +137,7 @@ ${samples_to_markdown(application, "Amen")}
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Tidal")}
</div>
@ -145,7 +145,7 @@ ${samples_to_markdown(application, "Tidal")}
This sample pack is only one folder full of french phonems! It sounds super nice.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Juliette")}
</div>
`;

15
src/style.css
View File

@ -2318,6 +2318,16 @@ video {
background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
}
.hover\:bg-selection_foreground:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
}
.hover\:bg-selection_background:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
}
.hover\:text-background:hover {
--tw-text-opacity: 1;
color: rgb(var(--background) / var(--tw-text-opacity));
@ -2328,6 +2338,11 @@ video {
color: rgb(var(--brightwhite) / var(--tw-text-opacity));
}
.hover\:text-selection_foreground:hover {
--tw-text-opacity: 1;
color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;