Update/trademark (#27)

* add animated background to hero

* remove community tech job

* update some styling, fix lines, logo for trademarks

* cleanup

src/assets/js/appearance-animation.js

@@ -260,19 +260,19 @@ if (document.querySelector("#powered-by") && document.querySelector("#powered-by
     },
   });
   
-  // 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%",
-    },
-  });
 }
 
+// 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

src/assets/js/header.js

@@ -6,7 +6,7 @@ gsap.to("header", {
   backgroundColor: "rgba(0,0,0,0.1)",
   backdropFilter: "blur(10px)",
   scrollTrigger: {
-    trigger: "#hero-image",
+    trigger: "#hero",
     scrub: true,
     start: "center top", // "triggerElement page"
     end: "bottom top", // "triggerElement page"
@@ -18,7 +18,7 @@ gsap.to(".header__logo", {
   opacity: "1",
   filter: "blur(0px)",
   scrollTrigger: {
-    trigger: "#hero-image",
+    trigger: "#hero",
     scrub: true,
     start: "center top", // "triggerElement page"
     end: "bottom top", // "triggerElement page"

src/assets/js/hero.js

@@ -1,14 +1,14 @@
 //////////////////////////////////////////
 // HERO
 
-gsap.to("#hero-image", {
-  duration: 1,
-  //y: "-10rem",
-  scale: 1,
-  opacity: 1,
-  filter: "blur(0px)",
-  delay: 0.5,
-});
+// gsap.to("#hero-image", {
+//   duration: 1,
+//   //y: "-10rem",
+//   scale: 1,
+//   opacity: 1,
+//   filter: "blur(0px)",
+//   delay: 0.5,
+// });
 
 gsap.to("#logo", {
   duration: 0.5,
@@ -16,4 +16,4 @@ gsap.to("#logo", {
   opacity: 1,
   delay: 1.25,
   //ease: "in-out"
-});
+});

src/assets/styles/bitcoin.scss

@@ -1,5 +1,5 @@
 #bitcoin-to-be svg {
-  max-height: 50vh;
+  // max-height: 50vh;
 }
 
 section#bitcoin {

src/assets/styles/landing.scss

@@ -99,8 +99,8 @@ section {
 
 .line svg{
   width: calc(100vw - (2 * 6rem));
-  max-width: 50vw;
-  max-height: 50vh;
+  max-width: 40vw;
+  max-height: 40vh;
 }
 
 nav {
@@ -108,7 +108,8 @@ nav {
 }
 
 #logo {
-  transform: translateY(-5rem);
+  // transform: translateY(-5rem);
+  animation: fadeIn ease 5s forwards;
   opacity: 0;
   display: inline-flex;
   flex-direction: column;
@@ -123,6 +124,35 @@ nav {
     font-weight: 400;
     letter-spacing: .1ch;
   }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @-moz-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @-webkit-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @-o-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @-ms-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
 }
 
 #hero {
@@ -144,7 +174,7 @@ h1 {
 
   em {
     font-style: normal;
-    color: var(--c-text-accent);
+    // color: var(--c-text-accent);
   }
 
   .img-inline {
@@ -163,7 +193,7 @@ aside > h1 {
 
   em {
     font-style: normal;
-    color: var(--c-text-accent);
+    // color: var(--c-text-accent);
   }
 }
 
@@ -176,7 +206,7 @@ h2 {
 
   em {
     font-style: normal;
-    color: var(--c-text-accent);
+    // color: var(--c-text-accent);
   }
 
   .img-inline {

src/assets/styles/main.scss

@@ -219,7 +219,7 @@ h5 {
   margin: 0;
   text-transform: uppercase;
   em {
-    color: var(--c-text-accent);
+    // color: var(--c-text-accent);
     font-style: normal;
   }
 }

src/assets/styles/powered-by.scss

@@ -10,49 +10,20 @@ section#powered-by {
     display: inline-block;
     max-width: min(16ch,64vw);
   }
-  
-  // .wrapper{
-  //   border: var(--b-primary);
-  //   max-width: 35ch;
-  //   .content {
-  //     padding: 1rem;
-  //     h3{
-  //       margin: 0;
-  //       font-family: 'Tusker Grotesk 5500';
-  //       font-weight: 100;
-  //       font-size: 3.5rem;
-  //       line-height: 1.1em;
-  //       text-transform: uppercase;
-  //     }
-  //   }
-  //   .footer{
-  //     padding: 1rem;
-  //     background: var(--c-spacer);
-  //     display: flex;
-  //     justify-content: center;
-  //     border-top: var(--b-primary);
 
-  //     a{
-  //       padding: 0.4rem 2rem;
-  //       background-color: var(--c-text-accent);
-  //       color: var(--c-text-bright);
-  //       border-color: var(--c-3d-shadow);
-  //       border-width: 1px 1px 15px 1px;
-  //       border-style: solid;
-  //       font-family: 'Tusker Grotesk 5500';
-  //       font-weight: 100;
-  //       text-transform: uppercase;
-  //       font-size: 2rem;
-  //       text-decoration: none;
-  //     }
-  //   }
-  // }
+  .logo {
+    width: 5rem;
+    padding-bottom: 2rem;
+    margin: auto;
+  }
+
+  .inline+p {
+    margin-top: -1.5rem;
+  }
+  
   svg {
     --width: min(45rem, (100vw - 12rem));
     width: --width;
-    //width: 45rem;
-    //max-width: calc(100vw - 12rem);
-    //margin-top: 6rem;
   }
 
   #stack-image-block svg {
@@ -107,4 +78,8 @@ svg a:visited {
   .container {
     width: 100vw;
   }
+
+  section#powered-by .inline img{
+    padding-bottom: 4.7rem;
+  }
 }