post-9/23 meeting small tweaks

src/assets/js/main.js

@@ -87,6 +87,7 @@ function closeMenu(e) {
   gsap.to("main", { y: "0vh" });
   gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
   gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
+  gsap.to("html", { overflow: "scroll" });
   gsap.to("html", { overflow: "overlay" });
   document.querySelector('html').classList.remove("menu-is-open");
 }
@@ -164,7 +165,7 @@ gsap.from("#hero-to-pitch path:first-child", {
 //////////////////////////////////////////
 // PITCH
 
-gsap.from("#pitch", {
+gsap.from("#pitch h1, #pitch p", {
   duration: 0.5,
   y: "5rem",
   scale: 0.9,
@@ -177,6 +178,18 @@ gsap.from("#pitch", {
   },
 });
 
+gsap.from("#pitch a", {
+  duration: 0.5,
+  opacity: 0,
+  filter: "blur(10px)",
+  //delay: 0.75,
+  scrollTrigger: {
+    trigger: "#pitch",
+    start: "top 75%", // "triggerElement page"
+    toggleActions: defaultActions,
+  },
+});
+
 //////////////////////////////////////////
 // PRODUCTS
 
@@ -333,52 +346,64 @@ function getRandomNumber(min, max) {
   return Math.random() * (max - min) + min;
 }
 
-bitcoinServices.forEach((service) => {
-  const serviceElement = document.querySelector(".service-icon--" + service);
-  const bitcoinSectionElement = document.querySelector("#bitcoin");
-  const upOrDown = getRandomInt(0, 1);
-  const bitcoinHeight = bitcoinSectionElement.clientHeight;
+positionServiceIcons();
 
-  serviceElement
-    ? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
-    : "";
+function positionServiceIcons() {
+  bitcoinServices.forEach((service) => {
+    const serviceElement = document.querySelector(".service-icon--" + service);
+    const bitcoinSectionElement = document.querySelector("#bitcoin");
+    const upOrDown = getRandomInt(0, 1);
+    const bitcoinHeight = bitcoinSectionElement.clientHeight;
 
-  if (upOrDown) {
-    gsap.set(".service-icon--" + service, {
-      y: getRandomInt(0, bitcoinHeight / 2) + "px",
-    });
-    gsap.to(".service-icon--" + service, {
-      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
-      //x: getRandomInt(0, 100) + "vw",
-      ease: "in",
-      delay: getRandomNumber(0, 1),
-      scrollTrigger: {
-        trigger: "#bitcoin",
-        scrub: true,
-        start: "top 25%", // "triggerElement page"
-        end: "90% center", // "triggerElement page"
-        //markers: { startColor: "lime", endColor: "lime" },
-      },
-    });
-  } else {
-    gsap.set(".service-icon--" + service, {
-      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
-    });
-    gsap.to(".service-icon--" + service, {
-      y: getRandomInt(0, bitcoinHeight / 2) + "px",
-      //x: getRandomInt(0, 100) + "vw",
-      ease: "in",
-      delay: getRandomNumber(0, 1),
-      scrollTrigger: {
-        trigger: "#bitcoin",
-        scrub: true,
-        start: "top bottom", // "triggerElement page"
-        end: "90% center", // "triggerElement page"
-        //markers: { startColor: "orange", endColor: "orange" },
-      },
-    });
-  }
-});
+    serviceElement
+      ? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
+      : "";
+
+    if (upOrDown) {
+      gsap.set(".service-icon--" + service, {
+        y: getRandomInt(0, bitcoinHeight / 2) + "px",
+      });
+      gsap.to(".service-icon--" + service, {
+        y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+        //x: getRandomInt(0, 100) + "vw",
+        ease: "in",
+        delay: getRandomNumber(0, 1),
+        scrollTrigger: {
+          trigger: "#bitcoin",
+          scrub: true,
+          start: "top 25%",
+          end: "90% center", // "triggerElement page"
+          //markers: { startColor: "lime", endColor: "lime" },
+        },
+      });
+    } else {
+      gsap.set(".service-icon--" + service, {
+        y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+      });
+      gsap.to(".service-icon--" + service, {
+        y: getRandomInt(0, bitcoinHeight / 2) + "px",
+        //x: getRandomInt(0, 100) + "vw",
+        ease: "in",
+        delay: getRandomNumber(0, 1),
+        scrollTrigger: {
+          trigger: "#bitcoin",
+          scrub: true,
+          start: "top bottom",
+          end: "90% center",
+        },
+      });
+    }
+  });
+}
+
+function onResizeComplete() {
+  positionServiceIcons();
+};
+var resizeTimeout = setTimeout(onResizeComplete, 400);
+window.onresize = function() {
+  clearTimeout(resizeTimeout);
+  resizeTimeout = setTimeout(onResizeComplete, 400);
+};
 
 gsap.from("#bitcoin-to-be path:first-child", {
   drawSVG: 0,
@@ -680,7 +705,7 @@ gsap.from("#support-to-dev path", {
 //////////////////////////////////////////
 // DEV
 
-gsap.from("#dev", {
+gsap.from("#dev h1", {
   duration: 0.5,
   //y: "5rem",
   scale: 0.8,

src/assets/styles/bitcoin.scss

@@ -167,3 +167,12 @@ section#bitcoin {
     }
   }
 }
+
+@media only screen and (max-width: 500px) {
+  .service-icon--bitcoind {
+    width: 11rem !important;
+  }
+  .service-icon--c-lightning {
+    width: 11rem !important;
+  }
+}

src/assets/styles/infographics.scss

@@ -1,9 +1,10 @@
 section#infographics{
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: stretch;
   padding: 0 6rem;
   .subsection{
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -11,15 +12,30 @@ section#infographics{
     padding: 6rem;
     outline: 1px solid rgba(255,255,255,0);
     svg{
-      width: 110%;
+      width: min(110%, 1000px);
     }
     &:first-child{
-      
+      &::before {
+        content: '';
+        width: 100vw;
+        position: absolute;
+        background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+      }
     }
     &:last-child{
-      margin-top: 3rem;
-      svg{
-        width: 80%;
+      //margin-top: 3rem;
+
+      &::before {
+        content: '';
+        width: 100vw;
+        position: absolute;
+        background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
+        top: 0;
+        bottom: 0;
+        z-index: -1;
       }
     }
   }

src/assets/styles/landing.scss

@@ -43,6 +43,10 @@ section {
   
 }
 
+.line {
+  padding: 1.8rem 0 1.4rem 0;
+}
+
 .line-primary path{
   stroke: var(--c-line-primary);
   stroke-width: 1px;
@@ -174,7 +178,7 @@ h2 {
 p {
   font-family: var(--f-accent);
   font-weight: 300;
-  font-size: 1.3rem;
+  font-size: 1.2rem; // 1.3rem
   line-height: 1.4;
   color: var(--c-text-primary);
   max-width: min(50ch, 73vw);
@@ -229,12 +233,12 @@ a.btn {
     right: 0;
     height: 1rem;
     z-index: -1;
-    transform: rotateX(90deg);
+    transform: rotateX(90deg) translateY(2px);
     box-shadow: inset 0 0.3rem 0.5rem 0rem rgb(0 0 0 / 50%);
   }
 
   &.btn--subtle{
-    color: var(--c-6);
+    color: #777777;
     font-size: 1.2rem;
     &::before {
       background-color: white;

src/assets/styles/main.scss

@@ -51,6 +51,7 @@ html {
     color: var(--c-text-primary);
     font-family: var(--f-accent);
     font-weight: 200;
+    overflow: scroll;
     overflow: overlay;
     display: flex;
 
@@ -76,7 +77,8 @@ html {
 
   &.menu-is-open{
     .header__logo{
-        opacity: 0 !important;
+        opacity: 1 !important;
+        filter: blur(0px) !important;
     }
   }
 }

src/assets/styles/menu.scss

@@ -10,6 +10,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        height: 100vh;
         .header{
             align-self: flex-start;
             margin: 5rem 0 0 5rem;
@@ -51,7 +52,7 @@
         font-size: 1.9rem;
         line-height: 1.5;
         font-weight: 100;
-        //text-transform: uppercase;
+        text-transform: uppercase;
         letter-spacing: .1em;
         color: var(--c-text-primary);
         position: relative;