aboutsummaryrefslogtreecommitdiff
path: root/demo/index.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--demo/index.html279
1 files changed, 195 insertions, 84 deletions
diff --git a/demo/index.html b/demo/index.html
index e71570f..14fd9f3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,7 @@
<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(95.57% 0.003 286.35)"/>
+ <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."/>
@@ -25,7 +25,7 @@
<link rel="icon" href="./favicon.svg"/>
<link href="./asset/style/uchu.css" rel="stylesheet"/>
- <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/>
+ <link href="./asset/style/shared.css?v=2026.06.04" rel="stylesheet"/>
<style>
body {
@@ -316,7 +316,7 @@
}
}
- &:not(:first-of-type) {
+ &:nth-child(2) {
color: var(--uchu-pink-9);
&:not(:hover) {
@@ -327,6 +327,31 @@
background-color: var(--uchu-pink-2);
}
}
+
+ &:nth-child(3) {
+ 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);
+ }
+ }
+
+ &:nth-child(4) {
+ 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);
+ }
+ }
}
}
@@ -845,6 +870,86 @@
.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>
@@ -877,12 +982,14 @@
<nav class="links">
<a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
<a class="link" href="./simple.html">Simple Palette</a>
+ <a class="link" href="./pastel.html">Pastel 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(95.57% 0.003 286.35)</p>
+ <p>oklch(0.9557 0.003 286.35)</p>
<h2><span>var(</span>--uchu-gray-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -890,49 +997,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(92.04% 0.002 197.12)</p>
+ <p>oklch(0.9204 0.002 197.12)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(88.28% 0.003 286.34)</p>
+ <p>oklch(0.8828 0.003 286.34)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(84.68% 0.002 197.12)</p>
+ <p>oklch(0.8468 0.002 197.12)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(80.73% 0.002 247.84)</p>
+ <p>oklch(0.8073 0.002 247.84)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(75.03% 0.002 247.85)</p>
+ <p>oklch(0.7503 0.002 247.85)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(69.01% 0.003 286.32)</p>
+ <p>oklch(0.6901 0.003 286.32)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(63.12% 0.004 219.55)</p>
+ <p>oklch(0.6312 0.004 219.55)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(56.82% 0.004 247.89)</p>
+ <p>oklch(0.5682 0.004 247.89)</p>
</li>
</ul>
</section>
<section class="red" id="uchu_red">
<div class="info">
- <p>oklch(88.98% 0.052 3.28)</p>
+ <p>oklch(0.8898 0.052 3.28)</p>
<h2><span>var(</span>--uchu-red-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -940,49 +1047,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(78.78% 0.109 4.54)</p>
+ <p>oklch(0.7878 0.109 4.54)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(69.86% 0.162 7.82)</p>
+ <p>oklch(0.6986 0.162 7.82)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(62.73% 0.209 12.37)</p>
+ <p>oklch(0.6273 0.209 12.37)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(58.63% 0.231 19.6)</p>
+ <p>oklch(0.5863 0.231 19.6)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(54.41% 0.214 19.06)</p>
+ <p>oklch(0.5441 0.214 19.06)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(49.95% 0.195 18.34)</p>
+ <p>oklch(0.4995 0.195 18.34)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(45.8% 0.177 17.7)</p>
+ <p>oklch(0.458 0.177 17.7)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(41.17% 0.157 16.58)</p>
+ <p>oklch(0.4117 0.157 16.58)</p>
</li>
</ul>
</section>
<section class="pink" id="uchu_pink">
<div class="info">
- <p>oklch(95.8% 0.023 354.27)</p>
+ <p>oklch(0.958 0.023 354.27)</p>
<h2><span>var(</span>--uchu-pink-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -990,49 +1097,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(92.14% 0.046 352.31)</p>
+ <p>oklch(0.9214 0.046 352.31)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(88.9% 0.066 354.39)</p>
+ <p>oklch(0.889 0.066 354.39)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(85.43% 0.09 354.1)</p>
+ <p>oklch(0.8543 0.09 354.1)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(82.23% 0.112 355.33)</p>
+ <p>oklch(0.8223 0.112 355.33)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(76.37% 0.101 355.37)</p>
+ <p>oklch(0.7637 0.101 355.37)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(70.23% 0.092 354.96)</p>
+ <p>oklch(0.7023 0.092 354.96)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(64.11% 0.084 353.91)</p>
+ <p>oklch(0.6411 0.084 353.91)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(57.68% 0.074 353.14)</p>
+ <p>oklch(0.5768 0.074 353.14)</p>
</li>
</ul>
</section>
<section class="purple" id="uchu_purple">
<div class="info">
- <p>oklch(89.1% 0.046 305.24)</p>
+ <p>oklch(0.891 0.046 305.24)</p>
<h2><span>var(</span>--uchu-purple-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1040,49 +1147,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(78.68% 0.091 305)</p>
+ <p>oklch(0.7868 0.091 305)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(68.5% 0.136 303.78)</p>
+ <p>oklch(0.685 0.136 303.78)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(58.47% 0.181 302.06)</p>
+ <p>oklch(0.5847 0.181 302.06)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(49.39% 0.215 298.31)</p>
+ <p>oklch(0.4939 0.215 298.31)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(46.11% 0.198 298.4)</p>
+ <p>oklch(0.4611 0.198 298.4)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(42.77% 0.181 298.49)</p>
+ <p>oklch(0.4277 0.181 298.49)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(39.46% 0.164 298.29)</p>
+ <p>oklch(0.3946 0.164 298.29)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(36.01% 0.145 298.35)</p>
+ <p>oklch(0.3601 0.145 298.35)</p>
</li>
</ul>
</section>
<section class="blue" id="uchu_blue">
<div class="info">
- <p>oklch(89.66% 0.046 260.67)</p>
+ <p>oklch(0.8966 0.046 260.67)</p>
<h2><span>var(</span>--uchu-blue-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1090,49 +1197,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(80.17% 0.091 258.88)</p>
+ <p>oklch(0.8017 0.091 258.88)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(70.94% 0.136 258.06)</p>
+ <p>oklch(0.7094 0.136 258.06)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(62.39% 0.181 258.33)</p>
+ <p>oklch(0.6239 0.181 258.33)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(54.87% 0.222 260.33)</p>
+ <p>oklch(0.5487 0.222 260.33)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(51.15% 0.204 260.17)</p>
+ <p>oklch(0.5115 0.204 260.17)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(47.36% 0.185 259.89)</p>
+ <p>oklch(0.4736 0.185 259.89)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(43.48% 0.17 260.2)</p>
+ <p>oklch(0.4348 0.17 260.2)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(39.53% 0.15 259.87)</p>
+ <p>oklch(0.3953 0.15 259.87)</p>
</li>
</ul>
</section>
<section class="green" id="uchu_green">
<div class="info">
- <p>oklch(93.96% 0.05 148.74)</p>
+ <p>oklch(0.9396 0.05 148.74)</p>
<h2><span>var(</span>--uchu-green-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1140,49 +1247,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(88.77% 0.096 147.71)</p>
+ <p>oklch(0.8877 0.096 147.71)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(83.74% 0.139 146.57)</p>
+ <p>oklch(0.8374 0.139 146.57)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(79.33% 0.179 145.62)</p>
+ <p>oklch(0.7933 0.179 145.62)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(75.23% 0.209 144.64)</p>
+ <p>oklch(0.7523 0.209 144.64)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(70.03% 0.194 144.71)</p>
+ <p>oklch(0.7003 0.194 144.71)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(64.24% 0.175 144.92)</p>
+ <p>oklch(0.6424 0.175 144.92)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(58.83% 0.158 145.05)</p>
+ <p>oklch(0.5883 0.158 145.05)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(52.77% 0.138 145.41)</p>
+ <p>oklch(0.5277 0.138 145.41)</p>
</li>
</ul>
</section>
<section class="yellow" id="uchu_yellow">
<div class="info">
- <p>oklch(97.05% 0.039 91.2)</p>
+ <p>oklch(0.9705 0.039 91.2)</p>
<h2><span>var(</span>--uchu-yellow-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1190,49 +1297,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(95% 0.07 92.39)</p>
+ <p>oklch(0.95 0.07 92.39)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(92.76% 0.098 92.58)</p>
+ <p>oklch(0.9276 0.098 92.58)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(90.92% 0.125 92.56)</p>
+ <p>oklch(0.9092 0.125 92.56)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(89% 0.146 91.5)</p>
+ <p>oklch(0.89 0.146 91.5)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(82.39% 0.133 91.5)</p>
+ <p>oklch(0.8239 0.133 91.5)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(75.84% 0.122 92.21)</p>
+ <p>oklch(0.7584 0.122 92.21)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(69.14% 0.109 91.04)</p>
+ <p>oklch(0.6914 0.109 91.04)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(62.29% 0.097 91.9)</p>
+ <p>oklch(0.6229 0.097 91.9)</p>
</li>
</ul>
</section>
<section class="orange" id="uchu_orange">
<div class="info">
- <p>oklch(93.83% 0.037 56.93)</p>
+ <p>oklch(0.9383 0.037 56.93)</p>
<h2><span>var(</span>--uchu-orange-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1240,49 +1347,49 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(88.37% 0.072 55.8)</p>
+ <p>oklch(0.8837 0.072 55.8)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(83.56% 0.107 56.49)</p>
+ <p>oklch(0.8356 0.107 56.49)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(78.75% 0.141 54.32)</p>
+ <p>oklch(0.7875 0.141 54.32)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(74.61% 0.171 51.56)</p>
+ <p>oklch(0.7461 0.171 51.56)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(69.33% 0.157 52.18)</p>
+ <p>oklch(0.6933 0.157 52.18)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(63.8% 0.142 52.1)</p>
+ <p>oklch(0.638 0.142 52.1)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(58.28% 0.128 52.2)</p>
+ <p>oklch(0.5828 0.128 52.2)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(52.49% 0.113 51.98)</p>
+ <p>oklch(0.5249 0.113 51.98)</p>
</li>
</ul>
</section>
<section class="yin" id="uchu_yin">
<div class="info">
- <p>oklch(91.87% 0.003 264.54)</p>
+ <p>oklch(0.9187 0.003 264.54)</p>
<h2><span>var(</span>--uchu-yin-<span>#)</span></h2>
<h3>1</h3>
</div>
@@ -1290,42 +1397,42 @@
<ul class="swatches">
<li class="swatch">
<h3>2</h3>
- <p>oklch(84.61% 0.004 286.31)</p>
+ <p>oklch(0.8461 0.004 286.31)</p>
</li>
<li class="swatch">
<h3>3</h3>
- <p>oklch(76.89% 0.004 247.87)</p>
+ <p>oklch(0.7689 0.004 247.87)</p>
</li>
<li class="swatch">
<h3>4</h3>
- <p>oklch(69.17% 0.004 247.88)</p>
+ <p>oklch(0.6917 0.004 247.88)</p>
</li>
<li class="swatch">
<h3>5</h3>
- <p>oklch(61.01% 0.005 271.34)</p>
+ <p>oklch(0.6101 0.005 271.34)</p>
</li>
<li class="swatch">
<h3>6</h3>
- <p>oklch(52.79% 0.005 271.32)</p>
+ <p>oklch(0.5279 0.005 271.32)</p>
</li>
<li class="swatch">
<h3>7</h3>
- <p>oklch(43.87% 0.005 271.3)</p>
+ <p>oklch(0.4387 0.005 271.3)</p>
</li>
<li class="swatch">
<h3>8</h3>
- <p>oklch(35.02% 0.005 236.66)</p>
+ <p>oklch(0.3502 0.005 236.66)</p>
</li>
<li class="swatch">
<h3>9</h3>
- <p>oklch(25.11% 0.006 258.36)</p>
+ <p>oklch(0.2511 0.006 258.36)</p>
</li>
</ul>
</section>
@@ -1334,6 +1441,10 @@
<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;