public/hornwitser.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sandbox.html page for development tests

Browse source 
Establish a playground for trying out complex components and styles
without having to use them in a content page.  This starts out as a
testing ground for the 3d Viewport.
This commit is contained in:
Hornwitser 2025-02-02 13:45:45 +01:00
parent 49a329ac43
commit 03edcf777a
3 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/content/sandbox.tsx Normal file
View file

@ -0,0 +1,31 @@
import BasePage from "../components/BasePage.js";
import Viewport from "../components/Viewport.js";
import type { Page } from "../types.js";
const title = "Sandbox page";
export const sandbox: Page = {
title,
ref: "/sandbox.html",
content: <BasePage title={title}>
<main>
<h1>{title}</h1>
<div style="height: 30em"></div>
<div class="sandbox-inset-3d">
<Viewport>
<div class="ceiling"></div>
<div class="content">
<p>
This is some text to test selection and rendering of a 3d transformed section.
<a href="/index.html">Go to home page</a>
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="floor"></div>
</Viewport>
</div>
<div style="height: 30em"></div>
</main>
</BasePage>
}

2
src/pages.tsx
View file

@ -3,6 +3,7 @@ import { index } from "./content/index.js";
import { updates, updatesIndex } from "./content/updates.js"; import { updates, updatesIndex } from "./content/updates.js";
import { words, wordsIndex } from "./content/words.js"; import { words, wordsIndex } from "./content/words.js";
import { projects, projectsIndex } from "./content/projects.js"; import { projects, projectsIndex } from "./content/projects.js";
import { sandbox } from "./content/sandbox.js";
import { links } from "./content/links.js"; import { links } from "./content/links.js";
export const pages: Page[] = [ export const pages: Page[] = [
@ -14,4 +15,5 @@ export const pages: Page[] = [
projectsIndex, projectsIndex,
...projects, ...projects,
links, links,
sandbox,
]; ];

30
web/style.css
View file

@ -108,3 +108,33 @@ body {
.author p { .author p {
margin-block-end: 0; margin-block-end: 0;
} }
/* sandbox */
.sandbox-inset-3d {
contain: paint;
background: black;
}
.sandbox-inset-3d .content {
background: grey;
transform: translateZ(-10rem);
padding: 1rem 1rem;
width: 80%;
margin-inline: auto;
}
.sandbox-inset-3d div:where(.floor, .ceiling) {
position: absolute;
inset-inline: 0;
height: 20rem;
}
.sandbox-inset-3d .floor {
bottom: 0;
background: blue;
transform: rotateX(90deg);
transform-origin: 0 100%;
}
.sandbox-inset-3d .ceiling {
top: 0;
background: green;
transform: rotateX(-90deg);
transform-origin: 0 0;
}