make repl and doc styles more similar

website/src/components/Header/Header.astro

@@ -5,6 +5,7 @@ import * as CONFIG from '../../config';
 import SidebarToggle from './SidebarToggle';
 // import LanguageSelect from './LanguageSelect';
 import Search from './Search';
+import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
 
 type Props = {
   currentPage: string;
@@ -14,21 +15,28 @@ const { currentPage } = Astro.props as Props;
 // const lang = getLanguageFromURL(currentPage);
 ---
 
-<nav class="flex justify-between py-2 items-center h-full" title="Top Navigation">
+<nav class="flex justify-between py-2 px-4 items-center h-25 bg-header" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->
-  <div class="flex overflow-visible items-center" style="overflow:visible">
+  <div class="flex overflow-visible items-center grow" style="overflow:visible">
     <a href="/" class="flex items-center text-2xl space-x-2">
-      <div>🌀</div>
-      <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
+      <h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
+        <span>🌀</span>
+        <div class="flex space-x-1 items-baseline">
+          <span class="">strudel</span>
+          <span class="text-sm">DOCS</span>
+        </div>
+      </h1>
     </a>
   </div>
-  <div style="flex-grow: 1;"></div>
   {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
   <div class="search-item h-10">
     <!--     <Search client:idle /> -->
   </div>
+  <a href=".." class="cursor-pointer items-center flex space-x-1"
+    ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
+  </a>
 </nav>
 
 <style>

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -25,8 +25,8 @@ const sidebar = SIDEBAR[langCode];
                 return (
                   <li class="">
                     <a
-                      class={`pl-4 py-0.5 w-full hover:bg-gray-900 block${
-                        currentPageMatch === child.link ? ' bg-gray-900' : ''
+                      class={`pl-4 py-0.5 w-full hover:bg-header block${
+                        currentPageMatch === child.link ? ' bg-header' : ''
                       }`}
                       href={url}
                       aria-current={currentPageMatch === child.link ? 'page' : false}

website/src/components/RightSidebar/TableOfContents.tsx

@@ -75,9 +75,9 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
               <a
                 href={`#${heading.slug}`}
                 onClick={onLinkClick}
-                className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${
+                className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
-                } ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()}
+                } ${currentID === heading.slug ? 'bg-header' : ''}`.trim()}
               >
                 {unescape(heading.text)}
               </a>