basic styling and a fancy header

2021-12-29 16:24:17 -06:00
parent 78607b7589
commit 401fcd2f16
3 changed files with 48 additions and 2 deletions
--- a/packages/docs/app/root.tsx
+++ b/packages/docs/app/root.tsx
@@ -1,3 +1,5 @@
+import clsx from "clsx"
+import { useEffect, useState } from "react"
 import type { LinksFunction, MetaFunction } from "remix"
 import {
  Links,
@@ -18,7 +20,7 @@ export const links: LinksFunction = () => [

 export default function App() {
  return (
-    <html lang="en">
+    <html lang="en" className="bg-slate-900 text-slate-100">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -26,7 +28,10 @@ export default function App() {
        <Links />
      </head>
      <body>
-        <Outlet />
+        <Header />
+        <div className="m-auto max-w-screen-xl mt-8">
+          <Outlet />
+        </div>
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
@@ -34,3 +39,36 @@ export default function App() {
    </html>
  )
 }
+
+function Header() {
+  const isScrolled = useScrolled()
+  return (
+    <header
+      className={clsx(
+        isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+        "shadow-md sticky top-0 px-4 py-3 backdrop-blur-sm transition",
+      )}
+    >
+      <div className="m-auto max-w-screen-xl">
+        <h1 className="text-3xl font-light">reacord</h1>
+      </div>
+    </header>
+  )
+}
+
+function useScrolled() {
+  const [isScrolled, setScrolled] = useState(
+    typeof window !== "undefined" && window.scrollY > 0,
+  )
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 0)
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  return isScrolled
+}
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -13,6 +13,7 @@
    "@remix-run/react": "^1.1.1",
    "@remix-run/serve": "^1.1.1",
    "autoprefixer": "^10.4.1",
+    "clsx": "^1.1.1",
    "postcss": "^8.4.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",