From 10c72a9723e79e5ca02a525ff30f668bfe145cee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Mon, 24 Jun 2024 21:19:26 +0900 Subject: [PATCH] chore: added lighter blue gradient background --- static/code/css/active.css | 3 +- static/code/css/ubq.css | 85 +++++++++++++++++++++++++++++++++++++- static/index.html | 21 ++++++---- 3 files changed, 98 insertions(+), 11 deletions(-) diff --git a/static/code/css/active.css b/static/code/css/active.css index fc3a917..1e9d41c 100644 --- 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 index cf13068..6ee0498 100644 --- 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 index a9f0ecb..74aea04 100644 --- a/static/index.html +++ b/static/index.html @@ -27,7 +27,10 @@ - +
+
+ +
@@ -60,11 +63,11 @@

Putting the 'A' In 'DAO'

- +
  1. - + Putting the 'A' In 'DAO' /> - For Orgs + For DAOs
  2. - + Fully Extensible Framework
@@ -432,7 +435,7 @@

Join the community

  • Docs
  • Brand kit
  • About
    • -
  • Jobs
    • +
  • Jobs
    • @@ -467,7 +470,7 @@

    Join the community