chore: added lighter blue gradient background

ubiquity · Jun 24, 2024 · 10c72a9 · 10c72a9
1 parent 2a1ef87
commit 10c72a9
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 11 deletions.
diff --git a/static/code/css/active.css b/static/code/css/active.css
@@ -110,8 +110,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;

diff --git a/static/code/css/ubq.css b/static/code/css/ubq.css
@@ -191,7 +191,7 @@ body .center > div {
 }
 body #Grid {
   position: relative;
-  background-color: var(--elu-blu);
+  /* background-color: var(--elu-blu); */
 }
 body #Grid > div {
   position: fixed;
@@ -1198,3 +1198,86 @@ td {
   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;
+  /* height: 100vh; */
+  /* position: fixed; */
+  top: 0;
+  left: 0;
+  /* width: 100vw; */
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  /* opacity: 0; */
+}
+background > :nth-child(1) {
+  transform: translateY(-100vh);
+}
+background > :nth-child(2) {
+  transform: translateY(-50vh);
+}
+
+background {
+  position: unset;
+  display: unset;
+  /* width: unset; */
+  /* height: unset; */
+  /* height: unset; */
+  background-size: unset;
+  background-position: unset;
+  text-align: unset;
+  /* left: unset; */
+  /* top: unset; */
+}
+
+background,
+background #grid {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+html,
+background {
+  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;
+  }
+}
diff --git a/static/index.html b/static/index.html
@@ -27,7 +27,10 @@
   </head>
   <body>
     <background>
-      <video src="" autoplay loop muted playsinline></video>
+      <div class="gradient"></div>
+      <div class="gradient"></div>
+
+      <!-- <video src="" autoplay loop muted playsinline></video> -->
       <div id="Grid">
         <div id="grid-dynamic"></div>
         <!-- <div id="grid-static"></div> -->
@@ -60,24 +63,24 @@
             <header>
               <div id="sine-holder"><canvas id="sine" width="640"></canvas></div>
               <h1>Putting the 'A' In 'DAO'</h1>
-              <aside>Introducing the DevPool &amp; UbiquiBot: automating decentralized organizations.</aside>
+              <aside>Introducing UbiquityOS: automating decentralized organizations.</aside>
             </header>
             <ol>
               <li>
-                <a title="For Organizations" target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/devpool-for-organizations">
+                <a title="For Organizations" target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/os-for-daos">
                   <span>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff">
                       <path
                         d="M160-120q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h240q33 0 56.5 23.5T480-760v80h320q33 0 56.5 23.5T880-600v400q0 33-23.5 56.5T800-120H160Zm0-80h240v-80H160v80Zm0-160h240v-80H160v80Zm0-160h240v-80H160v80Zm0-160h240v-80H160v80Zm320 480h320v-400H480v400Zm120-240q-17 0-28.5-11.5T560-480q0-17 11.5-28.5T600-520h80q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440h-80Zm0 160q-17 0-28.5-11.5T560-320q0-17 11.5-28.5T600-360h80q17 0 28.5 11.5T720-320q0 17-11.5 28.5T680-280h-80Z"
                       />
                     </svg>
                   </span>
-                  <span>For Orgs</span>
+                  <span>For DAOs</span>
                 </a>
               </li>
 
               <li>
-                <a title="For Devs" target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/devpool-for-developers">
+                <a title="For Devs" target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/os-for-devs">
                   <span>
                     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff">
                       <path
@@ -225,13 +228,13 @@ <h3>Fully Extensible Framework</h3>
           </div>
           <div id="devpool-overlay">
             <header>
-              <h2>Dive in the DevPool</h2>
+              <h2>Contribute</h2>
               <aside>Discover the future of DAO work.</aside>
             </header>
             <figure>
               <div id="fetch-total-rewards-target"></div>
               <h3
-                ><a href="https://work.ubq.fi/"><input type="button" value="Visit the DevPool Directory" /></a
+                ><a href="https://work.ubq.fi/"><input type="button" value="Visit the Open Work Directory" /></a
               ></h3>
             </figure>
           </div>
@@ -432,7 +435,7 @@ <h4>Join the community</h4>
               <li><a href="https://github.com/ubiquity/ubiquity-dollar-development/wiki">Docs</a></li>
               <li><a href="https://dao.ubq.fi/branding" rel="noopener noreferrer" target="_blank">Brand kit</a></li>
               <li><a href="https://dao.ubq.fi/about">About</a></li>
-              <li><a href="https://dao.ubq.fi/devpool">Jobs</a></li>
+              <li><a href="https://dao.ubq.fi/os-for-devs">Jobs</a></li>
             </ul>
           </div>
         </article>
@@ -467,7 +470,7 @@ <h4>Join the community</h4>
             <!--  -->
             <ul>
               <li>
-                <a target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/devpool-for-developers"><div>DevPool for Developers</div></a>
+                <a target="_blank" rel="noopener noreferrer" href="https://dao.ubq.fi/os-for-devs"><div>OS for Developers</div></a>
               </li>
               <li>
                 <a target="_blank" rel="noopener noreferrer" href="https://github.com/ubiquity"><div>GitHub</div></a>