aboutsummaryrefslogtreecommitdiff
path: root/demo/pastel.html
diff options
context:
space:
mode:
Diffstat (limited to 'demo/pastel.html')
-rw-r--r--demo/pastel.html1471
1 files changed, 1471 insertions, 0 deletions
diff --git a/demo/pastel.html b/demo/pastel.html
new file mode 100644
index 0000000..a26e6d4
--- /dev/null
+++ b/demo/pastel.html
@@ -0,0 +1,1471 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+
+ <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta name="referrer" content="strict-origin"/>
+ <meta name="theme-color" content="oklch(0.9557 0.003 286.35)"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+ <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/>
+ <meta property="og:image:height" content="600"/>
+ <meta property="og:image:secure_url" content="./asset/image/og.png"/>
+ <meta property="og:image:type" content="image/png"/>
+ <meta property="og:image:width" content="1200"/>
+ <meta property="og:locale" content="en_US"/>
+ <meta property="og:site_name" content="uchū"/>
+ <meta property="og:title" content="uchū — the color palette for internet lovers"/>
+ <meta property="og:type" content="website"/>
+ <meta property="og:url" content="https://uchu.style"/>
+
+ <title>uchū demo &middot; pastel palette</title>
+
+ <link rel="canonical" href="https://uchu.style"/>
+ <link rel="icon" href="./favicon.svg"/>
+
+ <link href="./asset/style/uchu-pastel.css" rel="stylesheet"/>
+ <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
+
+ <style>
+ body {
+ background-color: var(--uchu-yang);
+ color: var(--uchu-yin-9);
+ }
+
+ section {
+ a {
+ &:not([class]) {
+ &:not(:hover):not(:visited) {
+ color: var(--uchu-blue-5);
+ }
+
+ &:not(:visited):hover {
+ color: var(--uchu-pink-5);
+ }
+
+ &:not(:hover):visited {
+ color: var(--uchu-purple-4);
+ }
+
+ &:hover:visited {
+ color: var(--uchu-blue-5);
+ }
+ }
+ }
+
+ .swatches {
+ .swatch {
+ width: calc(100% / 8);
+
+ h3 {
+ padding: 0 1rem 1rem 0;
+ }
+ }
+ }
+
+ &.blue {
+ .info {
+ background-color: var(--uchu-blue-1);
+ color: var(--uchu-blue-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-blue-2);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-blue-3);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-blue-4);
+ color: var(--uchu-blue-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-blue-5);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-blue-6);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-blue-7);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-blue-8);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-blue-9);
+ color: var(--uchu-blue-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-blue-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.gray {
+ .info {
+ background-color: var(--uchu-gray-1);
+ color: var(--uchu-gray-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-gray-2);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-gray-3);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-gray-4);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-gray-5);
+ color: var(--uchu-gray-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-gray-6);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-gray-7);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-gray-8);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-gray-9);
+ color: var(--uchu-gray-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-gray-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.green {
+ .info {
+ background-color: var(--uchu-green-1);
+ color: var(--uchu-green-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-green-2);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-green-3);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-green-4);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-green-5);
+ color: var(--uchu-green-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-green-6);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-green-7);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-green-8);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-green-9);
+ color: var(--uchu-green-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-green-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.intro {
+ .links {
+ .link {
+ &:first-of-type {
+ color: var(--uchu-yang);
+
+ &:not(:hover) {
+ background-color: var(--uchu-yin);
+ }
+
+ &:hover {
+ background-color: var(--uchu-yin-8);
+ }
+ }
+
+ &:nth-child(2) {
+ color: oklch(0.5768 0.074 353.14);
+
+ &:not(:hover) {
+ background-color: oklch(0.889 0.066 354.39);
+ }
+
+ &:hover {
+ background-color: oklch(0.9214 0.046 352.31);
+ }
+ }
+
+ &:nth-child(3) {
+ border: 1px solid var(--uchu-yin-1);
+ color: var(--uchu-yin-7);
+
+ &:not(:hover) {
+ background-color: var(--uchu-yang);
+ }
+
+ &:hover {
+ background-color: var(--uchu-yin-1);
+ }
+ }
+
+ &:nth-child(4) {
+ color: oklch(0.58 0.04 353);
+
+ &:not(:hover) {
+ background-color: oklch(0.89 0.036 355);
+ }
+
+ &:hover {
+ background-color: oklch(0.92 0.028 351);
+ }
+ }
+ }
+ }
+
+ .palette {
+ a {
+ &.blue {
+ background-color: var(--uchu-blue-4);
+ }
+
+ &.gray {
+ background-color: var(--uchu-gray-4);
+ }
+
+ &.green {
+ background-color: var(--uchu-green-4);
+ }
+
+ &.orange {
+ background-color: var(--uchu-orange-4);
+ }
+
+ &.pink {
+ background-color: var(--uchu-pink-4);
+ }
+
+ &.purple {
+ background-color: var(--uchu-purple-4);
+ }
+
+ &.red {
+ background-color: var(--uchu-red-4);
+ }
+
+ &.yellow {
+ background-color: var(--uchu-yellow-4);
+ }
+ }
+ }
+ }
+
+ &.orange {
+ .info {
+ background-color: var(--uchu-orange-1);
+ color: var(--uchu-orange-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-orange-2);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-orange-3);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-orange-4);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-orange-5);
+ color: var(--uchu-orange-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-orange-6);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-orange-7);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-orange-8);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-orange-9);
+ color: var(--uchu-orange-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-orange-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.pink {
+ .info {
+ background-color: var(--uchu-pink-1);
+ color: var(--uchu-pink-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-pink-2);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-pink-3);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-pink-4);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-pink-5);
+ color: var(--uchu-pink-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-pink-6);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-pink-7);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-pink-8);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-pink-9);
+ color: var(--uchu-pink-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-pink-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.purple {
+ .info {
+ background-color: var(--uchu-purple-1);
+ color: var(--uchu-purple-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-purple-2);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-purple-3);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-purple-4);
+ color: var(--uchu-purple-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-purple-5);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-purple-6);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-purple-7);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-purple-8);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-purple-9);
+ color: var(--uchu-purple-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-purple-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.red {
+ .info {
+ background-color: var(--uchu-red-1);
+ color: var(--uchu-red-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-red-2);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-red-3);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-red-4);
+ color: var(--uchu-red-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-red-5);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-red-6);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-red-7);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-red-8);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-red-9);
+ color: var(--uchu-red-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-red-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yellow {
+ .info {
+ background-color: var(--uchu-yellow-1);
+ color: var(--uchu-yellow-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yellow-2);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-yellow-3);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-yellow-4);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-yellow-5);
+ color: var(--uchu-yellow-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-yellow-6);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-yellow-7);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-yellow-8);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-yellow-9);
+ color: var(--uchu-yellow-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yellow-9) 0%, transparent 100%);
+ }
+ }
+ }
+
+ &.yin {
+ .info {
+ background-color: var(--uchu-yin-1);
+ color: var(--uchu-yin-9);
+ }
+
+ .swatch:nth-child(1) {
+ background-color: var(--uchu-yin-2);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(2) {
+ background-color: var(--uchu-yin-3);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-3) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(3) {
+ background-color: var(--uchu-yin-4);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-4) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(4) {
+ background-color: var(--uchu-yin-5);
+ color: var(--uchu-yin-9);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-5) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(5) {
+ background-color: var(--uchu-yin-6);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-6) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(6) {
+ background-color: var(--uchu-yin-7);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-7) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(7) {
+ background-color: var(--uchu-yin-8);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-8) 0%, transparent 100%);
+ }
+ }
+
+ .swatch:nth-child(8) {
+ background-color: var(--uchu-yin-9);
+ color: var(--uchu-yin-1);
+
+ p::after {
+ background-image: linear-gradient(to top, var(--uchu-yin-9) 0%, transparent 100%);
+ }
+ }
+ }
+ }
+
+ .notify {
+ background-color: oklch(var(--uchu-yin-9-raw) / 85%);
+ }
+
+ .dsgn {
+ background-color: var(--uchu-yin);
+ color: var(--uchu-yang);
+ cursor: default;
+ font-family: monospace;
+ font-size: 12px;
+ letter-spacing: 0.025rem;
+ line-height: 1;
+ overflow: hidden;
+ padding: 0.5ch 2ch;
+ padding-top: 0.5ch;
+ position: relative;
+ text-transform: lowercase;
+
+ &:hover {
+ animation: gradient 15s ease infinite;
+ background-image: linear-gradient(45deg, var(--uchu-pink-4), var(--uchu-blue-4), var(--uchu-red-4), var(--uchu-purple-4));
+ background-size: 400% 400%;
+
+ &::after {
+ animation: 1s ease-in-out hover-dsgn;
+ }
+ }
+
+ &::before,
+ &::after {
+ content: "";
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ }
+
+ &::before {
+ width: 100%; height: 1px;
+
+ background-color: oklch(var(--uchu-yang-raw) / 10%);
+ left: 0;
+ }
+
+ &::after {
+ width: 5ch; height: 100%;
+
+ background-color: var(--uchu-gray-1);
+ left: -10ch;
+ opacity: 0.3;
+ transform: skew(40deg, 0deg) translateX(-3vw);
+ }
+
+ a {
+ color: inherit;
+ font-weight: 600;
+ text-decoration: underline;
+ }
+ }
+
+ @keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+ }
+
+ @keyframes hover-dsgn {
+ 0% {
+ transform: skew(40deg, 0deg) translateX(-3vw);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: skew(40deg, 0deg) translateX(103vw);
+ }
+ }
+ </style>
+
+ <script src="./asset/script/shared.js"></script>
+ </head>
+
+ <body>
+ <audio id="speak" preload>
+ <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /-->
+ <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/>
+ <source src="./asset/audio/pronounciation.wav" type="audio/wav"/>
+ <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/>
+ </audio>
+
+ <section class="intro">
+ <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1>
+
+ <nav class="palette">
+ <a class="gray" href="#uchu_gray"></a>
+ <a class="red" href="#uchu_red"></a>
+ <a class="pink" href="#uchu_pink"></a>
+ <a class="purple" href="#uchu_purple"></a>
+ <a class="blue" href="#uchu_blue"></a>
+ <a class="green" href="#uchu_green"></a>
+ <a class="yellow" href="#uchu_yellow"></a>
+ <a class="orange" href="#uchu_orange"></a>
+ </nav>
+
+ <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p>
+
+ <nav class="links">
+ <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
+ <a class="link" href="/">Expanded Palette</a>
+ <a class="link" href="./simple.html">Simple Palette</a>
+ <a class="link" href="./pastel-simple.html">Simple Pastel Palette</a>
+ </nav>
+ </section>
+
+ <section class="gray" id="uchu_gray">
+ <div class="info">
+ <p>oklch(0.9557 0.003 286.35)</p>
+ <h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.9204 0.002 197.12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.8828 0.003 286.34)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.8468 0.002 197.12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.8073 0.002 247.84)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.7503 0.002 247.85)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.6901 0.003 286.32)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.6312 0.004 219.55)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.5682 0.004 247.89)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="red" id="uchu_red">
+ <div class="info">
+ <p>oklch(0.89 0.032 2)</p>
+ <h2><span>var(</span>--uchu-red-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.78 0.06 3)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.68 0.088 5)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.59 0.12 8)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.52 0.136 14)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.49 0.128 13)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.45 0.116 13)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.41 0.104 12)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.37 0.092 11)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="pink" id="uchu_pink">
+ <div class="info">
+ <p>oklch(0.96 0.016 353)</p>
+ <h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.92 0.028 351)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.89 0.036 355)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.85 0.048 353)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.82 0.06 354)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.76 0.056 354)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.7 0.048 355)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.64 0.044 354)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.58 0.04 353)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="purple" id="uchu_purple">
+ <div class="info">
+ <p>oklch(0.89 0.028 304)</p>
+ <h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.79 0.052 307)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.68 0.072 305)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.57 0.1 304)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.46 0.128 303)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.43 0.116 303)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.4 0.108 302)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.37 0.1 303)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.34 0.084 302)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="blue" id="uchu_blue">
+ <div class="info">
+ <p>oklch(0.9 0.028 261)</p>
+ <h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.8 0.048 260)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.7 0.072 259)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.6 0.096 259)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.51 0.124 262)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.48 0.112 261)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.44 0.1 261)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.41 0.096 262)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.37 0.084 261)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="green" id="uchu_green">
+ <div class="info">
+ <p>oklch(0.94 0.032 149)</p>
+ <h2><span>var(</span>--uchu-green-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.88 0.056 148)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.83 0.076 147)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.78 0.1 146)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.73 0.116 145)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.68 0.108 145)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.63 0.1 145)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.57 0.088 146)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.51 0.08 146)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yellow" id="uchu_yellow">
+ <div class="info">
+ <p>oklch(0.97 0.024 94)</p>
+ <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.95 0.036 92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.92 0.052 92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.9 0.068 91)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.88 0.084 92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.82 0.076 92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.75 0.068 92)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.69 0.064 91)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.62 0.056 90)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="orange" id="uchu_orange">
+ <div class="info">
+ <p>oklch(0.94 0.02 55)</p>
+ <h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.88 0.04 56)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.83 0.056 57)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.78 0.076 55)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.73 0.092 53)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.68 0.084 54)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.62 0.076 54)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.57 0.068 54)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.51 0.06 53)</p>
+ </li>
+ </ul>
+ </section>
+
+ <section class="yin" id="uchu_yin">
+ <div class="info">
+ <p>oklch(0.9187 0.003 264.54)</p>
+ <h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
+ <h3>1</h3>
+ </div>
+
+ <ul class="swatches">
+ <li class="swatch">
+ <h3>2</h3>
+ <p>oklch(0.8461 0.004 286.31)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>3</h3>
+ <p>oklch(0.7689 0.004 247.87)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>4</h3>
+ <p>oklch(0.6917 0.004 247.88)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>5</h3>
+ <p>oklch(0.6101 0.005 271.34)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>6</h3>
+ <p>oklch(0.5279 0.005 271.32)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>7</h3>
+ <p>oklch(0.4387 0.005 271.3)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>8</h3>
+ <p>oklch(0.3502 0.005 236.66)</p>
+ </li>
+
+ <li class="swatch">
+ <h3>9</h3>
+ <p>oklch(0.2511 0.006 258.36)</p>
+ </li>
+ </ul>
+ </section>
+
+ <aside class="notify">
+ <p>Color value added to clipboard</p>
+ </aside>
+
+ <aside class="dsgn">
+ <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=uchu.style" title="design services for the good natured">dsgn.</a></div>
+ </aside>
+
+ <script>
+ const swatches = document.querySelectorAll([".info", ".swatch"]);
+ let notifierTimeout;
+
+ swatches.forEach(swatch => {
+ swatch.addEventListener("click", () => {
+ const colorValue = swatch.getElementsByTagName("p")[0].textContent;
+ const notifier = document.querySelector(".notify");
+
+ notifier.classList.remove("active");
+
+ if (copyTextToClipboard(colorValue)) {
+ clearTimeout(notifierTimeout);
+ notifier.classList.add("active");
+
+ notifierTimeout = setTimeout(() => {
+ notifier.classList.remove("active");
+ }, 1500);
+ }
+ });
+ });
+ </script>
+ </body>
+</html>