post-9/23 meeting small tweaks

src/_includes/components/header.njk

@@ -1,6 +1,6 @@
 <header>
   <nav>
-    <a class="header__logo" href="/"><img src="../assets/images/start9_logo.png" alt=""></a>
+    <a class="header__logo" href="/" aria-label="Return Home"><img src="../assets/images/start9_logo.png" alt=""></a>
     <ul>
       {% for group in menu|selectattr("inHeader") %}
         {% for item in group.items %}

src/_includes/components/landing/_contact.njk

@@ -1,6 +1,6 @@
 <form action="">
     <input type="email" name="" id="" placeholder="email address"/>
-    <button type="submit">
+    <button type="submit" aria-label="Submit Email" title="Submit Email">
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
         {# <path stroke="none" d="M0 0h24v24H0z" fill="none"/> #}
         <line x1="10" y1="14" x2="21" y2="3" vector-effect="non-scaling-stroke" />

src/_includes/components/landing/hero.njk

@@ -1,7 +1,7 @@
 <section id="hero">
     <div id="hero-image">
-        <img src="assets/images/explosion.png" alt="">
+        <img rel="preload" as="image" src="assets/images/explosion.png" alt="">
-        <img class="img-shadow" src="assets/images/explosion.png" alt="">
+        <img rel="preload" as="image" class="img-shadow" src="assets/images/explosion.png" alt="">
     </div>
     <div id="logo">
         <img class="unlazy" src="assets/images/start9_logo.png" alt="">

src/_includes/components/landing/infographics.njk

@@ -1,5 +1,5 @@
 <section id="infographics">
-    <div class="subsection section--subtle">
+    <div class="subsection">
         <h1>The problem is
             <em>trust</em>
         </h1>
@@ -14,7 +14,7 @@
         </div> #}
         {% include "components/svg/big-tech-network-diagram.svg" %}
     </div>
-    <div class="subsection section--bold">
+    <div class="subsection">
         <h1>Take back
             <em>control</em>
         </h1>
@@ -29,6 +29,6 @@
                     {% include "components/svg/embassyos-network-diagram.svg" %}
                     <div class="img-shadow">{% include "components/svg/embassyos-network-diagram.svg" %}</div>
                 </div> #}
-                {% include "components/svg/embassyos-network-diagram.svg" %}
+                {% include "components/svg/embassyos-network-diagram_red_extended.svg" %}
             </div>
         </section>

src/_includes/components/landing/lines/be-to-powered.svg

@@ -1,3 +1,3 @@
-<svg class="line-primary" viewBox="0 0 73 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 117 380" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M71 0V191.387H2V285.693H42V380" vector-effect="non-scaling-stroke"/>
+<path d="M115 0V71.3869H2V380" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/components/landing/lines/be-to-powered2.svg

@@ -0,0 +1,3 @@
+<svg width="117" height="380" viewBox="0 0 117 380" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M115 0V71.3869H2V380" stroke="white" stroke-width="2.37"/>
+</svg>

src/_includes/components/menu.njk

@@ -1,6 +1,6 @@
 <section id="menu">
     <div class="menu-content">
-        <div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div>
+        {# <div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div> #}
         <ul class="groups">
             {% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
             <li class="{{group.size}}">

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) => {
+positionServiceIcons();
-  const serviceElement = document.querySelector(".service-icon--" + service);
-  const bitcoinSectionElement = document.querySelector("#bitcoin");
-  const upOrDown = getRandomInt(0, 1);
-  const bitcoinHeight = bitcoinSectionElement.clientHeight;
 
-  serviceElement
+function positionServiceIcons() {
-    ? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
+  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) {
+    serviceElement
-    gsap.set(".service-icon--" + service, {
+      ? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
-      y: getRandomInt(0, bitcoinHeight / 2) + "px",
+      : "";
-    });
+
-    gsap.to(".service-icon--" + service, {
+    if (upOrDown) {
-      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+      gsap.set(".service-icon--" + service, {
-      //x: getRandomInt(0, 100) + "vw",
+        y: getRandomInt(0, bitcoinHeight / 2) + "px",
-      ease: "in",
+      });
-      delay: getRandomNumber(0, 1),
+      gsap.to(".service-icon--" + service, {
-      scrollTrigger: {
+        y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
-        trigger: "#bitcoin",
+        //x: getRandomInt(0, 100) + "vw",
-        scrub: true,
+        ease: "in",
-        start: "top 25%", // "triggerElement page"
+        delay: getRandomNumber(0, 1),
-        end: "90% center", // "triggerElement page"
+        scrollTrigger: {
-        //markers: { startColor: "lime", endColor: "lime" },
+          trigger: "#bitcoin",
-      },
+          scrub: true,
-    });
+          start: "top 25%",
-  } else {
+          end: "90% center", // "triggerElement page"
-    gsap.set(".service-icon--" + service, {
+          //markers: { startColor: "lime", endColor: "lime" },
-      y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
+        },
-    });
+      });
-    gsap.to(".service-icon--" + service, {
+    } else {
-      y: getRandomInt(0, bitcoinHeight / 2) + "px",
+      gsap.set(".service-icon--" + service, {
-      //x: getRandomInt(0, 100) + "vw",
+        y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
-      ease: "in",
+      });
-      delay: getRandomNumber(0, 1),
+      gsap.to(".service-icon--" + service, {
-      scrollTrigger: {
+        y: getRandomInt(0, bitcoinHeight / 2) + "px",
-        trigger: "#bitcoin",
+        //x: getRandomInt(0, 100) + "vw",
-        scrub: true,
+        ease: "in",
-        start: "top bottom", // "triggerElement page"
+        delay: getRandomNumber(0, 1),
-        end: "90% center", // "triggerElement page"
+        scrollTrigger: {
-        //markers: { startColor: "orange", endColor: "orange" },
+          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;
+      //margin-top: 3rem;
-      svg{
+
-        width: 80%;
+      &::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;

src/index.njk

@@ -91,10 +91,10 @@ layout: layouts/base.njk
 
 {% include "components/landing/community.njk" %}
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+  {# <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> #}
-  <script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
-  <script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
-  <script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
-  <script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
-  <script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
-  <script src="{{ '/assets/js/main.js' | url }}"></script>
+  <script defer src="{{ '/assets/js/main.js' | url }}"></script>