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 @@
-->
-
+