+ 
{{ service.name }}
diff --git a/src/_includes/components/landing/bitcoin.njk b/src/_includes/components/landing/bitcoin.njk index 7a303e3..ff7e676 100644 --- a/src/_includes/components/landing/bitcoin.njk +++ b/src/_includes/components/landing/bitcoin.njk @@ -20,7 +20,7 @@ {% if (category == "bitcoin") or (category == "lightning") or (category == "plebnet-tools") %}
{% endif %}
diff --git a/src/_includes/components/landing/pitch.njk b/src/_includes/components/landing/pitch.njk
index 42d626b..796feac 100644
--- a/src/_includes/components/landing/pitch.njk
+++ b/src/_includes/components/landing/pitch.njk
@@ -5,5 +5,6 @@
We make a personal server called an Embassy that puts you in control of your data, your money, and your digital life.
- learn more + {# learn more #} + diff --git a/src/_includes/components/landing/powered-by.njk b/src/_includes/components/landing/powered-by.njk index caa1ec7..3d21d7f 100644 --- a/src/_includes/components/landing/powered-by.njk +++ b/src/_includes/components/landing/powered-by.njk @@ -9,13 +9,15 @@
-
+ 
+
- 
+ 
- 
+ 
- 
+ 
-
{% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
-
diff --git a/src/_includes/components/svg/open-source.svg b/src/_includes/components/svg/open-source.svg
new file mode 100644
index 0000000..6474055
--- /dev/null
+++ b/src/_includes/components/svg/open-source.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/_includes/components/svg/stack-new2.svg b/src/_includes/components/svg/stack-new2.svg
new file mode 100644
index 0000000..33479b6
--- /dev/null
+++ b/src/_includes/components/svg/stack-new2.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/_includes/components/svg/stack-new3.svg b/src/_includes/components/svg/stack-new3.svg
new file mode 100644
index 0000000..6212852
--- /dev/null
+++ b/src/_includes/components/svg/stack-new3.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/_includes/components/svg/stack-new4.svg b/src/_includes/components/svg/stack-new4.svg
new file mode 100644
index 0000000..ff62b4a
--- /dev/null
+++ b/src/_includes/components/svg/stack-new4.svg
@@ -0,0 +1,26 @@
+
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index a4c9f45..d7c76fe 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -8,7 +8,7 @@
{{ title }} - + diff --git a/src/_includes/layouts/peripheral.njk b/src/_includes/layouts/peripheral.njk index 1b6c462..a79fd9e 100644 --- a/src/_includes/layouts/peripheral.njk +++ b/src/_includes/layouts/peripheral.njk @@ -2,7 +2,7 @@ layout: layouts/base.njk --- - + {{ content | safe }} diff --git a/src/about.njk b/src/about.njk index 0b76424..aa57364 100644 --- a/src/about.njk +++ b/src/about.njk @@ -6,8 +6,8 @@ layout: layouts/peripheral.njk {# #}-
-
+ 
+
@@ -49,13 +49,13 @@ layout: layouts/peripheral.njk
mission
{#-
-
+ 
+
To eliminate the need for trusted third parties in the human/computer relationship.
-
-
+ 
+
#} @@ -63,8 +63,8 @@ layout: layouts/peripheral.njk
values
-
-
+ 
+
This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9. @@ -93,8 +93,8 @@ layout: layouts/peripheral.njk
virtues
-
-
+ 
+
Below are the virtues or qualities of character needed to achieve our values and accomplish our mission. @@ -118,8 +118,8 @@ layout: layouts/peripheral.njk
origin story
-
-
+ 
+
Pokemon is a game for Gameboy. @@ -166,8 +166,8 @@ layout: layouts/peripheral.njk
our team
-
-
+ 
+
-
diff --git a/src/assets/images/buy-centered.png.kra b/src/assets/images/buy-centered.png.kra
deleted file mode 100644
index 764c5ed..0000000
Binary files a/src/assets/images/buy-centered.png.kra and /dev/null differ
diff --git a/src/assets/images/buy-centered.png~ b/src/assets/images/buy-centered.png~
deleted file mode 100644
index 9984dd9..0000000
Binary files a/src/assets/images/buy-centered.png~ and /dev/null differ
diff --git a/src/assets/images/hd0262_preview.mp4 b/src/assets/images/hd0262_preview.mp4
new file mode 100644
index 0000000..22c39d8
Binary files /dev/null and b/src/assets/images/hd0262_preview.mp4 differ
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index c1a3c39..29f95dd 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -1,5 +1,6 @@
var bodyRect = document.body.getBoundingClientRect();
+// TODO: pull these from data js
const sections = [
"pitch",
"products",
@@ -45,8 +46,8 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
// sections.forEach((slug) => {
// ScrollTrigger.create({
// trigger: "#" + slug,
-// start: "top 75%",
-// end: "bottom 75%",
+// start: "top 25%",
+// end: "bottom 25%",
// //markers: { startColor: "white", endColor: "white" },
// onEnter: () => {
// window.location.href = "#" + slug;
@@ -58,9 +59,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
// });
// }, 2000);
-
-
-
//gsap.config({trialWarn: false});
// create the smooth scroller FIRST!
@@ -74,8 +72,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
// backdrop-filter: blur(10px);
//background-color: rgba(0,0,0,0.1);
-
-
gsap.from("#hero-to-pitch path:first-child", {
drawSVG: 0,
ease: "none",
@@ -96,7 +92,6 @@ gsap.from("#pitch h1, #pitch p", {
y: "5rem",
scale: 0.9,
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#pitch",
start: "top 75%", // "triggerElement page"
@@ -104,11 +99,10 @@ gsap.from("#pitch h1, #pitch p", {
},
});
-gsap.from("#pitch a", {
+gsap.from("#pitch iframe", {
duration: 0.5,
opacity: 0,
filter: "blur(10px)",
- //delay: 0.75,
scrollTrigger: {
trigger: "#pitch",
start: "top 75%", // "triggerElement page"
@@ -123,7 +117,6 @@ gsap.from("#products .subsection:nth-child(1)", {
duration: 0.5,
opacity: 0,
outline: "1px solid rgba(255,255,255,1)",
- //filter: "blur(10px)",
scrollTrigger: {
trigger: "#products",
start: "top 75%", // "triggerElement page"
@@ -136,7 +129,6 @@ gsap.from("#products .subsection:nth-child(2)", {
delay: 0.25,
opacity: 0,
outline: "1px solid rgba(255,255,255,1)",
- //filter: "blur(10px)",
scrollTrigger: {
trigger: "#products",
start: "top 75%", // "triggerElement page"
@@ -144,26 +136,41 @@ gsap.from("#products .subsection:nth-child(2)", {
},
});
-const buyAnchor = document.querySelector('.product--buy')
+const buyAnchor = document.querySelector(".product--buy");
const buyTL = gsap
- .timeline({paused:true})
- .from('#buy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
- .to('.product--buy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
+ .timeline({ paused: true })
+ .from(
+ "#buy-lines path:first-child",
+ { drawSVG: 0, ease: "none", duration: 0.75 },
+ 0
+ )
+ .to(
+ ".product--buy img:first-child",
+ { opacity: 0.4, ease: "none", duration: 0.25 },
+ 0
+ );
-buyAnchor.onmouseenter = () => buyTL.play()
-buyAnchor.onmouseleave = () => buyTL.reverse()
+buyAnchor.onmouseenter = () => buyTL.play();
+buyAnchor.onmouseleave = () => buyTL.reverse();
-const diyAnchor = document.querySelector('.product--diy')
+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:.4, ease:'none', duration: 0.25}, 0);
-
-diyAnchor.onmouseenter = () => diyTL.play()
-diyAnchor.onmouseleave = () => diyTL.reverse()
+ .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,
@@ -203,13 +210,8 @@ gsap.from("#products-to-info path:nth-child(3)", {
gsap.from("#infographics .subsection:nth-child(1)", {
duration: 0.5,
- //y: "5rem",
- //scale: 0.8,
- //rotateX: 15,
opacity: 0,
- //delay: 0.75,
outline: "1px solid rgba(255,255,255,1)",
- //filter: "blur(10px)",
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(1)",
start: "top 75%", // "triggerElement page"
@@ -219,13 +221,8 @@ gsap.from("#infographics .subsection:nth-child(1)", {
gsap.from("#infographics .subsection:nth-child(2)", {
duration: 0.5,
- //y: "5rem",
- //scale: 0.8,
- //rotateX: 15,
opacity: 0,
- //delay: 0.75,
outline: "1px solid rgba(255,255,255,1)",
- //filter: "blur(10px)",
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(2)",
start: "top 75%", // "triggerElement page"
@@ -239,7 +236,6 @@ gsap.from("#infographics .subsection:nth-child(2)", {
gsap.from("#bitcoin .subsection:nth-of-type(1)", {
duration: 1,
opacity: 0,
- //outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
y: "5rem",
scrollTrigger: {
@@ -252,7 +248,6 @@ gsap.from("#bitcoin .subsection:nth-of-type(1)", {
gsap.from("#bitcoin .subsection:nth-of-type(2)", {
duration: 1,
opacity: 0,
- //outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
y: "-5rem",
scrollTrigger: {
@@ -272,13 +267,29 @@ function getRandomNumber(min, max) {
return Math.random() * (max - min) + min;
}
-positionServiceIcons();
+//positionServiceIcons();
+
+const timelineServiceIcons = gsap.timeline({
+ onComplete() {
+ //deleteSplit();
+ //scroll.update();
+ //resolve();
+ console.log("complete");
+ },
+});
function positionServiceIcons() {
- bitcoinServices.forEach((service) => {
- const serviceElement = document.querySelector(".service-icon--" + service);
+ 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 = getRandomInt(0, 1);
+ const upOrDown = i % 2;
const bitcoinHeight = bitcoinSectionElement.clientHeight;
serviceElement
@@ -286,14 +297,15 @@ function positionServiceIcons() {
: "";
if (upOrDown) {
- gsap.set(".service-icon--" + service, {
+ gsap.set(serviceClass, {
y: getRandomInt(0, bitcoinHeight / 2) + "px",
});
- gsap.to(".service-icon--" + service, {
+ 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,
@@ -303,32 +315,47 @@ function positionServiceIcons() {
},
});
} else {
- gsap.set(".service-icon--" + service, {
+ gsap.set(serviceClass, {
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
});
- gsap.to(".service-icon--" + service, {
+ 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() {
+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", {
@@ -348,9 +375,7 @@ gsap.from("#bitcoin-to-be path:first-child", {
gsap.from("#be-your-own h1", {
duration: 0.5,
y: "5rem",
- //scale: 0.8,
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#be-your-own",
start: "top 75%", // "triggerElement page"
@@ -363,7 +388,6 @@ gsap.from("#be-your-own p", {
y: "5rem",
filter: "blur(10px)",
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#be-your-own h1",
start: "top 75%", // "triggerElement page"
@@ -375,7 +399,6 @@ gsap.from("#be-your-own #ticker", {
duration: 1.5,
filter: "blur(20px)",
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#be-your-own #ticker",
start: "top 75%", // "triggerElement page"
@@ -383,28 +406,28 @@ gsap.from("#be-your-own #ticker", {
},
});
-let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
+// TICKER
-pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
-
-next = 4;
+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;
-
}
-initializeSizes();
-
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 "
@@ -416,26 +439,24 @@ kerplunk2 = CustomEase.create(
);
function crossfade() {
- var action = gsap
- .timeline()
+ 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
- //console.log(pseudoserviceArray);
- //console.log(itemHeight);
// start endless run
gsap.delayedCall(next, crossfade);
var thisPseudoservice = pseudoserviceArray[2].innerHTML,
thisElement = document.querySelector(
- ".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
+ ".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")
);
var slidesContainerArray = document.querySelectorAll(".service-container");
@@ -448,109 +469,8 @@ function crossfade() {
}
}
-// start the crossfade after next = 3 sec
gsap.delayedCall(next, crossfade);
-// document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
-// // TODO: pause not working - Id not found
-// function pauseThunk() {
-// console.log("asfd");
-// gsap.getById("thunk").kill();
-// }
-
-// CAROUSEL
-
-// var slideDelay = 1.5;
-// var slideDuration = 0.3;
-// var wrap = true;
-
-// var slides = document.querySelectorAll(".slide");
-// var prevButton = document.querySelector("#prevButton");
-// var nextButton = document.querySelector("#nextButton");
-// var progressWrap = gsap.utils.wrap(0, 1);
-
-// var numSlides = slides.length;
-
-// gsap.set(slides, {
-// xPercent: (i) => i * 100,
-// });
-
-// var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
-
-// var animation = gsap.to(slides, {
-// xPercent: "+=" + numSlides * 100,
-// duration: 1,
-// ease: "none",
-// paused: true,
-// repeat: -1,
-// modifiers: {
-// xPercent: wrapX,
-// },
-// });
-
-// var proxy = document.createElement("div");
-// var slideAnimation = gsap.to({}, {});
-// var slideWidth = 0;
-// var wrapWidth = 0;
-
-resize();
-
-window.addEventListener("resize", resize);
-
-// prevButton.addEventListener("click", function () {
-// animateSlides(1);
-// });
-
-// nextButton.addEventListener("click", function () {
-// animateSlides(-1);
-// });
-
-// function updateDraggable() {
-// slideAnimation.kill();
-// this.update();
-// }
-
-// function animateSlides(direction) {
-// slideAnimation.kill();
-// var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
-
-// slideAnimation = gsap.to(proxy, {
-// x: x,
-// duration: slideDuration,
-// onUpdate: updateProgress,
-// });
-// }
-
-// function updateProgress() {
-// animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
-// }
-
-// function snapX(value) {
-// let snapped = gsap.utils.snap(slideWidth, value);
-// return wrap
-// ? snapped
-// : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
-// }
-
-function resize() {
- initializeSizes();
-
- // var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
-
- // slideWidth = slides[0].offsetWidth;
- // wrapWidth = slideWidth * numSlides;
-
- // wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
-
- // gsap.set(proxy, {
- // x: norm * wrapWidth,
- // });
-
- // animateSlides(0);
- // slideAnimation.progress(1);
-
-}
-
gsap.from("#be-to-powered path", {
drawSVG: 0,
ease: "none",
@@ -568,9 +488,7 @@ gsap.from("#be-to-powered path", {
gsap.from("#powered-by h1", {
duration: 0.5,
y: "-5rem",
- //scale: 0.8,
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#powered-by h1",
start: "top 75%", // "triggerElement page"
@@ -580,10 +498,8 @@ gsap.from("#powered-by h1", {
gsap.from("#powered-by p", {
duration: 0.5,
- //y: "-10rem",
filter: "blur(10px)",
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#powered-by h1",
start: "top 75%", // "triggerElement page"
@@ -593,10 +509,8 @@ gsap.from("#powered-by p", {
gsap.from("#powered-by svg", {
duration: 1,
- //y: "-10rem",
filter: "blur(20px)",
opacity: 0,
- //delay: 0.75,
scrollTrigger: {
trigger: "#powered-by svg",
start: "top 75%", // "triggerElement page"
@@ -620,13 +534,8 @@ gsap.from("#powered-to-support path", {
gsap.from("#support", {
duration: 0.5,
- //y: "5rem",
- //scale: 0.8,
- //rotateX: 15,
opacity: 0,
- //delay: 0.75,
outline: "1px solid rgba(255,255,255,1)",
- //filter: "blur(10px)",
scrollTrigger: {
trigger: "#support",
start: "top 75%", // "triggerElement page"
@@ -650,12 +559,8 @@ gsap.from("#support-to-dev path", {
gsap.from("#dev h1", {
duration: 0.5,
- //y: "5rem",
scale: 0.8,
- //rotateX: 15,
opacity: 0,
- //delay: 0.75,
- //outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
trigger: "#dev",
@@ -667,11 +572,9 @@ gsap.from("#dev h1", {
gsap.from("#dev .col:nth-child(1)", {
duration: 0.5,
x: "5rem",
- //scale: 0.8,
- //rotateX: 15,
opacity: 0,
delay: 0.5,
- //outline: "1px solid rgba(255,255,255,1)",
+ outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
trigger: "#dev",
@@ -684,10 +587,8 @@ gsap.from("#dev .col:nth-child(2)", {
duration: 0.5,
x: "-5rem",
scale: 0.5,
- //rotateX: 15,
opacity: 0,
delay: 0.75,
- //outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
trigger: "#dev",
@@ -712,11 +613,8 @@ gsap.from("#dev-to-contact path", {
gsap.from("#community", {
duration: 0.5,
- //y: "5rem",
scale: 0.8,
- //rotateX: 15,
opacity: 0,
- //delay: 0.75,
//outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
@@ -724,380 +622,4 @@ gsap.from("#community", {
start: "top 75%", // "triggerElement page"
toggleActions: defaultActions,
},
-});
-
-//Librarys
-
-/*
-var imagesLoaded = require('imagesloaded');
-import barba from '@barba/core';
-import LocomotiveScroll from 'locomotive-scroll';
-import { gsap } from "gsap";
-import { Draggable } from "gsap/Draggable";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { InertiaPlugin } from "gsap/InertiaPlugin";
-import { SplitText } from "gsap/SplitText";
-
-gsap.registerPlugin(Draggable, ScrollToPlugin, ScrollTrigger, InertiaPlugin, SplitText);
-
-
-
-
-// Locomotive Scroll
-const scroll = new LocomotiveScroll({
- el: document.querySelector('[data-scroll-container]'),
- smooth: true,
- tablet: {
- breakpoint: 961
- }
-});
-
-
-
-
-// Use Locomotive Scroll with ScrollTrigger
-scroll.on("scroll", ScrollTrigger.update);
-
-ScrollTrigger.scrollerProxy(".locomotive", {
- scrollTop(value) {
- return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
- },
- getBoundingClientRect() {
- return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
- },
- pinType: document.querySelector(".locomotive").style.transform ? "transform" : "fixed"
-});
-
-
-
-
-// Mobile Menu Toggle
-const menuIcon = document.querySelector('.navBtnContainer');
-const mobileNav = document.querySelector('.mobileNav');
-
-const menuToggle = function () {
- menuIcon.addEventListener(`click`, function() {
- if(this.classList.contains(`active`)) {
- this.classList.remove(`active`);
- mobileNav.classList.remove(`active`);
- } else {
- this.classList.add(`active`);
- mobileNav.classList.add(`active`);
- }
- });
-}
-
-menuToggle();
-
-
-
-
-// Custom cursor
-const cursorAnimate = function () {
- const cursors = document.querySelector('.cursors')
- const cursor = cursors.querySelector('.cursor')
- const cursorLinks = document.querySelectorAll('a, video, .resumeItem')
- let cursorX = 0
- let cursorY = 0
- let aimX = 0
- let aimY = 0
- let speed = 0.2
-
- const cursorEase = function () {
- cursorX += (aimX - cursorX) * speed
- cursorY += (aimY - cursorY) * speed
-
- cursor.style.left = cursorX + "px"
- cursor.style.top = cursorY + "px"
-
- requestAnimationFrame(cursorEase)
- }
-
- cursorEase()
-
- document.addEventListener('mousemove', function (event) {
- aimX = event.pageX
- aimY = event.pageY
- })
-
- cursorLinks.forEach(cursorLink => {
- cursorLink.addEventListener('mouseover', function () {
- cursor.classList.add(`hover`)
- })
- cursorLink.addEventListener('mouseout', function () {
- cursor.classList.remove(`hover`)
- })
- })
-}
-
-
-
-
-// Scroll Trigger Hero Image
-const heroImgInnerAnimate = function () {
- const heroImgInner = document.querySelectorAll('.heroImgInner');
- heroImgInner.forEach(function (heroImgInner){
- gsap.to(heroImgInner, {
- scrollTrigger: {
- trigger: heroImgInner,
- scroller: ".locomotive",
- start: "top bottom",
- end: "bottom top",
- scrub: 1,
- },
- y: "-43.75%",
- ease: "none"
- })
- })
-}
-
-
-
-
-// Footer Marquee
-const footerMarqueeAnimate = function () {
- const footerMarquee = document.querySelector('.footerMarqueeItem');
- const footerMarqueeTrack = document.querySelector('.footerMarqueeTrack');
- const footerMarqueeItemWidth = footerMarquee.offsetWidth;
- //console.log(footerMarqueeItemWidth);
- const footerMarqueeTL = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
- footerMarqueeTL.to(footerMarqueeTrack,{x:-footerMarqueeItemWidth, duration:20});
-}
-
-
-
-
-// Scroll Trigger Marquee
-const marqueeAnimate = function () {
- const marquee = document.querySelectorAll('.marqueeTrack');
- marquee.forEach(function (marquee){
- gsap.to(marquee, {
- scrollTrigger: {
- trigger: marquee,
- scroller: ".locomotive",
- start: "top bottom",
- end: "bottom top",
- scrub: 1,
- },
- x: "-33.33%",
- ease: "none"
- })
- })
-}
-
-
-
-
-// Scroll Trigger Spin
-const spinTextAnimate = function () {
- const spinText = document.querySelectorAll('.spinText');
- spinText.forEach(function (spinText){
- gsap.to(spinText, {
- scrollTrigger: {
- trigger: spinText,
- scroller: ".locomotive",
- start: "top bottom",
- end: "bottom top",
- scrub: 1,
- },
- rotation:360,
- ease: "none"
- })
- })
-}
-
-
-
-
-// Work Experience Dropdown
-const experienceToggle = function () {
- const resumeItems = document.querySelectorAll('.resumeItem');
- resumeItems.forEach(function (item) {
- let jobTitleHeight = item.offsetHeight;
- item.addEventListener('click', function () {
- let jobDescHeight = this.children[4].offsetHeight;
- if(this.classList.contains('active')) {
- this.classList.remove('active')
- this.style.height = jobTitleHeight + "px"
- } else {
- this.classList.add('active')
- this.style.height = jobTitleHeight + jobDescHeight + "px"
- }
- setTimeout(function () { scroll.update(); }, 1000)
- })
- });
-}
-experienceToggle();
-
-
-
-
-// Update scroll height after Images Load
-imagesLoaded( 'body', function() {
- scroll.update();
- cursorAnimate();
- footerMarqueeAnimate();
- marqueeAnimate();
- spinTextAnimate();
- ScrollTrigger.matchMedia({
- "(min-width: 960px)": function() {
- heroImgInnerAnimate();
- }
- })
-});
-
-
-
-
-
-
-
-
-// Barba
-
-const transitionPanel1 = document.querySelector('#transitionPanel1');
-const loadPanel = document.querySelector('.loadPanel');
-
-barba.hooks.after(() => {
- marqueeAnimate();
- spinTextAnimate();
- experienceToggle();
- cursorAnimate();
- ScrollTrigger.matchMedia({
- "(min-width: 960px)": function() {
- heroImgInnerAnimate();
- }
- })
- scroll.update();
-});
-
-
-barba.init({
-
- transitions: [{
- name: 'default',
-
-
-
- once({ next }) {
-
- return new Promise(resolve => {
-
- const timeline = gsap.timeline({
- onComplete() {
- deleteSplit();
- scroll.update();
- resolve();
- }
- });
-
- const splitHeadline = new SplitText('h1', {type:'words'})
- function deleteSplit() {
- splitHeadline.revert()
- }
-
-
- timeline
- .set('.load-content', {opacity: 0})
- .set('main', {y: 200, opacity: 0})
- .set('header', {y: -100, opacity: 0})
- .set(splitHeadline.words, {opacity: 0, y: 48})
- .to('.load-content', {duration: 1, opacity: 1}, 0.5)
- .to('.loadPanel', {duration: 1, height: 0, ease: "power4.inOut"}, '+=1')
- .to('.load-content', {duration: 1, opacity: 0}, '-=1')
- .to('header', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=0.5')
- .to('main', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=1')
- .to(splitHeadline.words, {duration: 1, y: 0, opacity: 1, ease: "power3.out", stagger: 0.04}, '-=1')
- .set('.loadPanel', {opacity: 0, display:'none'})
-
- });
-
- },
-
-
-
- leave({ current, next, trigger }) {
-
- return new Promise(resolve => {
-
- const timeline = gsap.timeline({
- onComplete() {
- resolve();
- }
- });
-
- transitionPanel1.classList.add(`active`);
- mobileNav.classList.remove(`active`);
- menuIcon.classList.remove(`active`);
-
- timeline
- .to('footer', {duration: 0.5, opacity: 0}, 0)
- .to(current.container, {duration: 0.5, opacity: 0}, 0)
- .to(current.container, {display: 'none'})
-
- });
-
- },
-
-
-
- beforeEnter({ current, next, trigger }) {
-
- scroll.scrollTo(0, 0);
-
- },
-
-
-
- enter({ current, next, trigger }) {
-
- imagesLoaded( 'body', function() {
- scroll.update();
- });
-
- return new Promise(resolve => {
-
- const timeline = gsap.timeline({
- onComplete() {
- transitionPanel1.classList.remove(`active`);
- resolve();
- }
- });
-
- timeline
- .set(current.container, {opacity: 0})
- .set(next.container, {opacity: 0})
-
- });
- },
-
-
-
- afterEnter({ current, next, trigger }) {
-
- return new Promise(resolve => {
-
- const timeline = gsap.timeline({
- onComplete() {
- resolve();
- }
- });
-
- timeline
- .to(next.container, {duration: 1, opacity: 1}, 0.5)
- .to('footer', {duration: 1, opacity: 1}, 0.5)
-
- });
- },
-
-
-
- }],
-
- views: [{}],
-
- //debug: true
-});
-
-*/
+});
\ No newline at end of file
diff --git a/src/assets/js/peripheral.js b/src/assets/js/peripheral.js
index e69de29..df168aa 100644
--- a/src/assets/js/peripheral.js
+++ b/src/assets/js/peripheral.js
@@ -0,0 +1,30 @@
+const defaultActions = "play none none none";
+
+gsap.from("section#hero+section", {
+ duration: 0.5,
+ y: "5rem",
+ opacity: 0,
+ delay: 1,
+ filter: "blur(10px)",
+ scrollTrigger: {
+ trigger: "section#hero+section",
+ start: "top 75%", // "triggerElement page"
+ toggleActions: defaultActions,
+ },
+ });
+
+const sections = document.querySelectorAll("section:not(#hero):not(#blurb)");
+
+sections.forEach(function (section) {
+ gsap.from(section, {
+ duration: 0.5,
+ y: "5rem",
+ opacity: 0,
+ filter: "blur(10px)",
+ scrollTrigger: {
+ trigger: section,
+ start: "top 75%", // "triggerElement page"
+ toggleActions: defaultActions,
+ },
+ });
+});
diff --git a/src/assets/styles/be-your-own copy.scss b/src/assets/styles/be-your-own copy.scss
index c6852c5..6676368 100644
--- a/src/assets/styles/be-your-own copy.scss
+++ b/src/assets/styles/be-your-own copy.scss
@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 6rem;
+ gap: 3rem;
//margin: 0 0 6rem 0;
padding: 0 6rem 0 6rem;
box-sizing: border-box;
diff --git a/src/assets/styles/be-your-own.scss b/src/assets/styles/be-your-own.scss
index fae681d..744f780 100644
--- a/src/assets/styles/be-your-own.scss
+++ b/src/assets/styles/be-your-own.scss
@@ -20,7 +20,7 @@
margin: 0 0 0 1rem !important;
&::before{
top: 25% !important;
- left: -4rem !important;
+ left: calc(-4rem + 2px) !important;
align-self: flex-start !important;
justify-content: center !important;
border-top: 2rem transparent solid !important;
@@ -40,11 +40,12 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 6rem;
+ gap: 3rem;
//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));
@@ -170,7 +171,7 @@
position: relative;
display: flex;
flex-direction: column;
- box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+ box-shadow: var(--sh-2);
&::before{
position: absolute;
diff --git a/src/assets/styles/bitcoin.scss b/src/assets/styles/bitcoin.scss
index 88ca6e1..7bd49fe 100644
--- a/src/assets/styles/bitcoin.scss
+++ b/src/assets/styles/bitcoin.scss
@@ -103,7 +103,7 @@ section#bitcoin {
z-index: -2;
backdrop-filter: blur(48px);
mix-blend-mode: soft-light;
- box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
+ box-shadow: 0 2rem 3rem var(--c-shadow-3);
&.service-icon--balanceofsatoshis {
width: 5rem;
diff --git a/src/assets/styles/dev.scss b/src/assets/styles/dev.scss
index fe3288e..4ddd0c0 100644
--- a/src/assets/styles/dev.scss
+++ b/src/assets/styles/dev.scss
@@ -58,7 +58,7 @@
}
img {
width: 20rem;
- box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+ box-shadow: var(--sh-2);
border-radius: 1.3rem;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/footer.scss b/src/assets/styles/footer.scss
index 851ab88..004903d 100644
--- a/src/assets/styles/footer.scss
+++ b/src/assets/styles/footer.scss
@@ -55,10 +55,15 @@ footer{
letter-spacing: .1em;
color: var(--c-text-primary);
position: relative;
- display: flex;
- flex-direction: column;
- display: inline-block;
+ display: inline-flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: 0.3em;
white-space: nowrap;
+
+ path{
+ transition: var(--t-simple);
+ }
// &::after{
// content: '';
// position: absolute;
@@ -77,6 +82,9 @@ footer{
// left: -5%;
// opacity: 1;
// }
+ path {
+ stroke: var(--c-text-accent);
+ }
}
&.highlight{
color: var(--c-text-bright);
@@ -93,6 +101,10 @@ footer{
position: absolute;
}
}
+ svg{
+ height: 1em;
+ width: 1em;
+ }
}
}
diff --git a/src/assets/styles/infographics.scss b/src/assets/styles/infographics.scss
index c83814b..6894bd5 100644
--- a/src/assets/styles/infographics.scss
+++ b/src/assets/styles/infographics.scss
@@ -13,6 +13,7 @@ section#infographics{
outline: 1px solid rgba(255,255,255,0);
svg{
width: min(110%, 1000px);
+ //width: clamp(500px, 50vw, 1000px);
}
&:first-child{
&::before {
diff --git a/src/assets/styles/landing.scss b/src/assets/styles/landing.scss
index 9b69108..3f7726c 100644
--- a/src/assets/styles/landing.scss
+++ b/src/assets/styles/landing.scss
@@ -18,7 +18,7 @@
body, .ScrollSmoother-wrapper {
margin: 0;
- background: linear-gradient(0deg, #333333, #333333),
+ background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
url("../../assets/images/bkg.jpg");
background-blend-mode: color, normal;
background-size: cover;
@@ -62,7 +62,7 @@ section {
}
[class*="section--"]{
- box-shadow: rgb(0 0 0 / 50%) 0 3rem 3rem;
+ box-shadow: var(--c-shadow-1) 0 3rem 3rem;
}
.section--inverse{
@@ -96,7 +96,7 @@ section {
.line svg{
width: calc(100vw - (2 * 6rem));
max-width: 50vw;
- max-height: 60vh;
+ max-height: 50vh;
}
nav {
@@ -104,6 +104,8 @@ nav {
}
#logo {
+ transform: translateY(-5rem);
+ opacity: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
@@ -208,7 +210,7 @@ a.btn {
&:hover{
transform: rotateX(30deg);
&::before {
- box-shadow: inset 0 1rem 1rem -0.5rem rgb(0 0 0 / 50%);
+ box-shadow: inset 0 1rem 1rem -0.5rem var(--c-shadow-1);
}
}
@@ -235,7 +237,7 @@ a.btn {
height: 1rem;
z-index: -1;
transform: rotateX(90deg) translateY(2px);
- box-shadow: inset 0 0.3rem 0.5rem 0rem rgb(0 0 0 / 50%);
+ box-shadow: inset 0 0.3rem 0.5rem 0rem var(--c-shadow-1);
}
&.btn--subtle{
@@ -294,6 +296,9 @@ a.btn {
}
}
+#bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev {
+ transform: scaleX(-1);
+}
$pastels: (red, pink) (blue, purple) (green, yellow)
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index d18a80b..af67b9d 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -1,279 +1,313 @@
-@use 'normalize';
-@use 'fonts';
-@use 'menu';
-@use 'footer';
+@use "normalize";
+@use "fonts";
+@use "menu";
+@use "footer";
/* @use 'post'; */
-:root {
- background-attachment: fixed;
- --viewportWidth: calc(100vw - var(--scrollbarWidth));
+:root {
+ background-attachment: fixed;
+ --viewportWidth: calc(100vw - var(--scrollbarWidth));
- --c-1: rgba(255,255,255);
- --c-text-primary: var(--c-1);
- --c-line-primary: var(--c-1);
+ --c-1: rgba(255, 255, 255);
+ --c-text-primary: var(--c-1);
+ --c-line-primary: var(--c-1);
- --c-2: #EF4B63;
- --c-text-accent: var(--c-2);
- --c-line-accent: var(--c-2);
+ --c-2: #ef4b63;
+ --c-text-accent: var(--c-2);
+ --c-line-accent: var(--c-2);
- --c-3: #333;
- --c-bkg: var(--c-3);
+ --c-3: #333;
+ --c-bkg: var(--c-3);
- --c-4: #BA1930;
- --c-3d-shadow: var(--c-4);
+ --c-4: #ba1930;
+ --c-3d-shadow: var(--c-4);
- --c-5: rgba(255,255,255,1);
- --c-text-bright: var(--c-5);
+ --c-5: rgba(255, 255, 255, 1);
+ --c-text-bright: var(--c-5);
- --c-6: rgb(194, 194, 194);
+ --c-6: rgb(194, 194, 194);
- --c-spacer: rgba(255,255,255,.05);
- --s-primary: 0.5;
- --b-primary: 1px solid var(--c-line-primary);
- --b-secondary: 1px dashed var(--c-line-primary);
+ --c-shadow-1: rgb(0 0 0 / 50%);
+ --c-shadow-2: rgb(0 0 0 / 40%);
+ --c-shadow-3: rgb(0 0 0 / 20%);
- --f-hero: "Basis Grotesque Pro";
- --f-bold: "Tusker Grotesk 5500";
- --f-accent: 'Montserrat';
- --f-accent2: 'Arkibal Mono';
- --f-accent-bold: 'Montserrat';
- --f-accent2-bold: 'Arkibal Mono Rg';
- --f-copy: 'Liberation Mono';
- --f-button: 'Basis Grotesque Mono Pro';
+ --c-spacer: rgba(255, 255, 255, 0.05);
- --t-simple: all .2s ease-in-out;
+ --sh-2: 0 3rem 2rem 0rem var(--c-shadow-2);
+
+ --s-primary: 0.5;
+ --b-primary: 1px solid var(--c-line-primary);
+ --b-secondary: 1px dashed var(--c-line-primary);
+
+ --f-hero: "Basis Grotesque Pro";
+ --f-bold: "Tusker Grotesk 5500";
+ --f-accent: "Montserrat";
+ --f-accent2: "Arkibal Mono";
+ --f-accent-bold: "Montserrat";
+ --f-accent2-bold: "Arkibal Mono Rg";
+ --f-copy: "Liberation Mono";
+ --f-button: "Basis Grotesque Mono Pro";
+
+ --t-simple: all 0.2s ease-in-out;
}
html {
- //background-color: lime;
- font-size: 2vmin;
- font-size: max(2vmin, 10px);
- scroll-behavior: smooth;
- color: var(--c-text-primary);
- font-family: var(--f-accent);
- font-weight: 200;
- overflow: scroll;
- overflow: overlay;
- display: flex;
+ //background-color: lime;
+ font-size: 2vmin;
+ font-size: max(2vmin, 10px);
+ scroll-behavior: smooth;
+ color: var(--c-text-primary);
+ font-family: var(--f-accent);
+ font-weight: 200;
+ overflow: scroll;
+ overflow: overlay;
+ display: flex;
- /* width */
-::-webkit-scrollbar {
+ /* width */
+ ::-webkit-scrollbar {
width: 1rem;
}
-
+
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
-
+
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--c-2);
}
-
+
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--c-1);
}
- &.menu-is-open{
- .header__logo{
- opacity: 1 !important;
- filter: blur(0px) !important;
+ &.menu-is-open {
+ .header__logo {
+ opacity: 1 !important;
+ filter: blur(0px) !important;
}
}
}
-body{
- background: #333333;
+body {
+ background: var(--c-bkg);
}
img {
- display: block;
- width: 100%;
- max-width: 100%;
- height: auto;
- }
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+}
-main{
- //transform: translateY(-100vh);
- perspective: 1000px;
+picture {
+ display: contents;
+}
+
+picture + picture {
+ position: absolute;
+}
+
+main {
+ //transform: translateY(-100vh);
+ perspective: 1000px;
}
a {
- text-decoration: none;
+ text-decoration: none;
+ transition: var(--t-simple);
+}
+
+a.link-in-svg{
+ fill: var(--c-text-accent);
+ path{
transition: var(--t-simple);
+ }
+ &:hover{
+ path{
+ fill: var(--c-text-primary);
+ }
+ }
}
p a {
- color: var(--c-text-primary);
- text-decoration: underline;
- &:hover{
- color: var(--c-text-accent);
- }
+ color: var(--c-text-primary);
+ text-decoration: underline;
+ &:hover {
+ color: var(--c-text-accent);
+ }
}
-h1, h2, h3, h4, h5 {
- margin: 0;
- text-transform: uppercase;
- em {
- color: var(--c-text-accent);
- font-style: normal;
- }
+h1,
+h2,
+h3,
+h4,
+h5 {
+ margin: 0;
+ text-transform: uppercase;
+ em {
+ color: var(--c-text-accent);
+ font-style: normal;
+ }
}
ul {
- margin:0;
- padding:0;
- li{
- list-style: none;
- }
+ margin: 0;
+ padding: 0;
+ li {
+ list-style: none;
+ }
}
-header{
- position: fixed;
- width: 100vw;
- z-index: 2;
- top:0;
+header {
+ position: fixed;
+ width: 100vw;
+ z-index: 2;
+ top: 0;
- a.header__logo{
- opacity: 0;
- filter: blur(10px);
- margin-left: 1rem;
- display: flex;
- align-items: center;
- position: relative;
-
- svg{
- width:8rem;
- position: absolute;
- path{
- transition: var(--t-simple);
- stroke-width: 0;
- stroke: transparent;
- }
- }
- &:hover{
- svg path{
- stroke-width: 0.2rem;
- stroke: var(--c-text-primary);
- }
- svg path:last-child{
- stroke: var(--c-text-accent);
- }
- }
- }
-}
-nav{
- --padding: 1rem;
- //width: calc(100% - 2 * var(--padding) - 15px);
- width: 100vw;
- box-sizing: border-box;
- font-family: var(--f-accent);
- font-weight: 300;
- line-height: 1;
- text-transform: uppercase;
- padding: var(--padding);
+ a.header__logo {
+ opacity: 0;
+ filter: blur(10px);
+ margin-left: 1rem;
display: flex;
- justify-content: space-between;
-
- ul {
- margin: 0;
- padding: 0;
- display: flex;
- gap: 1rem;
- li {
- list-style: none;
- a {
- color: var(--c-text-bright);
- font-size: 1.5rem;
- padding: 0em 0.5em 0em 0.5em;
-
- path {
- fill: var(--c-text-bright);
- transition: var(--t-simple);
- }
-
- &.em{
- background-color: var(--c-text-accent);
- margin-right: 1rem;
- &:hover{
- color: var(--c-text-accent);
- background-color: var(--c-text-bright);
- }
- }
- &:hover{
- color: var(--c-text-accent);
- path {
- fill: var(--c-text-accent);
- }
- }
- }
- }
- }
- &.scrolled-menu{
- backdrop-filter: blur(10px);
- background-color: rgba(0,0,0,0.1);
- }
-}
-
-#menu-open{
- display: flex;
- gap: .5em;
align-items: center;
- svg{
- height: .7em;
- margin-top: -2px;
+ position: relative;
+
+ svg {
+ width: 8rem;
+ position: absolute;
+ path {
+ transition: var(--t-simple);
+ stroke-width: 0;
+ stroke: transparent;
+ }
+ path:last-child{
+ //filter: drop-shadow(0 0 0.6rem rgb(0 0 0 / 80%));
+ }
}
+ &:hover {
+ svg path {
+ stroke-width: 0.2rem;
+ stroke: var(--c-text-primary);
+ }
+ svg path:last-child {
+ stroke: var(--c-text-accent);
+ }
+ }
+ }
+}
+nav {
+ --padding: 1rem;
+ //width: calc(100% - 2 * var(--padding) - 15px);
+ width: 100vw;
+ box-sizing: border-box;
+ font-family: var(--f-accent);
+ font-weight: 300;
+ line-height: 1;
+ text-transform: uppercase;
+ padding: var(--padding);
+ display: flex;
+ justify-content: space-between;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ gap: 1rem;
+ li {
+ list-style: none;
+ a {
+ color: var(--c-text-bright);
+ font-size: 1.5rem;
+ padding: 0em 0.5em 0em 0.5em;
+
+ path {
+ fill: var(--c-text-bright);
+ transition: var(--t-simple);
+ }
+
+ &.em {
+ background-color: var(--c-text-accent);
+ margin-right: 1rem;
+ &:hover {
+ color: var(--c-text-accent);
+ background-color: var(--c-text-bright);
+ }
+ }
+ &:hover {
+ color: var(--c-text-accent);
+ path {
+ fill: var(--c-text-accent);
+ }
+ }
+ }
+ }
+ }
+ &.scrolled-menu {
+ backdrop-filter: blur(10px);
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+#menu-open {
+ display: flex;
+ gap: 0.5em;
+ align-items: center;
+ svg {
+ height: 0.7em;
+ margin-top: -2px;
+ }
}
.opened-menu {
- opacity: 0;
- width: 0;
- transform: translateX(3rem);
- //overflow: hidden;
- white-space: nowrap;
- //margin-left: -1rem;
+ opacity: 0;
+ width: 0;
+ transform: translateX(3rem);
+ //overflow: hidden;
+ white-space: nowrap;
+ //margin-left: -1rem;
}
.closed-menu {
- //overflow: hidden;
- white-space: nowrap;
+ //overflow: hidden;
+ white-space: nowrap;
}
#hero-image {
- position: relative;
- display: flex;
- scale: 0.95;
- opacity: 0;
- filter: blur(10px);
- img {
- width: 50rem;
- max-width: 90vw;
- margin-top: 6rem;
- }
+ position: relative;
+ display: flex;
+ scale: 0.95;
+ opacity: 0;
+ filter: blur(10px);
+ img {
+ width: 50rem;
+ max-width: 90vw;
+ margin-top: 6rem;
}
+}
.img-shadow {
- filter: blur(2rem) brightness(0);
- z-index: -1;
- position: absolute;
- top: 5rem;
- opacity: .5;
- }
+ filter: blur(2rem) brightness(0);
+ z-index: -1;
+ position: absolute;
+ top: 5rem;
+ opacity: 0.5;
+}
- @media only screen and (max-width: 500px) {
- .header__logo img{
- width: 11rem !important;
- }
- .hide-on-mobile{
- display: none;
- }
- nav ul li a {
- font-size: 2.5rem;
- }
+@media only screen and (max-width: 500px) {
+ .header__logo img {
+ width: 11rem !important;
}
+ .hide-on-mobile {
+ display: none;
+ }
+ nav ul li a {
+ font-size: 2.5rem;
+ }
+}
- .image-with-shadow{
- display: flex;
- position: relative;
- }
\ No newline at end of file
+.image-with-shadow {
+ display: flex;
+ position: relative;
+}
diff --git a/src/assets/styles/peripheral.scss b/src/assets/styles/peripheral.scss
index 12dcf43..f7a34c0 100644
--- a/src/assets/styles/peripheral.scss
+++ b/src/assets/styles/peripheral.scss
@@ -6,11 +6,11 @@ main {
flex-direction: column;
align-items: center;
overflow-x: clip;
- background-color: #333;
+ background-color: var(--c-bkg);
}
#menu {
- box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
+ box-shadow: inset 0 -5rem 5rem -2rem var(--c-shadow-2);
}
.header__logo {
@@ -226,7 +226,7 @@ section#origin {
border-radius: 100%;
width: 10rem;
height: 10rem;
- box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+ box-shadow: var(--sh-2);
}
p {
font-size: 0.8rem;
@@ -309,5 +309,7 @@ section#news {
font-size: 1.2rem;
line-height: 1.4;
margin: 0;
+ width: 100%;
+ overflow: hidden;
}
}
diff --git a/src/assets/styles/pitch.scss b/src/assets/styles/pitch.scss
index cd5b07d..a193180 100644
--- a/src/assets/styles/pitch.scss
+++ b/src/assets/styles/pitch.scss
@@ -9,9 +9,15 @@ section#pitch {
h1 {
margin: 0;
display: inline-block;
- max-width: 73vw;
+ max-width: min(16ch,64vw);
}
p{
- max-width: min(50ch, 73vw);
+ max-width: min(50ch, 64vw);
+ }
+ iframe{
+ border:0;
+ width: max(500px,50vw);
+ height: max(282px,28.2vw);
+ box-shadow: var(--c-shadow-1) 0 3rem 3rem;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/powered-by.scss b/src/assets/styles/powered-by.scss
index c3bcd9a..b5ee94d 100644
--- a/src/assets/styles/powered-by.scss
+++ b/src/assets/styles/powered-by.scss
@@ -84,5 +84,13 @@ section#powered-by {
color: var(--c-text-accent);
}
}
+ &.source-link--floated{
+ position: absolute;
+ }
}
+}
+
+svg|a:link,
+svg|a:visited {
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/src/assets/styles/products.scss b/src/assets/styles/products.scss
index 0a630d0..4721116 100644
--- a/src/assets/styles/products.scss
+++ b/src/assets/styles/products.scss
@@ -1,15 +1,16 @@
section#products {
transform-style: preserve-3d;
display: flex;
- align-items: center;
+ flex-direction: column;
+ align-items: flex-end;
justify-content: center;
gap: 3rem;
-
+
.subsection {
transform-style: preserve-3d;
position: relative;
- .heading{
+ .heading {
transition: var(--t-simple);
z-index: 1;
}
@@ -18,7 +19,7 @@ section#products {
transition: var(--t-simple);
}
- .product__subheader{
+ .product__subheader {
font-weight: 500;
color: var(--c-text-primary);
text-transform: uppercase;
@@ -35,12 +36,12 @@ section#products {
padding: 2rem;
//transition: var(--t-simple);
.heading h1 {
- line-height: .8;
+ line-height: 0.8;
}
- &:hover{
+ &:hover {
.heading {
transform: scale(1.1);
- > *{
+ > * {
color: var(--c-text-accent);
}
}
@@ -50,8 +51,9 @@ section#products {
// }
}
}
- &:first-of-type a {
+ &.subsection--buy a {
align-items: center;
+
.heading {
//left: 6rem;
//top: 6rem;
@@ -61,36 +63,54 @@ section#products {
display: flex;
flex-direction: column;
}
- .product__subheader{
-
+ .product__subheader {
}
- background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
- svg{
+ background: linear-gradient(
+ 45deg,
+ rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 0.05)
+ );
+ svg {
width: 27.5vw;
position: absolute;
}
}
- &:last-of-type a {
- align-items: flex-start;
- .heading {
- // right: 6rem;
- // top: 6rem;
- // position: absolute;
- display: flex;
- flex-direction: column;
- text-align: center;
- align-self: center;
- }
- h1{
- letter-spacing: .5rem;
- }
- .product__subheader{
+ &.subsection--diy {
+ position: absolute;
+ bottom: -5rem;
+ background-color: var(--c-bkg);
+ a {
- }
- background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
- svg{
- width: 27.5vw;
- position: absolute;
+ &:hover {
+ .heading {
+ transform: none;
+ }
+ }
+
+ padding: 1rem;
+ align-items: flex-start;
+ .heading {
+ // right: 6rem;
+ // top: 6rem;
+ // position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-self: center;
+ }
+ h1 {
+ letter-spacing: 0.5rem;
+ }
+ .product__subheader {
+ }
+ background: linear-gradient(
+ 45deg,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.25)
+ );
+ svg {
+ width: 27.5vw;
+ position: absolute;
+ }
}
}
}
diff --git a/src/assets/styles/support.scss b/src/assets/styles/support.scss
index c97d875..f7f3769 100644
--- a/src/assets/styles/support.scss
+++ b/src/assets/styles/support.scss
@@ -5,6 +5,7 @@ section#support {
padding: 6rem;
//margin-bottom: 6rem;
gap: 3rem;
+ //transform: translate(0px,0px);
.cols {
display: flex;
align-items: center;
diff --git a/src/contact.njk b/src/contact.njk
index 0f3a361..9143f33 100644
--- a/src/contact.njk
+++ b/src/contact.njk
@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
-
-
+ 
+
diff --git a/src/dev.njk b/src/dev.njk index 952e167..a989c21 100644 --- a/src/dev.njk +++ b/src/dev.njk @@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
-
-
+ 
+
diff --git a/src/index.njk b/src/index.njk index b24d7a1..2e323b6 100644 --- a/src/index.njk +++ b/src/index.njk @@ -31,7 +31,7 @@ layout: layouts/base.njk #} - +
diff --git a/src/jobs.njk b/src/jobs.njk index e1a8d54..c64340f 100644 --- a/src/jobs.njk +++ b/src/jobs.njk @@ -5,8 +5,8 @@ layout: layouts/peripheral.njk-
-
+ 
+
diff --git a/src/news.njk b/src/news.njk index ae61cc0..cdd5bff 100644 --- a/src/news.njk +++ b/src/news.njk @@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
-
-
+ 
+