From 7341f49b5a45d7c9e21f2e0b88de2a1ac44e7757 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Sun, 22 Sep 2024 21:32:01 +0200 Subject: [PATCH] flat mode, a few more buttons, etc --- .gitattributes | 4 +- Makefile | 9 +- base.css | 122 +++++++++-------- cube.css | 41 +++++- flat.css | 108 +++++++++++++++ index.html | 109 ++++++++++++--- media/artfight.png | 3 - media/blog.png | 3 - media/buttons/alloyed.gif | 3 + media/buttons/alloyed_still.png | 3 + media/buttons/beeps_still.png | 3 + media/buttons/candiedreptile.gif | 4 +- media/buttons/candiedreptile_still.png | 3 + media/buttons/cdromca.png | 4 +- media/buttons/cobalt.png | 4 +- media/buttons/cohost.gif | 4 +- media/buttons/cohost_still.gif | 3 + media/buttons/corru.gif | 4 +- media/buttons/corru_still.gif | 3 + media/buttons/creature0354_still.png | 3 + media/buttons/dex.png | 4 +- media/buttons/dino.png | 4 +- media/buttons/dusty_still.png | 3 + media/buttons/goaty.gif | 4 +- media/buttons/goaty_still.gif | 3 + media/buttons/gulfie_still.png | 3 + media/buttons/hthrflwrs.png | 4 +- media/buttons/inhuman.png | 4 +- media/buttons/krita.png | 4 +- media/buttons/myno_still.png | 3 + media/buttons/pebble.gif | 4 +- media/buttons/pebble_still.png | 3 + media/buttons/renkotsuban.gif | 3 + media/buttons/tsunderdog_still.png | 3 + media/buttons/tuxedodragon.gif | 4 +- media/buttons/tuxedodragon_still.gif | 3 + media/chitter.png | 3 - media/code.svg | 1 - media/deviantart.png | 3 - media/favicon.png | 3 + media/flags/nb.png | 4 +- media/flags/pan.png | 4 +- media/flags/polyam.png | 4 +- media/flags/quoi.png | 4 +- media/furaffinity.png | 3 - media/icon.svg | 1 - media/icons/artfight.png | 3 + media/icons/blog.png | 3 + media/{ => icons}/bluesky.svg | 0 media/icons/chitter.png | 3 + media/{ => icons}/cohost.svg | 0 media/icons/deviantart.png | 3 + media/{ => icons}/forgejo.svg | 0 media/icons/furaffinity.png | 3 + media/{ => icons}/itaku.svg | 0 media/icons/ko-fi.webp | 3 + media/{ => icons}/matrix.svg | 0 media/{ => icons}/weasyl.svg | 0 media/kesi-neon.kra | Bin 401262 -> 0 bytes media/kesi-neon.png | 4 +- media/kesi-neon.webp | 3 + media/kesi.png | 4 +- media/ko-fi.webp | Bin 4676 -> 0 bytes media/kra/kesi-neon.kra | 3 + media/kra/niss-icon.kra | 3 + media/kra/quobl-neon.kra | 3 + media/kra/quobl.kra | 3 + media/kra/wave-neon.kra | 3 + media/kra/wave.kra | 3 + media/mlem_static.png | 3 - media/niss-icon.kra | Bin 94411 -> 0 bytes media/niss-icon.png | 3 - media/quobl-neon.kra | Bin 508441 -> 0 bytes media/quobl-neon.png | 4 +- media/quobl-neon.webp | 3 + media/quobl.kra | Bin 2879239 -> 0 bytes media/quobl.png | 4 +- media/quobl.webp | 3 + media/quoxtrans.png | 4 +- media/wave-neon.kra | Bin 444125 -> 0 bytes media/wave-neon.png | 4 +- media/wave-neon.webp | 3 + media/wave.kra | Bin 1803137 -> 0 bytes media/wave.png | 4 +- media/wave.webp | 3 + cube.ts => run.ts | 176 ++++++++++++++++--------- static.css | 57 ++++++++ 87 files changed, 623 insertions(+), 221 deletions(-) create mode 100644 flat.css delete mode 100644 media/artfight.png delete mode 100644 media/blog.png create mode 100644 media/buttons/alloyed.gif create mode 100644 media/buttons/alloyed_still.png create mode 100644 media/buttons/beeps_still.png create mode 100644 media/buttons/candiedreptile_still.png create mode 100644 media/buttons/cohost_still.gif create mode 100644 media/buttons/corru_still.gif create mode 100644 media/buttons/creature0354_still.png create mode 100644 media/buttons/dusty_still.png create mode 100644 media/buttons/goaty_still.gif create mode 100644 media/buttons/gulfie_still.png create mode 100644 media/buttons/myno_still.png create mode 100644 media/buttons/pebble_still.png create mode 100644 media/buttons/renkotsuban.gif create mode 100644 media/buttons/tsunderdog_still.png create mode 100644 media/buttons/tuxedodragon_still.gif delete mode 100644 media/chitter.png delete mode 100644 media/code.svg delete mode 100644 media/deviantart.png create mode 100644 media/favicon.png delete mode 100644 media/furaffinity.png delete mode 100644 media/icon.svg create mode 100644 media/icons/artfight.png create mode 100644 media/icons/blog.png rename media/{ => icons}/bluesky.svg (100%) create mode 100644 media/icons/chitter.png rename media/{ => icons}/cohost.svg (100%) create mode 100644 media/icons/deviantart.png rename media/{ => icons}/forgejo.svg (100%) create mode 100644 media/icons/furaffinity.png rename media/{ => icons}/itaku.svg (100%) create mode 100644 media/icons/ko-fi.webp rename media/{ => icons}/matrix.svg (100%) rename media/{ => icons}/weasyl.svg (100%) delete mode 100644 media/kesi-neon.kra create mode 100644 media/kesi-neon.webp delete mode 100644 media/ko-fi.webp create mode 100644 media/kra/kesi-neon.kra create mode 100644 media/kra/niss-icon.kra create mode 100644 media/kra/quobl-neon.kra create mode 100644 media/kra/quobl.kra create mode 100644 media/kra/wave-neon.kra create mode 100644 media/kra/wave.kra delete mode 100644 media/mlem_static.png delete mode 100644 media/niss-icon.kra delete mode 100644 media/niss-icon.png delete mode 100644 media/quobl-neon.kra create mode 100644 media/quobl-neon.webp delete mode 100644 media/quobl.kra create mode 100644 media/quobl.webp delete mode 100644 media/wave-neon.kra create mode 100644 media/wave-neon.webp delete mode 100644 media/wave.kra create mode 100644 media/wave.webp rename cube.ts => run.ts (52%) create mode 100644 static.css diff --git a/.gitattributes b/.gitattributes index 159d236..0644d84 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,4 +1,4 @@ *.png filter=lfs diff=lfs merge=lfs -text *.gif filter=lfs diff=lfs merge=lfs -text -*.mp3 filter=lfs diff=lfs merge=lfs -text -*.ogg filter=lfs diff=lfs merge=lfs -text +*.webp filter=lfs diff=lfs merge=lfs -text +*.kra filter=lfs diff=lfs merge=lfs -text diff --git a/Makefile b/Makefile index d23f1c3..53021fa 100644 --- a/Makefile +++ b/Makefile @@ -1,9 +1,9 @@ CSS = $(wildcard *.css) $(shell find fonts -type f) PAGES = index.html pubkey.txt MEDIA = \ - $(wildcard media/*.png) $(wildcard media/*.svg) $(wildcard media/*.webp) \ + $(wildcard media/*.png) $(wildcard media/*.gif) $(wildcard media/*.webp) \ $(wildcard media/flags/*) $(wildcard media/buttons/*) \ - 8831.png 8831-quox.png + $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png SCRIPTS = $(patsubst %.ts,%.js,$(wildcard *.ts)) MISC = $(shell find .well-known -type f) ALL = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC) @@ -53,11 +53,6 @@ $(BUILDDIR)/%_dim.png: %.png @echo $(notdir $@) @convert -channel A -evaluate Multiply 0.75 $< $@ -$(BUILDDIR)/%.GIF: %.ICO - @echo $*.GIF - @mkdir -p $(dir $@) - @convert '$<[0]' $@ - $(BUILDDIR)/%.js: %.ts tsc --strict --noUncheckedIndexedAccess --noEmitOnError \ --lib dom,es2021 --target es2015 \ diff --git a/base.css b/base.css index fa102ee..c315986 100644 --- a/base.css +++ b/base.css @@ -1,4 +1,4 @@ -@import url(fonts/muller/muller.css); +@import url(fonts/muller/muller.css) (prefers-reduced-data: no-preference); /* OUTER */ @@ -7,22 +7,31 @@ html, body { min-height: 100vh; + min-height: 100lvh; scrollbar-gutter: stable; } html { - font-family: Muller, sans-serif; font-size: large; + font-family: Muller, sans-serif; font-weight: 500; - background: var(--gradient); + background: var(--gradient) fixed; color: black; --gradient: linear-gradient(120deg, #fae58f, #fab6ba, #d1aeff, #89d6ff, #43f3ae); + --shadow-hsl: 330deg 40% 40%; } -body { margin: 0; } +@media (prefers-reduced-data: reduce) { + html { + font-family: sans-serif; + font-weight: normal; + } +} + +html, body { margin: 0; } @media (prefers-color-scheme: dark) { html { @@ -33,7 +42,6 @@ body { margin: 0; } hsl(150deg 30% 20%), hsl(30deg 30% 20%), hsl(350deg 30% 20%)); - color: #ffd; } } @@ -41,7 +49,10 @@ body { margin: 0; } /* TOP MENU */ -#face-menu { place-self: center; } +#face-menu { + align-self: center; + margin: 10px; +} .menu input, .menu label { cursor: pointer; @@ -54,8 +65,10 @@ body { margin: 0; } margin: auto; padding: 0; + flex-wrap: wrap; + justify-content: center; + font-size: 125%; - font-weight: 500; background: hsl(var(--menu-bg-hsl) / 50%); border: 2px solid hsl(var(--menu-bg-hsl)); @@ -75,27 +88,14 @@ body { margin: 0; } padding: 0; } .menu li { - display: flex; + display: flex; list-style: none; + flex: 1 0 4em; } .menu label { padding: .25em 1.25em; -} -.menu :checked + label { - font-weight: 700; -} - -.menu label { position: relative; } -.menu label::after { - content: ' '; - z-index: -1; - position: absolute; - inset: 0 0 100% 0; - background: hsl(var(--menu-bg-hsl)); - transition: inset .15s linear; -} -.menu :checked + label::after { - bottom: 0; + flex: 1 0 auto; + text-align: center; } @@ -112,7 +112,8 @@ body { margin: 0; } ); background: var(--base-background); - border: 10px solid white; + --border-thickness: 10px; + border: var(--border-thickness) solid white; padding: 2em; color: hsl(var(--hue) 40% 10%); @@ -188,6 +189,12 @@ strong { font-weight: 700; } --bg-angle: 135deg; } +/* this one makes more sense to show if there is a paint before + * the script runs */ +#hello { + z-index: 1; +} + /* extra #cube selector for specificity */ #cube #hello { --bg-image: url(media/wave.png); @@ -199,6 +206,12 @@ strong { font-weight: 700; } @media (prefers-color-scheme: dark) { #cube #hello { --bg-image: url(media/wave-neon.png); } } +@media (prefers-reduced-data: reduce) { + #cube #hello { --bg-image: url(media/wave.webp); } +} +@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) { + #cube #hello { --bg-image: url(media/wave-neon.webp); } +} #id, #id ::selection, #flags img { --hue: 10deg; @@ -248,9 +261,13 @@ strong { font-weight: 700; } } @media (prefers-color-scheme: dark) { - #cube #activities { - --bg-image: url(media/quobl-neon.png); - } + #cube #activities { --bg-image: url(media/quobl-neon.png); } +} +@media (prefers-reduced-data: reduce) { + #cube #activities { --bg-image: url(media/quobl.webp); } +} +@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) { + #cube #activities { --bg-image: url(media/quobl-neon.png); } } #links, #links ::selection { @@ -290,21 +307,21 @@ strong { font-weight: 700; } #links a:hover { text-decoration: none; } #links #gallery { - --icon: url(media/niss-icon.png); + --icon: url(media/favicon.png); --fg: hsl(280deg 38% 43%); --bg: hsl(100deg 99% 81%); image-rendering: pixelated; } #links #code { - --icon: url(media/forgejo.svg); + --icon: url(media/icons/forgejo.svg); --fg: white; --icon-bg: #171e26; --bg: #c2410c; } #links #blog { - --icon: url(media/blog.png); + --icon: url(media/icons/blog.png); --fg: #ffeebb; --bg: #332255; /* image-rendering: pixelated; */ @@ -315,61 +332,61 @@ strong { font-weight: 700; } } #links #itaku { - --icon: url(media/itaku.svg); + --icon: url(media/icons/itaku.svg); --fg: #ffeb3b; --bg: #303030; } #links #weasyl { - --icon: url(media/weasyl.svg); + --icon: url(media/icons/weasyl.svg); --fg: white; --bg: #970000; } #links #fa { - --icon: url(media/furaffinity.png); + --icon: url(media/icons/furaffinity.png); --icon-bg: #20242a; --bg: #353b45; --fg: white; } #links #da { - --icon: url(media/deviantart.png); + --icon: url(media/icons/deviantart.png); --icon-bg: #000608; --bg: #314537; --fg: #e7ede4; } #links #kofi { - --icon: url(media/ko-fi.webp); + --icon: url(media/icons/ko-fi.webp); --icon-bg: #def3ff; --bg: white; --fg: #ff5966; } #links #artfight { - --icon: url(media/artfight.png); + --icon: url(media/icons/artfight.png); --icon-bg: #222222; --bg: #a65178; --fg: white; } #links #chitter { - --icon: url(media/chitter.png); + --icon: url(media/icons/chitter.png); --bg: #582c58; --icon-bg: #2c162c; --fg: white; } #links #cohost { - --icon: url(media/cohost.svg); + --icon: url(media/icons/cohost.svg); --bg: #ffab5c; --icon-bg: #83254f; --fg: black; } #links #bluesky { - --icon: url(media/bluesky.svg); + --icon: url(media/icons/bluesky.svg); --bg: #161e27; --fg: white; } @@ -464,6 +481,7 @@ strong { font-weight: 700; } #friends #abyss a { background: #1e2e5f; color: #f8e1c2; } #nissbuttons { + margin: 2em auto 0; align-self: end; display: flex; align-items: center; @@ -471,6 +489,10 @@ strong { font-weight: 700; } gap: 1em; } +#nissbuttons p { + text-align: right; + text-wrap: balance; +} #nissbuttons * { margin: 0; } #six, #six ::selection { @@ -486,19 +508,11 @@ strong { font-weight: 700; } } @media (prefers-color-scheme: dark) { - #cube #six { - --bg-image: url(media/kesi-neon.png); - } + #cube #six { --bg-image: url(media/kesi-neon.png); } } - -.zoom * { transition: all 0.25s ease-in; } -.zoom > :hover { - scale: 125%; - filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%)); +@media (prefers-reduced-data: reduce) { + #cube #activities { --bg-image: url(media/kesi.webp); } +} +@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) { + #cube #activities { --bg-image: url(media/kesi-neon.webp); } } -.zoom > :hover:nth-child(5n) { rotate: 17deg; } -.zoom > :hover:nth-child(5n+1) { rotate: -12deg; } -.zoom > :hover:nth-child(5n+2) { rotate: 8deg; } -.zoom > :hover:nth-child(5n+3) { rotate: -23deg; } -.zoom > :hover:nth-child(10n+4) { rotate: 26deg; } -.zoom > :hover:nth-child(10n+9) { rotate: -6deg; } diff --git a/cube.css b/cube.css index cbcfbad..d975975 100644 --- a/cube.css +++ b/cube.css @@ -1,11 +1,32 @@ +@media (prefers-reduced-motion: no-preference) and + (min-height: 650px) and (min-width: 650px) { + +/* LAYOUT BASICS */ + body { display: grid; - grid-template-rows: 5em 1fr 5em; + grid-template-rows: 5em 1fr; perspective: 440vw; perspective-origin: 50% 120%; } +/* MENU ANIMATION */ + +.menu label { position: relative; } +.menu label::after { + content: ' '; + z-index: -1; + position: absolute; + inset: 0 0 100% 0; + background: hsl(var(--menu-bg-hsl)); + transition: inset .15s linear; +} +.menu :checked + label::after { + bottom: 0; +} + + /* CUBE ASSEMBLY */ /* the rest is in cube.ts */ @@ -19,7 +40,7 @@ html { /* cube shadow */ html { background: - radial-gradient(circle, hsl(330deg 40% 40% / 70%), transparent 58%), + radial-gradient(circle, hsl(var(--shadow-hsl) / 70%), transparent 58%), var(--gradient); background-blend-mode: multiply; } @@ -58,3 +79,19 @@ html { @keyframes breathe { 35% { transform: translateZ(var(--breathe)) var(--base-transform); } } + +@media (prefers-reduced-motion: no-preference) { + .zoom * { transition: all 0.25s ease-in; } + .zoom > :hover { + scale: 110%; + filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 60%)); + } + .zoom > :hover:nth-child(5n) { rotate: 4deg; } + .zoom > :hover:nth-child(5n+1) { rotate: -2deg; } + .zoom > :hover:nth-child(5n+2) { rotate: 1deg; } + .zoom > :hover:nth-child(5n+3) { rotate: -3deg; } + .zoom > :hover:nth-child(10n+4) { rotate: 4deg; } + .zoom > :hover:nth-child(10n+9) { rotate: -1deg; } +} + +} diff --git a/flat.css b/flat.css new file mode 100644 index 0000000..e29ec6d --- /dev/null +++ b/flat.css @@ -0,0 +1,108 @@ +@media (prefers-reduced-motion: reduce), + (max-height: 649px), (max-width: 649px) { + +/* LAYOUT */ + +body { + display: grid; + grid-template: "menu" 5em "body" 1fr; + /* height: 100vh; height: 100dvh; */ + /* width: 100vw; width: 100dvw; */ +} + +#face-menu { grid-area: menu; } +#outer { grid-area: body; } + +#outer { + position: relative; + height: 90%; + width: 90%; + margin: auto; +} + +#outer::after { + content: ' '; + position: absolute; + inset: 0; + box-shadow: 0 0 40px hsl(var(--shadow-hsl) / 40%); + mix-blend-mode: multiply; +} + +/* not really a cube any more. but */ +#cube, #cube > section { + position: absolute; + inset: 0; +} +#cube > section { overflow: auto; } + +@media (prefers-color-scheme: dark) { + html { --shadow-hsl: 60deg 100% 96%; } +} + + +/* BACKGROUND FIXES */ + +@media (max-width: 649px) { + #cube #hello { + background-size: auto 80%, auto, auto; + background-position: bottom -20% right 60%, center, center; + } +} + +@media (max-height: 649px) { + #cube #hello { + background-size: auto 80%, auto, auto; + background-position: bottom right, center, center; + } +} + + +@media (max-width: 649px) { + #cube #activities { + background-size: auto 30%, auto, auto; + background-position: bottom left 70%, center, center; + } +} + +#cube #six { + background-position: bottom left 70%, center, center; +} + +@media (max-width: 649px) { + #cube #six { + background-size: auto 100%, auto, auto; + background-position: bottom left 70%, center, center; + } +} + +@media (max-height: 649px) { + #cube #six { + background-size: cover; + background-position: top 15% center; + } +} + + +/* TRANSITIONS */ + +#face-menu :checked + label { + background: hsl(var(--menu-bg-hsl)); +} +#face-menu label { + transition: background 0.1s ease-in; +} + +#cube > section[data-selected=true] { + z-index: 1; + opacity: 1; + transition: opacity 0.1s ease-in; +} + +#cube > section[data-selected=false] { + z-index: -1; + opacity: 0; + transition: opacity 0s 0.1s ease-in; +} +/* todo make sure this works ok with screen readers */ + +} diff --git a/index.html b/index.html index f007d77..b1955db 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,13 @@ - + - - + + + @@ -26,8 +26,8 @@ --> - +