css tweaks

pmndrs · Aug 6, 2024 · 0ff15d0 · 0ff15d0
1 parent 0f0b1a4
commit 0ff15d0
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 30 deletions.
diff --git a/apps/website/app/demos/[demoname]/Dev.tsx b/apps/website/app/demos/[demoname]/Dev.tsx
@@ -8,13 +8,16 @@ export function Dev({ demoname }: { demoname: string }) {
   const cmd = `npm run -w demos/${demoname} dev3`;
 
   return (
-    <div>
+    <div className="Dev">
       <style
         dangerouslySetInnerHTML={{
           __html: `
             @scope {
               pre {background:rgb(13,13,13); padding:1rem; border-radius:.35rem;}
-              code {color:white;}
+              code {
+                color:white;
+                text-overflow:ellipsis; overflow:hidden; display:block;
+              }
               code:before {content:"$ ";}
 
               pre {

diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
@@ -11,5 +11,25 @@ export default function Layout({
 }>) {
   // const { demoname } = params;
 
-  return <>{children}</>;
+  return (
+    <div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @scope {
+              :scope {
+                height:100%;
+                display:flex; align-items:center; justify-content:center;
+                >.Dev {max-width:100%;}
+              }
+
+              .Dev {padding-inline:1rem;}
+              iframe {width:100%; min-height:100dvh;}
+            }
+          `,
+        }}
+      />
+      {children}
+    </div>
+  );
 }
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
@@ -69,25 +69,12 @@ export default async function Page(props: Props) {
   // console.log("isUp=", isUp);
 
   return (
-    <div>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            @scope {
-              :scope {
-                height:100%;
-                display:flex; align-items:center; justify-content:center;
-              }
-              iframe {width:100%; min-height:100dvh;}
-            }
-          `,
-        }}
-      />
+    <>
       {isDev && !isUp ? (
         <Dev demoname={demoname} />
       ) : (
         <iframe src={embed_url} />
       )}
-    </div>
+    </>
   );
 }
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -29,6 +29,17 @@ export default function RootLayout({
                 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;
+                  }
+                }
+                  
               }
             `,
           }}

diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -39,27 +39,19 @@ export default function Nav({
   }, [demoname, demos]);
 
   return (
-    <div>
+    <div className="Nav">
       <style
         dangerouslySetInnerHTML={{
           __html: `
             @scope {
               nav {
-                width:100%; overflow:auto;
-                position:fixed;
-                bottom:0;
-
                 @media (min-aspect-ratio:1/1) {
-                  display:inline-block;
-                  position:static;
-
                   ul {display:inline-flex; flex-direction:column;}
                 }
               }
 
               ul {
-                padding-inline-start:unset;
-                list-style:none;
+                padding-inline-start:unset; list-style:none;
 
                 padding:2rem;
                 display:flex; gap:1rem; position:relative;

diff --git a/demos/aquarium/src/App.jsx b/demos/aquarium/src/App.jsx
@@ -8,8 +8,8 @@ import turtleModel from './model_52a_-_kemps_ridley_sea_turtle_no_id-transformed
 
 export default function App({ spheres }) {
   return (
-    <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }} gl={{ stencil:true }}>
-      <color attach="background" args={['#c6e5db']} />
+    <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }} gl={{ stencil: true }}>
+      <color attach="background" args={['yellow']} />
       {/** Glass aquarium */}
       <Aquarium position={[0, 0.25, 0]}>
         <Float rotationIntensity={2} floatIntensity={10} speed={2}>