From eeac992a2988ca8998adba5eaa91a773869888b7 Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Mon, 7 Oct 2024 08:48:47 -0600 Subject: [PATCH] remove ticker and bitcoin section --- src/_data/pseudoservices.json | 72 ----- src/_data/sections.json | 1 - src/_data/services.json | 122 -------- .../components/landing/be-your-own.njk | 30 -- src/_includes/components/landing/bitcoin.njk | 34 --- src/_includes/components/landing/why.njk | 12 - src/assets/js/appearance-animation.js | 93 ------- src/assets/js/bitcoin-animation.js | 87 ------ src/assets/js/landing.js | 19 -- src/assets/js/ticker-animation.js | 113 -------- src/assets/styles/be-your-own.scss | 260 ------------------ src/assets/styles/bitcoin.scss | 191 ------------- src/assets/styles/landing.scss | 1 - src/index.njk | 4 - 14 files changed, 1039 deletions(-) delete mode 100644 src/_data/pseudoservices.json delete mode 100644 src/_data/services.json delete mode 100644 src/_includes/components/landing/bitcoin.njk delete mode 100644 src/assets/js/bitcoin-animation.js delete mode 100644 src/assets/js/ticker-animation.js delete mode 100644 src/assets/styles/bitcoin.scss diff --git a/src/_data/pseudoservices.json b/src/_data/pseudoservices.json deleted file mode 100644 index 835338b..0000000 --- a/src/_data/pseudoservices.json +++ /dev/null @@ -1,72 +0,0 @@ -[ - { - "name": "Whatsapp", - "slug": "whatsapp", - "service": "synapse" - }, - { - "name": "Twitter", - "slug": "twitter", - "service": "mastodon" - }, - { - "name": "Lastpass", - "slug": "lastpass", - "service": "vaultwarden" - }, - { - "name": "bank", - "slug": "bank", - "service": "bitcoind" - }, - { - "name": "Github", - "slug": "github", - "service": "gitea" - }, - { - "name": "Gsuite", - "slug": "gsuite", - "service": "nextcloud" - }, - { - "name": "iPhoto", - "slug": "iphoto", - "service": "photoview" - }, - { - "name": "GoFundMe", - "slug": "gofundme", - "service": "btcpay" - }, - { - "name": "PayPal", - "slug": "paypal", - "service": "lnd" - }, - { - "name": "iMessage", - "slug": "imessage", - "service": "synapse" - }, - { - "name": "Kickstarter", - "slug": "kickstarter", - "service": "btcpay" - }, - { - "name": "Medium", - "slug": "medium", - "service": "ghost" - }, - { - "name": "Dropbox", - "slug": "dropbox", - "service": "file-browser" - }, - { - "name": "1Password", - "slug": "1password", - "service": "vaultwarden" - } -] \ No newline at end of file diff --git a/src/_data/sections.json b/src/_data/sections.json index 9e01206..8363e4c 100644 --- a/src/_data/sections.json +++ b/src/_data/sections.json @@ -3,7 +3,6 @@ "pitch", "products", "infographics", - "bitcoin", "be-your-own", "powered-by", "support", diff --git a/src/_data/services.json b/src/_data/services.json deleted file mode 100644 index d0f4133..0000000 --- a/src/_data/services.json +++ /dev/null @@ -1,122 +0,0 @@ -{ - "file-browser": { - "name": "File Browser", - "description": "Personal cloud data storage", - "color": "#ffe95f", - "bitcoin": false - }, - "synapse": { - "name": "Synapse", - "description": "A battle-tested implementation of the Matrix protocol, the killer of all messaging apps.", - "color": "#666666", - "bitcoin": false - }, - "mastodon": { - "name": "Mastodon", - "description": "A free, open-source social network server", - "color": "#6364ff", - "bitcoin": false - }, - "vaultwarden": { - "name": "Vaultwarden", - "description": "Secure password management", - "color": "#175ddc", - "bitcoin": false - }, - "bitcoind": { - "name": "Bitcoin Core", - "description": "A Bitcoin full node by Bitcoin Core.", - "color": "#f2a900", - "bitcoin": true - }, - "btcpay": { - "name": "BTCPay Server", - "description": "Bitcoin and cryptocurrency payment processor and POS system.", - "color": "#51b13e", - "bitcoin": true - }, - "cln": { - "name": "Core Lightning", - "description": "An implementation of the Lightning Network protocol by Blockstream.", - "color": "#ffe95f", - "bitcoin": true - }, - "electrs": { - "name": "electrs", - "description": "", - "color": "#2c384c", - "bitcoin": true - }, - "lnd": { - "name": "Lightning Network Daemon", - "description": "A complete implementation of a Lightning Network node by Lightning Labs.", - "color": "#338dc9", - "bitcoin": true - }, - "lit": { - "name": "Lightning Terminal", - "description": "Your Home for Lightning Liquidity", - "color": "#570380", - "bitcoin": true - }, - "mempool": { - "name": "Mempool", - "description": "A Bitcoin node and network visualizer.", - "color": "#8884f7", - "bitcoin": true - }, - "rtl": { - "name": "Ride the Lightning", - "description": "A node management GUI for Lightning Network", - "color": "#bdbdbd", - "bitcoin": true - }, - "spark": { - "name": "Spark Wallet", - "description": "A minimalistic wallet GUI for Core Lightning (CLN).", - "color": "#2c384c", - "bitcoin": true - }, - "specter": { - "name": "Specter", - "description": "A desktop GUI for Bitcoin Core optimised to work with hardware wallets.", - "color": "#e80001", - "bitcoin": true - }, - "sphinx": { - "name": "Sphinx Chat", - "description": "Chat on the lightning Network.", - "color": "#618aff", - "bitcoin": true - }, - "thunderhub": { - "name": "Thunderhub", - "description": "LND Lightning Node Manager in your Browser", - "color": "#2b3885", - "bitcoin": true - }, - "ghost": { - "name": "Ghost", - "description": "A self-hosted blogging platform.", - "color": "#bfbfbe", - "bitcoin": false - }, - "photoview": { - "name": "Photoview", - "description": "An easy way to organize and share personal photos.", - "color": "#ff692c", - "bitcoin": false - }, - "gitea": { - "name": "Gitea", - "description": "A painless, self-hosted git service.", - "color": "#609926", - "bitcoin": false - }, - "nextcloud": { - "name": "Nextcloud", - "description": "Online collaboration platform.", - "color": "#609926", - "bitcoin": false - } -} \ No newline at end of file diff --git a/src/_includes/components/landing/be-your-own.njk b/src/_includes/components/landing/be-your-own.njk index b96345d..d5d0dc8 100644 --- a/src/_includes/components/landing/be-your-own.njk +++ b/src/_includes/components/landing/be-your-own.njk @@ -1,35 +1,5 @@

Be your own everything

Anything you can do in the closed-source, intermediated, custodial, expensive model of cloud computing you can do in the open-source, self-hosted, private, and free model of sovereign computing.

-
-
- be your own - {#
#} -
-
-
    - {% for ps in pseudoservices %} -
  • {{ ps.name }}
    • - {% endfor %} -
-
-
- {% for ps in pseudoservices %} -
-
- - {{ services[ps.service].name }} StartOS service icon -
-

{{ services[ps.service].name }}

-

{{ services[ps.service].description }}

-
- -
-
-
- {% endfor %} -
-
View the marketplace
\ No newline at end of file diff --git a/src/_includes/components/landing/bitcoin.njk b/src/_includes/components/landing/bitcoin.njk deleted file mode 100644 index ee73cd8..0000000 --- a/src/_includes/components/landing/bitcoin.njk +++ /dev/null @@ -1,34 +0,0 @@ -
- {% include "svgs/bitcoin-grid-blend-top.svg" %} -
-

Become Bitcoin

-

- Don't trust, verify. -
Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose. -

-
-
-

Become Lightning

-

- Not your keys, not your coins. -
Run a Lightning node to take full control and custody over your Bitcoin payments. -

-
-
- {% for slug, service in services %} - {% if (service.bitcoin == true) %} - {{ service.name }} StartOS service icon - {% endif %} - {% endfor %} -
-
-

Become Unstoppable

-

- When you run your own Bitcoin and Lightning nodes, you become your own bank and payment processor. Nobody can stop you from spending your money as you see fit, 24/7/365, from anywhere, to anywhere, instantly, and for free. -

-
- {% include "svgs/bitcoin-grid-blend-bottom.svg" %} -
\ No newline at end of file diff --git a/src/_includes/components/landing/why.njk b/src/_includes/components/landing/why.njk index 737db74..050013f 100644 --- a/src/_includes/components/landing/why.njk +++ b/src/_includes/components/landing/why.njk @@ -22,17 +22,5 @@

When you run your own server, you are your own cloud.

-
-
- be your own -
-
-
    - {% for pseudoservice in pseudoservices %} -
  • {{pseudoservice.name}}
    • - {% endfor %} -
-
-
\ No newline at end of file diff --git a/src/assets/js/appearance-animation.js b/src/assets/js/appearance-animation.js index 621e8a5..bc4a7ae 100644 --- a/src/assets/js/appearance-animation.js +++ b/src/assets/js/appearance-animation.js @@ -128,99 +128,6 @@ if (document.querySelector("#infographics .subsection--control")) { }); } -////////////////////////////////////////// -// BITCOIN - -// object animation -gsap.from("#bitcoin .subsection--bitcoin", { - duration: 1, - opacity: 0, - filter: "blur(10px)", - y: "5rem", - scrollTrigger: { - trigger: "#bitcoin .subsection--bitcoin", - start: "top bottom", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -// object animation -gsap.from("#bitcoin .subsection--lightning", { - duration: 1, - opacity: 0, - filter: "blur(10px)", - y: "-5rem", - scrollTrigger: { - trigger: "#bitcoin .subsection--lightning", - start: "top bottom", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -// line animation -gsap.from("#bitcoin-to-be path:first-child", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#bitcoin-to-be", - scrub: true, - start: "top 75%", - end: "bottom 75%", - }, -}); - -////////////////////////////////////////// -// BE YOUR OWN - -// object animation -gsap.from("#be-your-own h1", { - duration: 0.5, - y: "5rem", - opacity: 0, - scrollTrigger: { - trigger: "#be-your-own", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -// object animation -gsap.from("#be-your-own p", { - duration: 0.5, - y: "5rem", - filter: "blur(10px)", - opacity: 0, - scrollTrigger: { - trigger: "#be-your-own h1", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -// object animation -gsap.from("#be-your-own #ticker", { - duration: 1.5, - filter: "blur(20px)", - opacity: 0, - scrollTrigger: { - trigger: "#be-your-own #ticker", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -// line animation -gsap.from("#be-to-powered path", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#be-to-powered path", - scrub: true, - start: "top 75%", - end: "bottom 75%", - }, -}); - ////////////////////////////////////////// // POWERED diff --git a/src/assets/js/bitcoin-animation.js b/src/assets/js/bitcoin-animation.js deleted file mode 100644 index 6def419..0000000 --- a/src/assets/js/bitcoin-animation.js +++ /dev/null @@ -1,87 +0,0 @@ -/********************************************/ -/* BITCOIN SECTION FLOATING ICONS ANIMATION */ -/********************************************/ - -////////////////////////////////////////// -// DATA -// TODO: pull this from data js instead -const bitcoinServices = [ - "bitcoind", - "btcpay", - "cln", - "electrs", - "lnd", - "lit", - "mempool", - "rtl", - "spark", - "specter", - "sphinx", - "thunderhub", -]; - -function getRandomInt(min, max) { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min + 1)) + min; -} - -function getRandomNumber(min, max) { - return Math.random() * (max - min) + min; -} - -export function positionServiceIcons() { - bitcoinServices.forEach((service, i) => { - var serviceClass = ".service-icon--" + service; - - gsap.set(serviceClass, {}); - gsap.to(serviceClass, {}); - - const serviceElement = document.querySelector(serviceClass); - const bitcoinSectionElement = document.querySelector("#bitcoin"); - const upOrDown = i % 2; - const bitcoinHeight = bitcoinSectionElement.clientHeight; - - serviceElement - ? (serviceElement.style.left = getRandomInt(5, 90) + "vw") - : ""; - - if (upOrDown) { - gsap.set(serviceClass, { - y: getRandomInt(0, bitcoinHeight / 2) + "px", - }); - gsap.to(serviceClass, { - y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px", - //x: getRandomInt(0, 100) + "vw", - ease: "in", - delay: getRandomNumber(0, 1), - overwrite: true, - scrollTrigger: { - trigger: "#bitcoin", - scrub: true, - start: "top 25%", - end: "90% center", // "triggerElement page" - //markers: { startColor: "lime", endColor: "lime" }, - }, - }); - } else { - gsap.set(serviceClass, { - y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px", - }); - gsap.to(serviceClass, { - y: getRandomInt(0, bitcoinHeight / 2) + "px", - //x: getRandomInt(0, 100) + "vw", - ease: "in", - delay: getRandomNumber(0, 1), - overwrite: true, - scrollTrigger: { - trigger: "#bitcoin", - scrub: true, - start: "top bottom", - end: "90% center", - //markers: { startColor: "lime", endColor: "blue" }, - }, - }); - } - }); -} diff --git a/src/assets/js/landing.js b/src/assets/js/landing.js index 89fcdc2..b242984 100644 --- a/src/assets/js/landing.js +++ b/src/assets/js/landing.js @@ -1,22 +1,3 @@ -import { positionServiceIcons } from '/@root/src/assets/js/bitcoin-animation.js' -import { initializeSizes, tick, next } from '/@root/src/assets/js/ticker-animation.js' - -////////////////////////////////////////// -// RE-RENDER COMPLEX ANIMATIONS ON WINDOW RESIZE - -function onResizeComplete() { - positionServiceIcons(); - initializeSizes(); - // initialize ticker - gsap.delayedCall(next, tick); -} - -let resizeTimeout = setTimeout(onResizeComplete, 400); -window.onresize = function () { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(onResizeComplete, 400); -}; - ////////////////////////////////////////// // SHADOW PARALLAX diff --git a/src/assets/js/ticker-animation.js b/src/assets/js/ticker-animation.js deleted file mode 100644 index d21371e..0000000 --- a/src/assets/js/ticker-animation.js +++ /dev/null @@ -1,113 +0,0 @@ -/********************************************/ -/* BE YOUR OWN TICKER ANIMATION */ -/********************************************/ - -const tickerTL = gsap.timeline(); - -let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"), - itemHeight, - listHeight, - windowHeight; - -export const next = 4 -const kerplunk2 = CustomEase.create( - "custom", - "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 " -); - -export function initializeSizes() { - itemHeight = document - .querySelector(".pseudoservice") - .getBoundingClientRect().height; - - listHeight = document - .querySelector(".pseudoservices") - .getBoundingClientRect().height; - - windowHeight = document.getElementById("ticker__window").clientHeight; -} - -// init() -export function tick() { - let action = tickerTL - .to(pseudoserviceArray, { - id: "thunk", - y: "-=" + itemHeight, - duration: 1, - ease: kerplunk2, - overwrite: true, - }) - .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); - - pseudoserviceArray.push(pseudoserviceArray.shift()); - - const startIndex = window.screen.width < 1300 ? 1 : 2 - - let thisPseudoservice = pseudoserviceArray[startIndex].innerHTML - let thisServiceElement = document.querySelector(".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")); - - if (thisServiceElement) { - document.querySelectorAll(".service-container").forEach(a => a.style.display = "none") - thisServiceElement.style.display = "flex"; - } - - // start endless run - gsap.delayedCall(next, tick); -} - -function init() { - // initially start ticker at i=2, which is where bar is positioned to start - let thisPseudoservice = pseudoserviceArray[2].innerHTML - let thisServiceElement = document.querySelector(".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")); - - if (thisServiceElement) { - document.querySelectorAll(".service-container").forEach(a => a.style.display = "none") - thisServiceElement.style.display = "flex"; - } -} - -// @NOTE in progress implementation - do not remove -function moveTick(service) { - - let thisPseudoservice = pseudoserviceArray.slice().filter(a => a.innerHTML === service)[0].innerHTML - let thisElement = document.querySelector(".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")); - - - let current = pseudoserviceArray[2].innerHTML - let currentIndex = 2 - - // get index of current tick - const item = Array.from(document.querySelectorAll(".service-container")).filter(a => a.style.display === 'flex') - if (item.length > 0) { - current = Array.from(item[0].classList).filter(a => a.includes("--"))[0].split("--")[1] - currentIndex = pseudoserviceArray.findIndex(a => a.innerHTML.toLowerCase() === current) - thisPseudoservice = pseudoserviceArray[currentIndex].innerHTML - } - - let i = pseudoserviceArray.findIndex(a => a.innerHTML === service) - console.log(i) - let diff = Math.abs(currentIndex - i) - let y - if (i > currentIndex) { - y = "-=" + (itemHeight * diff) - } else { - y = "+=" + (itemHeight * diff) - } - - tickerTL - .to(pseudoserviceArray, { - id: "thunk", - y, - duration: 1, - ease: kerplunk2, - overwrite: 'auto', - }) - var slidesContainerArray = document.querySelectorAll(".service-container"); - slidesContainerArray.forEach((thisContainer) => { - thisContainer.style.display = "none"; - }); - - if (thisElement) { - thisElement.style.display = "flex"; - } -} diff --git a/src/assets/styles/be-your-own.scss b/src/assets/styles/be-your-own.scss index 347727e..168dd67 100644 --- a/src/assets/styles/be-your-own.scss +++ b/src/assets/styles/be-your-own.scss @@ -11,54 +11,12 @@ --rows-above: 1; --rows-height: 3; } - .service__content { - justify-content: center !important; - } - .service__link { - margin: 10rem 0 0 0 !important; - flex-direction: row !important; - } - .service__info { - margin: 0 0 0 1rem !important; - &::before { - top: 25% !important; - left: calc(-4rem) !important; - align-self: flex-start !important; - justify-content: center !important; - border-top: 2rem transparent solid !important; - border-right: 2rem rgba(255, 255, 255, 0.3) solid !important; - border-bottom: 2rem transparent solid !important; - border-left: 2rem transparent solid !important; - } - } - } @media screen and (max-width: 900px) { #be-your-own { --size: 2rem; } - #be-your-own a { - margin-bottom: 4rem !important; - } - #ticker { - height: 32vh !important; - #ticker__selected-frame { - left: -2.4ch !important; - } - #ticker__window { - left: 10ch !important; - } - } - .service__image { - width: 10rem !important; - } -} - -@media screen and (max-width: 500px) { - #ticker { - display: none; - } } #be-your-own { @@ -66,13 +24,10 @@ flex-direction: column; align-items: center; gap: 2rem; - //margin: 0 0 6rem 0; padding: 0 6rem 0 6rem; box-sizing: border-box; width: 100%; - //transform: translate(0px,0px); - //--size: 3rem; --p-t: calc(0.2 * var(--size)); --p-b: calc(0 * var(--size)); --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size)); @@ -81,219 +36,4 @@ h2 { text-align: center; } - - #ticker { - height: 50vh; - position: relative; - width: 100%; - - #ticker__selected-frame { - //outline: 1px solid white; - //outline-offset: calc(0.1 * var(--size)); - font-size: var(--size); - font-weight: bolder; - text-transform: uppercase; - line-height: var(--size); - position: absolute; - top: calc(var(--rows-above) * var(--line)); - left: -0.5ch; - right: 0; - display: flex; - align-items: center; - height: var(--size); - padding: var(--p); - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0.08), - rgba(255, 255, 255, 0.02) - ); - border-bottom: 0.5rem transparent solid; - width: 80vw; - } - #ticker__window { - height: calc(var(--rows-height) * var(--line)); - width: calc(100vw - 12rem); - overflow: hidden; - font-size: var(--size); - left: 11.5ch; - position: relative; - // z-index: 10; - } - - ul.pseudoservices { - margin: 0; - padding: 0; - li { - list-style: none; - font-size: var(--size); - line-height: 1; - display: flex; - align-items: center; - height: var(--size); - padding: var(--p); - white-space: nowrap; - overflow: hidden; - - &:hover { - cursor: 'pointer' - } - } - } - - .services { - position: absolute; - top: 0; - bottom: 0; - padding: 2rem; - font-size: var(--size); - left: -1rem; - right: 0; - - img { - border-radius: 100%; - width: 5rem; - } - - .service-container { - display: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - .service__content { - width: 100%; - color: var(--c-text-primary); - font-size: 1rem; - font-weight: 400; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 1rem; - width: 100%; - position: absolute; - top: 0; - bottom: 0; - - .service__link { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 2rem; - margin-right: 5rem; - transition: var(--t-simple); - &:hover { - transform: scale(1.05); - } - } - - .service__image { - width: 12rem; - &.service__image--gitea, - &.service__image--photoview { - background-color: var(--c-bkg-offset); - padding: 1rem; - box-sizing: border-box; - } - } - - .service__info { - background-color: rgba(255, 255, 255, 0.3); - width: 20ch; - padding: 1.3rem; - margin-top: 1rem; - position: relative; - display: flex; - flex-direction: column; - box-shadow: var(--sh-1); - border-radius: 24px; - backdrop-filter: blur(4px); - - &::before { - position: absolute; - top: calc(-4rem); - content: ""; - display: block; - //width: 0; - //height: 0; - border-top: 2rem transparent solid; - border-right: 2rem transparent solid; - border-bottom: 2rem rgba(255, 255, 255, 0.3) solid; - border-left: 2rem transparent solid; - align-self: center; - } - * { - color: var(--c-text-primary); - } - p { - font-size: 0.75rem; - height: 4em; - overflow: hidden; - // margin: 0 !important; - padding: 0.2rem; - } - } - - .service__bkg { - filter: opacity(0.25) blur(2rem); - width: 100%; - position: absolute; - top: 0; - bottom: 0; - z-index: -1; - } - } - } - } - } - a.btn { - align-self: center; - } -} - -.slides-controls { - padding: 10px; - display: flex; - align-items: center; - justify-content: center; - height: 70px; - min-height: 70px; - gap: 2rem; - - button { - background: none; - padding: 0; - border: 0; - cursor: pointer; - } -} - -.slides-container { - position: relative; - overflow: hidden; - display: none; - flex: 1; -} - -.slide { - position: absolute; - font-size: 90px; - font-weight: 700; - color: var(--c-bkg-light-fade9); - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - width: calc(100% / 3); - width: 100%; -} - -.slides-inner { - position: relative; - height: 7rem; - width: 100%; - overflow: hidden; } diff --git a/src/assets/styles/bitcoin.scss b/src/assets/styles/bitcoin.scss deleted file mode 100644 index 59e9104..0000000 --- a/src/assets/styles/bitcoin.scss +++ /dev/null @@ -1,191 +0,0 @@ -#bitcoin-to-be svg { - // max-height: 50vh; -} - -section#bitcoin { - background-image: linear-gradient( - 180deg, - var(--c-bitcoin) 0%, - var(--c-lightning) 100% - ); - background-repeat: no-repeat; - background-position: center center; - background-size: 100%; - display: flex; - flex-direction: column; - align-items: center; - gap: 6rem; - position: relative; - z-index: -1; - margin-bottom: -10rem; - - // gradient to fade away from bkg - &::before { - content: ""; - width: 100%; - height: 100vh; - background-image: linear-gradient(#33333300, var(--c-bkg)); - position: absolute; - top: -100vh; - } - - // gradient to fade back to bkg - &::after { - content: ""; - width: 100%; - height: 100vh; - background-image: linear-gradient(var(--c-bkg), #33333300); - position: absolute; - bottom: -100vh; - } - - // grid of squares (svg) - #grid-blend-top, - #grid-blend-bottom { - // mix-blend-mode: multiply; - width: 100vw; - rect { - fill: var(--c-bkg); - stroke: var(--c-bkg); - stroke-width: 2px; - } - } - - p { - max-width: min(35ch, 50vw); - margin: 0 !important; - em { - color: var(--c-text-primary); - font-weight: 700; - } - } - - .subsection { - padding: 0 6rem; - gap: 1.2rem; - } - - .subsection--bitcoin { - display: flex; - flex-direction: column; - place-self: flex-start; - margin-bottom: 2rem; - margin-left: 8rem; - align-items: flex-start; - } - .subsection--lightning { - place-self: flex-end; - display: flex; - flex-direction: column; - align-items: flex-end; - margin-right: 8rem; - margin-bottom: 2rem; - h1, - p { - text-align: right; - } - } - - #flying-icons { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; - pointer-events: none; - } - - .service-icon { - border-radius: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -2; - backdrop-filter: blur(48px); - mix-blend-mode: soft-light; - box-shadow: 0 2rem 3rem var(--c-shadow-3); - - &.service-icon--bitcoind { - width: 15rem; - } - &.service-icon--btcpay { - width: 6rem; - z-index: -7; - } - &.service-icon--cln { - width: 15rem; - } - &.service-icon--electrs { - width: 7rem; - background-color: var(--c-bkg-offset); - padding: 1rem; - z-index: -6; - } - &.service-icon--lnd { - width: 10rem; - z-index: -3; - } - &.service-icon--lit { - width: 7rem; - z-index: -6; - } - &.service-icon--mempool { - width: 8rem; - z-index: -5; - } - &.service-icon--rtl { - width: 8rem; - z-index: -5; - } - &.service-icon--spark { - width: 7rem; - z-index: -6; - } - &.service-icon--specter { - width: 5rem; - z-index: -8; - } - &.service-icon--sphinx { - width: 6rem; - z-index: -7; - } - &.service-icon--thunderhub { - width: 5rem; - z-index: -8; - } - } -} - -@media only screen and (max-width: 500px) { - section#bitcoin { - p { - max-width: min(35ch, 73vw); - } - } - .service-icon--bitcoind { - width: 9rem !important; - } - .service-icon--c-lightning { - width: 9rem !important; - } - - section#bitcoin .subsection { - padding: 0 2rem; - } - - section#bitcoin .subsection--bitcoin { - margin-left: 2rem; - } - - section#bitcoin .subsection--lightning { - margin-left: 2rem; - margin-right: 0; - align-items: flex-start; - place-self: flex-start; - h1, - p { - text-align: left; - } - } -} diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss index d90fd57..4017602 100644 --- a/src/assets/styles/landing.scss +++ b/src/assets/styles/landing.scss @@ -1,7 +1,6 @@ @use "pitch"; @use "products"; @use "infographics"; -@use "bitcoin"; @use "be-your-own"; @use "powered-by"; @use "support"; diff --git a/src/index.njk b/src/index.njk index e1b969c..48a3615 100644 --- a/src/index.njk +++ b/src/index.njk @@ -33,8 +33,6 @@ layout: layouts/base.njk {% include "components/landing/be-your-own.njk" %} -{% include "components/landing/bitcoin.njk" %} -
{% include "svgs/lines/bitcoin-to-be.svg" %}
@@ -62,11 +60,9 @@ layout: layouts/base.njk - - \ No newline at end of file