Fix links and improve styling

www/assets/css/style.css

@@ -41,6 +41,8 @@ i.brand.discord:before { font-family: "Brands"; content: "\f392"; }
 
 .text-white {color: white}
 .text-neutral-50 {color: var(--neutral-50)}
+.text-neutral-500 {color: var(--neutral-500)}
+.text-neutral-600 {color: var(--neutral-600)}
 .text-neutral-700 {color: var(--neutral-700)}
 .text-neutral-800 {color: var(--neutral-800)}
 .text-neutral-900 {color: var(--neutral-900)}
@@ -53,7 +55,21 @@ i.brand.discord:before { font-family: "Brands"; content: "\f392"; }
 .bg-neutral-900 {background-color: var(--neutral-300)}
 .bg-neutral-950 {background-color: var(--neutral-300)}
 
+.bg-slate-50 {background-color: var(--slate-50)}
+.bg-slate-100 {background-color: var(--slate-100)}
+.bg-slate-200 {background-color: var(--slate-200)}
+.bg-slate-300 {background-color: var(--slate-300)}
+
+.bg-gray-50 {background-color: var(--gray-50)}
+.bg-gray-100 {background-color: var(--gray-100)}
+.bg-gray-200 {background-color: var(--gray-200)}
+.bg-gray-300 {background-color: var(--gray-300)}
+
+.bg-stone-50 {background-color: var(--stone-50)}
 .bg-stone-100 {background-color: var(--stone-100)}
+.bg-stone-200 {background-color: var(--stone-200)}
+.bg-stone-300 {background-color: var(--stone-300)}
+
 .bg-gray-300 {background-color: var(--gray-300)}
 
 .bg-blue-400 {background-color: var(--blue-400)}

www/index.html

@@ -16,7 +16,7 @@
   <div class="flex items-center gap-5">
     <a href="docs/index.html">Get Started</a>
     <a href="docs/modules.html">API</a>
-    <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="playground">Playground</a>
+    <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="prelude/playground">Playground</a>
   </div>
 </nav>
 
@@ -28,7 +28,7 @@
     <span class="text-3xl">A signal-based web library that lets you <br> develop in a familiar functional style</span>
     <div class="flex gap-4">
         <a class="px-3 py-2 rounded-md bg-neutral-200 text-xl font-weight-500" href="docs/index.html">Get Started</a>
-        <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="playground">Open Playground</a>
+        <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="prelude/playground">Open Playground</a>
     </div>
   </div>
 </section>
@@ -64,7 +64,7 @@ <h1 class="center text-5xl">Just write JavaScript!</h1>
 <section class="flex column items-center py-8">
     <p class="center text-2xl">Try in your Browser</p>
     <div class="flex items-center gap-4 pt-6">
-      <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 text-shadow-green shadow" href="playground">Open Playground</a>
+      <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 text-shadow-green shadow" href="prelude/playground">Open Playground</a>
     </div>
 </section>
 

www/playground.html

@@ -24,12 +24,11 @@
 
 function Editor(props) {
   const theme = EditorView.baseTheme({
-    "&.cm-editor": {height: "100%", backgroundColor:'lightpink'},
-    ".cm-scroller": {overflow: "auto"}
-    // 'cm-editor': {display:'flex', height:'100%',backgroundColor:'lightpink'},
-    // '&': { maxHeight: '200px' },
-    // '.cm-gutter,.cm-content': {minHeight: '100px', height:'100%'},
-    // '.cm-scroller': {overflow: 'auto', height:'100%', flexGrow:1, backgroundColor:'' },
+    '&.cm-editor': {height: '100%', backgroundColor:'var(--stone-100)'},
+    '&.cm-editor.cm-focused': {outline: 'none'},
+    '.cm-scroller': {overflow: 'auto'},
+    '.cm-gutter': {backgroundColor:'var(--stone-200)'},
+    '.cm-content': {height: "100%", backgroundColor:'var(--stone-100)'},
   })
   const ref = parent => {
     let updateListenerExtension = EditorView.updateListener.of((update) => {
@@ -50,36 +49,30 @@
       editor.dispatch({changes: {from: 0, to: editor.state.doc.length, insert}})
     })
   }
-  return h('.p-1.w-half.bg-stone-100',{ref,style:'height:100%; position: relative;'})
+  return h('.p-1.w-half.bg-stone-200',{ref,style:'height:100%; position: relative;'})
 }
 
 function Preview(props) {
-  return h('iframe.w-half.bg-gray-300', {srcdoc:props.value})
+  return h('iframe.w-half.bg-stone-200', {srcdoc:props.value})
 }
 
 function TopMenu(props) {
-  return h('.flex.items-center.p-2.gap-2.bg-neutral-100',[
-    h(Show, {when:()=>!props.show()}, [
-      h(PreludeLogo),
-      h('.button.rounded.text-xl.bg-neutral-200.px-3.p-1', {onClick:e=>(props.show(b=>!b))},
-        h('i.icon.menu')),
-    ]),
+  return h('.flex.items-center.p-1.gap-2.bg-neutral-100',[
+    h('.button.rounded.text-xl.bg-neutral-100.p-1', {onClick:e=>(props.show(b=>!b))},
+      h('i.icon.menu')),
     h('input.grow', {value:'Example #1'}),
-    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-200.font-weight-500.text-neutral-700.gap-2.shadow',
-      [h('i.icon.plus.text-base'),'New']),
-    h('.flex.px-2.py-1.rounded.text-base.bg-neutral-200.font-weight-500.text-neutral-700.gap-2.shadow',
-      [h('i.icon.clone.text-base'),'Clone']),
-    h('a.px-4.py-1.button.rounded-full.text-xl.bg-blue-500.text-white.shadow', {href:'/'},
+    h('.flex.px-2.py-1.rounded.text-md.bg-gray-300.font-weight-500.text-neutral-700.gap-2.shadow',
+      [h('i.icon.plus.text-md'),'New']),
+    h('.flex.px-2.py-1.rounded.text-md.bg-gray-300.font-weight-500.text-neutral-700.gap-2.shadow',
+      [h('i.icon.clone.text-md'),'Clone']),
+    h('a.px-3.py-1.rounded-full.text-md.bg-blue-500.text-white.shadow', {href:'/prelude'},
       h('i.icon.info.text-shadow-black'))])
 }
 
 function SideMenu(props) {
-  return h('.sidemenu.flex.column.px-2.py-2.gap-4.bg-neutral-300',[
-    h('.flex.items-center.justify-between', [
-      h(PreludeLogo),
-      h('.bg-neutral-300', {onClick:e=>(props.show(b=>!b))},
-        h('.px-3.py-1.rounded.text-xl.bg-neutral-300.text-neutral-700', h('i.icon.xmark'))
-      )
+  return h('.sidemenu.flex.column.px-2.py-2.gap-4.bg-stone-300',[
+    h('.flex.justify-around', [
+      h(PreludeLogo)
     ]),
     h('.flex.column.gap-2', [
       h(SrcMenu,{name:'example',title:'Example',file:()=>props.file,items:()=>()=>examples,src:()=>props.src}),
@@ -115,7 +108,7 @@
     console.log('doodle',r)
     if (r.src==='example') {
       console.log('fetch',r.file)
-      const html = await (await fetch('/example/'+r.file)).text()
+      const html = await (await fetch('/prelude/example/'+r.file)).text()
       content(html)
     } else {
       console.log('local')