Adjust colors/format for web docs.

web/components/Docs.tsx

@@ -12,7 +12,7 @@ export interface DocsProps {
 export default function Docs({ docs, braces, assign }: DocsProps) {
   const router = useRouter()
   return (
-    <div className="prose dark:prose-invert prose-lg lg:prose-xl">
+    <div className="prose dark:prose-invert prose-lg">
       <div dangerouslySetInnerHTML={{ __html: docs.desc_md }} />
       <div className="divide-y divide-gray-700/25 dark:divide-gray-300/25">
         {docs.values.map((doc) => {
@@ -22,9 +22,11 @@ export default function Docs({ docs, braces, assign }: DocsProps) {
               id={doc.name}
               key={doc.name}
               className={
-                target
+                'pt-4 scroll-mt-16 ' +
-                  ? 'pt-4 scroll-mt-16 bg-rose-300 dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800'
+                (target
-                  : 'pt-4 scroll-mt-16 target:bg-rose-300 target:dark:bg-rose-900 hover:bg-slate-100 dark:hover:bg-slate-800'
+                  ? 'bg-rose-300 dark:bg-rose-900'
+                  : 'bg-slate-200 dark:bg-slate-800 target:bg-rose-300 target:dark:bg-rose-900') +
+                ' hover:bg-opacity-25 dark:hover:bg-opacity-25 hover:ring-1 ring-black dark:ring-white ring-inset'
               }
             >
               <div className="flex">

web/components/Header.tsx

@@ -28,7 +28,7 @@ const NavLink: React.FunctionComponent<NavLinkProps> = (props) => {
   return (
     <Link href={props.href}>
       <a
-        className={`p-1 self-end hover:self-center hover:bg-rose-300 dark:hover:bg-rose-700 ${bg} rounded`}
+        className={`m-0.5 p-1 self-end hover:ring-1 ring-black dark:ring-white hover:bg-rose-300 dark:hover:bg-rose-700 ${bg} rounded`}
       >
         {props.name}
       </a>
@@ -60,7 +60,7 @@ export default function Header({
             <NavLink href="/lua" name="Lua" />
           </div>
         )}
-        <LineChart width={400} height={40} darkMode={darkMode} />
+        <LineChart width={380} height={40} darkMode={darkMode} />
         <Search index={searchIndex} />
         <div className="flex">
           <div className="border-r mx-1 px-1 border-slate-700">

web/components/LineChart.tsx

@@ -87,7 +87,7 @@ export const LineChart = ({ width, height, darkMode }: LineChartProps) => {
           (update) =>
             update
               .transition()
-              .duration(500)
+              .duration(1000)
               .style(
                 'stroke',
                 darkMode ? stroke.lighten().toHex() : stroke.darken().toHex()
@@ -103,7 +103,7 @@ export const LineChart = ({ width, height, darkMode }: LineChartProps) => {
 
       timerRef.current = setTimeout(() => {
         doIt(data)
-      }, 500)
+      }, 1000)
     }
 
     doIt(data)