mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 13:48:40 +00:00
themify rest of layout (except minirepls)
This commit is contained in:
Felix Roos
parent
6db2c0bf93
commit
ddb9af4d57
@ -19,13 +19,13 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
|
||||
const sidebar = SIDEBAR[langCode];
|
||||
---
|
||||
|
||||
<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-[#161616]" title="Top Navigation">
|
||||
<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground" title="Top Navigation">
|
||||
<!-- <div class="menu-toggle">
|
||||
<SidebarToggle client:idle />
|
||||
</div> -->
|
||||
<div class="flex overflow-visible items-center grow" style="overflow:visible">
|
||||
<a href="/" class="flex items-center text-2xl space-x-2">
|
||||
<h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
|
||||
<h1 class="font-bold flex space-x-2 items-baseline text-xl">
|
||||
<span>🌀</span>
|
||||
<div class="flex space-x-1 items-baseline">
|
||||
<span class="">strudel</span>
|
||||
|
||||
@ -14,7 +14,7 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
|
||||
const sidebar = SIDEBAR[langCode];
|
||||
---
|
||||
|
||||
<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20">
|
||||
<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
|
||||
<ul>
|
||||
{
|
||||
Object.entries(sidebar).map(([header, children]) => (
|
||||
@ -27,8 +27,8 @@ const sidebar = SIDEBAR[langCode];
|
||||
return (
|
||||
<li class="">
|
||||
<a
|
||||
class={`pl-4 py-0.5 w-full hover:bg-header block${
|
||||
currentPageMatch === child.link ? ' bg-header' : ''
|
||||
class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
|
||||
currentPageMatch === child.link ? ' bg-lineHighlight' : ''
|
||||
}`}
|
||||
href={url}
|
||||
aria-current={currentPageMatch === child.link ? 'page' : false}
|
||||
|
||||
@ -12,7 +12,7 @@ const { headings, githubEditUrl } = Astro.props as Props;
|
||||
const currentPage = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<nav aria-labelledby="grid-right" class="w-64">
|
||||
<nav aria-labelledby="grid-right" class="w-64 text-foreground">
|
||||
<TableOfContents client:media="(min-width: 50em)" headings={headings} currentPage={currentPage} />
|
||||
<MoreMenu editHref={githubEditUrl} />
|
||||
</nav>
|
||||
|
||||
@ -78,9 +78,9 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[]; curren
|
||||
<a
|
||||
href={`${currentPage}#${heading.slug}`}
|
||||
onClick={onLinkClick}
|
||||
className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
|
||||
className={`py-0.5 block cursor-pointer w-full border-l-4 border-lineHighlight hover:bg-lineHighlight ${
|
||||
['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
|
||||
} ${currentID === heading.slug ? 'bg-header' : ''}`.trim()}
|
||||
} ${currentID === heading.slug ? 'bg-lineHighlight' : ''}`.trim()}
|
||||
>
|
||||
{unescape(heading.text)}
|
||||
</a>
|
||||
|
||||
@ -23,7 +23,7 @@ export default function MobileNav({ sidebar }) {
|
||||
<div className="space-y-1 px-4 py-4 bg-[#161616]">
|
||||
<a
|
||||
href=".."
|
||||
className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-bg hover:px-2 rounded-md"
|
||||
className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-background hover:px-2 rounded-md"
|
||||
>
|
||||
<span>go to REPL</span>
|
||||
</a>
|
||||
@ -36,7 +36,7 @@ export default function MobileNav({ sidebar }) {
|
||||
as="a"
|
||||
href={`/${item.link}`}
|
||||
className={classNames(
|
||||
item.current ? 'bg-bg text-white' : 'text-gray-300 hover:bg-bg hover:text-white',
|
||||
item.current ? 'bg-background text-white' : 'text-gray-300 hover:bg-lineHighlight hover:text-white',
|
||||
'block px-3 py-2 rounded-md text-base font-medium',
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
|
||||
@ -134,7 +134,7 @@ export function Footer({ context }) {
|
||||
</div>
|
||||
)}
|
||||
{activeFooter === 'console' && (
|
||||
<div className="break-all px-4">
|
||||
<div className="break-all px-4 dark:text-white text-stone-900">
|
||||
{log.map((l, i) => {
|
||||
const message = linkify(l.message);
|
||||
return (
|
||||
@ -150,8 +150,8 @@ export function Footer({ context }) {
|
||||
</div>
|
||||
)}
|
||||
{activeFooter === 'samples' && (
|
||||
<div className="break-normal w-full px-4">
|
||||
<span className="text-white">{loadedSamples.length} banks loaded:</span>
|
||||
<div className="break-normal w-full px-4 dark:text-white text-stone-900">
|
||||
<span>{loadedSamples.length} banks loaded:</span>
|
||||
{loadedSamples.map(([name, samples]) => (
|
||||
<span key={name} className="cursor-pointer hover:text-tertiary" onClick={() => {}}>
|
||||
{' '}
|
||||
|
||||
@ -48,7 +48,6 @@ export function Header({ context }) {
|
||||
}}
|
||||
className={cx(
|
||||
isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
|
||||
// 'bg-clip-text bg-gradient-to-r from-primary to-secondary text-transparent font-bold',
|
||||
'text-foreground font-bold flex space-x-2 items-center',
|
||||
)}
|
||||
>
|
||||
|
||||
@ -5,10 +5,10 @@ const visibleFunctions = jsdocJson.docs
|
||||
|
||||
export function Reference() {
|
||||
return (
|
||||
<div className="flex h-full w-full pt-2">
|
||||
<div className="flex h-full w-full pt-2 text-foreground">
|
||||
<div className="w-64 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
|
||||
{visibleFunctions.map((entry, i) => (
|
||||
<a key={i} className="cursor-pointer block hover:bg-linegray py-1 px-4" href={`#doc-${i}`}>
|
||||
<a key={i} className="cursor-pointer block hover:bg-lineHighlight py-1 px-4" href={`#doc-${i}`}>
|
||||
{entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
|
||||
</a>
|
||||
))}
|
||||
|
||||
@ -283,7 +283,7 @@ export function Repl({ embedded = false }) {
|
||||
/>
|
||||
</section>
|
||||
{error && (
|
||||
<div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
|
||||
<div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
|
||||
)}
|
||||
{isEmbedded && !started && (
|
||||
<button
|
||||
|
||||
@ -31,6 +31,7 @@ import {
|
||||
} from '@uiw/codemirror-themes-all';
|
||||
|
||||
export const themes = {
|
||||
// none: 'none',
|
||||
abcdef,
|
||||
androidstudio,
|
||||
atomone,
|
||||
@ -63,6 +64,11 @@ export const themes = {
|
||||
};
|
||||
|
||||
export const settings = {
|
||||
none: {
|
||||
background: '#222',
|
||||
foreground: '#FFFFFF',
|
||||
lineHighlight: '#00000059',
|
||||
},
|
||||
strudelTheme: {
|
||||
background: '#222',
|
||||
foreground: '#FFFFFF',
|
||||
|
||||
@ -11,18 +11,8 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#c792ea',
|
||||
secondary: '#c3e88d',
|
||||
tertiary: '#82aaff',
|
||||
highlight: '#ffcc00',
|
||||
linegray: '#8a91991a',
|
||||
lineblack: '#00000095',
|
||||
bg: '#222222',
|
||||
// header: '#8a91991a',
|
||||
// footer: '#8a91991a',
|
||||
header: '#00000050',
|
||||
// header: 'transparent',
|
||||
footer: '#00000050',
|
||||
highlight: '#bb8800',
|
||||
// codemirror-theme settings
|
||||
background: 'var(--background)',
|
||||
foreground: 'var(--foreground)',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user