Update/trademark (#27)

* add animated background to hero

* remove community tech job

* update some styling, fix lines, logo for trademarks

* cleanup

src/_data/jobs.json

@@ -20,24 +20,5 @@
       "Team retreats!"
     ],
     "how": "Email us at jobs@start9.com with your resume and any other information you think we should know about you."
-  },
-  {
-    "title": "Community Support Tech",
-    "blurb": "We take support and education extremely seriously at Start9. We need motivated and passionate individuals to help us scale our highly-rated community support team.",
-    "description": ["We are accepting applicants to the first training program beginning July 1. If accepted, this mandatory training which will teach you to be a StartOS expert as well as an empathetic first responder. During slow support days, there will be opportunities to assist with beta testing, quality assurance, and more. This program will be constantly expanding, with application periods occurring approximately once per year."],
-    "requirements": [
-      "A passion for Freedom-principled technologies",
-      "Basic computing skills",
-      "Empathy and patience",
-      "Bonus: Linux, sysadmin, or devops experience"
-    ],
-    "benefits": [
-      "Certification training program",
-      "Complimentary Start9 Server Lite",
-      "Badge in community channels",
-      "Contracted shift-based position",
-      "Paid in Bitcoin at a rate of $21 / hr USD"
-    ],
-    "how": "Email us at apply@start9.com."
   }
 ]

src/_includes/components/footer.njk

@@ -13,7 +13,7 @@
   </script>
   <div class="footer__content">
     <div class="header">
-      {% include "svgs/logo.svg" %}
+      {% include "svgs/workmark.svg" %}
       <div class="footer__copyright">{{ site.footer.copyright }}</div>
       <div class="footer__btns">
         <a target="_blank" rel="noopener noreferrer" href="{{ site.torUrl }}">{% include "svgs/tor.svg" %}</a>

src/_includes/components/header.njk

@@ -1,7 +1,7 @@
 <header>
   <nav>
     <a class="header__logo" href="/" aria-label="Return Home">
-    {% include "svgs/logo.svg" %}
+    {% include "svgs/workmark.svg" %}
     </a>
     <ul>
       {% for group in menu|selectattr("inHeader") %}

src/_includes/components/landing/hero.njk

@@ -1,6 +1,4 @@
 <section id="hero">
-  <div id="hero-image" class="image-with-shadow">
-  </div>
   <div id="logo">
     {% include "svgs/start9-brand.svg" %}
     <span>sovereign computing</span>

src/_includes/components/landing/infographics.njk

@@ -11,7 +11,7 @@
     </div>
   </div>
     <div class="subsection">
-    <h1><em style="color: #54be54;">Sovereign</em> computing</h1>
+    <h1><em>Sovereign</em> computing</h1>
     <p>When you run a private server, you are in control. You don't rely on others to process or store your data.</p>
     <p>In the sovereign computing paradigm, concerns over privacy, censorship, hacks, and fees practically disappear.</p>
     <div class="container">

src/_includes/components/landing/powered-by.njk

@@ -1,5 +1,6 @@
 <section id="powered-by">
-  <h1>Powered by <em>StartOS</em></h1>
+  <img class="logo" src="/assets/images/logomark.png" alt="Logomark">
+  <h1>Powered by StartOS</h1>
   <p>Just as Windows and macOS made it possible for anyone to own a personal computer, StartOS makes it possible for anyone to own a personal server.</p>
   <p>StartOS facilitates the entire process of discovering, installing, configuring, and using any variety of open-source software from anywhere in the world without trusting anyone.</p>
   <p>
@@ -10,8 +11,8 @@
     {# {% include "svgs/stack.svg" %}
     <div class="img-shadow">{% include "svgs/stack.svg" %}</div> #}
     <div class="container">
-      <img src="/assets/images/startOS.png" alt="screenshots of StartOS UI" title="screenshots of StartOS UI">
-      <img class="img-shadow" src="/assets/images/startOS.png" alt="">
+      <img src="/assets/images/startos-screens.png" alt="screenshots of StartOS UI" title="screenshots of StartOS UI">
+      <img class="img-shadow" src="/assets/images/startos-screens.png" alt="">
     </div>
   </div>
 </section>

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;
+  }
 }