adds dsgn. banner

- updates broken CSS link

1 files changed, 85 insertions, 2 deletions

diff --git a/index.html b/index.html
index 66b4ba9..58416f9 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
     <link rel="mask-icon" href="favicon.svg" color="#111"/>
     <link rel="shortcut icon" href="favicon.svg"/>
 
-    <link href="https://uchu.style/color_expanded.css" rel="stylesheet"/>
+    <link href="https://uchu.style/uchu.css" rel="stylesheet"/>
 
     <style>
       *, *::before, *::after {
@@ -347,6 +347,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;
+        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>
@@ -589,9 +668,13 @@ YYYY.MM.DD[.CHANGESET][-FEATURE|-break]
     <footer>
       <a href="https://jsr.io/@chronver/chronver?ref=chronver.org" target="_blank">JSR</a> &bull;
       <a href="https://creativecommons.org/licenses/by/4.0?ref=chronver.org" target="_blank">Creative Commons ― CC BY 4.0</a> &bull;
-      <a href="https://github.com/ChronVer/chronver?ref=chronver.org" target="_blank">Github</a>
+      <a href="https://code.webb.page/chronver/chronver.git/about?ref=chronver.org" target="_blank">Code</a>
     </footer>
 
+    <aside class="dsgn">
+      <div class="undershirt">site by <a href="https://dsgn.inc.sh?ref=chronver.org" title="design services for the good natured">dsgn.</a></div>
+    </aside>
+
     <script>
       Array.from(document.querySelectorAll(".today")).map(element => { element.innerText = version; });
       document.querySelector(".today_fancy").innerText = formatDateWithOrdinal(now);