mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-26 02:11:55 +00:00
Merge pull request #52 from Start9Labs/remove-services
remove ticker and bitcoin section
This commit is contained in:
Matt Hill
2464
package-lock.json
generated
2464
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -29,7 +29,6 @@
|
||||
"slinkity": "^0.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"esbuild-darwin-64": "^0.15.18",
|
||||
"rss-parser": "^3.12.0"
|
||||
},
|
||||
"browserslist": [
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@@ -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"
|
||||
}
|
||||
]
|
||||
@@ -3,7 +3,6 @@
|
||||
"pitch",
|
||||
"products",
|
||||
"infographics",
|
||||
"bitcoin",
|
||||
"be-your-own",
|
||||
"powered-by",
|
||||
"support",
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -1,35 +1,5 @@
|
||||
<section id="be-your-own">
|
||||
<h1>Be <em>your own</em> everything</h1>
|
||||
<p>Anything you can do in the closed-source, intermediated, custodial, <em>expensive</em> model of cloud computing you can do in the open-source, self-hosted, private, and <em>free</em> model of sovereign computing.</p>
|
||||
<div id="ticker">
|
||||
<div id="ticker__selected-frame">
|
||||
<span>be your own</span>
|
||||
{# <div id="services"></div> #}
|
||||
</div>
|
||||
<div id="ticker__window">
|
||||
<ul class='pseudoservices'>
|
||||
{% for ps in pseudoservices %}
|
||||
<li class="pseudoservice">{{ ps.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for ps in pseudoservices %}
|
||||
<div class="service-container service-container--{{ ps.slug }}">
|
||||
<div class="service__content" >
|
||||
<a class="service__link" href="https://marketplace.start9.com/{{ ps.service }}" target="_blank" rel="noopener noreferrer">
|
||||
<img class="service__image service__image--{{ ps.service }}" src="/assets/images/service-icons/{{ ps.service }}.png" alt="{{ services[ps.service].name }} StartOS service icon" title="{{ services[ps.service].name }} StartOS service icon"
|
||||
style="filter: drop-shadow(0px 0px 3rem {{ services[ps.service].color }}C0)"/>
|
||||
<div class="service__info">
|
||||
<h3 class="service__name">{{ services[ps.service].name }}</h3>
|
||||
<p class="service__desc">{{ services[ps.service].description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="service__bkg" style="background: linear-gradient(180deg, {{ services[ps.service].color }}00 0%, {{ services[ps.service].color }}C0 30%, {{ services[ps.service].color }}FF 50%, {{ services[ps.service].color }}C0 66%, {{ services[ps.service].color }}00 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ site.beYourOwn.url }}" class="btn" rel="noopener noreferrer" target="_blank">View the marketplace</a>
|
||||
</section>
|
||||
@@ -1,34 +0,0 @@
|
||||
<section id="bitcoin">
|
||||
{% include "svgs/bitcoin-grid-blend-top.svg" %}
|
||||
<div class="subsection subsection--bitcoin">
|
||||
<h1>Become Bitcoin</h1>
|
||||
<p>
|
||||
<em>Don't trust, verify.</em>
|
||||
<br/>Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.
|
||||
</p>
|
||||
</div>
|
||||
<div class="subsection subsection--lightning">
|
||||
<h1>Become Lightning</h1>
|
||||
<p>
|
||||
<em>Not your keys, not your coins.</em>
|
||||
<br/>Run a Lightning node to take full control and custody over your Bitcoin payments.
|
||||
</p>
|
||||
</div>
|
||||
<div id="flying-icons">
|
||||
{% for slug, service in services %}
|
||||
{% if (service.bitcoin == true) %}
|
||||
<img
|
||||
class="service-icon service-icon--{{ slug }}"
|
||||
src="/assets/images/service-icons/{{ slug }}.png"
|
||||
alt="{{ service.name }} StartOS service icon"/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="subsection subsection--bitcoin">
|
||||
<h1>Become Unstoppable</h1>
|
||||
<p>
|
||||
When you run your own Bitcoin and Lightning nodes, you <em>become your own bank</em> 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.
|
||||
</p>
|
||||
</div>
|
||||
{% include "svgs/bitcoin-grid-blend-bottom.svg" %}
|
||||
</section>
|
||||
@@ -22,17 +22,5 @@
|
||||
<div class="col">
|
||||
<h3>When you run your own server, you are your <em>own cloud</em>.</h3>
|
||||
</div>
|
||||
<div class="col" id='ticker'>
|
||||
<div id="ticker__selected-frame">
|
||||
be your own
|
||||
</div>
|
||||
<div id="ticker__window">
|
||||
<ul class='pseudoservices'>
|
||||
{% for pseudoservice in pseudoservices %}
|
||||
<li class="pseudoservice">{{pseudoservice.name}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -128,35 +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,
|
||||
@@ -169,46 +140,6 @@ gsap.from("#bitcoin-to-be path:first-child", {
|
||||
},
|
||||
});
|
||||
|
||||
//////////////////////////////////////////
|
||||
// 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,
|
||||
|
||||
@@ -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" },
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
@use "pitch";
|
||||
@use "products";
|
||||
@use "infographics";
|
||||
@use "bitcoin";
|
||||
@use "be-your-own";
|
||||
@use "powered-by";
|
||||
@use "support";
|
||||
|
||||
@@ -33,8 +33,6 @@ layout: layouts/base.njk
|
||||
|
||||
{% include "components/landing/be-your-own.njk" %}
|
||||
|
||||
{% include "components/landing/bitcoin.njk" %}
|
||||
|
||||
<div class="line" id="bitcoin-to-be">
|
||||
{% include "svgs/lines/bitcoin-to-be.svg" %}
|
||||
</div>
|
||||
@@ -62,11 +60,9 @@ layout: layouts/base.njk
|
||||
<script src="{{ '/libs/DrawSVGPlugin.min.js' }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/main.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/appearance-animation.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/bitcoin-animation.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/contact.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/header.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/banner.js' }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/hero.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/menu.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/landing.js' | url }}"></script>
|
||||
<script defer type="module" src="{{ '/@root/src/assets/js/ticker-animation.js' | url }}"></script>
|
||||
Reference in New Issue
Block a user