wip

pmndrs · Aug 14, 2024 · da24f61 · da24f61
1 parent 0e45957
commit da24f61
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 34 deletions.
diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
@@ -2,6 +2,10 @@ import { ComponentProps } from "react";
 
 import Page from "./page";
 import { Style } from "@/components/Style";
+import { getDemos } from "@/lib/helper";
+import Nav from "@/components/Nav";
+
+const demos = getDemos();
 
 export default function Layout({
   params,
@@ -17,27 +21,46 @@ export default function Layout({
       <Style
         css={`
           @scope {
-            :scope {
-              height: 100%;
+            main {
+              position: fixed;
+              width: 100%;
+              height: 100dvh;
+
               display: flex;
               align-items: center;
               justify-content: center;
+
               > .Dev {
                 max-width: 100%;
               }
             }
 
+            .Nav {
+              position: fixed;
+              bottom: 0;
+              width: 100%;
+              overflow: auto;
+
+              @media (min-aspect-ratio: 1/1) {
+                position: static;
+                display: inline-block;
+              }
+            }
+
             .Dev {
               padding-inline: 1rem;
             }
+
             iframe {
               width: 100%;
               min-height: 100dvh;
             }
           }
         `}
       />
-      {children}
+      <main>{children}</main>
+
+      <Nav demos={demos} />
     </div>
   );
 }
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -1,12 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Nav from "@/components/Nav";
-import { getDemos } from "@/lib/helper";
+
 import { Style } from "@/components/Style";
 
 const inter = Inter({ subsets: ["latin"] });
-const demos = getDemos();
 
 export const metadata: Metadata = {
   title: "pmndrs examples",
@@ -18,6 +16,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const fsMin = 16;
+  const fsMax = 32;
+  const wMin = 400;
+  const wMax = 2500;
+  const slope = (fsMax - fsMin) / (wMax - wMin);
+  const yAxisIntersection = -wMin * slope + fsMin;
+
   return (
     <html lang="en">
       <body className={inter.className}>
@@ -26,31 +31,18 @@ export default function RootLayout({
             @scope {
               :scope {
                 background: #eee;
-              }
-
-              main {
-                position: fixed;
-                width: 100%;
-                height: 100dvh;
-              }
-
-              .Nav {
-                position: fixed;
-                bottom: 0;
-                width: 100%;
-                overflow: auto;
 
-                @media (min-aspect-ratio: 1/1) {
-                  display: inline-block;
-                  position: static;
-                }
+                --fs: clamp(
+                  ${fsMin}px,
+                  ${yAxisIntersection}px + ${slope * 100}vw,
+                  ${fsMax}px
+                );
               }
             }
           `}
         />
 
-        <main>{children}</main>
-        <Nav demos={demos} />
+        {children}
       </body>
     </html>
   );

diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,4 +1,8 @@
+import Nav from "@/components/Nav";
 import { Style } from "@/components/Style";
+import { getDemos } from "@/lib/helper";
+
+const demos = getDemos();
 
 export default function Page() {
   return (
@@ -7,16 +11,31 @@ export default function Page() {
         css={`
           @scope {
             :scope {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 100%;
-              min-height: 100dvh;
+            }
+
+            .Nav {
+              ul {
+                padding: 0;
+                gap: 0;
+
+                display: grid;
+                --w: calc(7 * var(--fs));
+                grid-template-columns: repeat(auto-fit, minmax(var(--w), 1fr));
+              }
+              li {
+                max-inline-size: none;
+              }
+
+              a img {
+                width: 100%;
+                height: auto;
+              }
             }
           }
         `}
       />
-      Select a demo
+
+      <Nav demos={demos} />
     </div>
   );
 }
diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -26,17 +26,20 @@ export default function Nav({
 
   const { demoname } = useParams();
 
-  const firstRef = useRef(true);
+  // const firstRef = useRef(true);
   useEffect(() => {
     const i = demos.findIndex(({ name }) => name === demoname);
     const li = lisRef.current[i]?.current;
+
+    // const behavior = firstRef.current ? "instant" : "smooth";
+    // console.log("behavior", behavior);
     if (li)
       li.scrollIntoView({
         inline: "center",
         block: "center",
-        behavior: firstRef.current ? "instant" : "smooth",
+        behavior: "smooth",
       });
-    firstRef.current = false;
+    // firstRef.current = false;
   }, [demoname, demos]);
 
   return (