dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-07-10 12:12:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: oklch gradients with two-layer cyan-yellow transition

Browse Source 
Gradient interpolation moved to oklch color space for smoother blue-cyan
transitions. The cyan-to-yellow transition uses two stacked gradients
(sRGB yellow overlay + oklch blue-cyan base) to avoid the green hue shift
that oklch produces when interpolating between distant hues.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
another-simple-pixel
2026-04-18 18:05:23 -07:00
parent f49d985119
commit 1cf36839cb
1 changed files with 12 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/css/design3.css
+12 -22
View File
@@ -136,11 +136,9 @@
}
:root {
--bg-grad: linear-gradient(10deg,
#e8f3ff 0%,
#c0e2ff 40%,
#e9ffff 80%,
#ffefd6 90%);
--bg-grad:
linear-gradient(10deg, transparent 83%, #ffefd6 90%),
linear-gradient(in oklch 10deg, #e8f3ff 0%, #c0e2ff 40%, #e9ffff 82%, #e0fff0 92%);
/* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
/* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
@@ -163,21 +161,16 @@
}
:root.dark {
--bg-grad: linear-gradient(9.2deg,
#000000 0%,
#131d49 52%,
#3f5598 65%,
#c3faff 85%,
#fff6e0 90%);
--bg-grad:
linear-gradient(9.2deg, transparent 87%, #fff6e0 92%),
linear-gradient(in oklch 9.2deg, #000000 0%, #131d49 52%, #3f5598 65%, #c3faff 85%, #e0fff0 92%);
}
@media screen and (max-width: 959px) {
:root {
--bg-grad: linear-gradient(30deg,
#e8f3ff 0%,
#c0e2ff 40%,
#e9ffff 80%,
#ffefd6 90%);
--bg-grad:
linear-gradient(30deg, transparent 83%, #ffefd6 90%),
linear-gradient(in oklch 30deg, #e8f3ff 0%, #c0e2ff 40%, #e9ffff 82%, #e0fff0 92%);
/* Cover background for mobile */
--cover-bg-w: calc(min((3200 / 620) * 100vw, (3200 / 1080) * 100vh));
@@ -191,12 +184,9 @@
}
:root.dark {
--bg-grad: linear-gradient(30deg,
#000000 0%,
#131d49 52%,
#3f5598 65%,
#c3faff 85%,
#fff6e0 90%);
--bg-grad:
linear-gradient(30deg, transparent 87%, #fff6e0 92%),
linear-gradient(in oklch 30deg, #000000 0%, #131d49 52%, #3f5598 65%, #c3faff 85%, #e0fff0 92%);
}
}