From 13d0e65c54891cbc4ca89f961220d38ee8f9493d Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Sun, 16 Feb 2025 23:54:15 +0100 Subject: [PATCH 1/6] slow down cube animation a little bit --- script/cube.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script/cube.ts b/script/cube.ts index 07d5627..93a8454 100644 --- a/script/cube.ts +++ b/script/cube.ts @@ -218,8 +218,8 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void { const cube = document.getElementById('cube')!; cube.dataset.moving = 'true'; - cube.style.transition = '0.4s cubic-bezier(.4, -0.29, .43, 1.26)'; - outer.style.transition = `0.4s 0.25s cubic-bezier(.48, 0, .44, 1.07)`; + cube.style.transition = '0.6s cubic-bezier(.4, -0.29, .43, 1.26)'; + outer.style.transition = `0.4s 0.5s cubic-bezier(.48, 0, .44, 1.07)`; function transitionListener(elem: HTMLElement): () => void { function handler(e: Event) { if (e.target == elem) { finish(); } } From 69bd59538235bbc978b58d846bdbb0011b032519 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Sun, 16 Feb 2025 23:54:32 +0100 Subject: [PATCH 2/6] add black hole in the middle of the cube :) --- media/blackhole.png | 3 +++ style/cube.css | 10 +++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 media/blackhole.png diff --git a/media/blackhole.png b/media/blackhole.png new file mode 100644 index 0000000..3cbdbf6 --- /dev/null +++ b/media/blackhole.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:da17a1a2933d19b55a05c4a2783d3298da7226bb09317600de2c3f119d0cdf6b +size 330723 diff --git a/style/cube.css b/style/cube.css index aa3a350..a1ea141 100644 --- a/style/cube.css +++ b/style/cube.css @@ -114,7 +114,7 @@ #cube { position: relative; - > section { + > section, &::after { position: absolute; inset: 5vh 5vw; overflow: auto; @@ -128,6 +128,14 @@ } } + #outer::after { + content: ' '; + position: absolute; + inset: 0; + background: url(../media/blackhole.png) center / 60% no-repeat; + transform: translateZ(var(--nhalf)); + } + @keyframes breathe { 40% { transform: var(--base-transform) translateZ(var(--breathe)); } } From 25f0398664465ce2f5c6a0f156af95479a14da74 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Mon, 17 Feb 2025 00:32:43 +0100 Subject: [PATCH 3/6] haha oops --- style/flat.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/flat.css b/style/flat.css index b359c65..27b5a52 100644 --- a/style/flat.css +++ b/style/flat.css @@ -118,3 +118,5 @@ } } } + +} /* (the media query) */ From 786909dac2d350ee95866c0bb3207588dae66cc0 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Mon, 17 Feb 2025 03:19:41 +0100 Subject: [PATCH 4/6] custom cursors --- media/hand.2x.png | 3 +++ media/hand.png | 3 +++ media/tail.2x.png | 3 +++ media/tail.png | 3 +++ style/base.css | 11 ++++++++++- 5 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 media/hand.2x.png create mode 100644 media/hand.png create mode 100644 media/tail.2x.png create mode 100644 media/tail.png diff --git a/media/hand.2x.png b/media/hand.2x.png new file mode 100644 index 0000000..1549507 --- /dev/null +++ b/media/hand.2x.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:be8a350c7207d7bfee2aaf5e388d8a7e89ea5128839e2025f0afa6e806392939 +size 814 diff --git a/media/hand.png b/media/hand.png new file mode 100644 index 0000000..81f2e25 --- /dev/null +++ b/media/hand.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c6449d5d6a5dfcbeaca03ac7acab4bff1f75245efad192d5a5aa2517100f9b9c +size 689 diff --git a/media/tail.2x.png b/media/tail.2x.png new file mode 100644 index 0000000..10ec72f --- /dev/null +++ b/media/tail.2x.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:74de54cfd9a1795a6da3f9caab5ea019d87085af7dae59af329b713a0165c9a2 +size 1222 diff --git a/media/tail.png b/media/tail.png new file mode 100644 index 0000000..3231886 --- /dev/null +++ b/media/tail.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c31db8a6e7270e45216a105c20372726760805b79717bf8850607fed6a012938 +size 1001 diff --git a/style/base.css b/style/base.css index 02b4d41..9bff4e7 100644 --- a/style/base.css +++ b/style/base.css @@ -21,8 +21,17 @@ actually exists min-height: 100lvh; margin: 0; scrollbar-gutter: stable; + + cursor: + image-set("../media/tail.png" 1x, "../media/tail.2x.png" 2x) 34 1, + auto; + --pointer: + image-set("../media/hand.png" 1x, "../media/hand.2x.png" 2x) 31 1, + auto; } + a { cursor: var(--pointer); } + :root { font-size: large; @@ -90,7 +99,7 @@ actually exists } } - input, label { cursor: pointer; } + input, label { cursor: var(--pointer); } input { appearance: none; From aa6fa9731061ba1812cb45cfa5a293b7fbfbf31b Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Mon, 17 Feb 2025 03:20:07 +0100 Subject: [PATCH 5/6] fix selection on #six --- style/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/base.css b/style/base.css index 9bff4e7..4897175 100644 --- a/style/base.css +++ b/style/base.css @@ -545,7 +545,7 @@ actually exists } @layer faces.six { - #six, #six ::selection { + #six { --hue: 250deg; --bg-angle: 130deg; From 3277f8f4cf4037f260534e2d4fba78ac63ea62d0 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Mon, 17 Feb 2025 03:20:13 +0100 Subject: [PATCH 6/6] background --- style/base.css | 4 +++- style/properties.css | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/style/base.css b/style/base.css index 4897175..1f9416d 100644 --- a/style/base.css +++ b/style/base.css @@ -59,12 +59,14 @@ actually exists } --shadow-hsl: 330deg 40% 40%; - --base-background: var(--gradient) fixed; + --base-background: url(../media/church.png), var(--gradient) fixed; background: var(--base-background); font-family: Muller, sans-serif; font-weight: 500; + @media (prefers-reduced-data: reduce) { + --base-background: var(--gradient) fixed; font-family: sans-serif; font-weight: normal; } diff --git a/style/properties.css b/style/properties.css index 0a3c261..a3fefe4 100644 --- a/style/properties.css +++ b/style/properties.css @@ -1,3 +1,9 @@ +@property --base-background { + syntax: "*"; + inherits: false; + initial-value: transparent; +} + /* face backgrounds */ @property --hue {