more theming in documentation panes
This commit is contained in:
@ -95,7 +95,7 @@
|
||||
<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">
|
||||
<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 text-blue placeholder-blue" id="renamer" type="text" placeholder="Topos">
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
<!-- Play Button -->
|
||||
@ -362,15 +362,15 @@
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span class="text-selection_foreground">Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span class="text-selection_foreground">Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="bg-blue font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
|
||||
@ -79,23 +79,23 @@ export const createDocumentationStyle = (app: Editor) => {
|
||||
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-6 mx-2 my-4 leading-normal",
|
||||
warning:
|
||||
"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",
|
||||
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-white",
|
||||
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",
|
||||
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",
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
|
||||
details:
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white 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-selection_foreground",
|
||||
summary: "font-semibold text-xl",
|
||||
table:
|
||||
"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:
|
||||
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
|
||||
"text-xs text-gray-700 uppercase",
|
||||
th: "",
|
||||
td: "",
|
||||
tr: "",
|
||||
box: "border bg-red-500",
|
||||
box: "border bg-red",
|
||||
};
|
||||
};
|
||||
|
||||
@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
|
||||
|
||||
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
|
||||
|
||||
## Editor theme configuration
|
||||
|
||||
The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
|
||||
|
||||
${makeExample(
|
||||
"Random theme on each beat",
|
||||
`
|
||||
beat(1)::randomTheme()
|
||||
`, true)}
|
||||
|
||||
You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
|
||||
|
||||
${makeExample(
|
||||
"Picking a theme",
|
||||
`
|
||||
beat(1)::theme("Batman")
|
||||
`, true)}
|
||||
|
||||
## Hydra Visual Live Coding
|
||||
|
||||
<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
|
||||
|
||||
@ -1382,6 +1382,16 @@ video {
|
||||
border-color: rgb(var(--selection_background) / 0.95);
|
||||
}
|
||||
|
||||
.border-brightwhite {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(var(--brightwhite) / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-white {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(var(--white) / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-background {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--background) / var(--tw-bg-opacity));
|
||||
@ -1657,6 +1667,21 @@ video {
|
||||
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-brightwhite {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--red) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-brightblack {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@ -2172,6 +2197,11 @@ video {
|
||||
color: rgb(var(--white) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-brightred {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(var(--brightred) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
@ -2194,6 +2224,16 @@ video {
|
||||
color: rgb(var(--blue) / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.placeholder-brightwhite::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.placeholder-brightwhite::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user