diff --git a/index.js b/index.js index 54ec282..a65c39b 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,6 @@ // Set options as a parameter, environment variable, or rc file. // eslint-disable-next-line no-global-assign require = require("esm")(module/* , options */) -module.exports = require("./main.js") gsap.registerPlugin(DrawSVGPlugin); gsap.registerPlugin(CustomEase); \ No newline at end of file diff --git a/src/_data/seo.json b/src/_data/seo.json index 84e5b62..2c5b99a 100644 --- a/src/_data/seo.json +++ b/src/_data/seo.json @@ -1,6 +1,6 @@ { "title": "Start9", - "description": "Sovereign computing for a free future", + "description": "Sovereign computing for a free future.", "url": "https://start9.com", "author": "Start9 Labs", "twitter": "start9labs", diff --git a/src/_data/team.js b/src/_data/team.js index 7b1f3d6..b5ab51e 100644 --- a/src/_data/team.js +++ b/src/_data/team.js @@ -1,3 +1,4 @@ +// if you uncomment these sections, you can fetch data from the github api on build //const EleventyFetch = require("@11ty/eleventy-fetch"); module.exports = async function() { diff --git a/src/_includes/components/landing/bitcoin.njk b/src/_includes/components/landing/bitcoin.njk index 7a29414..89c39bc 100644 --- a/src/_includes/components/landing/bitcoin.njk +++ b/src/_includes/components/landing/bitcoin.njk @@ -1,13 +1,13 @@
{% 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.

why host a bitcoin node?
-
+

Become Lightning

Not your keys, not your coins. diff --git a/src/_includes/components/landing/infographics.njk b/src/_includes/components/landing/infographics.njk index 2700856..62012cb 100644 --- a/src/_includes/components/landing/infographics.njk +++ b/src/_includes/components/landing/infographics.njk @@ -1,5 +1,5 @@

-
+

The problem is trust

@@ -13,7 +13,7 @@
{% include "svgs/big-tech-network-diagram.svg" %}
-
+

Take back control

@@ -28,6 +28,5 @@ {% include "svgs/embassyos-network-diagram_red_extended.svg" %}
{% include "svgs/embassyos-network-diagram_red_extended.svg" %}
- {# {% include "svgs/embassyOS-network-diagram_red_extended.svg" %} #}
\ No newline at end of file diff --git a/src/_includes/components/landing/products.njk b/src/_includes/components/landing/products.njk index 3cbaed8..f93b5fd 100644 --- a/src/_includes/components/landing/products.njk +++ b/src/_includes/components/landing/products.njk @@ -1,5 +1,5 @@
-
+
prefab embassy, represented in voxels @@ -10,7 +10,7 @@ {% include "svgs/embassy-pro-sketch-lines.svg" %}
-
+
like to tinker? diff --git a/src/_includes/components/landing/support.njk b/src/_includes/components/landing/support.njk index 3271999..f07a162 100644 --- a/src/_includes/components/landing/support.njk +++ b/src/_includes/components/landing/support.njk @@ -1,4 +1,4 @@ -
+

Get help

diff --git a/src/_includes/layouts/peripheral.njk b/src/_includes/layouts/peripheral.njk index 75ee499..658d5e5 100644 --- a/src/_includes/layouts/peripheral.njk +++ b/src/_includes/layouts/peripheral.njk @@ -6,12 +6,10 @@ layout: layouts/base.njk {{ content | safe }} - - -{# #} - - -{# #} + + + + diff --git a/src/_includes/svgs/big-tech-network-diagram.svg b/src/_includes/svgs/big-tech-network-diagram.svg index b467231..b15205b 100644 --- a/src/_includes/svgs/big-tech-network-diagram.svg +++ b/src/_includes/svgs/big-tech-network-diagram.svg @@ -30,47 +30,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + diff --git a/src/_includes/svgs/chevron-left.svg b/src/_includes/svgs/chevron-left.svg index 51b86b4..03ccaf6 100644 --- a/src/_includes/svgs/chevron-left.svg +++ b/src/_includes/svgs/chevron-left.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/src/_includes/svgs/chevron-right.svg b/src/_includes/svgs/chevron-right.svg index da0087b..19030fe 100644 --- a/src/_includes/svgs/chevron-right.svg +++ b/src/_includes/svgs/chevron-right.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/src/_includes/svgs/menu-close.svg b/src/_includes/svgs/menu-close.svg index 0e19b98..ad964b2 100644 --- a/src/_includes/svgs/menu-close.svg +++ b/src/_includes/svgs/menu-close.svg @@ -3,7 +3,7 @@ class="menu-icon" viewBox="0 0 13.414213 13.414213" stroke-width="2" - stroke="#ffffff" + stroke="var(--c-text-primary)" fill="none"> + \ No newline at end of file diff --git a/src/_includes/svgs/problem-with-internet.svg b/src/_includes/svgs/problem-with-internet.svg index 16fa132..4fca5a1 100644 --- a/src/_includes/svgs/problem-with-internet.svg +++ b/src/_includes/svgs/problem-with-internet.svg @@ -1,14 +1,14 @@ - + - - - - + + + + diff --git a/src/_includes/svgs/stack.svg b/src/_includes/svgs/stack.svg index 45e8b38..ee8d212 100644 --- a/src/_includes/svgs/stack.svg +++ b/src/_includes/svgs/stack.svg @@ -5,10 +5,10 @@ - - - - + + + + diff --git a/src/about.njk b/src/about.njk index 506df78..c0c3e87 100644 --- a/src/about.njk +++ b/src/about.njk @@ -3,7 +3,6 @@ title: About | Start9 layout: layouts/peripheral.njk --- -{# #}
about page hero image: a robot emerging from the embasssy diff --git a/src/assets/js/landing.js b/src/assets/js/landing.js new file mode 100644 index 0000000..2320774 --- /dev/null +++ b/src/assets/js/landing.js @@ -0,0 +1,60 @@ +////////////////////////////////////////// +// GSAP ACTIONS +// options: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none" +// arguments: onEnter, onLeave, onEnterBack, and onLeaveBack +const defaultActions = "play none none none"; + + + +////////////////////////////////////////// +// RE-RENDER COMPLEX ANIMATIONS ON WINDOW RESIZE + +function onResizeComplete() { + positionServiceIcons(); + initializeSizes(); +} + +var resizeTimeout = setTimeout(onResizeComplete, 400); +window.onresize = function () { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(onResizeComplete, 400); + console.log("onresize"); +}; + + + +////////////////////////////////////////// +// AUTO APPLY URL ANCHORS + +// // TODO: pull this from data js instead +// const sections = [ +// "pitch", +// "products", +// "infographics", +// "bitcoin", +// "be-your-own", +// "powered-by", +// "support", +// "dev", +// "community", +// ]; + +// setTimeout(function () { +// // timeout to allow initial load to redirect to anchor +// // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout + +// sections.forEach((slug) => { +// ScrollTrigger.create({ +// trigger: "#" + slug, +// start: "top 25%", +// end: "bottom 25%", +// //markers: { startColor: "white", endColor: "white" }, +// onEnter: () => { +// window.location.href = "#" + slug; +// }, +// onEnterBack: () => { +// window.location.href = "#" + slug; +// }, +// }); +// }); +// }, 2000); diff --git a/src/assets/js/landing/_appearance-animation.js b/src/assets/js/landing/_appearance-animation.js new file mode 100644 index 0000000..0d93133 --- /dev/null +++ b/src/assets/js/landing/_appearance-animation.js @@ -0,0 +1,371 @@ +/************************************************/ +/* SECTION, LINE, AND TEXT APPEARANCE ANIMATION */ +/************************************************/ + + +////////////////////////////////////////// +// HERO + +// line animation +gsap.from("#hero-to-pitch path:first-child", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#hero-to-pitch", + scrub: true, + start: "top 50%", // "triggerElement page" + end: "bottom 50%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +////////////////////////////////////////// +// PITCH + +// object animation +gsap.from("#pitch h1, #pitch p", { + duration: 0.5, + y: "5rem", + scale: 0.9, + opacity: 0, + scrollTrigger: { + trigger: "#pitch", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +////////////////////////////////////////// +// PRODUCTS + +// object animation +gsap.from("#products .subsection--buy", { + duration: 0.5, + opacity: 0, + outline: "1px solid rgba(255,255,255,1)", + scrollTrigger: { + trigger: "#products", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#products .subsection--diy", { + duration: 0.5, + delay: 0.25, + opacity: 0, + outline: "1px solid rgba(255,255,255,1)", + scrollTrigger: { + trigger: ".subsection--diy", + start: "top 85%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +const buyAnchor = document.querySelector(".product--buy"); + +const buyTL = gsap + .timeline({ paused: true }) + .from( + "#buy-real-lines path:first-child", + { drawSVG: 0, ease: "none", duration: 0.75 }, + 0 + ) + .to( + ".product__buy-image", + { + //opacity: 0.5, + ease: "none", + duration: 0.25, + filter: "drop-shadow(0 0 2rem rgba(255,255,255,.2))", + }, + 0 + ); + +buyAnchor.onmouseenter = () => buyTL.play(); +buyAnchor.onmouseleave = () => buyTL.reverse(); + +// line animation +gsap.from("#products-to-info path:first-child", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#products-to-info path:first-child", + scrub: true, + start: "top 75%", // "triggerElement page" + end: "bottom 75%", // "triggerElement page" + }, +}); + +////////////////////////////////////////// +// INFOGRAPHICS + +// object animation +gsap.from("#infographics .subsection--trust", { + duration: 0.5, + opacity: 0, + outline: "1px solid rgba(255,255,255,1)", + scrollTrigger: { + trigger: "#infographics .subsection--trust", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#infographics .subsection--control", { + duration: 0.5, + opacity: 0, + outline: "1px solid rgba(255,255,255,1)", + scrollTrigger: { + trigger: "#infographics .subsection--control", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +////////////////////////////////////////// +// 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 + +gsap.from("#powered-by h1", { + duration: 0.5, + y: "-5rem", + opacity: 0, + scrollTrigger: { + trigger: "#powered-by h1", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#powered-by p", { + duration: 0.5, + filter: "blur(10px)", + opacity: 0, + scrollTrigger: { + trigger: "#powered-by h1", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#powered-by svg", { + duration: 1, + filter: "blur(20px)", + opacity: 0, + scrollTrigger: { + trigger: "#powered-by svg", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// line animation +gsap.from("#powered-to-support path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#powered-to-support path", + scrub: true, + start: "top 75%", + end: "bottom 75%", + }, +}); + +////////////////////////////////////////// +// SUPPORT + +// object animation +gsap.from("#support", { + duration: 0.5, + opacity: 0, + outline: "1px solid rgba(255,255,255,1)", + scrollTrigger: { + trigger: "#support", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// line animation +gsap.from("#support-to-dev path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#support-to-dev path", + scrub: true, + start: "top 75%", + end: "bottom 75%", + }, +}); + +////////////////////////////////////////// +// DEV + +// object animation +gsap.from("#dev h1", { + duration: 0.5, + scale: 0.8, + opacity: 0, + filter: "blur(10px)", + scrollTrigger: { + trigger: "#dev", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#dev .col:nth-child(1)", { + duration: 0.5, + x: "5rem", + opacity: 0, + delay: 0.5, + outline: "1px solid rgba(255,255,255,1)", + filter: "blur(10px)", + scrollTrigger: { + trigger: "#dev", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// object animation +gsap.from("#dev .col:nth-child(2)", { + duration: 0.5, + x: "-5rem", + scale: 0.5, + opacity: 0, + delay: 0.75, + filter: "blur(10px)", + scrollTrigger: { + trigger: "#dev", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); + +// line animation +gsap.from("#dev-to-contact path", { + drawSVG: 0, + ease: "none", + scrollTrigger: { + trigger: "#dev-to-contact path", + scrub: true, + start: "top 75%", + end: "bottom 75%", + }, +}); + +////////////////////////////////////////// +// CONTACT + +// object animation +gsap.from("#community", { + duration: 0.5, + scale: 0.8, + opacity: 0, + //outline: "1px solid rgba(255,255,255,1)", + filter: "blur(10px)", + scrollTrigger: { + trigger: "#community", + start: "top 75%", // "triggerElement page" + toggleActions: defaultActions, + }, +}); diff --git a/src/assets/js/landing/_bitcoin-animation.js b/src/assets/js/landing/_bitcoin-animation.js new file mode 100644 index 0000000..8d85e81 --- /dev/null +++ b/src/assets/js/landing/_bitcoin-animation.js @@ -0,0 +1,91 @@ +/********************************************/ +/* BITCOIN SECTION FLOATING ICONS ANIMATION */ +/********************************************/ + +////////////////////////////////////////// +// DATA +// TODO: pull this from data js instead +const bitcoinServices = [ + "balanceofsatoshis", + "bitcoind", + "btc-rpc-proxy", + "btcpayserver", + "c-lightning", + "electrs", + "lightning-jet", + "lnd", + "lightning-terminal", + "lndg", + "mempool", + "ride-the-lightning", + "spark-wallet", + "specter", + "sphinx-relay", + "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; +} + +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/_contact-post.js b/src/assets/js/landing/_contact-post.js new file mode 100644 index 0000000..b2ed565 --- /dev/null +++ b/src/assets/js/landing/_contact-post.js @@ -0,0 +1,62 @@ +/********************************************/ +/* CONTACT POST */ +/********************************************/ + + +function showSuccess() { + hideError(); + emailSuccess.classList.add("form-alert--visible"); + } + + function hideSuccess() { + emailError.classList.remove("form-alert--visible"); + } + + function showError(message) { + hideSuccess(); + emailError.classList.add("form-alert--visible"); + emailError.innerHTML(message); + } + + function hideError() { + emailError.classList.remove("form-alert--visible"); + } + + document.getElementById("contactSubmit").addEventListener("click", function () { + const fromEmail = document.getElementById("fromEmail"); + const emailError = document.getElementById("emailError"); + const emailSuccess = document.getElementById("emailSuccess"); + + if ( + /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test( + fromEmail.value + ) + ) { + hideError(); + + try { + fetch(siteUrl + "app/php/email/v1/SendSupportMail.php", { + method: "POST", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + body: formBody, + }).then((response) => { + if (response.status === 200) { + showSuccess(); + } else { + showError( + "Something's not working. If you keep getting this error, try us at Twitter instead." + ); + } + }); + } catch (error) { + showError( + "Something's not working. If you keep getting this error, try us at Twitter instead." + ); + } + } else { + showError("Sorry, you must use a valid email address."); + } + }); + \ No newline at end of file diff --git a/src/assets/js/landing/_ticker-animation.js b/src/assets/js/landing/_ticker-animation.js new file mode 100644 index 0000000..cb97ede --- /dev/null +++ b/src/assets/js/landing/_ticker-animation.js @@ -0,0 +1,69 @@ +/********************************************/ +/* BE YOUR OWN TICKER ANIMATION */ +/********************************************/ + +const tickerTL = gsap.timeline(); + +let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"), + next = 4, + itemHeight, + listHeight, + windowHeight, + kerplunk, + kerplunk2; + +function initializeSizes() { + itemHeight = document + .querySelector(".pseudoservice") + .getBoundingClientRect().height; + + listHeight = document + .querySelector(".pseudoservices") + .getBoundingClientRect().height; + + windowHeight = document.getElementById("ticker__window").clientHeight; +} + +kerplunk = CustomEase.create( + "custom", + "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 " +); + +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 " +); + +function tick() { + var 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()); + + // start endless run + gsap.delayedCall(next, tick); + + var thisPseudoservice = pseudoserviceArray[2].innerHTML, + thisElement = document.querySelector( + ".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-") + ); + + var slidesContainerArray = document.querySelectorAll(".service-container"); + slidesContainerArray.forEach((thisContainer) => { + thisContainer.style.display = "none"; + }); + + if (thisElement) { + thisElement.style.display = "flex"; + } +} + +// initialize +gsap.delayedCall(next, tick); \ No newline at end of file diff --git a/src/assets/js/CustomEase.min.js b/src/assets/js/libraries/CustomEase.min.js similarity index 96% rename from src/assets/js/CustomEase.min.js rename to src/assets/js/libraries/CustomEase.min.js index 26b681c..ec0650c 100644 --- a/src/assets/js/CustomEase.min.js +++ b/src/assets/js/libraries/CustomEase.min.js @@ -1,10 +1,6 @@ /*! * CustomEase 3.10.4 * https://greensock.com - * - * @license Copyright 2022, GreenSock. All rights reserved. - * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership. - * @author: Jack Doyle, jack@greensock.com */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function m(e){return Math.round(1e5*e)/1e5||0}var b=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,w=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,Y=Math.PI/180,k=Math.sin,B=Math.cos,F=Math.abs,J=Math.sqrt;function arcToSegment(e,t,n,s,a,r,i,o,h){if(e!==o||t!==h){n=F(n),s=F(s);var u=a%360*Y,f=B(u),c=k(u),l=Math.PI,g=2*l,x=(e-o)/2,d=(t-h)/2,m=f*x+c*d,p=-c*x+f*d,y=m*m,M=p*p,v=y/(n*n)+M/(s*s);1u.x||u.y!==h.y&&u.x===h.x||h===u)&&h.x<=1?(u.cx=h.x-u.x,u.cy=h.y-u.y,u.n=h,u.nx=h.x,p&&1f||r===u-1)&&(n.push(c,l),a=(h-l)/(o-c)),c=o,l=h;n="M"+n.join(",")}return y&&y.setAttribute("d",n),n},CustomEase);function CustomEase(e,t,n){a||q(),this.id=e,this.setData(t,n)}p()&&M.registerPlugin(n),n.version="3.10.4",e.CustomEase=n,e.default=n;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}}); diff --git a/src/assets/js/DrawSVGPlugin.min.js b/src/assets/js/libraries/DrawSVGPlugin.min.js similarity index 92% rename from src/assets/js/DrawSVGPlugin.min.js rename to src/assets/js/libraries/DrawSVGPlugin.min.js index daff068..840255e 100644 --- a/src/assets/js/DrawSVGPlugin.min.js +++ b/src/assets/js/libraries/DrawSVGPlugin.min.js @@ -1,10 +1,6 @@ /*! * DrawSVGPlugin 3.9.1 * https://greensock.com - * - * @license Copyright 2021, GreenSock. All rights reserved. - * This plugin is a membership benefit of Club GreenSock and is only authorized for use in sites/apps/products developed by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club - * @author: Jack Doyle, jack@greensock.com */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function i(){return"undefined"!=typeof window}function j(){return a||i()&&(a=window.gsap)&&a.registerPlugin&&a}function m(e){return Math.round(1e4*e)/1e4}function n(e){return parseFloat(e)||0}function o(e,t){var r=n(e);return~e.indexOf("%")?r/100*t:r}function p(e,t){return n(e.getAttribute(t))}function r(e,t,r,i,s,o){return P(Math.pow((n(r)-n(e))*s,2)+Math.pow((n(i)-n(t))*o,2))}function s(e){return console.warn(e)}function t(e){return"non-scaling-stroke"===e.getAttribute("vector-effect")}function w(e){if(!(e=v(e)[0]))return 0;var n,i,o,a,f,h,d,l=e.tagName.toLowerCase(),u=e.style,c=1,g=1;t(e)&&(g=e.getScreenCTM(),c=P(g.a*g.a+g.b*g.b),g=P(g.d*g.d+g.c*g.c));try{i=e.getBBox()}catch(e){s("Some browsers won't measure invisible elements (like display:none or masks inside defs).")}var _=i||{x:0,y:0,width:0,height:0},y=_.x,w=_.y,x=_.width,m=_.height;if(i&&(x||m)||!k[l]||(x=p(e,k[l][0]),m=p(e,k[l][1]),"rect"!==l&&"line"!==l&&(x*=2,m*=2),"line"===l&&(y=p(e,"x1"),w=p(e,"y1"),x=Math.abs(x-y),m=Math.abs(m-w))),"path"===l)a=u.strokeDasharray,u.strokeDasharray="none",n=e.getTotalLength()||0,c!==g&&s("Warning: length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled."),n*=(c+g)/2,u.strokeDasharray=a;else if("rect"===l)n=2*x*c+2*m*g;else if("line"===l)n=r(y,w,y+x,w+m,c,g);else if("polyline"===l||"polygon"===l)for(o=e.getAttribute("points").match(b)||[],"polygon"===l&&o.push(o[0],o[1]),n=0,f=2;ft._length-.2&&(s+=s<0?.1:-.1)&&(n+=.1),a.strokeDashoffset=i?s:s+.001,a.strokeDasharray=n<.2?"none":i?i+"px,"+(t._nowrap?999999:n)+"px":"0px, 999999px"}},getLength:w,getPosition:x};j()&&a.registerPlugin(f),e.DrawSVGPlugin=f,e.default=f;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}}); diff --git a/src/assets/js/ScrollSmoother.min.js b/src/assets/js/libraries/ScrollSmoother.min.js similarity index 96% rename from src/assets/js/ScrollSmoother.min.js rename to src/assets/js/libraries/ScrollSmoother.min.js index 295dfd4..b101029 100644 --- a/src/assets/js/ScrollSmoother.min.js +++ b/src/assets/js/libraries/ScrollSmoother.min.js @@ -1,10 +1,6 @@ /*! * ScrollSmoother 3.10.4 * https://greensock.com - * - * @license Copyright 2022, GreenSock. All rights reserved. - * This plugin is a membership benefit of Club GreenSock and is only authorized for use in sites/apps/products developed by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club - * @author: Jack Doyle, jack@greensock.com */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;rMath.abs(l)?a:l)/(1-t),u=-c*t;return 0=t.start&&r<=t.end)return void(l&&(t.trig.progress+=t.trig.direction<0?.001:-.001,t.trig.update(0,0,1),l.resetTo("y",parseFloat(d.y),-C,!0),P&&l.progress(1)));r>t.end&&(s+=t.distance),n-=t.distance}o=h+s+v*((B.utils.clamp(e.start,e.end,r)-e.start-s)/(n-e.start)-c)}o=function _round(e){return Math.round(1e5*e)/1e5||0}(o+u),p.length&&!a&&p.forEach(function(e){return e(o-s)}),l?(l.resetTo("y",o,-C,!0),P&&l.progress(1)):(d.y=o+"px",d.renderTransform(1))}}})),B.core.getCache(i.trigger).stRevert=Da,i.startY=h,i.pins=g,i.markers=p,i.ratio=o,i.autoSpeed=a,r.style.willChange="transform"),i}var n,m,t,i,w,s,a,l,c,u,r,f,h,d,g=e.smoothTouch,p=e.onUpdate,v=e.onStop,b=e.smooth,S=e.onFocusIn,T=e.normalizeScroll,x=L.getScrollFunc(F),E=1===L.isTouch?!0===g?.8:parseFloat(g)||0:0===b||!1===b?0:parseFloat(b)||.8,k=0,C=0,P=1,_=V(0),R={y:0};function refreshHeight(){return t=n.clientHeight,n.style.overflow="visible",I.style.height=t+"px",t-F.innerHeight}L.addEventListener("refresh",Ba),B.delayedCall(.5,function(){return P=0}),this.scrollTop=xa,this.scrollTo=function(e,t,r){var n=B.utils.clamp(0,L.maxScroll(F),isNaN(e)?o.offset(e,r):+e);t?u?B.to(o,{duration:E,scrollTop:n,overwrite:"auto",ease:O}):x(n):xa(n)},this.offset=function(e,t){var r,n=(e=U(e)[0]).style.cssText,o=L.create({trigger:e,start:t||"top top"});return w&&Aa([o]),r=o.start,o.kill(!1),e.style.cssText=n,B.core.getCache(e).uncache=1,r},this.content=function(e){if(arguments.length){var t=U(e||"#smooth-content")[0]||I.children[0];return t!==n&&(c=(n=t).getAttribute("style")||"",B.set(n,{overflow:"visible",width:"100%",boxSizing:"border-box"})),this}return n},this.wrapper=function(e){return arguments.length?(m=U(e||"#smooth-wrapper")[0]||function _wrap(e){var t=z.querySelector(".ScrollSmoother-wrapper");return t||((t=z.createElement("div")).classList.add("ScrollSmoother-wrapper"),e.parentNode.insertBefore(t,e),t.appendChild(e)),t}(n),l=m.getAttribute("style")||"",refreshHeight(),B.set(m,E?{overflow:"hidden",position:"fixed",height:"100%",width:"100%",top:0,left:0,right:0,bottom:0}:{overflow:"visible",position:"relative",width:"100%",height:"auto",top:"auto",bottom:"auto",left:"auto",right:"auto"}),this):m},this.effects=function(e,t){if(w=w||[],!e)return w.slice(0);(e=U(e)).forEach(function(e){for(var t=w.length;t--;)w[t].trigger===e&&(w[t].kill(),w.splice(t,1))});t=t||{};var r,n,o=t.speed,i=t.lag,s=[];for(r=0;r=Math.abs(r)?t:r}function N(){(Be=we.core.globals().ScrollTrigger)&&Be.core&&function _integrate(){var e=Be.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,T),n.push.apply(n,Le),T=t,Le=n,o=function _bridge(e,t){return r[e](t)}}()}function O(e){return(we=e||q())&&"undefined"!=typeof document&&document.body&&(Me=window,Ce=(Ae=document).documentElement,Oe=Ae.body,t=[Me,Ae,Ce,Oe],we.utils.clamp,Ie="onpointerenter"in Oe?"pointer":"mouse",Ee=k.isTouch=Me.matchMedia&&Me.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Me||0=i,n=Math.abs(t)>=i;T&&(r||n)&&T(se,e,t,be,me),r&&(m&&0Math.abs(t)?"x":"y",oe=!0),o?ee=ee||requestAnimationFrame(Se):Se()}function Ve(e){if(!Qe(e,1)){var t=(e=L(e,s)).clientX,r=e.clientY,n=t-se.x,i=r-se.y,o=se.isDragging;se.x=t,se.y=r,(o||Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a)&&(h&&(re=!0),o||(se.isDragging=!0),Ue(n,i),o||p&&p(se))}}function Xe(t){if(!Qe(t,1)){B(F?n:ve,ze[1],Ve,!0);var e=se.isDragging&&(3=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=o(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in Y?Y[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function ub(e,t,r,n,i,o,a,s){var l=i.startColor,c=i.endColor,u=i.fontSize,f=i.indent,d=i.fontWeight,p=Je.createElement("div"),g=Ba(r)||"fixed"===y(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?Ge:r,b=-1!==e.indexOf("start"),m=b?l:c,x="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return x+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(x+=(n===Ne?_:P)+":"+(o+parseFloat(f))+"px;"),a&&(x+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=x,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],X(p,0,n,b),p}function zb(){return 34Ge.clientWidth)||(T.cache++,x=x||requestAnimationFrame(ee),pt||V("scrollStart"),pt=dt())}function Bb(){m=je.innerWidth,b=je.innerHeight}function Cb(){T.cache++,rt||g||Je.fullscreenElement||Je.webkitFullscreenElement||v&&m===je.innerWidth&&!(Math.abs(je.innerHeight-b)>.25*je.innerHeight)||l.restart(!0)}function Ib(e){var t,r=We.ticker.frame,n=[],i=0;if(w!==r||ft){for(Q();i=O})},Se.update=function(e,t,r){if(!fe||r||e){var n,i,o,a,s,l,c,u=Se.scroll(),f=e?0:(u-C)/z,d=f<0?0:1=Fa(ve,ge),ue)if(e||!n&&!l)fc(ie,L);else{var g=Mt(ie,!0),h=u-C;fc(ie,Ge,g.top+(ge===Ne?h:0)+kt,g.left+(ge===Ne?0:h)+kt)}It(n||l?X:F),N!==z&&d<1&&n||b(R+(1!==d||l?0:N))}}else b(ya(R+N*d));!ce||k.tween||rt||ft||j.restart(!0),$&&(s||le&&d&&(d<1||!st))&&Ke($.targets).forEach(function(e){return e.classList[n||le?"add":"remove"]($.className)}),!Z||he||e||Z(Se),a&&!rt?(he&&(c&&("complete"===o?T.pause().totalProgress(1):"reset"===o?T.restart(!0).pause():"restart"===o?T.restart(!0):T[o]()),Z&&Z(Se)),!s&&st||(ee&&s&&Oa(Se,ee),ye[i]&&Oa(Se,ye[i]),le&&(1===d?Se.kill(!1,1):ye[i]=0),s||ye[i=1===d?1:3]&&Oa(Se,ye[i])),de&&!n&&Math.abs(Se.getVelocity())>(Ja(de)?de:2500)&&(Na(Se.callbackAnimation),W?W.progress(1):Na(T,!d,1))):he&&Z&&!rt&&Z(Se)}if(w){var v=fe?u/fe.duration()*(fe._caScrollDist||0):u;x(v+(B._isFlipped?1:0)),w(v)}K&&K(-u/fe.duration()*(fe._caScrollDist||0))}},Se.enable=function(e,t){Se.enabled||(Se.enabled=!0,nb(ve,"resize",Cb),nb(be?Je:ve,"scroll",Ab),_e&&nb(ScrollTrigger,"refreshInit",_e),!1!==e&&(Se.progress=Q=0,M=A=Me=Ce()),!1!==t&&Se.refresh())},Se.getTween=function(e){return e&&k?k.tween:W},Se.setPositions=function(e,t){ie&&(R+=e-C,N+=t-e-z),Se.start=C=e,Se.end=O=t,z=t-e,Se.update()},Se.disable=function(e,t){if(Se.enabled&&(!1!==e&&Se.revert(),Se.enabled=Se.isActive=!1,t||W&&W.pause(),q=0,n&&(n.uncache=1),_e&&ob(ScrollTrigger,"refreshInit",_e),j&&(j.pause(),k.tween&&k.tween.kill()&&(k.tween=0)),!be)){for(var r=Ot.length;r--;)if(Ot[r].scroller===ve&&Ot[r]!==Se)return;ob(ve,"resize",Cb),ob(ve,"scroll",Ab)}},Se.kill=function(e,t){Se.disable(e,t),W&&!t&&W.kill(),a&&delete Pt[a];var r=Ot.indexOf(Se);0<=r&&Ot.splice(r,1),r===it&&0o&&(h()>o?s.progress(1)&&h(o):s.resetTo("scrollY",o))}Ka(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var r,o,n,a,s,l,c,u,f=e.normalizeScrollX,t=e.momentum,i=e.allowNestedScroll,d=I(e.target)||qe,p=We.core.globals().ScrollSmoother,g=C&&(e.content&&I(e.content)||p&&p.get()&&p.get().content()),h=J(d,Ne),v=J(d,Re),b=1,m=(k.isTouch&&je.visualViewport?je.visualViewport.scale*je.visualViewport.width:je.outerWidth)/je.innerWidth,y=0,x=Ia(t)?function(){return t(r)}:function(){return t||2.8},w=mc(d,e.type,!0,i),S=xa,_=xa;return e.ignoreCheck=function(e){return C&&"touchmove"===e.type&&function ignoreDrag(){if(n){requestAnimationFrame(op);var e=ya(r.deltaY/2),t=_(h.v-e);return g&&t!==h.v+h.offset&&(h.offset=t-h.v,g.style.transform="translateY("+-h.offset+"px)",g._gsap&&(g._gsap.y=-h.offset+"px"),h.cacheID=T.cache,ee()),!0}g&&(g.style.transform="translateY(0px)",h.offset=h.cacheID=0,g._gsap&&(g._gsap.y="0px")),n=!0}()||1.05=o||o-1<=r)&&We.to({},{onUpdate:xp,duration:i})}else u.restart(!0)},e.onWheel=function(){s._ts&&s.pause(),1e30?setTimeout((function(){e(r,n,s)}),1):(t.update(),n(s))}}},"./src/filter.js":function(t){t.exports=function(t){return t.handlers.filterStart=t.handlers.filterStart||[],t.handlers.filterComplete=t.handlers.filterComplete||[],function(e){if(t.trigger("filterStart"),t.i=1,t.reset.filter(),void 0===e)t.filtered=!1;else{t.filtered=!0;for(var r=t.items,n=0,s=r.length;nv.page,a=new g(t[s],void 0,n),v.items.push(a),r.push(a)}return v.update(),r}m(t.slice(0),e)}},this.show=function(t,e){return this.i=t,this.page=e,v.update(),v},this.remove=function(t,e,r){for(var n=0,s=0,i=v.items.length;s-1&&r.splice(n,1),v},this.trigger=function(t){for(var e=v.handlers[t].length;e--;)v.handlers[t][e](v);return v},this.reset={filter:function(){for(var t=v.items,e=t.length;e--;)t[e].filtered=!1;return v},search:function(){for(var t=v.items,e=t.length;e--;)t[e].found=!1;return v}},this.update=function(){var t=v.items,e=t.length;v.visibleItems=[],v.matchingItems=[],v.templater.clear();for(var r=0;r=v.i&&v.visibleItems.lengthe},innerWindow:function(t,e,r){return t>=e-r&&t<=e+r},dotted:function(t,e,r,n,s,i,a){return this.dottedLeft(t,e,r,n,s,i)||this.dottedRight(t,e,r,n,s,i,a)},dottedLeft:function(t,e,r,n,s,i){return e==r+1&&!this.innerWindow(e,s,i)&&!this.right(e,n)},dottedRight:function(t,e,r,n,s,i,a){return!t.items[a-1].values().dotted&&(e==n&&!this.innerWindow(e,s,i)&&!this.right(e,n))}};return function(e){var n=new i(t.listContainer.id,{listClass:e.paginationClass||"pagination",item:e.item||"
    • ",valueNames:["page","dotted"],searchClass:"pagination-search-that-is-not-supposed-to-exist",sortClass:"pagination-sort-that-is-not-supposed-to-exist"});s.bind(n.listContainer,"click",(function(e){var r=e.target||e.srcElement,n=t.utils.getAttribute(r,"data-page"),s=t.utils.getAttribute(r,"data-i");s&&t.show((s-1)*n+1,n)})),t.on("updated",(function(){r(n,e)})),r(n,e)}}},"./src/parse.js":function(t,e,r){t.exports=function(t){var e=r("./src/item.js")(t),n=function(r,n){for(var s=0,i=r.length;s0?setTimeout((function(){e(r,s)}),1):(t.update(),t.trigger("parseComplete"))};return t.handlers.parseComplete=t.handlers.parseComplete||[],function(){var e=function(t){for(var e=t.childNodes,r=[],n=0,s=e.length;n]/g.exec(t)){var e=document.createElement("tbody");return e.innerHTML=t,e.firstElementChild}if(-1!==t.indexOf("<")){var r=document.createElement("div");return r.innerHTML=t,r.firstElementChild}}},a=function(e,r,n){var s=void 0,i=function(e){for(var r=0,n=t.valueNames.length;r=1;)t.list.removeChild(t.list.firstChild)},function(){var r;if("function"!=typeof t.item){if(!(r="string"==typeof t.item?-1===t.item.indexOf("<")?document.getElementById(t.item):i(t.item):s()))throw new Error("The list needs to have at least one item on init otherwise you'll have to add a template.");r=n(r,t.valueNames),e=function(){return r.cloneNode(!0)}}else e=function(e){var r=t.item(e);return i(r)}}()};t.exports=function(t){return new e(t)}},"./src/utils/classes.js":function(t,e,r){var n=r("./src/utils/index-of.js"),s=/\s+/;Object.prototype.toString;function i(t){if(!t||!t.nodeType)throw new Error("A DOM element reference is required");this.el=t,this.list=t.classList}t.exports=function(t){return new i(t)},i.prototype.add=function(t){if(this.list)return this.list.add(t),this;var e=this.array();return~n(e,t)||e.push(t),this.el.className=e.join(" "),this},i.prototype.remove=function(t){if(this.list)return this.list.remove(t),this;var e=this.array(),r=n(e,t);return~r&&e.splice(r,1),this.el.className=e.join(" "),this},i.prototype.toggle=function(t,e){return this.list?(void 0!==e?e!==this.list.toggle(t,e)&&this.list.toggle(t):this.list.toggle(t),this):(void 0!==e?e?this.add(t):this.remove(t):this.has(t)?this.remove(t):this.add(t),this)},i.prototype.array=function(){var t=(this.el.getAttribute("class")||"").replace(/^\s+|\s+$/g,"").split(s);return""===t[0]&&t.shift(),t},i.prototype.has=i.prototype.contains=function(t){return this.list?this.list.contains(t):!!~n(this.array(),t)}},"./src/utils/events.js":function(t,e,r){var n=window.addEventListener?"addEventListener":"attachEvent",s=window.removeEventListener?"removeEventListener":"detachEvent",i="addEventListener"!==n?"on":"",a=r("./src/utils/to-array.js");e.bind=function(t,e,r,s){for(var o=0,l=(t=a(t)).length;o32)return!1;var a=n,o=function(){var t,r={};for(t=0;t=p;b--){var j=o[t.charAt(b-1)];if(C[b]=0===m?(C[b+1]<<1|1)&j:(C[b+1]<<1|1)&j|(v[b+1]|v[b])<<1|1|v[b+1],C[b]&d){var x=l(m,b-1);if(x<=u){if(u=x,!((c=b-1)>a))break;p=Math.max(1,2*a-c)}}}if(l(m+1,a)>u)break;v=C}return!(c<0)}},"./src/utils/get-attribute.js":function(t){t.exports=function(t,e){var r=t.getAttribute&&t.getAttribute(e)||null;if(!r)for(var n=t.attributes,s=n.length,i=0;i=48&&t<=57}function i(t,e){for(var i=(t+="").length,a=(e+="").length,o=0,l=0;o=i&&l=a?-1:l>=a&&o=i?1:i-a}i.caseInsensitive=i.i=function(t,e){return i((""+t).toLowerCase(),(""+e).toLowerCase())},Object.defineProperties(i,{alphabet:{get:function(){return e},set:function(t){r=[];var s=0;if(e=t)for(;s { -// ScrollTrigger.create({ -// trigger: "#" + slug, -// start: "top 25%", -// end: "bottom 25%", -// //markers: { startColor: "white", endColor: "white" }, -// onEnter: () => { -// window.location.href = "#" + slug; -// }, -// onEnterBack: () => { -// window.location.href = "#" + slug; -// }, -// }); -// }); -// }, 2000); - -//gsap.config({trialWarn: false}); - -// create the smooth scroller FIRST! -// ScrollSmoother.create({ -// smooth: 2, // seconds it takes to "catch up" to native scroll position -// effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly -// wrapper: '.scroll_track', -// content: '.scroll_track_content' -// }); - -// backdrop-filter: blur(10px); -//background-color: rgba(0,0,0,0.1); - -gsap.from("#hero-to-pitch path:first-child", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#hero-to-pitch", - scrub: true, - start: "top 50%", // "triggerElement page" - end: "bottom 50%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -////////////////////////////////////////// -// PITCH - -gsap.from("#pitch h1, #pitch p", { - duration: 0.5, - y: "5rem", - scale: 0.9, - opacity: 0, - scrollTrigger: { - trigger: "#pitch", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -console.log('test'); - -// gsap.from("#pitch iframe", { -// duration: 0.5, -// opacity: 0, -// filter: "blur(10px)", -// scrollTrigger: { -// trigger: "#pitch", -// start: "top 75%", // "triggerElement page" -// toggleActions: defaultActions, -// }, -// }); - -////////////////////////////////////////// -// PRODUCTS - -gsap.from("#products .subsection:nth-child(1)", { - duration: 0.5, - opacity: 0, - outline: "1px solid rgba(255,255,255,1)", - scrollTrigger: { - trigger: "#products", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#products .subsection:nth-child(2)", { - duration: 0.5, - delay: 0.25, - opacity: 0, - outline: "1px solid rgba(255,255,255,1)", - scrollTrigger: { - trigger: "#products", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -const buyAnchor = document.querySelector(".product--buy"); - -const buyTL = gsap - .timeline({ paused: true }) - .from( - "#buy-real-lines path:first-child", - { drawSVG: 0, ease: "none", duration: 0.75 }, - 0 - ) - .to( - ".product__buy-image", - { //opacity: 0.5, - ease: "none", - duration: 0.25, - filter: "drop-shadow(0 0 2rem rgba(0,0,0,.5)) invert(.9)" - }, - 0 - ); - -buyAnchor.onmouseenter = () => buyTL.play(); -buyAnchor.onmouseleave = () => buyTL.reverse(); - -// const diyAnchor = document.querySelector(".product--diy"); - -// const diyTL = gsap -// .timeline({ paused: true }) -// .from( -// "#diy-lines path:first-child", -// { drawSVG: 0, ease: "none", duration: 0.75 }, -// 0 -// ) -// .to( -// ".product--diy img:first-child", -// { opacity: 0.4, ease: "none", duration: 0.25 }, -// 0 -// ); - -// diyAnchor.onmouseenter = () => diyTL.play(); -// diyAnchor.onmouseleave = () => diyTL.reverse(); - -gsap.from("#products-to-info path:first-child", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#products-to-info path:first-child", - scrub: true, - start: "top 75%", // "triggerElement page" - end: "bottom 75%", // "triggerElement page" - }, -}); - -// gsap.from("#products-to-info path:nth-child(2)", { -// drawSVG: 0, -// ease: "none", -// scrollTrigger: { -// trigger: "#products-to-info path:nth-child(2)", -// scrub: true, -// start: "top 75%", // "triggerElement page" -// end: "bottom 75%", // "triggerElement page" -// }, -// }); - -// gsap.from("#products-to-info path:nth-child(3)", { -// drawSVG: 0, -// ease: "none", -// scrollTrigger: { -// trigger: "#products-to-info path:nth-child(3)", -// scrub: true, -// start: "top 75%", // "triggerElement page" -// end: "bottom 75%", // "triggerElement page" -// }, -// }); - -////////////////////////////////////////// -// INFOGRAPHICS - -gsap.from("#infographics .subsection:nth-child(1)", { - duration: 0.5, - opacity: 0, - outline: "1px solid rgba(255,255,255,1)", - scrollTrigger: { - trigger: "#infographics .subsection:nth-child(1)", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#infographics .subsection:nth-child(2)", { - duration: 0.5, - opacity: 0, - outline: "1px solid rgba(255,255,255,1)", - scrollTrigger: { - trigger: "#infographics .subsection:nth-child(2)", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -////////////////////////////////////////// -// BITCOIN - -gsap.from("#bitcoin .subsection:nth-of-type(1)", { - duration: 1, - opacity: 0, - filter: "blur(10px)", - y: "5rem", - scrollTrigger: { - trigger: "#bitcoin .subsection:nth-of-type(1)", - start: "top bottom", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#bitcoin .subsection:nth-of-type(2)", { - duration: 1, - opacity: 0, - filter: "blur(10px)", - y: "-5rem", - scrollTrigger: { - trigger: "#bitcoin .subsection:nth-of-type(2)", - start: "top bottom", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -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; -} - -//positionServiceIcons(); - -const timelineServiceIcons = gsap.timeline({ - onComplete() { - //deleteSplit(); - //scroll.update(); - //resolve(); - console.log("complete"); - }, -}); - -function positionServiceIcons() { - console.log("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" }, - }, - }); - } - }); -} - -const tickerTL = gsap.timeline(); - -function onResizeComplete() { - positionServiceIcons(); - initializeSizes(); - //gsap.delayedCall(next, crossfade); - //tickerTL.resizePlay ? tickerTL.resizePlay.restart(true) : ""; -} - -var resizeTimeout = setTimeout(onResizeComplete, 400); -window.onresize = function () { - // if (tickerTL.isActive()) tickerTL.pause(); - // if (!tickerTL.resizePlay) - // tickerTL.resizePlay = gsap.delayedCall(0.2, function () { - // tickerTL.play(); - // }); - - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(onResizeComplete, 400); - console.log("onresize"); -}; - -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 - -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, - }, -}); - -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, - }, -}); - -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, - }, -}); - -// TICKER - -let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"), - next = 4, - itemHeight, - listHeight, - windowHeight, - kerplunk, - kerplunk2; - -function initializeSizes() { - itemHeight = document - .querySelector(".pseudoservice") - .getBoundingClientRect().height; - - listHeight = document - .querySelector(".pseudoservices") - .getBoundingClientRect().height; - - windowHeight = document.getElementById("ticker__window").clientHeight; -} - -kerplunk = CustomEase.create( - "custom", - "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 " -); - -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 " -); - -function crossfade() { - var action = tickerTL - .to(pseudoserviceArray, { - id: "thunk", - y: "-=" + itemHeight, - duration: 1, - ease: kerplunk2, - overwrite: true, - }) - .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end - - pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array - - // start endless run - gsap.delayedCall(next, crossfade); - - var thisPseudoservice = pseudoserviceArray[2].innerHTML, - thisElement = document.querySelector( - ".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-") - ); - - var slidesContainerArray = document.querySelectorAll(".service-container"); - slidesContainerArray.forEach((thisContainer) => { - thisContainer.style.display = "none"; - }); - - if (thisElement) { - thisElement.style.display = "flex"; - } -} - -gsap.delayedCall(next, crossfade); - -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 - -gsap.from("#powered-by h1", { - duration: 0.5, - y: "-5rem", - opacity: 0, - scrollTrigger: { - trigger: "#powered-by h1", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#powered-by p", { - duration: 0.5, - filter: "blur(10px)", - opacity: 0, - scrollTrigger: { - trigger: "#powered-by h1", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#powered-by svg", { - duration: 1, - filter: "blur(20px)", - opacity: 0, - scrollTrigger: { - trigger: "#powered-by svg", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#powered-to-support path", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#powered-to-support path", - scrub: true, - start: "top 75%", - end: "bottom 75%", - }, -}); - -////////////////////////////////////////// -// SUPPORT - -gsap.from("#support", { - duration: 0.5, - opacity: 0, - outline: "1px solid rgba(255,255,255,1)", - scrollTrigger: { - trigger: "#support", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#support-to-dev path", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#support-to-dev path", - scrub: true, - start: "top 75%", - end: "bottom 75%", - }, -}); - -////////////////////////////////////////// -// DEV - -gsap.from("#dev h1", { - duration: 0.5, - scale: 0.8, - opacity: 0, - filter: "blur(10px)", - scrollTrigger: { - trigger: "#dev", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#dev .col:nth-child(1)", { - duration: 0.5, - x: "5rem", - opacity: 0, - delay: 0.5, - outline: "1px solid rgba(255,255,255,1)", - filter: "blur(10px)", - scrollTrigger: { - trigger: "#dev", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#dev .col:nth-child(2)", { - duration: 0.5, - x: "-5rem", - scale: 0.5, - opacity: 0, - delay: 0.75, - filter: "blur(10px)", - scrollTrigger: { - trigger: "#dev", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -gsap.from("#dev-to-contact path", { - drawSVG: 0, - ease: "none", - scrollTrigger: { - trigger: "#dev-to-contact path", - scrub: true, - start: "top 75%", - end: "bottom 75%", - }, -}); - -////////////////////////////////////////// -// CONTACT - -gsap.from("#community", { - duration: 0.5, - scale: 0.8, - opacity: 0, - //outline: "1px solid rgba(255,255,255,1)", - filter: "blur(10px)", - scrollTrigger: { - trigger: "#community", - start: "top 75%", // "triggerElement page" - toggleActions: defaultActions, - }, -}); - -///////////////////////////////////////// -// EMAIL POST - -function showSuccess() { - hideError(); - emailSuccess.classList.add("form-alert--visible"); -} - -function hideSuccess() { - emailError.classList.remove("form-alert--visible"); -} - -function showError(message) { - hideSuccess(); - emailError.classList.add("form-alert--visible"); - emailError.innerHTML(message); -} - -function hideError() { - emailError.classList.remove("form-alert--visible"); -} - -document.getElementById("contactSubmit").addEventListener("click", function () { - const fromEmail = document.getElementById("fromEmail"); - const emailError = document.getElementById("emailError"); - const emailSuccess = document.getElementById("emailSuccess"); - - if ( - /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test( - fromEmail.value - ) - ) { - hideError(); - - try { - fetch(siteUrl + "app/php/email/v1/SendSupportMail.php", { - method: "POST", - headers: { - "Content-Type": "application/x-www-form-urlencoded", - }, - body: formBody, - }).then((response) => { - if (response.status === 200) { - showSuccess(); - } else { - showError( - "Something's not working. If you keep getting this error, try us at Twitter instead." - ); - } - }); - } catch (error) { - showError( - "Something's not working. If you keep getting this error, try us at Twitter instead." - ); - } - } else { - showError("Sorry, you must use a valid email address."); - } -}); diff --git a/src/assets/js/peripheral.js b/src/assets/js/peripheral.js index 5e0eb40..9ea5b21 100644 --- a/src/assets/js/peripheral.js +++ b/src/assets/js/peripheral.js @@ -1,3 +1,7 @@ +////////////////////////////////////////// +// GSAP ACTIONS +// options: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none" +// arguments: onEnter, onLeave, onEnterBack, and onLeaveBack const defaultActions = "play none none none"; gsap.from("section#hero+section", { diff --git a/src/assets/styles/be-your-own copy.scss b/src/assets/styles/be-your-own copy.scss deleted file mode 100644 index 6676368..0000000 --- a/src/assets/styles/be-your-own copy.scss +++ /dev/null @@ -1,147 +0,0 @@ -#be-your-own { - display: flex; - flex-direction: column; - align-items: center; - gap: 3rem; - //margin: 0 0 6rem 0; - padding: 0 6rem 0 6rem; - box-sizing: border-box; - width: 100%; - - --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)); - --line: calc(var(--p-t) + var(--p-b) + var(--size)); - - 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); - text-transform: uppercase; - line-height: var(--size); - position: absolute; - top: calc(2 * var(--line)); - left: -.5ch; - right: 0; - display: flex; - align-items: center; - height: var(--size); - padding: var(--p); - background-color: #353535; - border-bottom: 0.5rem #353535 solid; - } - #ticker__window { - height: 50vh; - width: calc(100vw - 12rem - 11.5ch); - overflow: hidden; - font-size: var(--size); - left: 11.5ch; - position: relative; - } - - 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; - } - } - - .services{ - display: none; - position: absolute; - top: calc(3 * var(--line)); - background-color: #353535; - padding: 2rem; - width: calc(11.5ch - 4rem); - font-size: var(--size); - left: -1rem; - - img{ - border-radius: 100%; - width: 5rem; - } - - .service{ - display: flex; - align-items: center; - - .service__content{ - color: var(--c-1); - font-size: 1rem; - font-weight: 400; - display: flex; - align-items: center; - gap: 1rem; - } - } - } - } - 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: rgba(255,255,255,0.9); - 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; -} \ No newline at end of file diff --git a/src/assets/styles/be-your-own.scss b/src/assets/styles/be-your-own.scss index d9b618f..273dbee 100644 --- a/src/assets/styles/be-your-own.scss +++ b/src/assets/styles/be-your-own.scss @@ -115,7 +115,6 @@ position: absolute; top: 0; bottom: 0; - //background-color: #353535; padding: 2rem; font-size: var(--size); left: -1rem; @@ -136,7 +135,7 @@ .service__content { width: 100%; - color: var(--c-1); + color: var(--c-text-primary); font-size: 1rem; font-weight: 400; display: flex; @@ -165,7 +164,7 @@ width: 12rem; &.service__image--gitea, &.service__image--photoview { - background-color: var(--c-1); + background-color: var(--c-bkg-offset); padding: 1rem; box-sizing: border-box; } @@ -212,11 +211,6 @@ bottom: 0; z-index: -1; } - - &:nth-child(n + 2) { - outline: 1px solid orange; - display: none !important; - } } } } @@ -254,7 +248,7 @@ position: absolute; font-size: 90px; font-weight: 700; - color: rgba(255, 255, 255, 0.9); + color: var(--c-bkg-light-fade9); display: flex; align-items: center; justify-content: center; diff --git a/src/assets/styles/bitcoin.scss b/src/assets/styles/bitcoin.scss index 7bd49fe..ca9dfe6 100644 --- a/src/assets/styles/bitcoin.scss +++ b/src/assets/styles/bitcoin.scss @@ -3,7 +3,7 @@ } section#bitcoin { - background-image: linear-gradient(180deg, #f7931a 0%, #7b1af8 100%); + background-image: linear-gradient(180deg, var(--c-bitcoin) 0%, var(--c-lightning) 100%); background-repeat: no-repeat; background-position: center center; background-size: 100%; @@ -15,6 +15,7 @@ section#bitcoin { z-index: -1; margin-bottom: -10rem; + // gradient to fade away from bkg &::before { content: ""; width: 100%; @@ -24,6 +25,7 @@ section#bitcoin { top: -100vh; } + // gradient to fade back to bkg &::after { content: ""; width: 100%; @@ -33,7 +35,8 @@ section#bitcoin { bottom: -100vh; } - #grid-blend-top { + // grid of squares (svg) + #grid-blend-top, #grid-blend-bottom { // mix-blend-mode: multiply; width: 100vw; rect { @@ -43,19 +46,10 @@ section#bitcoin { } } - #grid-blend-bottom { - width: 100vw; - rect { - fill: var(--c-bkg); - stroke: var(--c-bkg); - stroke-width: 2px; - } - } - p { max-width: min(35ch, 50vw); em { - color: var(--c-1); + color: var(--c-text-primary); font-weight: 700; } } @@ -65,7 +59,7 @@ section#bitcoin { gap: 3rem; } - .subsection:first-of-type { + .subsection--bitcoin { display: flex; flex-direction: column; place-self: flex-start; @@ -73,7 +67,7 @@ section#bitcoin { margin-left: 8rem; align-items: flex-start; } - .subsection:nth-of-type(2) { + .subsection--lightning { place-self: flex-end; display: flex; flex-direction: column; @@ -125,7 +119,7 @@ section#bitcoin { } &.service-icon--electrs { width: 7rem; - background-color: var(--c-1); + background-color: var(--c-bkg-offset); padding: 1rem; z-index: -6; } diff --git a/src/assets/styles/community.scss b/src/assets/styles/community.scss index 8015b6d..f6d847f 100644 --- a/src/assets/styles/community.scss +++ b/src/assets/styles/community.scss @@ -27,7 +27,7 @@ section#community { color: var(--c-text-primary); transition: var(--t-simple); &:focus{ - background-color: rgba(255,255,255,.1); + background-color: var(--c-bkg-light-fade1); } &:focus-visible{ outline: none; diff --git a/src/assets/styles/dev.scss b/src/assets/styles/dev.scss index 4ddd0c0..eba4ff7 100644 --- a/src/assets/styles/dev.scss +++ b/src/assets/styles/dev.scss @@ -16,7 +16,7 @@ gap:1rem; } .wrapper{ - background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05)); + background: var(--c-glass); max-width: 35ch; padding: 2rem; .content { @@ -27,7 +27,7 @@ font-weight: 300; font-size: 2rem; line-height: 1.1em; - color: var(--c-3); + color: var(--c-text-offset); text-transform: none; padding-bottom: 1rem; } @@ -43,7 +43,7 @@ position: relative; &::before{ position: absolute; - top: 15rem; + top: 12rem; left: -4rem; content: ''; display: block; diff --git a/src/assets/styles/footer.scss b/src/assets/styles/footer.scss index 004903d..3ba09d1 100644 --- a/src/assets/styles/footer.scss +++ b/src/assets/styles/footer.scss @@ -1,9 +1,9 @@ footer{ transform: translate(0px, 0vh); - //position: absolute; padding: 0; font-weight: 400; color: gray; + background-color: black; .footer__copyright, .footer__donate{ font-size: max(14px, 0.8rem); } @@ -17,7 +17,6 @@ footer{ } } } - background-color: black; .groups{ display: flex; flex-wrap: wrap; @@ -30,15 +29,8 @@ footer{ grid-row: span 2; } & > li { - //margin-top: 5rem; padding: 2.5rem 2.5rem; - &:nth-child(-n+2){ - // border-right: var(--b-secondary); - } } - // & > *{ - // outline: 1px solid orange; - // } } h1{ font-family: var(--f-accent-bold); @@ -64,24 +56,8 @@ footer{ path{ transition: var(--t-simple); } - // &::after{ - // content: ''; - // position: absolute; - // transition: var(--t-simple); - // display: inline-block; - // width:0; - // height: 85%; - // left: 50%; - // opacity: 0; - // } &:hover { color: var(--c-text-accent); - // &::after{ - // border: var(--b-primary); - // width: 110%; - // left: -5%; - // opacity: 1; - // } path { stroke: var(--c-text-accent); } @@ -92,7 +68,6 @@ footer{ &::before{ content: ''; z-index: -1; - //border: var(--b-primary); background-color: var(--c-text-accent); width: 110%; left: -5%; @@ -107,12 +82,12 @@ footer{ } } + .footer__canary{ + text-align: center; + padding: 2rem; + } } -.footer__canary{ - text-align: center; - padding: 2rem; -} @media only screen and (max-width: 1200px) { footer .groups li > a { diff --git a/src/assets/styles/highlights.scss b/src/assets/styles/highlights.scss index 4228074..cc14c9f 100644 --- a/src/assets/styles/highlights.scss +++ b/src/assets/styles/highlights.scss @@ -30,8 +30,8 @@ flex-direction: column; padding: 3%; list-style: none; - border-right: 1px dashed var(--c-1); - border-bottom: 1px dashed var(--c-1); + border-right: 1px dashed var(--c-line-primary); + border-bottom: 1px dashed var(--c-line-primary); box-sizing: border-box; &:nth-child(3n){ diff --git a/src/assets/styles/infographics.scss b/src/assets/styles/infographics.scss index c01f70e..10ca600 100644 --- a/src/assets/styles/infographics.scss +++ b/src/assets/styles/infographics.scss @@ -20,7 +20,7 @@ section#infographics{ content: ''; width: 100vw; position: absolute; - background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05)); + background: var(--c-glass); top: 0; bottom: 0; z-index: -1; @@ -33,7 +33,7 @@ section#infographics{ content: ''; width: 100vw; position: absolute; - background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); + background: var(--c-dark-glass); top: 0; bottom: 0; z-index: -1; diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss index ab9fce6..1517320 100644 --- a/src/assets/styles/landing.scss +++ b/src/assets/styles/landing.scss @@ -1,10 +1,3 @@ -/* - scroll bar width from vizion; - add shadows - maybe with animation - more responsive scaling from vizion - -*/ - @use 'pitch'; @use 'products'; @use 'infographics'; @@ -16,7 +9,7 @@ @use 'community'; -body, .ScrollSmoother-wrapper { +body { margin: 0; background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg"); @@ -36,7 +29,6 @@ section { --section-padding: 6vh; // min-height: calc(100vh - 2 * var(--section-padding)); // padding: 0 var(--section-padding); - // outline: 1px solid orange; } .subsection{ @@ -61,12 +53,12 @@ section { fill: var(--c-bkg); } -[class*="section--"]{ +.panel--shadow { box-shadow: var(--c-shadow-1) 0 3rem 3rem; } .section--inverse{ - background-color: rgba(255,255,255,0.2); + background-color: var(--c-bkg-light-fade2); backdrop-filter: blur(1rem); h1, p { color: var(--c-bkg); @@ -80,19 +72,10 @@ section { } .section--subtle{ - background-color: rgba(0,0,0,0.2); + background-color: var(--c-bkg-dark-fade2); backdrop-filter: blur(1rem); } -.section--bold{ - //background-color: rgba(239,75,99,0.2); - background-color: rgba(255,255,255,0.8); - --c-text-primary: black; - backdrop-filter: blur(1rem); -} - - - .line svg{ width: calc(100vw - (2 * 6rem)); max-width: 50vw; @@ -245,13 +228,13 @@ a.btn { } &.btn--subtle{ - color: #777777; + color: var(--c-gray3); font-size: 1.2rem; &::before { - background-color: white; + background-color: var(--c-bkg-offset); } &::after { - background-color: #eee; + background-color: var(--c-gray5); } } } @@ -300,69 +283,12 @@ a.btn { } } +// flipping some lines horizontally #bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev { transform: scaleX(-1); } -$pastels: (red, pink) (blue, purple) (green, yellow) - (#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f); -$cube-edge: 4em; - -// body { -// margin: 0; -// height: 100vh; -// // perspective: 25em; maybe move from main.css? -// // background-color: linear-gradient(); -// } - -// [class*="cube"] { -// position: absolute; -// } - -// .cube { -// top: 50%; -// left: 50%; -// transform-style: preserve-3d; -// font-size: 8vmin; -// animation: ani 8s ease-in-out infinite; - -// &__face { -// margin: -0.5 * $cube-edge; -// width: $cube-edge; -// height: $cube-edge; -// backface-visibility: hidden; -// --i: 0; -// --j: 1; -// transform: rotate3d(var(--i), var(--j), 0, var(--a)) -// translateZ(0.5 * $cube-edge); -// // interpolate because Sass apparently has issues with this -// background: #{"linear-gradient(var(--ga), var(--gs))"}; - -// &:nth-child(n + 5) { -// --i: 1; -// --j: 0; -// } - -// @for $f from 0 to 6 { -// &:nth-child(#{$f + 1}) { -// --a: if($f < 4, $f, pow(-1, $f)) * 90deg; -// --ga: random(360) * 1deg; -// --gs: nth($pastels, $f + 1); -// } -// } -// } -// } - -// @keyframes ani { -// from { -// transform: rotateY(2turn) rotateX(2turn); -// } -// to { -// transform: rotateY(1turn) rotateX(1turn); -// } -// } - @media screen and (max-width: 500px) { #hero{ //margin-top: 25vh; diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index c3bf6b4..046d231 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -7,33 +7,63 @@ background-attachment: fixed; --viewportWidth: calc(100vw - var(--scrollbarWidth)); + --c-red1: #EE6570; + --c-red2: #FF4961; + --c-red3: #E84258; + --c-red4: #993E4A; + + --c-gray1: #121212; + --c-gray2: #333333; + --c-gray3: #828282; + --c-gray4: #D1D1D1; + --c-gray5: #E0E0E0; + --c-gray6: #F4F4F5; + --c-1: rgba(255, 255, 255); --c-text-primary: var(--c-1); --c-line-primary: var(--c-1); + --c-bkg-offset: var(--c-1); - --c-2: #ef4b63; - --c-text-accent: var(--c-2); - --c-line-accent: var(--c-2); + // #ef4b63 - original color + --c-text-accent: var(--c-red2); + --c-line-accent: var(--c-red2); + --c-bkg-accent: var(--c-red2); - --c-3: #333; - --c-bkg: var(--c-3); + --c-bkg: var(--c-gray2); + --c-text-offset: var(--c-gray2); - --c-4: #ba1930; - --c-3d-shadow: var(--c-4); + --c-3d-shadow: var(--c-red4); --c-5: rgba(255, 255, 255, 1); --c-text-bright: var(--c-5); - --c-6: rgb(194, 194, 194); + --c-6: #c2c2c2; --c-7: #2fdf75; --c-success: var(--c-7); + --c-8: #ff0000; + --c-negative: var(--c-8); + + --c-bitcoin: #f7931a; + --c-lightning: #7b1af8; + --c-shadow-1: rgb(0 0 0 / 50%); --c-shadow-2: rgb(0 0 0 / 40%); --c-shadow-3: rgb(0 0 0 / 20%); - --c-spacer: rgba(255, 255, 255, 0.05); + --c-bkg-light-fade05: rgba(255,255,255,.05); + --c-bkg-light-fade1: rgba(255,255,255,.1); + --c-bkg-light-fade2: rgba(255,255,255,.2); + --c-bkg-light-fade9: rgba(255,255,255,.9); + + --c-bkg-dark-fade1: rgba(0,0,0,.1); + --c-bkg-dark-fade2: rgba(0,0,0,.2); + + --c-spacer: var(--c-bkg-light-fade05); + + --c-glass: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05)); + --c-dark-glass: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); --sh-2: 0 3rem 2rem 0rem var(--c-shadow-2); @@ -76,12 +106,12 @@ html { /* Handle */ ::-webkit-scrollbar-thumb { - background: var(--c-2); + background: var(--c-bkg-accent); } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background: var(--c-1); + background: var(--c-bkg-offset); } &.menu-is-open { @@ -145,13 +175,13 @@ p a { left: 0; height: 1px; border-radius: 2px; - background: linear-gradient(111.3deg, transparent 9.6%, var(--c-2) 93.6%); - background: linear-gradient(111.3deg, transparent 9.6%, var(--c-2) 50%, transparent 93.6%); + background: linear-gradient(111.3deg, transparent 9.6%, var(--c-bkg-accent) 93.6%); + background: linear-gradient(111.3deg, transparent 9.6%, var(--c-bkg-accent) 50%, transparent 93.6%); } &:hover { color: var(--c-text-accent); &::after { - background: linear-gradient(111.3deg, var(--c-2) 9.6%, var(--c-2) 93.6%); + background: linear-gradient(111.3deg, var(--c-bkg-accent) 9.6%, var(--c-bkg-accent) 93.6%); } } } @@ -274,7 +304,7 @@ nav { } &.scrolled-menu { backdrop-filter: blur(10px); - background-color: rgba(0, 0, 0, 0.1); + background-color: var(--c-bkg-dark-fade1); } } @@ -323,7 +353,7 @@ nav { } &.form-alert--error{ - background-color: red; + background-color: var(--c-negative); } &.form-alert--visible{ diff --git a/src/assets/styles/menu.scss b/src/assets/styles/menu.scss index 72fc7e0..3eb55dc 100644 --- a/src/assets/styles/menu.scss +++ b/src/assets/styles/menu.scss @@ -31,15 +31,11 @@ grid-row: span 2; } & > li { - //margin-top: 5rem; padding: 2.5rem 2.5rem; &:nth-child(-n+2){ border-right: var(--b-secondary); } } - // & > *{ - // outline: 1px solid orange; - // } } h1{ font-family: var(--f-accent-bold); diff --git a/src/assets/styles/peripheral.scss b/src/assets/styles/peripheral.scss index 35959c0..11a0453 100644 --- a/src/assets/styles/peripheral.scss +++ b/src/assets/styles/peripheral.scss @@ -44,7 +44,7 @@ section { bottom: 0; left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding)); width: 100vw; - background-color: #212121; + background-color: var(--c-gray1); z-index: -1; } } @@ -343,11 +343,7 @@ section#news { flex-direction: column; gap: 2rem; position: relative; - background: linear-gradient( - 45deg, - rgba(255, 255, 255, 0), - rgba(255, 255, 255, 0.05) - ); + background: var(--c-glass); .creator { left: 1rem; position: absolute; @@ -359,7 +355,7 @@ section#news { height: var(--width); aspect-ratio: 1; object-fit: contain; - background-color: #212121; + background-color: var(--c-gray1); } h3, p, time { @@ -372,7 +368,7 @@ section#news { font-size: max(28px, 1.6rem); } p { - color: #eee; + color: var(--c-gray5); margin-top: -1.5rem; margin-bottom: 2rem; line-height: 1.4; diff --git a/src/assets/styles/products copy.scss b/src/assets/styles/products copy.scss deleted file mode 100644 index 85aed73..0000000 --- a/src/assets/styles/products copy.scss +++ /dev/null @@ -1,118 +0,0 @@ -#products { - .product-group { - display: flex; - align-items: center; - justify-content: center; - gap: 7rem; - .product { - perspective: 630px; - perspective-origin: 50% 50%; - .product__box { - position: relative; - transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(-45deg) - rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) - skewX(0deg) skewY(0deg); - margin: auto; - position: relative; - --height: 400px; - --width: calc(var(--height) / 2); - height: var(--height); - width: var(--width); - --halfwidth: calc(var(--width) / 2); - --neghalfwidth: calc(var(--halfwidth) * -1); - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - transition: all .5s ease-in-out .3s; - - &:hover{ - transform: rotate3d(0, 0, 0, 45deg) !important; - } - } - - &.product--pro { - z-index: 2; - perspective: 830px; - .product__box{ - // --height: 500px; - --scale: 1.3; - transform: scaleX(var(--scale)) scaleY(var(--scale)) scaleZ(var(--scale)) rotateX(0deg) rotateY(-45deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg); - &:hover{ - transform: scale3d(var(--scale),var(--scale),var(--scale)) rotate3d(0, 0, 0, 45deg) !important; - } - .front { - background-color: #EF4B63; - } - .right { - background-color: #BA1930; - } - } - } - - .product__box > div { - position: absolute; - box-sizing: border-box; - padding: 10px; - line-height: 1; - text-align: left; - height: 100%; - width: 100%; - opacity: 1; - // border: 1px solid #000; - font-weight: bold; - - h1{ - font-size: 3.8rem; - } - } - - .front { - background-color: #575757; - transform: translateZ(var(--halfwidth)); - } - .back { - background-color: #313131; - transform: translateZ(var(--neghalfwidth)) rotateY(180deg); - } - .top { - transform: rotateX(-270deg) translateY(var(--neghalfwidth)); - transform-origin: top center; - background-color: #666; - height: 50% !important; - } - .bottom { - -webkit-transform: rotateX(270deg) translateY(var(--halfwidth)); - transform: rotateX(270deg) translateY(var(--halfwidth)); - transform-origin: bottom center; - background-color: #666; - height: 50% !important; - } - .left { - -webkit-transform: rotateY(270deg) translateX(var(--neghalfwidth)); - transform: rotateY(270deg) translateX(var(--neghalfwidth)); - transform-origin: center left; - background-color: #575757; - } - .right { - -webkit-transform: rotateY(-270deg) translateX(var(--halfwidth)); - transform: rotateY(-270deg) translateX(var(--halfwidth)); - transform-origin: top right; - background-color: #313131; - } - } - - .product-box { - .front, - .back { - width: 10rem; - height: 20rem; - } - } - } - aside { - margin: 20rem 5rem; - display: flex; - justify-content: center; - font-size: 3rem; - text-align: center; - } -} \ No newline at end of file diff --git a/src/assets/styles/products.scss b/src/assets/styles/products.scss index fccc94c..5d0df7d 100644 --- a/src/assets/styles/products.scss +++ b/src/assets/styles/products.scss @@ -69,11 +69,7 @@ section#products { } .product__subheader { } - background: linear-gradient( - 45deg, - rgba(255, 255, 255, 0), - rgba(255, 255, 255, 0.05) - ); + background: var(--c-glass); svg { width: var(--img-width); transform: scale(1.05); @@ -107,11 +103,7 @@ section#products { } .product__subheader { } - background: linear-gradient( - 45deg, - rgba(0, 0, 0, 0), - rgba(0, 0, 0, 0.25) - ); + background: var(--c-dark-glass); svg { width: 27.5vw; position: absolute; diff --git a/src/assets/styles/support.scss b/src/assets/styles/support.scss index d3c5dd9..6e363ca 100644 --- a/src/assets/styles/support.scss +++ b/src/assets/styles/support.scss @@ -20,6 +20,7 @@ section#support { max-width: 100%; transform: rotateZ(5deg); } + // flip columns when stacking for small screens @media only screen and (max-width: 1200px) { .cols{ flex-direction: column; diff --git a/src/index.njk b/src/index.njk index d910908..c3eed84 100644 --- a/src/index.njk +++ b/src/index.njk @@ -2,46 +2,8 @@ title: Start9 | Sovereign Computing layout: layouts/base.njk --- -{# - #} - - -
    -
    -
    -
    -
    -
    -
    -
    {% include "components/landing/hero.njk" %} @@ -92,13 +54,15 @@ layout: layouts/base.njk {% include "components/landing/community.njk" %} - - -{# #} - - -{# #} + + + + - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/privacy.njk b/src/privacy.njk index f2833d0..c5da2a2 100644 --- a/src/privacy.njk +++ b/src/privacy.njk @@ -3,7 +3,6 @@ title: Privacy | Start9 layout: layouts/peripheral.njk --- -{# #}