June 2024 Updates

.cspell.json

@@ -4,7 +4,21 @@
   "ignorePaths": ["**/*.json", "**/*.css", "node_modules", "**/*.log"],
   "useGitignore": true,
   "language": "en",
-  "words": ["dataurl", "devpool", "outdir", "servedir", "pageview", "Googlebot", "Cascader", "mediump", "fract", "Ubiqui", "frictionlessly", "Unassignment"],
+  "words": [
+    "Cascader",
+    "dataurl",
+    "devpool",
+    "Devs",
+    "fract",
+    "frictionlessly",
+    "Googlebot",
+    "mediump",
+    "outdir",
+    "pageview",
+    "servedir",
+    "Ubiqui",
+    "Unassignment"
+  ],
   "dictionaries": ["typescript", "node", "software-terms"],
   "import": ["@cspell/dict-typescript/cspell-ext.json", "@cspell/dict-node/cspell-ext.json", "@cspell/dict-software-terms"],
   "ignoreRegExpList": ["[0-9a-fA-F]{6}"]

static/code/css/active.css

@@ -55,8 +55,7 @@ body.Active .center > div {
   opacity: 1;
 }
 body.Active #grid-dynamic {
-  /* -webkit-mask-image: radial-gradient(#00000000 0, #00000040 50%, #00000080 100%); */
-  opacity: 1; /* background-color: var(--elu-blu); */
+  opacity: 1;
 }
 body.Active .spin > div.after > div {
   border-width: 2vw;
@@ -88,16 +87,14 @@ body.Active #bytecode.Active {
   display: table-cell;
 }
 body.Active #UI > ul > li {
-  opacity: 1; /* transition: 0.5s opacity ease-in-out; */
+  opacity: 1;
 }
 body.Active #UI > ul > li:nth-child(1) {
   opacity: 1;
 }
 body.Active #UI > ul > li {
   pointer-events: unset;
 }
-/* body.Active #UI > ul > li li:hover { backdrop-filter: blur(8px); } */
-
 h1 > span.Active {
   opacity: 1;
 }
@@ -110,8 +107,9 @@ h1 > span.Active {
   filter: blur(0);
 }
 background > video.Active {
-  opacity: 0.75;
+  opacity: 0.25;
   transition: 1s opacity ease-in-out;
+  filter: grayscale(0.5);
 }
 #Spreads > .Active {
   opacity: 1;

static/code/css/media.css

@@ -4,6 +4,7 @@
     width: 100%;
     max-width: 1280px;
     text-align: center;
+    opacity: 0.25;
   }
   #farm-portrait {
     display: inline-block;
@@ -56,8 +57,11 @@
 }
 
 @media (max-width: 640px) {
+  #Info h1 {
+    padding-bottom: 16px;
+  }
   #Info > header {
-    padding: 10px 8px;
+    padding: 16px 8px;
   }
   #Info {
     text-align: left;

static/code/css/ubq.css

@@ -191,7 +191,6 @@ body .center > div {
 }
 body #Grid {
   position: relative;
-  background-color: var(--elu-blu);
 }
 body #Grid > div {
   position: fixed;
@@ -279,7 +278,6 @@ body.Active #grid-dynamic {
   fill: #0ff;
 }
 #Info > ol {
-  padding: 0 calc(100% / 12);
   text-transform: uppercase;
 }
 #Info > header > h1 {
@@ -291,7 +289,6 @@ body.Active #grid-dynamic {
   color: #ffffffbf;
 }
 #Info > header > aside {
-  text-align: center;
   font-size: 12px;
   letter-spacing: 0.25px;
   line-height: 1.25;
@@ -301,6 +298,7 @@ body.Active #grid-dynamic {
   overflow: hidden;
   padding: 10px calc(100% / 12);
   background-color: #ffffff10;
+  text-align: center;
 }
 #Info > div > aside > span {
   font-size: 12px;
@@ -405,10 +403,6 @@ body.Active .spin #aP {
   text-align: center;
   cursor: pointer;
 }
-body.Active .spin {
-  width: 66vh;
-  height: 66vh;
-}
 body.Active #Logo {
   animation: logo-ani 0.2s;
   opacity: 1;
@@ -923,12 +917,7 @@ body.social main#Spreads {
 }
 #Intro > article > div {
   max-width: 1280px;
-  /* width: 100%; */
-  /* display: table-cell; */
-  /* vertical-align: middle; */
   text-align: center;
-  /* display: inline-block; */
-  /* padding: 32px; */
 }
 #Intro {
   background-image: url("../../image/grid-25.png");
@@ -1050,11 +1039,13 @@ h2 {
   font-weight: 400;
   text-transform: uppercase;
 }
+#pilot-program a > span::before,
 header > aside::before {
   content: "›› ";
   color: grey;
   margin: 0 2px 0 18px;
 }
+#pilot-program a > span::after,
 header > aside::after {
   content: " ‹‹";
   color: grey;
@@ -1193,8 +1184,74 @@ td {
 #fetch-total-rewards-target {
   padding: 0 16px;
 }
-
 #Spreads > * {
   overflow: hidden;
   width: 100vw;
 }
+background .gradient {
+  background-image: radial-gradient(#00bfff00 0, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
+  animation: background-gradients-fade-in 2s ease-in-out forwards;
+  top: 0;
+  left: 0;
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+}
+background > :nth-child(1) {
+  transform: translateY(-100vh);
+}
+background > :nth-child(2) {
+  transform: translateY(-50vh);
+}
+background {
+  position: unset;
+  display: unset;
+  background-size: unset;
+  background-position: unset;
+  text-align: unset;
+}
+background,
+background #grid {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+background,
+html {
+  background-color: #000410;
+}
+background #grid {
+  pointer-events: none;
+}
+background #grid canvas {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  animation: background-grid-fade-in 2s ease-in-out forwards;
+}
+background .gradient {
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  opacity: 0;
+}
+.grid-loaded background .gradient {
+  background-image: radial-gradient(#00bfff00 0, #00bfffff 15%, #00bfff00 34%, #00bfffff 58%, #00bfff00 75%, #00bfffff 100%);
+  animation: background-gradients-fade-in 2s ease-in-out forwards;
+}
+background > :nth-child(1) {
+  transform: translateX(-100vw);
+}
+background > :nth-child(2) {
+  transform: translateY(-50vh);
+}
+@keyframes background-gradients-fade-in {
+  to {
+    opacity: 0.125;
+  }
+}
+@keyframes background-grid-fade-in {
+  to {
+    opacity: 0.5;
+  }
+}

static/code/js/logo-click.ts

@@ -28,7 +28,7 @@ export async function logoClick() {
     const videos = document.getElementsByTagName("video");
     if (videos) {
       const video = videos[0];
-      video.src = "https://storageapi.fleek.co/2e62e11d-d4be-4c6f-a2bb-b159c83a0d95-bucket/ubq.fi/hero.mp4";
+      video.src = "https://storageapi.fleek.one/2e62e11d-d4be-4c6f-a2bb-b159c83a0d95-bucket/ubq.fi/hero.mp4";
       video.addEventListener("play", function loaded() {
         console.log(`playing`);
         video.className += "Active";