changes from 10/11 meeting

src/_data/menu.json

@@ -8,8 +8,8 @@
         "name": "Store",
         "slug": "store",
         "url": "https://store.start9.com/",
-        "target": "",
+        "target": "_blank",
-        "class": "em"
+        "class": ""
       },
       {
         "name": "Developers",
@@ -39,13 +39,21 @@
         "class": ""
       },
       {
-        "name": "News/Media",
+        "name": "Podcasts",
         "slug": "news",
         "url": "/news",
         "target": "",
         "order": 1,
         "class": ""
       },
+      {
+        "name": "Videos",
+        "slug": "videos",
+        "url": "https://www.youtube.com/channel/UCGEw4HJDvOn3Oy8ykR36P7Q",
+        "target": "_blank",
+        "order": 1,
+        "class": ""
+      },
       {
         "name": "Contact",
         "slug": "contact",
@@ -92,16 +100,16 @@
       {
         "name": "Embassy ONE",
         "slug": "embassy-one",
-        "url": "https://store.start9.com/products/embassy",
+        "url": "https://store.start9.com/collections/embassy/products/embassy-one",
-        "target": "",
+        "target": "_blank",
         "order": 0,
         "class": ""
       },
       {
         "name": "Embassy Pro",
         "slug": "embassy-pro",
-        "url": "https://store.start9.com/products/embassy-2",
+        "url": "https://store.start9.com/collections/embassy/products/embassy-2",
-        "target": "",
+        "target": "_blank",
         "order": 1,
         "class": ""
       },
@@ -109,7 +117,7 @@
         "name": "Store",
         "slug": "store",
         "url": "https://store.start9.com/",
-        "target": "",
+        "target": "_blank",
         "order": 2,
         "class": "highlight"
       }
@@ -144,7 +152,7 @@
         "name": "Docs",
         "slug": "docs",
         "url": "https://start9.com/latest/user-manual",
-        "target": "",
+        "target": "_blank",
         "order": 1,
         "class": ""
       },

src/_includes/components/header.njk

@@ -12,10 +12,10 @@
         {% endfor %}
       {% endfor %}
       <li class="closed-menu">
-        <a id="menu-open" href="">menu {% include "components/svg/menu-open.svg" %}</a>
+        <a id="menu-open" href=""><span class="hide-on-mobile">menu</span> {% include "components/svg/menu-open.svg" %}</a>
       </li>
       <li class="opened-menu">
-        <a id="menu-close" href="">close</a>
+        <a id="menu-close" href="">{% include "components/svg/menu-close.svg" %}</a>
       </li>
     </ul>
   </nav>

src/_includes/components/svg/menu-close.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="menu-icon"
+   viewBox="0 0 13.414213 13.414213"
+   stroke-width="2"
+   stroke="#ffffff"
+   fill="none">
+  <line
+     x1="12.707107"
+     y1="0.70710677"
+     x2="0.70710677"
+     y2="12.707107" />
+  <line
+     x1="0.70710677"
+     y1="0.70710677"
+     x2="12.707107"
+     y2="12.707107" />
+</svg>

src/_includes/components/svg/menu-open.svg

@@ -1,3 +1,9 @@
-<svg viewBox="0 0 28 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<path d="M13.8706 18.957H0.370605V15.957H13.8706V18.957ZM27.3706 11.457H0.370605V8.45703H27.3706V11.457ZM27.3706 3.95703H13.8706V0.957031H27.3706V3.95703Z" />
+<svg
+   class="menu-icon"
+   viewBox="0 0 26.999994 17.999969"
+   fill="none">
+  <path
+     fill="#ffffff"
+     d="M 13.499995,17.999969 H 0 v -3 h 13.499995 z m 13.5,-7.5 H 0 v -2.99997 h 26.999995 z m 0,-7.49997 h -13.5 V 0 h 13.5 z" />
 </svg>

src/assets/js/main.js

@@ -78,8 +78,8 @@ gsap.from("#hero-to-pitch path:first-child", {
   scrollTrigger: {
     trigger: "#hero-to-pitch",
     scrub: true,
-    start: "top 75%", // "triggerElement page"
+    start: "top 50%", // "triggerElement page"
-    end: "bottom 75%", // "triggerElement page"
+    end: "bottom 50%", // "triggerElement page"
     toggleActions: defaultActions,
   },
 });

src/assets/js/peripheral.js

@@ -13,7 +13,7 @@ gsap.from("section#hero+section", {
     },
   });
 
-const sections = document.querySelectorAll("section:not(#hero):not(#blurb)");
+const sections = document.querySelectorAll("section:not(#hero):not(#blurb):not(#menu)");
 
 sections.forEach(function (section) {
   gsap.from(section, {

src/assets/styles/landing.scss

@@ -125,6 +125,8 @@ nav {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  height: 100vh;
+  margin-bottom: calc(-1 * (50vh - 4.5rem - (min(32.385rem, 58.3vw) / 2)));
 }
 
 h1 {
@@ -132,6 +134,7 @@ h1 {
   font-size: min(4.5rem,171px);
   //text-transform: uppercase;
   line-height: 1;
+  font-weight: 400;
   color: var(--c-text-primary);
 
   em {
@@ -189,7 +192,7 @@ p {
   em {
     font-style: normal;
     //color: var(--c-text-accent);
-    font-weight: 800;
+    font-weight: 600;
   }
 }
 
@@ -362,9 +365,9 @@ body {
 
 @media screen and (max-width: 500px) {
   #hero{
-    margin-top: 25vh;
+    //margin-top: 25vh;
   }
   .line svg{
-    max-height: 40vh;
+    max-height: 30vh;
   }
 }

src/assets/styles/main.scss

@@ -55,7 +55,6 @@
 }
 
 html {
-  //background-color: lime;
   font-size: 2vmin;
   font-size: max(2vmin, 10px);
   scroll-behavior: smooth;
@@ -240,10 +239,17 @@ nav {
     gap: 1rem;
     li {
       list-style: none;
+      display: flex;
       a {
         color: var(--c-text-bright);
         font-size: 1.5rem;
         padding: 0em 0.5em 0em 0.5em;
+        display: flex;
+        gap: 0.5em;
+        align-items: center;
+        svg {
+          height: 0.7em;
+        }
 
         path {
           fill: var(--c-text-bright);
@@ -273,16 +279,6 @@ nav {
   }
 }
 
-#menu-open {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-  svg {
-    height: 0.7em;
-    margin-top: -2px;
-  }
-}
-
 .opened-menu {
   opacity: 0;
   width: 0;
@@ -305,7 +301,7 @@ nav {
   img {
     width: 50rem;
     max-width: 90vw;
-    margin-top: 6rem;
+    //margin-top: 6rem;
   }
 }
 
@@ -336,6 +332,16 @@ nav {
   }
 }
 
+.p--standalone {
+  font-size: 1.8rem;
+  line-height: 1.4;
+}
+
+.center{
+  width: fit-content;
+    align-self: center;
+}
+
 @media only screen and (max-width: 500px) {
   .header__logo img {
     width: 11rem !important;
@@ -343,9 +349,11 @@ nav {
   .hide-on-mobile {
     display: none;
   }
-  nav ul li a {
+  nav ul{
+    gap: 0;
+  li a {
     font-size: 2.5rem;
-  }
+  }} 
 }
 
 .image-with-shadow {

src/assets/styles/peripheral.scss

@@ -333,8 +333,12 @@ section#news {
     flex-wrap: wrap;
     justify-content: center;
     gap: 4rem;
+
+    --width: clamp(min(400px, 90vw), 20rem, 1000px);
+
     .podcast a {
-      width: 20rem;
+      width: var(--width);
+      height: 100%;
       display: flex;
       flex-direction: column;
       gap: 2rem;
@@ -351,28 +355,28 @@ section#news {
         opacity: 1;
       }
       img {
-        width: 20rem;
+        width: var(--width);
-        height: 20rem;
+        height: var(--width);
         aspect-ratio: 1;
         object-fit: contain;
         background-color: #212121;
       }
       h3,
       p, time {
-        width: 20rem;
+        width: var(--width);
         padding: 0 2rem;
         box-sizing: border-box;
       }
 
       h3{
-        font-size: 1.6rem;
+        font-size: max(28px, 1.6rem);
       }
       p {
         color: #eee;
         margin-top: -1.5rem;
         margin-bottom: 2rem;
         line-height: 1.4;
-        font-size: 0.8rem;
+        font-size: max(14px, 0.8rem);
       }
 
       time{

src/assets/styles/products.scss

@@ -32,7 +32,8 @@ section#products {
     }
     a {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      align-items: flex-end;
       position: relative;
       padding: 4rem;
       //transition: var(--t-simple);
@@ -53,14 +54,15 @@ section#products {
       }
     }
     &.subsection--buy a {
-      align-items: center;
+      //align-items: center;
+      gap: 0.2rem;
 
       .heading {
-        align-self: center;
+        //align-self: center;
         text-align: center;
         display: flex;
         flex-direction: column;
-        margin-top: 3rem;
+        //margin-top: 3rem;
       }
       h1 {
         text-transform: uppercase;
@@ -76,6 +78,7 @@ section#products {
         width: var(--img-width);
         transform: scale(1.05);
         position: absolute;
+        margin-left: 0.5rem;
       }
     }
     &.subsection--diy {

src/assets/styles/support.scss

@@ -12,11 +12,11 @@ section#support {
     justify-content: center;
     gap: 6rem;
     .col {
-      max-width: 37vw;
+      max-width: clamp(min(400px, 90vw), 20rem, 1000px);
     }
   }
   img {
-    max-height: 40vh;
+    max-height: 20rem;
     max-width: 100%;
     transform: rotateZ(5deg);
   }

src/contact.njk

@@ -17,8 +17,9 @@ layout: layouts/peripheral.njk
 
 <section id="contact">
 
-    <h2>Questions? Concerns?</h2> 
+    <p class="p--standalone center">Reach out anytime to<br/>
-    <p>Reach out anytime to &nbsp;{% include 'components/landing/_encoded-email.njk' %}, or find us on social media.</p>
+        {% include 'components/landing/_encoded-email.njk' %},</br>
+        or find us on social media.</p>
     
     {% include "components/landing/_social-media.njk" %}
 

src/news.njk

@@ -1,5 +1,5 @@
 ---
-title: News | Start9 
+title: Podcasts | Start9 
 layout: layouts/peripheral.njk
 ---
 
@@ -10,7 +10,7 @@ layout: layouts/peripheral.njk
     </div>
     <div id="logo">
         <h1>
-            <span>News</span>
+            <span>Podcasts</span>
         </h1>
     </div>
 </section>