commit f6676d5d70113ac7f12380cf743e55a17e999dd2
parent 991827075040f40f5f50e08b3c462c7970e19172
Author: Suzanne Soy <jsmaniac.github@suzanne.soy>
Date: Mon, 8 May 2023 01:12:36 +0100
Added old conflict file so that I can worry about this later (and still get an ok IPFS hash)
Diffstat:
| A | index.html.conflict | | | 174 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | test.css.conflict | | | 475 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 649 insertions(+), 0 deletions(-)
diff --git a/index.html.conflict b/index.html.conflict
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Suzanne Soy’s page</title>
+ <script src="target-within-shim.js"></script>
+ <link rel="stylesheet" href="test.css">
+ <link rel="stylesheet" href="3d.css">
+</head>
+<body>
+<<<<<<< Updated upstream
+ <h1>Suzanne Soy</h1>
+ <div id="temp-other-content" style="position: relative; z-index: 1;">
+=======
+ <div id="temp-other-content" style="position: relative; z-index: 1;">
+ <h1>Suzanne Soy</h1>
+>>>>>>> Stashed changes
+ <h2>Procedural Designer</h2>
+ <p>Latest version of my <a href="phc-thesis/">Ph.D draft</a></p>
+ <p><a href="git-tutorial/">GIT tutorial</a></p>
+ </div>
+ <div class="css3d" style="display: none;">
+ <div id="detector"></div>
+ <div tabindex="0" id="a">
+ A
+ <div tabindex="0" id="a1">
+ A1
+ <iframe srcdoc="<h1>title</h1>"></iframe>
+ </div>
+ <div tabindex="0" id="a2">
+ A2
+ </div>
+ </div>
+ <div tabindex="0" id="b">
+ B<a href="#a">goto a</a><a href="#b">goto b</a>
+ </div>
+ </div>
+<<<<<<< Updated upstream
+ <div class="view3d">
+=======
+ <!--
+ <div class="view3d" style="display: none">
+>>>>>>> Stashed changes
+ <div class="scene" id="main">
+ <a class="go" href="#main">→ Enter ←</a>
+ <div class="rest"></div>
+ <div tabindex="0" class="three-d room hover room-test">
+ <div class="three-d object test" id="hello">Hello world
+ <a class="go" href="#hello">hello</a>
+ <div class="scene">
+ <div class="rest"></div>
+ <div tabindex="0" class="three-d room hover room-test">
+ <div class="three-d object test" id="turtles">It's turtles all the way down!
+ <a class="go" href="#turtles">turtles</a>
+ <div class="scene">
+ <div class="rest"></div>
+ <div tabindex="0" class="three-d room hover room-test">
+ <div class="three-d object test" id="table.js">
+ <a class="go" href="#table.js">table editor</a>
+ <iframe
+ style="width:100%; height:90%;"
+ src="table.js"></iframe>
+ </div>
+ </div>
+ <div tabindex="0" class="three-d room hover room-test2">
+ <div class="three-d object test2" id="css-only-virtual-world">
+ <a class="go" href="#css-only-virtual-world">useful tip</a>
+ Don't use CSS to do this.</div>
+ </div>
+ <div class="three-d room">
+ <div class="three-d wall wall-l"></div>
+ <div class="three-d wall wall-r"></div>
+ <div class="three-d wall wall-u"></div>
+ <div class="three-d wall wall-d"></div>
+ <div class="three-d wall wall-b"></div>
+ <div class="three-d wall wall-f"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div tabindex="0" class="three-d room hover room-test2">
+ <div class="three-d object test2" id="nested-rooms">
+ <a class="go" href="#nested-rooms">nested-rooms</a>
+ Nested rooms!
+ </div>
+ </div>
+ <div class="three-d room">
+ <div class="three-d wall wall-l"></div>
+ <div class="three-d wall wall-r"></div>
+ <div class="three-d wall wall-u"></div>
+ <div class="three-d wall wall-d"></div>
+ <div class="three-d wall wall-b"></div>
+ <div class="three-d wall wall-f"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div tabindex="0" class="three-d room hover room-test2">
+ <div class="three-d object test2" id="mental-palace">Mental palace
+ <a class="go" href="#mental-palace">mental-palace</a>
+ <div class="scene">
+ <div tabindex="0" class="three-d room hover room-test">
+ <div class="three-d object test" id="mental-palace-2001">
+ <a class="go" href="#mental-palace-2001"></a>
+ Oh my…
+ </div>
+ </div>
+ <div tabindex="0" class="three-d room hover room-test2">
+ <div class="three-d object test2" id="mental-palace-stars">
+ <a class="go" href="#mental-palace-stars"></a>
+ It's full of <div>s
+ </div>
+ </div>
+ <div class="three-d room">
+ <div class="three-d wall wall-l"></div>
+ <div class="three-d wall wall-r"></div>
+ <div class="three-d wall wall-u"></div>
+ <div class="three-d wall wall-d"></div>
+ <div class="three-d wall wall-b"></div>
+ <div class="three-d wall wall-f"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="three-d room">
+ <div class="three-d wall wall-l"></div>
+ <div class="three-d wall wall-r"></div>
+ <div class="three-d wall wall-u"></div>
+ <div class="three-d wall wall-d"></div>
+ <div class="three-d wall wall-b"></div>
+ <div class="three-d wall wall-f"></div>
+ </div>
+ </div>
+ </div>-->
+<div id="debug">
+ <section class="new-scene" id="main">
+ <aside><a href="#main">→ Enter ←</a></aside>
+ <section id="hello" tabindex="0">
+ <h1>Hello world</h1>
+ <aside><a href="#hello">hello</a></aside>
+ <section id="turtles" tabindex="0">
+ <aside><a href="#turtles">turtles</a></aside>
+ <p>It's turtles all the way down!</p>
+ <section id="table.js">
+ <aside><a href="#table.js">table editor</a></aside>
+ <iframe style="width:100%; height:90%;" src="table.js">Table editor alt text</iframe>
+ </section>
+ <section id="css-only-virtual-world">
+ <aside><a href="#css-only-virtual-world">useful tip</a></aside>
+ <p>Don't use CSS to do this.</p>
+ </section>
+ </section>
+ <section>
+ <aside><a href="#nested-rooms">nested-rooms</a></aside>
+ Nested rooms!
+ </section>
+ </section>
+ <section id="mental-palace">
+ <h1>Mental palace</h1>
+ <aside><a href="#mental-palace">mental-palace</a></aside>
+ <!--
+ <section id="mental-palace-2001">
+ <aside><a href="#mental-palace-2001"></a></aside>
+ Oh my…
+ </section>
+ <section id="mental-palace-stars">
+ <aside><a href="#mental-palace-stars"></a></aside>
+ It's full of <div>s
+ </section>-->
+ </section>
+ </section>
+</div>
+</body>
+</html>
diff --git a/test.css.conflict b/test.css.conflict
@@ -0,0 +1,475 @@
+/* Temporary hack to place the main content above when the 3D stuff is not targetted */
+<<<<<<< Updated upstream
+.view3d { z-index: 0; }
+.view3d.target-within { z-index: 2; }
+=======
+.debug, .main { z-index: 0; }
+.debug.target-within, .main.target-within { z-index: 2; }
+>>>>>>> Stashed changes
+
+html { position: relative; padding:0; }
+html, body { height: 100%; }
+.view3d { width: 100%; height:100%; top: 0; left: 0; margin: 0; padding:0; /*overflow: hidden;*/ position: fixed; }
+
+.scene {
+ position: absolute;
+ perspective: 100vmin;
+ opacity: 0.9;
+ top: 50%;
+ left: 50%;
+ width: 100vmin;
+ height: 100vmin;
+ transform: translate3d(-50%, -50%, 0) scale(1);
+ font-size: x-large;
+}
+
+/*
+.scene .rest { background: black; }
+.scene .scene .rest { background: white; }
+.rest:hover { background: red; }
+:target > .scene > .rest { display: none }
+*/
+
+#no .scene > .room { animation: 8s turntable infinite; animation-timing-function: ease; }
+
+.scene .scene {
+ transform: translate3d(-50%, -50%, 0) scale(0.9);
+ /*overflow: hidden; bug in firefox which scrolls the element when the target changes, instead use clip-path */
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+ border: thin solid blue;
+}
+
+.scene .test2 .scene { transform: translate3d(-50%, -50%, 0) scale(0.25); }
+
+.three-d {
+ position: absolute;
+ transition: transform ease 2s;
+ transform-style: preserve-3d;
+ top: 50%;
+ left: 50%;
+}
+
+.object {
+ border: thin solid red;
+ background: pink;
+}
+
+:root {
+ --origin: translate3d(-50%, -50%, -50vmin);
+ --origin-: translate3d(50%, 50%, 50vmin);
+}
+
+:root {
+ --test: translate3d(-49vmin, 0vmin, 0vmin) rotateY(90deg) scale(0.6);
+ --test-: rotateY(-90deg) translate3d(49vmin, 0vmin, 0vmin);
+ --test-hover: translate3d(0vmin,0,50vmin) rotateY(0deg) scale(1);
+}
+
+.test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); }
+.room:target-within > .test { transform: var(--origin) var(--test-hover); }
+.room.target-within > .test { transform: var(--origin) var(--test-hover); }
+
+:root {
+ --test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg);
+ --test2-: rotateY(90deg) translate3d(-49vmin, 0vmin, 0vmin);
+ --test2-hover: translate3d(0,0,50vmin) rotateY(0deg);
+}
+
+.test { --scale: 0.6; }
+.test2 { --scale: 1; }
+
+:root {
+ --opacity: 1;
+}
+
+.test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); }
+.room:target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); }
+.room.target-within > .test2 { transform: var(--origin) var(--test2-hover) scale(2); }
+
+.hover { z-index: 20; }
+.hover:target-within { z-index: 30; }
+.hover.target-within { z-index: 30; }
+
+.hover .hover { z-index: 40; }
+.hover:target-within .hover:target-within { z-index: 50; }
+.hover.target-within .hover.target-within { z-index: 50; }
+
+/*
+.wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(-50vmin, 0, 0) rotateY(90deg); }
+.wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(50vmin, 0, 0) rotateY(-90deg); }
+.wall-u { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, -50vmin, 0) rotateX(-90deg); }
+.wall-d { opacity: 0.7; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 50vmin, 0) rotateX(90deg); }
+.wall-b { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, -50vmin); }
+.wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translate3d(0, 0, 50vmin);
+ pointer-events: none; }
+
+.wall { pointer-events: none; }
+*/
+
+@keyframes turntable {
+ 0% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); }
+ 25% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(-3deg) rotateX(7deg); }
+ 50% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(5deg) rotateY(7deg) rotateX(-7deg); }
+ 75% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(-3deg) rotateY(3deg) rotateX(7deg); }
+ 100% { transform: translate3d(-50%, -50%, 0) scale(1) rotateZ(0deg) rotateY(-7deg) rotateX(-7deg); }
+}
+
+.room { transform: translate3d(0,0,0) rotate(0); }
+.room-test:target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); }
+.room-test.target-within ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); }
+.room-test:target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; }
+.room-test.target-within ~ .room .test2 { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; }
+.scene:target-within:not(:target) > .room:not(:target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; }
+.scene.target-within:not(:target) > .room:not(.target-within) .test { opacity: 0; pointer-events: none; transition: translate 2s, opacity 1s, left step-end 1s; }
+.room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
+.room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
+.room-test2:target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
+.room-test2.target-within ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
+
+/* rainbow uses other variables as "parameters", they must be re-read in sub-elements instead of copied once on :root */
+* {
+ --rainbow-opacity: var(--opacity);
+ --rainbow-saturation: 80%;
+ --rainbow-lightness: 80%;
+ --rainbow: linear-gradient(
+ 45deg,
+ hsla(0, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 0%,
+ hsla(36, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 10%,
+ hsla(72, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 20%,
+ hsla(108, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 30%,
+ hsla(144, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 40%,
+ hsla(180, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 50%,
+ hsla(216, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 60%,
+ hsla(252, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 70%,
+ hsla(288, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 80%,
+ hsla(324, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 90%,
+ hsla(360, var(--rainbow-saturation), var(--rainbow-lightness), var(--rainbow-opacity)) 100%);
+
+ --door-opacity: var(--opacity);
+ --door-wall-colour: rgba(255, 255, 255, var(--door-opacity)); /* white */
+ --door-outer-frame-colour: rgba(165, 42, 42, var(--door-opacity)); /* brown */
+ --door-inner-frame-colour: rgba(222, 184, 135, var(--door-opacity)); /* burlywood */
+ --door:
+ linear-gradient(90deg, var(--door-wall-colour) 25%, transparent 25%, transparent 75%, var(--door-wall-colour) 75%),
+ linear-gradient(var(--door-wall-colour) 20%, transparent 20%),
+ linear-gradient(
+ 90deg,
+ var(--door-wall-colour) 25%,
+ var(--door-outer-frame-colour) 25%,
+ var(--door-outer-frame-colour) 28%,
+ var(--door-inner-frame-colour) 28%,
+ var(--door-inner-frame-colour) 30%,
+ transparent 30%,
+ transparent 70%,
+ var(--door-inner-frame-colour) 70%,
+ var(--door-inner-frame-colour) 72%,
+ var(--door-outer-frame-colour) 72%,
+ var(--door-outer-frame-colour) 75%,
+ var(--door-wall-colour) 75%
+ ) 0 100% / 100% 77% no-repeat,
+ linear-gradient(var(--door-outer-frame-colour) 23%, var(--door-inner-frame-colour) 23%, var(--door-inner-frame-colour) 25%, transparent 25%);
+}
+
+/* text in the center of a square filling its parent, semi-transparent white background with an opaque white band below the text. */
+.go {
+ background: rgba(255, 255, 255, 0.6); color: black; text-decoration: none; outline: thin solid white;
+ /*mask-image: linear-gradient(rgba(0, 0, 0, 0.6) calc(50% - 0.75em), black calc(50% - 0.75em), black calc(50% + 0.75em), rgba(0, 0, 0, 0.6) calc(50% + 0.75em));*/
+ font-size: calc(130% / var(--scale)); transform-style: preserve-3d; z-index: 100;
+ line-height: 1.5em; text-align: center; position: absolute; top: 0; left: 0; width: auto; min-width: 100%; min-height: 1.5em;
+ /* trick to center the text position: absolute in the ::before, since we might want to animate this */
+ /*padding-top: calc(50% - 1.5em - (1.5em / 2)); height: calc(100% - (50% - 1.5em - (1.5em / 2)));*/
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: calc(100% - 1.5em);
+ padding-bottom: 1.5em;
+ transition: var(--transition-to-forward);
+ flex-wrap: wrap;
+ flex-direction: row;
+}
+/*
+mask-image: glitches, hides the 3D transform in Chromium
+flex column: can't get 100% width;
+flex row: incorrect order in back buttons;
+bg gradient + opacity: opacity breaks 3D transforms
+padding: works for squares but is relative to height
+padding + direction: wrong dir for text
+*/
+
+/* semi-transparent on hover */
+.go:hover { background: rgba(255, 255, 255, 0.1); }
+
+/* link is displayed in top left corner when the link goes out of the current room */
+/* back */ .target-within:not(:target) > .go {
+ border: thin solid black; background: white; color: black; outline: thin solid rgba(255,255,255,0);
+ min-width: 0%; height: 0%; font-size: 1rem; padding-bottom: 0;
+ /*transition: background 2s, width 1s step-start, height 1s step-start;*/
+ transition: var(--transition-to-back);
+}
+
+.go {
+ --transition-duration: 0.6s;
+ --transition-to-forward: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width 1s step-start, height 1s step-start, padding-bottom 1s step-start, font-size 1s step-start, top 1s step-start;
+ --transition-to-current: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width var(--transition-duration) step-end, height var(--transition-duration) step-end, padding-bottom var(--transition-duration) step-end, font-size var(--transition-duration) step-end, top var(--transition-duration) step-end;
+ --transition-to-back: background var(--transition-duration) linear, color var(--transition-duration) linear, border var(--transition-duration) linear, outline var(--transition-duration) linear, opacity var(--transition-duration) linear, min-width 1s step-start, height 1s step-start, padding-bottom 1s step-start, font-size 1s step-start, top 1s step-start;
+}
+
+/* ← back to … when the link goes out of the current room. To be able to animate it, the content is always there, and the colour changes. */
+.go::before {
+ content: '← back to ';
+ display: inline-block; position: relative; left: 0; width: auto; height: 1.5em; line-height: 1.5em;
+}
+#main > .go::before { content: '← back to start'; }
+#main.target-within:not(:target) > .go { color: transparent; background: transparent; border-color: transparent; border-width: 0; }
+#main.target-within:not(:target) > .go::before { border: thin solid black; background: white; }
+#main.target-within > .go { border-width: 0; }
+/* back */ .target-within:not(:target) > .go::before {
+ background: transparent; color: black; top: 0; min-width: 0; transition: var(--transition-to-back); }
+/* current */ :target > .go::before {
+ background: transparent; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-current); }
+/* forward: White band behind text */
+:not(.target-within) > .go::before {
+ background: white; color:transparent; z-index: -1; top: 50%; min-width: 100%; transition: var(--transition-to-forward); }
+
+/* white band semi-transparent on hover */
+:not(.target-within) > .go:hover::before { background: rgba(255, 255, 255, 0.6); }
+
+
+
+/* disable the link when it points to the current room */
+/*:target > .go { background: rgba(255,0,0,0.1); color: rgba(0,0,0,0.1); border: thin solid rgba(0,0,255,1); outline-color: rgba(0,255,0,0.1); pointer-events: none; transition: var(--transition-to-current); }*/
+:target > .go { font-size: 1rem; background: transparent; color: transparent; border: thin solid transparent; outline-color: transparent; pointer-events: none; transition: var(--transition-to-current); }
+
+/* animate colourful arrow and disable it when the target is in a nested room */
+:target-within > .go::after { --distance: calc(0 - var(--width)) !important; pointer-events: none; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+.target-within > .go::after { --distance: calc(0 - var(--width)) !important; pointer-events: none; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+
+/* animate position and gradient of colourful arrow on hover */
+.go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* leave 25% for bounce easing */ }
+
+/* draw colourful arrow */
+.go::after {
+ --width: 10; /* vmin */
+ --shift: 8; /* vmin */
+ --min-distance: 10; /* vmin */
+ --distance: var(--min-distance); /* vmin, animated */
+ --border: calc(var(--min-distance) + var(--shift)); /* vmin */
+ --z: calc(((var(--width) - var(--border)) / 2 + var(--distance)) * 1vmin);
+ --arrow-width-ratio: calc(var(--width) / (var(--width) + var(--border)));
+ position: absolute; content: ''; top:50%; left: 50%; width: calc(var(--width) * 1vmin); height: calc(10vmin / var(--scale));
+ --ease-out-bounce: cubic-bezier(0.3, 1.8, 0.9, 0.9);
+ transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-start, opacity 1s linear 2s /* when coming back from a sibblign room, wait till our room is visible before showing opacity */;
+ transform: translate3d(-50%, -50%, var(--z)) rotateY(45deg);
+ --arrow-thickness: 20%;
+ --arrowhead-position: 60%;
+ --arrowhead-angle: 51.34deg;
+ --bg: rgba(214, 93, 184, 0.5);
+ border-right: calc(var(--border) * 1vmin) solid transparent;
+ background-image: linear-gradient(90deg, rgba(102, 231, 231, 0.856) 25%, rgba(255,255,255,0.8) 50%, rgba(214, 93, 184, 0.7) 75%);
+ background-size: 400%;
+ background-position-x: 75%; /* leave 25% for bounce easing */
+ background-repeat: no-repeat;
+ --vertical-triangle: calc(var(--arrowhead-position) * var(--arrow-width-ratio));
+ --arrow-top: calc(50% - var(--arrow-thickness));
+ --arrow-bottom: calc(50% + var(--arrow-thickness));
+ --mask-image: conic-gradient(from calc(-90deg - var(--arrowhead-angle)) at calc(100% * var(--arrow-width-ratio)) center, black 0deg, black calc(var(--arrowhead-angle)*2), transparent calc(var(--arrowhead-angle)*2)),
+ linear-gradient(90deg, transparent var(--vertical-triangle), black var(--vertical-triangle)),
+ linear-gradient(0deg, transparent var(--arrow-top), black var(--arrow-top), black var(--arrow-bottom), transparent var(--arrow-bottom));
+ mask-image: var(--mask-image);
+ -webkit-mask-image: var(--mask-image);
+ mask-composite: intersect, add;
+ -webkit-mask-composite: destination-in, source-over;
+}
+
+/* Hide glitch where opacity on the parent breaks 3D even if the opacity is still at 1 during the first part of the animation. */
+.room-test.target-within ~ .room .go::after { opacity: 0; transition: opacity 1s step-start; }
+.scene.target-within:not(:target) > .room:not(.target-within) .go::after { opacity: 0; transition: opacity 1s step-start; }
+
+.rest { display: none; }
+.hover-anim .rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
+.scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
+.scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
+
+.object:target-within:before { opacity: 1; }
+.object.target-within:before { opacity: 1; }
+.object:before {
+ content: normal;/*"← back"; for hover only*/
+ border: thin solid brown;
+ background: white;
+ z-index: 999;
+ position: absolute;
+ transform: translate3d(0, -100%, 0);
+ opacity: 0;
+ transition: opacity 1s linear 1s;
+ pointer-events: none;
+}
+<<<<<<< Updated upstream
+=======
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+
+need: 6 walls, 1 content, 1 door/permalink/back, 1 :back with actual content on the link, 1 arrow
+
+TODO: start with non-cubic rooms
+
+normal room:
+section:only-child content
+ ::before left wall of parent
+ aside
+ ::before ceiling of parent
+ a door+permalink+back, remove door using animation of background-position, slide a white square down for the breadcrumbs
+ ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent
+ ::after arrow
+ ::after floor of parent
+ … section …
+ ::after right wall of parent
+
+empty room:
+section:only-child content
+ ::before left wall of parent
+ aside TODO: would need to draw 5 walls but only one element left (+ the content, maybe), can probably fake the edges of walls with a gradient.
+ ::before ceiling of parent
+ a door+permalink+back
+ ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent
+ ::after arrow
+ ::after floor of parent
+ ::after right wall of parent
+
+corridor:
+section.corridor
+ …
+ section:only-child content
+ ::before longer left wall of parent
+ aside
+ ::before longer ceiling of parent
+ a door+permalink+back, remove door using animation of background-position, slide a white square down for the breadcrumbs
+ ::before "→ " with a color: transparent or "← back to " with a text-shadow: transparent
+ ::after arrow
+ ::after longer floor of parent
+ … section …
+ ::after longer right wall of parent
+ …
+
+*/
+
+
+
+#debug { perspective: 100vmin; width: 100vmin; height: 100vmin; top: 50%; left: 50%; position: absolute; transform: translate3d(-50%,-50%,0); }
+
+.new-scene {
+ --inner-radius: 50vmin;
+ --transform-orig: center center var(--inner-radius);
+}
+
+.new-scene, .new-scene * { border: thick solid red; }
+
+/* perspective only on the root to avoid changing the perspective in sub-elements) */
+.new-scene { perspective: 100vmin; /*overflow: hidden;*/ }
+
+.new-scene, .new-scene section {
+ position: absolute;
+ /*opacity: 0.9;*/
+ top: 50%;
+ left: 50%;
+ width: 100vmin;
+ height: 100vmin;
+ font-size: x-large;
+ transform-style: preserve-3d;
+ pointer-events: none; /* make clicks go through the section */
+ transition: transform 2s;
+}
+
+.new-scene, .new-scene * { backface-visibility: hidden; }
+#debug .new-scene { transform-origin: var(--transform-orig); transform: translate3d(10vmin,40vmin,-100vmin) rotateX(-35deg) var(--orig-r) var(--pos-r-f); }
+.new-scene { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-f); }
+
+.new-scene section { background: var(--door); }
+
+/* re-enable clicks after the last property above disabled them */
+.new-scene::before, .new-scene::after, .new-scene > *:not(section), .new-scene section::before, .new-scene section::after, .new-scene section > *:not(section) { pointer-events: all; }
+
+/* hide rooms that are more than 270° away so that they don't show on top of the current room */
+/* TODO: use :first-child etc. to make this selector exclude */
+.new-scene > section > section > section { --opacity: 0; pointer-events: none; }
+
+iframe { opacity: var(--opacity); }
+
+.new-scene section:first-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-l) var(--rot-r-l); }
+.new-scene section:last-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-r) var(--rot-r-r); }
+
+.new-scene section:target { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-f) var(--rot-r-f); }
+
+.new-scene section:target:first-of-type ~ section:last-of-type { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-r) var(--pos-r-l-) var(--rot-r-l-) var(--rot-r-r); }
+.new-scene.target-within > section:first-of-type:not(:target),
+.new-scene .target-within > section:first-of-type:not(:target) { transform-origin: var(--transform-orig); transform: var(--orig-r) var(--pos-r-l) var(--pos-r-r-) var(--rot-r-r-) var(--rot-r-l); }
+
+:root {
+ --orig-subelements-of-back: translate3d(0, 0, 50vmin);
+ --orig-w-l: var(--orig-subelements-of-back);
+ --orig-w-r: var(--orig-subelements-of-back);
+ /* -w- = wall, -r- = room. We want global translations, but translations use the local axes, so rotations must be done last */
+ --pos-w-l: translate3d(-50vmin, 0, 0); --rot-w-l: rotateY(90deg);
+ --pos-w-r: translate3d(50vmin, 0, 0); --rot-w-r: rotateY(-90deg);
+ --pos-w-u: translate3d(0,-50vmin,-50vmin); --rot-w-u: rotateX(90deg);
+ --pos-w-d: translate3d(0,50vmin,-50vmin); --rot-w-d: rotateX(-90deg);
+ --pos-w-b: translate3d(0,0,-100vmin); --rot-w-b: rotateZ(0deg);
+ --pos-w-f: translate3d(0,0,0); --rot-w-f: rotateZ(0deg);
+ --opacity: 1;
+ /* TODO: use calc and overridable variables to position the room? */
+ --orig-r: translate3d(-50%, -50%, -50vmin);
+ --pos-r-l : translate3d(-49.5vmin, 0, 0); --rot-r-l : rotateY(90deg);
+ --pos-r-l-: translate3d( 49.5vmin, 0, 0); --rot-r-l-: rotateY(-90deg);
+ --pos-r-r : translate3d( 49.5vmin, 0, 0); --rot-r-r : rotateY(-90deg);
+ --pos-r-r-: translate3d(-49.5vmin, 0, 0); --rot-r-r-: rotateY(0deg);
+ --pos-r-f : translate3d(0, 0, 50vmin); --rot-r-f : rotateZ(0deg);
+}
+
+/* walls */
+/*u*/ .new-scene::before, .new-scene section::before { content: ''; display:block; background: var(--rainbow); position: absolute; width: 100vmin; height: 100vmin;
+ transform-origin: var(--transform-orig); transform: var(--pos-w-u) var(--rot-w-u); pointer-events: none;
+ border: none; }
+
+/*d*/ .new-scene::after, .new-scene section::after { content: ''; display:block; top:0; background: var(--rainbow); position: absolute; width: 100vmin; height: 100vmin;
+ transform-origin: var(--transform-orig); transform: var(--pos-w-d) var(--rot-w-d); pointer-events: none;
+ border: none; }
+
+/*b*/ .new-scene aside { width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--pos-w-b) var(--rot-w-b); background: var(--rainbow); transform-style: preserve-3d;
+ border: none; pointer-events: none; }
+
+/*l*/ .new-scene aside:last-child::before { content: ''; width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--orig-w-l) var(--pos-w-l) var(--rot-w-l); background: var(--rainbow);
+ border: none; pointer-events: none; }
+
+/*r*/ .new-scene aside:last-child::after { content: ''; width: 100vmin; height: 100vmin; top: 0; left: 0; position: absolute; transform-origin: var(--transform-orig); transform: var(--orig-w-r) var(--pos-w-r) var(--rot-w-r); background: var(--rainbow);
+ border: none; pointer-events: none; }
+
+.new-scene aside > a { position: absolute; transform-origin: var(--transform-orig); transform: translate3d(0, 0, 100vmin); pointer-events: all;
+ background: white; border: thin solid black; }
+>>>>>>> Stashed changes
