From 88bb97ec7db1dbcef383931ef8b47e01034d7827 Mon Sep 17 00:00:00 2001
From: "netop://ウィビ" <paul@webb.page>
Date: Thu, 4 Jun 2026 19:54:03 -0700
Subject: 3.0 update - adds pastel palette - updates color syntax - updates
 docs - adds dsgn. banner

---
 demo/simple.html | 172 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 142 insertions(+), 30 deletions(-)

(limited to 'demo/simple.html')

diff --git a/demo/simple.html b/demo/simple.html
index e1d95f1..e475417 100644
--- a/demo/simple.html
+++ b/demo/simple.html
@@ -25,7 +25,7 @@
     <link rel="icon" href="./favicon.svg"/>
 
     <link href="./asset/style/uchu-reduced.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 {
@@ -166,7 +166,7 @@
                 }
               }
 
-              &:not(:first-of-type) {
+              &:nth-child(2) {
                 color: var(--uchu-dark-pink);
 
                 &:not(:hover) {
@@ -177,6 +177,31 @@
                   background-color: var(--uchu-light-pink);
                 }
               }
+
+              &: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-light-yin);
+                color: var(--uchu-yin);
+
+                &:not(:hover) {
+                  background-color: var(--uchu-yang);
+                }
+
+                &:hover {
+                  background-color: var(--uchu-light-yin);
+                }
+              }
             }
           }
 
@@ -371,6 +396,87 @@
       .notify {
         background-color: var(--uchu-yin);
       }
+
+      .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), var(--uchu-blue), var(--uchu-red), var(--uchu-purple));
+         	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: var(--uchu-yang);
+          left: 0;
+          opacity: 0.1;
+        }
+
+        &::after {
+          width: 5ch; height: 100%;
+
+          background-color: var(--uchu-light-gray);
+          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>
@@ -402,177 +508,179 @@
 
       <nav class="links">
         <a class="link" href="https://code.webb.page/nevercease/uchu.git/about/" target="_blank">Repo</a>
-        <a class="link" href="./index.html">Expanded Palette</a>
+        <a class="link" href="/">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-light-gray<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-gray<span>)</span></h3>
-          <p>oklch(84.68% 0.002 197.12)</p>
+          <p>oklch(0.8468 0.002 197.12)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3>
-          <p>oklch(63.12% 0.004 219.55)</p>
+          <p>oklch(0.6312 0.004 219.55)</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-light-red<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-red<span>)</span></h3>
-          <p>oklch(62.73% 0.209 12.37)</p>
+          <p>oklch(0.6273 0.209 12.37)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-red<span>)</span></h3>
-          <p>oklch(45.8% 0.177 17.7)</p>
+          <p>oklch(0.458 0.177 17.7)</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-light-pink<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-pink<span>)</span></h3>
-          <p>oklch(85.43% 0.09 354.1)</p>
+          <p>oklch(0.8543 0.09 354.1)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3>
-          <p>oklch(64.11% 0.084 353.91)</p>
+          <p>oklch(0.6411 0.084 353.91)</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-light-purple<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-purple<span>)</span></h3>
-          <p>oklch(58.47% 0.181 302.06)</p>
+          <p>oklch(0.5847 0.181 302.06)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3>
-          <p>oklch(39.46% 0.164 298.29)</p>
+          <p>oklch(0.3946 0.164 298.29)</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-light-blue<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-blue<span>)</span></h3>
-          <p>oklch(62.39% 0.181 258.33)</p>
+          <p>oklch(0.6239 0.181 258.33)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3>
-          <p>oklch(43.48% 0.17 260.2)</p>
+          <p>oklch(0.4348 0.17 260.2)</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-light-green<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-green<span>)</span></h3>
-          <p>oklch(79.33% 0.179 145.62)</p>
+          <p>oklch(0.7933 0.179 145.62)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-green<span>)</span></h3>
-          <p>oklch(58.83% 0.158 145.05)</p>
+          <p>oklch(0.5883 0.158 145.05)</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-light-yellow<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-yellow<span>)</span></h3>
-          <p>oklch(90.92% 0.125 92.56)</p>
+          <p>oklch(0.9092 0.125 92.56)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3>
-          <p>oklch(69.14% 0.109 91.04)</p>
+          <p>oklch(0.6914 0.109 91.04)</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-light-orange<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-orange<span>)</span></h3>
-          <p>oklch(78.75% 0.141 54.32)</p>
+          <p>oklch(0.7875 0.141 54.32)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3>
-          <p>oklch(58.28% 0.128 52.2)</p>
+          <p>oklch(0.5828 0.128 52.2)</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-light-yin<span>)</span></h2>
       </div>
 
       <ul class="swatches">
         <li class="swatch">
           <h3><span>var(</span>--uchu-yin<span>)</span></h3>
-          <p>oklch(14.38% 0.007 256.88)</p>
+          <p>oklch(0.1438 0.007 256.88)</p>
         </li>
 
         <li class="swatch">
           <h3><span>var(</span>--uchu-yang<span>)</span></h3>
-          <p>oklch(99.4% 0 0)</p>
+          <p>oklch(0.994 0 0)</p>
         </li>
       </ul>
     </section>
@@ -581,6 +689,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;
-- 
cgit v1.2.3