diff --git a/.cspell.json b/.cspell.json index 9c6ad9e..4b794ba 100644 --- a/.cspell.json +++ b/.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}"] diff --git a/static/code/css/active.css b/static/code/css/active.css index fc3a917..a8d21fc 100644 --- a/static/code/css/active.css +++ b/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,7 +87,7 @@ 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; @@ -96,8 +95,6 @@ body.Active #UI > ul > li:nth-child(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; diff --git a/static/code/css/media.css b/static/code/css/media.css index 3554c85..45d87f3 100644 --- a/static/code/css/media.css +++ b/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; diff --git a/static/code/css/ubq.css b/static/code/css/ubq.css index cf13068..c3d712f 100644 --- a/static/code/css/ubq.css +++ b/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; + } +} diff --git a/static/code/js/logo-click.ts b/static/code/js/logo-click.ts index d8c628c..184cd79 100644 --- a/static/code/js/logo-click.ts +++ b/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"; diff --git a/static/index.html b/static/index.html index fe4d043..e1c91c0 100644 --- a/static/index.html +++ b/static/index.html @@ -27,7 +27,10 @@
Optimize operations with cutting-edge DeFi and AI. Our platform ensures accurate and fair compensation through comprehensive qualitative and quantitative evaluations.
+Optimize operations with cutting-edge DeFi and AI. Our platform ensures accurate and fair compensation through comprehensive + qualitative and quantitative evaluations.
Ubiquity Dollar, pegged to the US Dollar, enables seamless transactions. Access innovative financial solutions, including Ubiquity Card (Beta) and upcoming Ubiquity Credit for unsecured loans.
+Ubiquity Dollar, pegged to the US Dollar, enables seamless transactions. Access innovative financial solutions, including Ubiquity Card + (Beta) and upcoming Ubiquity Credit for unsecured loans.
Design custom autonomous agents to work alongside with our entirely open-source platform, tailored to your organization’s unique needs.
+Design custom autonomous agents to work alongside with our entirely open-source platform, tailored to your organization’s unique + needs.