content: #248 remove stackblitz button links from home page (#260)

Author: thescientist13

src/components/get-started/get-started.js

@@ -15,12 +15,11 @@ export default class GetStarted extends HTMLElement {
         </div>
 
         <div>
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}" target="_blank">
-            <span>View in Stackblitz</span>
-            <span class="no-show-screen-reader"> (opens in a new window)</span>
+          <a href="/docs/introduction/about/" class="${styles.buttonSecondary}">
+            <span>Learn More</span>
           </a>
           
-          <a href="/guides/getting-started/" class="${styles.buttonStarted}">
+          <a href="/guides/getting-started/" class="${styles.buttonPrimary}">
             <span>Get Started</span>
           </a>
         </div>

src/components/get-started/get-started.module.css

@@ -36,7 +36,7 @@
   vertical-align: middle;
 }
 
-.buttonBlitz {
+.buttonSecondary {
   display: inline-block;
   border-radius: var(--radius-3);
   border: var(--border-size-1) solid var(--color-white);
@@ -49,7 +49,7 @@
   text-decoration: none;
 }
 
-.buttonStarted {
+.buttonPrimary {
   display: inline-block;
   border-radius: var(--radius-3);
   padding: var(--size-fluid-1) var(--size-fluid-2);
@@ -62,15 +62,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover,
-.buttonBlitz:focus {
+.buttonSecondary:hover,
+.buttonSecondary:focus {
   background-color: var(--color-gray);
   text-decoration: none;
   color: var(--color-black) !important;
 }
 
-.buttonStarted:hover,
-.buttonStarted:focus {
+.buttonPrimary:hover,
+.buttonPrimary:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;

src/components/hero-banner/hero-banner.js

@@ -12,12 +12,11 @@ export default class HeroBanner extends HTMLElement {
         <p class="${styles.headingSub}">Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.</p>
 
         <div class="${styles.ctaContainer}">
-          <a href="https://stackblitz.com/github/projectevergreen/greenwood-getting-started" class="${styles.buttonBlitz}"  target="_blank">
-            <span>View in Stackblitz</span>
-            <span class="no-show-screen-reader"> (opens in a new window)</span>
+          <a href="/docs/introduction/about/" class="${styles.buttonSecondary}">
+            <span>Learn More</span>
           </a>
           
-          <a href="/guides/getting-started/" class="${styles.buttonStarted}">
+          <a href="/guides/getting-started/" class="${styles.buttonPrimary}">
             <span>Get Started</span>
           </a>
 

src/components/hero-banner/hero-banner.module.css

@@ -30,7 +30,7 @@
   text-align: center;
 }
 
-.buttonBlitz {
+.buttonSecondary {
   display: inline-block;
   border-radius: var(--radius-3);
   background-color: transparent;
@@ -43,7 +43,7 @@
   color: var(--color-black) !important;
 }
 
-.buttonStarted {
+.buttonPrimary {
   display: inline-block;
   border-radius: var(--radius-3);
   padding: var(--size-3);
@@ -56,15 +56,15 @@
   text-decoration: none;
 }
 
-.buttonBlitz:hover,
-.buttonBlitz:focus {
+.buttonSecondary:hover,
+.buttonSecondary:focus {
   background-color: var(--color-secondary);
   color: var(--color-white) !important;
   text-decoration: none;
 }
 
-.buttonStarted:hover,
-.buttonStarted:focus {
+.buttonPrimary:hover,
+.buttonPrimary:focus {
   background-color: var(--color-accent);
   text-decoration: none;
   color: var(--color-black) !important;
@@ -121,8 +121,8 @@
     margin: 0 auto;
   }
 
-  .buttonBlitz,
-  .buttonStarted {
+  .buttonSecondary,
+  .buttonPrimary {
     width: 45%;
   }
 
@@ -153,8 +153,8 @@
     text-align: left;
   }
 
-  .buttonBlitz,
-  .buttonStarted {
+  .buttonSecondary,
+  .buttonPrimary {
     max-width: fit-content;
   }