10/9 notes from Lucy: header and link css; image and style tweaks; news page revamp; jobs empty template; firefox fixes;

src/assets/js/main.js

@@ -445,7 +445,7 @@ function crossfade() {
       y: "-=" + itemHeight,
       duration: 1,
       ease: kerplunk2,
-      overwrite: true
+      overwrite: true,
     })
     .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
 
@@ -622,4 +622,64 @@ gsap.from("#community", {
     start: "top 75%", // "triggerElement page"
     toggleActions: defaultActions,
   },
-});
+});
+
+/////////////////////////////////////////
+// EMAIL POST
+
+function showSuccess() {
+  hideError();
+  emailSuccess.classList.add("form-alert--visible");
+}
+
+function hideSuccess() {
+  emailError.classList.remove("form-alert--visible");
+}
+
+function showError(message) {
+  hideSuccess();
+  emailError.classList.add("form-alert--visible");
+  emailError.innerHTML(message);
+}
+
+function hideError() {
+  emailError.classList.remove("form-alert--visible");
+}
+
+document.getElementById("contactSubmit").addEventListener("click", function () {
+  const fromEmail = document.getElementById("fromEmail");
+  const emailError = document.getElementById("emailError");
+  const emailSuccess = document.getElementById("emailSuccess");
+
+  if (
+    /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(
+      fromEmail.value
+    )
+  ) {
+    hideError();
+
+    try {
+      fetch(siteUrl + "app/php/email/v1/SendSupportMail.php", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: formBody,
+      }).then((response) => {
+        if (response.status === 200) {
+          showSuccess();
+        } else {
+          showError(
+            "Something's not working. If you keep getting this error, try us at <a href='https://twitter.com/start9labs' target='_blank'>Twitter</a> instead."
+          );
+        }
+      });
+    } catch (error) {
+      showError(
+        "Something's not working. If you keep getting this error, try us at <a href='https://twitter.com/start9labs' target='_blank'>Twitter</a> instead."
+      );
+    }
+  } else {
+    showError("Sorry, you must use a valid email address.");
+  }
+});

src/assets/styles/community.scss

@@ -63,24 +63,24 @@ section#community {
     }
   }
 
-  .community__icons {
-    display: flex;
-    justify-content: space-between;
-    width: var(--width);
-    font-size: 2rem;
-    font-family: var(--f-button);
-    align-items: center;
-    margin-top: 3rem;
+}
+.community__icons {
+  display: flex;
+  justify-content: space-between;
+  width: var(--width);
+  font-size: 2rem;
+  font-family: var(--f-button);
+  align-items: center;
+  margin-top: 3rem;
 
-    a {
-      &:hover svg path{
-        fill: var(--c-text-accent);
-      }
-      svg {
-        width: 3rem;
-        path{
-            transition: var(--t-simple);
-        }
+  a {
+    &:hover svg path{
+      fill: var(--c-text-accent);
+    }
+    svg {
+      width: 3rem;
+      path{
+          transition: var(--t-simple);
       }
     }
   }

src/assets/styles/infographics.scss

@@ -12,7 +12,7 @@ section#infographics{
     padding: 6rem;
     outline: 1px solid rgba(255,255,255,0);
     svg{
-      width: min(110%, 1000px);
+      width: 100%;
       //width: clamp(500px, 50vw, 1000px);
     }
     &:first-child{
@@ -42,7 +42,7 @@ section#infographics{
   }
 
   .image-with-shadow{
-    width: 100%;
+    width: clamp(min(400px, 90vw), 110%, 1000px);
     z-index: 1;
     .img-shadow{
       width: 100%;

src/assets/styles/landing.scss

@@ -130,7 +130,7 @@ nav {
 h1 {
   font-family: var(--f-hero);
   font-size: min(4.5rem,171px);
-  text-transform: uppercase;
+  //text-transform: uppercase;
   line-height: 1;
   color: var(--c-text-primary);
 
@@ -188,15 +188,15 @@ p {
 
   em {
     font-style: normal;
-    color: var(--c-text-accent);
-    font-weight: 600;
+    //color: var(--c-text-accent);
+    font-weight: 800;
   }
 }
 
 a.btn {
   position: relative;
   padding: 0.4rem 2rem;
-  transform: rotateX(10deg);
+  transform: rotateX(25deg);
   color: var(--c-text-bright);
   border: 0;
   font-family: var(--f-accent);
@@ -208,9 +208,10 @@ a.btn {
   transform-style: preserve-3d;
 
   &:hover{
-    transform: rotateX(30deg);
+    //transform: rotateX(30deg);
+    transform: scale(1.03);
     &::before {
-      box-shadow: inset 0 1rem 1rem -0.5rem var(--c-shadow-1);
+      //box-shadow: inset 0 1rem 1rem -0.5rem var(--c-shadow-1);
     }
   }
 

src/assets/styles/main.scss

@@ -27,6 +27,9 @@
 
   --c-6: rgb(194, 194, 194);
 
+  --c-7: #2fdf75;
+  --c-success: var(--c-7);
+
   --c-shadow-1: rgb(0 0 0 / 50%);
   --c-shadow-2: rgb(0 0 0 / 40%);
   --c-shadow-3: rgb(0 0 0 / 20%);
@@ -133,10 +136,25 @@ a.link-in-svg{
 }
 
 p a {
-  color: var(--c-text-primary);
-  text-decoration: underline;
+  color: var(--c-text-accent);
+  //text-decoration: underline;
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    left: 0;
+    height: 1px;
+    border-radius: 2px;
+    background: linear-gradient(111.3deg, transparent 9.6%, var(--c-2) 93.6%);
+    background: linear-gradient(111.3deg, transparent 9.6%, var(--c-2) 50%, transparent 93.6%);
+  }
   &:hover {
     color: var(--c-text-accent);
+    &::after {
+      background: linear-gradient(111.3deg, var(--c-2) 9.6%, var(--c-2) 93.6%);
+    }
   }
 }
 
@@ -153,6 +171,10 @@ h5 {
   }
 }
 
+h1, h2{
+  text-transform:none;
+}
+
 ul {
   margin: 0;
   padding: 0;
@@ -295,6 +317,25 @@ nav {
   opacity: 0.5;
 }
 
+.form-alert{
+  padding: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  display: none;
+
+  &.form-alert--success{
+    background-color: var(--c-success);
+  }
+
+  &.form-alert--error{
+    background-color: red;
+  }
+
+  &.form-alert--visible{
+    display: block;
+  }
+}
+
 @media only screen and (max-width: 500px) {
   .header__logo img {
     width: 11rem !important;

src/assets/styles/news.scss

@@ -0,0 +1,8 @@
+section#news{
+    width: calc(100vw - 2 * var(--side-padding));
+
+    .podcasts{
+        width: 100%;
+        display: flex;
+    }
+}

src/assets/styles/peripheral.scss

@@ -20,6 +20,7 @@ main {
 
 section {
   --width: 42ch;
+  --width-full: calc(100vw - (2 * var(--side-padding)));
   --side-padding: 3rem;
   font-family: "Montserrat";
   font-weight: 300;
@@ -28,6 +29,13 @@ section {
   padding: 7rem var(--side-padding);
   position: relative;
   overflow: visible;
+
+  &.section--no-image {
+    h2 {
+      margin-bottom: 2rem;
+    }
+  }
+
   &:nth-of-type(2n + 3) {
     &::before {
       content: "";
@@ -67,7 +75,7 @@ section#hero {
   padding-top: 0;
   padding-bottom: 0;
   gap: 5rem;
-  width: calc(100vw - (2 * var(--side-padding)));
+  width: var(--width-full);
   justify-content: center;
   flex-direction: row;
 
@@ -272,8 +280,9 @@ section#jobs {
   }
 }
 
+// old news
 section#news {
-  ul {
+  ul.news {
     display: flex;
     flex-direction: column;
     gap: 4rem;
@@ -313,3 +322,74 @@ section#news {
     overflow: hidden;
   }
 }
+
+section#news {
+  width: var(--width-full);
+
+  ul.podcasts {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 4rem;
+    .podcast a {
+      width: 20rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      position: relative;
+      background: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0.05)
+      );
+      .creator {
+        left: 1rem;
+        position: absolute;
+        top: -0.6rem;
+        opacity: 1;
+      }
+      img {
+        width: 20rem;
+        height: 20rem;
+        aspect-ratio: 1;
+        object-fit: contain;
+        background-color: #212121;
+      }
+      h3,
+      p, time {
+        width: 20rem;
+        padding: 0 2rem;
+        box-sizing: border-box;
+      }
+
+      h3{
+        font-size: 1.6rem;
+      }
+      p {
+        color: #eee;
+        margin-top: -1.5rem;
+        margin-bottom: 2rem;
+        line-height: 1.4;
+        font-size: 0.8rem;
+      }
+
+      time{
+        margin-top: -1.5rem;
+        color: var(--c-text-accent);
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+
+section#contact { 
+  gap: 3rem;
+  p{ margin: 0;}
+.community__icons{
+  width: auto;
+  margin: 0;
+}
+}

src/assets/styles/products.scss

@@ -5,6 +5,7 @@ section#products {
   align-items: flex-end;
   justify-content: center;
   gap: 3rem;
+  --img-width: 42vw;
 
   .subsection {
     transform-style: preserve-3d;
@@ -26,14 +27,14 @@ section#products {
       transition: var(--t-simple);
     }
     img {
-      //transition: var(--t-simple);
-      width: 42vw;
+      transition: var(--t-simple);
+      width: var(--img-width);
     }
     a {
       display: flex;
       flex-direction: column;
       position: relative;
-      padding: 2rem;
+      padding: 4rem;
       //transition: var(--t-simple);
       .heading h1 {
         line-height: 0.8;
@@ -45,23 +46,24 @@ section#products {
             color: var(--c-text-accent);
           }
         }
-        // img{
-        //   transform: scale(1.1);
-        //   opacity: .2;
-        // }
+        img{
+          transform: scale(1.05);
+          opacity: .5;
+        }
       }
     }
     &.subsection--buy a {
       align-items: center;
 
       .heading {
-        //left: 6rem;
-        //top: 6rem;
-        //position: absolute;
         align-self: center;
         text-align: center;
         display: flex;
         flex-direction: column;
+        margin-top: 3rem;
+      }
+      h1 {
+        text-transform: uppercase;
       }
       .product__subheader {
       }
@@ -71,10 +73,9 @@ section#products {
         rgba(255, 255, 255, 0.05)
       );
       svg {
-        width: 27.5vw;
+        width: var(--img-width);
+        transform: scale(1.05);
         position: absolute;
-        top: 20%;
-        left:22%;
       }
     }
     &.subsection--diy {
@@ -82,7 +83,6 @@ section#products {
       bottom: -5rem;
       background-color: var(--c-bkg);
       a {
-
         &:hover {
           .heading {
             transform: none;