diff options
Diffstat (limited to 'demo/pastel-simple.html')
| -rw-r--r-- | demo/pastel-simple.html | 719 |
1 files changed, 719 insertions, 0 deletions
diff --git a/demo/pastel-simple.html b/demo/pastel-simple.html new file mode 100644 index 0000000..cb5bbae --- /dev/null +++ b/demo/pastel-simple.html @@ -0,0 +1,719 @@ +<!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(95.57% 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 · simple pastel palette</title> + + <link rel="canonical" href="https://uchu.style"/> + <link rel="icon" href="./favicon.svg"/> + + <link href="./asset/style/uchu-pastel-reduced.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); + } + + section { + a { + &:not([class]) { + &:not(:hover):not(:visited) { + color: var(--uchu-blue); + } + + &:not(:visited):hover { + color: var(--uchu-pink); + } + + &:not(:hover):visited { + color: var(--uchu-purple); + } + + &:hover:visited { + color: var(--uchu-blue); + } + } + } + + .swatches { + .swatch { + width: 50%; + + h3 { + padding: 0 2rem 2rem 2rem; + + @media (min-width: 901px) { + font-size: 3vw; + } + + @media (max-width: 900px) { + font-size: 2rem; + } + + span { + opacity: 0.3; + } + } + } + } + + &.blue { + .info { + background-color: var(--uchu-light-blue); + color: var(--uchu-blue); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-blue); + color: var(--uchu-dark-blue); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-blue); + color: var(--uchu-light-blue); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-blue) 0%, transparent 100%); + } + } + } + + &.gray { + .info { + background-color: var(--uchu-light-gray); + color: var(--uchu-dark-gray); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-gray); + color: var(--uchu-dark-gray); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-gray); + color: var(--uchu-light-gray); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-gray) 0%, transparent 100%); + } + } + } + + &.green { + .info { + background-color: var(--uchu-light-green); + color: var(--uchu-dark-green); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-green); + color: var(--uchu-dark-green); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-green); + color: var(--uchu-light-green); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-green) 0%, transparent 100%); + } + } + } + + &.intro { + .links { + .link { + &:first-of-type { + &:not(:hover) { + background-color: var(--uchu-yin); + color: var(--uchu-yang); + } + + &:hover { + background-color: var(--uchu-light-yin); + color: var(--uchu-yin); + } + } + + &:nth-child(2) { + color: var(--uchu-dark-pink); + + &:not(:hover) { + background-color: var(--uchu-pink); + } + + &:hover { + 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); + } + } + } + } + + .palette { + a { + &.blue { + background-color: var(--uchu-blue); + } + + &.gray { + background-color: var(--uchu-gray); + } + + &.green { + background-color: var(--uchu-green); + } + + &.orange { + background-color: var(--uchu-orange); + } + + &.pink { + background-color: var(--uchu-pink); + } + + &.purple { + background-color: var(--uchu-purple); + } + + &.red { + background-color: var(--uchu-red); + } + + &.yellow { + background-color: var(--uchu-yellow); + } + } + } + } + + &.orange { + .info { + background-color: var(--uchu-light-orange); + color: var(--uchu-dark-orange); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-orange); + color: var(--uchu-dark-orange); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-orange); + color: var(--uchu-light-orange); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-orange) 0%, transparent 100%); + } + } + } + + &.pink { + .info { + background-color: var(--uchu-light-pink); + color: var(--uchu-dark-pink); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-pink); + color: var(--uchu-dark-pink); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-pink); + color: var(--uchu-light-pink); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-pink) 0%, transparent 100%); + } + } + } + + &.purple { + .info { + background-color: var(--uchu-light-purple); + color: var(--uchu-dark-purple); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-purple); + color: var(--uchu-dark-purple); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-purple); + color: var(--uchu-light-purple); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-purple) 0%, transparent 100%); + } + } + } + + &.red { + .info { + background-color: var(--uchu-light-red); + color: var(--uchu-dark-red); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-red); + color: var(--uchu-dark-red); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-red); + color: var(--uchu-light-red); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-red) 0%, transparent 100%); + } + } + } + + &.yellow { + .info { + background-color: var(--uchu-light-yellow); + color: var(--uchu-dark-yellow); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yellow); + color: var(--uchu-dark-yellow); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-yellow); + color: var(--uchu-light-yellow); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-yellow) 0%, transparent 100%); + } + } + } + + &.yin { + .info { + background-color: var(--uchu-light-yin); + color: var(--uchu-yin); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yin); + color: var(--uchu-light-yin); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-yang); + color: var(--uchu-yin); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yang) 0%, transparent 100%); + } + } + } + } + + .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> + </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.html">Pastel Palette</a> + </nav> + </section> + + <section class="gray" id="uchu_gray"> + <div class="info"> + <p>oklch(0.96 0.004 287)</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(0.85 0.004 195)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3> + <p>oklch(0.63 0.004 215)</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-light-red<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-red<span>)</span></h3> + <p>oklch(0.59 0.12 8)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-red<span>)</span></h3> + <p>oklch(0.41 0.104 12)</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-light-pink<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-pink<span>)</span></h3> + <p>oklch(0.85 0.048 353)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3> + <p>oklch(0.64 0.044 354)</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-light-purple<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-purple<span>)</span></h3> + <p>oklch(0.57 0.1 304)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3> + <p>oklch(0.37 0.1 303)</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-light-blue<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-blue<span>)</span></h3> + <p>oklch(0.6 0.096 259)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3> + <p>oklch(0.41 0.096 262)</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-light-green<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-green<span>)</span></h3> + <p>oklch(0.78 0.1 146)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-green<span>)</span></h3> + <p>oklch(0.57 0.088 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-light-yellow<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-yellow<span>)</span></h3> + <p>oklch(0.9 0.068 91)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3> + <p>oklch(0.69 0.064 91)</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-light-orange<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-orange<span>)</span></h3> + <p>oklch(0.78 0.076 55)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3> + <p>oklch(0.57 0.068 54)</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-light-yin<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-yin<span>)</span></h3> + <p>oklch(0.1438 0.007 256.88)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-yang<span>)</span></h3> + <p>oklch(0.994 0 0)</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> |