Adding video link to lander

sst · Jun 22, 2023 · 98c31f5 · 98c31f5
1 parent 571847d
commit 98c31f5
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 36 deletions.
diff --git a/_config.yml b/_config.yml
@@ -67,9 +67,9 @@ permalink: /blog/:title:output_ext
 stats:
   newsletter: "90,000"
   newsletter_short: "90k"
-  discord: "4000"
-  github: "15000"
-  github_short: "15k"
+  discord: "4500"
+  github: "16000"
+  github_short: "16k"
 
 collections:
   chapters:

diff --git a/_sass/lander.scss b/_sass/lander.scss
@@ -382,6 +382,63 @@
     }
   }
 
+  .site-command {
+    padding-top: $spacing-unit / 2;
+    font-family: $code-font-family;
+    font-size: 20px;
+
+    @include media-query($on-palm) {
+      padding-top: 5px;
+      font-size: 14px;
+    }
+
+    a {
+      padding-left: $spacing-unit - 2px;
+      color: $tertiary-text-color;
+      cursor: pointer;
+
+      @include media-query($on-palm) {
+        padding-left: $spacing-unit - 10px;
+
+        span.icon {
+          vertical-align: 1px;
+        }
+      }
+
+      span.icon {
+        visibility: hidden;
+        vertical-align: 2px;
+      }
+
+      &:hover {
+        span.icon {
+          visibility: visible;
+        }
+      }
+
+      &.copied {
+        i.fa:first-child {
+          display: none;
+        }
+        i.fa:last-child {
+          display: inline;
+        }
+      }
+    }
+
+    i.fa {
+      font-size: 13px;
+
+      @include media-query($on-palm) {
+        font-size: 10px;
+      }
+
+      &:last-child {
+        display: none;
+      }
+    }
+  }
+
   .controls {
     margin-top: $spacing-unit * 1.5;
     text-align: center;
@@ -393,8 +450,8 @@
 
     a.sst-button {
       padding: {
-        left: 80px;
-        right: 80px;
+        left: 2 * $spacing-unit;
+        right: 2 * $spacing-unit;
       }
 
       @include media-query($on-palm) {
@@ -405,43 +462,25 @@
 
       &:first-child {
         padding: {
-          left: $spacing-unit;
-          right: $spacing-unit;
+          left: $spacing-unit + 10px;
+          right: $spacing-unit + 10px;
         }
-        cursor: pointer;
-        font-size: 18px;
-        font-weight: normal;
-        font-family: $code-font-family;
 
         @include media-query($on-palm) {
           font-size: 15px;
         }
 
-        span {
-          color: black;
-        }
-
         i.fa {
-          margin-left: 7px;
-          font-size: 16px;
-          opacity: 0.35;
+          margin-right: 8px;
+          font-size: 20px;
+          opacity: 0.25;
+          line-height: 0;
+          vertical-align: -1px;
 
           @include media-query($on-palm) {
-            margin-left: 5px;
+            margin-right: 5px;
             font-size: 13px;
-          }
-
-          &:last-child {
-            display: none;
-            opacity: 1;
-            color: $important-color;
-          }
-        }
-
-        &:not(.copied):hover {
-          i.fa {
-            opacity: 1;
-            color: $important-color;
+            vertical-align: 0;
           }
         }
 

diff --git a/index.md b/index.md
@@ -25,11 +25,20 @@ description: "Build modern full-stack serverless applications on AWS with Next.j
       3. Go from idea to IPO!
     </h4>
 
+    <h6 class="site-command">
+      <a data-text="npm create sst@latest" class="command">
+        <span>$ npm create sst</span>
+        <span class="icon">
+          <i class="fa fa-copy" aria-hidden="true"></i>
+          <i class="fa fa-check" aria-hidden="true"></i>
+        </span>
+      </a>
+    </h6>
+
     <div class="controls">
-      <a data-text="npm create sst@latest" class="command sst-button secondary">
-        <span>npm create sst</span>
-        <i class="fa fa-copy" aria-hidden="true"></i>
-        <i class="fa fa-check" aria-hidden="true"></i>
+      <a href="https://youtu.be/JY_d0vf-rfw" class="sst-button secondary" target="_blank">
+        <i class="fa fa-youtube-play" aria-hidden="true"></i>
+        <span>Learn More</span>
       </a>
       <a class="sst-button primary" href="{{ site.docs_url }}">
         Get Started