From f18a2a11fa565fe455efb991eeb3d2a867a2a899 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Dec 2022 22:49:41 +0100
Subject: [PATCH] make repl and doc styles more similar

---
 .eslintignore                                  |  1 +
 website/src/components/Header/Header.astro     | 18 +++++++++++++-----
 .../components/LeftSidebar/LeftSidebar.astro   |  4 ++--
 .../RightSidebar/TableOfContents.tsx           |  4 ++--
 website/src/layouts/MainLayout.astro           |  4 ++--
 website/src/repl/Header.jsx                    |  4 ++--
 website/src/repl/Repl.css                      |  4 ----
 website/src/styles/index.css                   |  4 ++++
 website/tailwind.config.cjs                    | 17 ++++++++++++++++-
 9 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index e4289393..99fffe67 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -9,6 +9,7 @@ out/**
 postcss.config.js
 postcss.config.cjs
 tailwind.config.js
+tailwind.config.cjs
 vite.config.js
 /**/dist/**/*
 !**/*.mjs
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index 5f5b6556..c7f672c8 100644
--- a/website/src/components/Header/Header.astro
+++ b/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>
diff --git a/website/src/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index 715fd606..a7804785 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/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}
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
index 3c787b52..ed48fcca 100644
--- a/website/src/components/RightSidebar/TableOfContents.tsx
+++ b/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>
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index c2672a40..46f96de7 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/website/src/layouts/MainLayout.astro
@@ -30,9 +30,9 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </title>
   </head>
 
-  <body class="h-screen text-gray-50 bg-gray-800">
+  <body class="h-screen text-gray-50 ">
     <div class="w-full h-full space-y-4 flex flex-col">
-      <header class="max-w-full px-4 fixed h-16 top-0 w-full z-[100]">
+      <header class="max-w-full fixed top-0 w-full z-[100]">
         <Header currentPage={currentPage} />
       </header>
       <main class="relative pt-16">
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index d5c47a4b..f9cf95f3 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -36,7 +36,7 @@ export function Header({ context }) {
         !isZen && 'bg-header',
       )}
     >
-      <div className="px-4 flex items-center space-x-2 pt-2 md:pt-0 select-none">
+      <div className="px-4 flex space-x-2 pt-2 md:pt-0 select-none">
         {/*             <img
     src={logo}
     className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
@@ -46,7 +46,7 @@ export function Header({ context }) {
           className={cx(
             isEmbedded ? 'text-l' : 'text-xl',
             // 'bg-clip-text bg-gradient-to-r from-primary to-secondary  text-transparent font-bold',
-            'text-white font-bold flex space-x-2',
+            'text-white font-bold flex space-x-2 items-center',
           )}
         >
           <div
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index c812ce23..0f34fb1a 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -1,9 +1,5 @@
 @import '@strudel.cycles/react/dist/style.css';
 
-body {
-  background-color: #222;
-}
-
 .darken::before {
   content: ' ';
   position: fixed;
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index 0892024b..dabed423 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -1,5 +1,9 @@
 @import '@strudel.cycles/react/dist/style.css';
 
+body {
+  background-color: #222;
+}
+
 .cm-gutters {
   display: none !important;
 }
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 40c3c01e..52707838 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -2,7 +2,22 @@
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    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',
+      },
+    },
   },
   plugins: [require('@tailwindcss/typography')],
 };