Added JAMstack primer and social buttons

website/src/css/imports/community.css

@@ -10,7 +10,7 @@
     }
   }
 
-  .community-features {
+  .community {
     @neat-span-columns 12;
 
     @media screen and (min-width: $tablet) {
@@ -19,10 +19,30 @@
     @media screen and (min-width: $desktop) {
       @neat-span-columns 6;
     }
+  }
 
+  .community-features {
     .feature {
       margin-top: $small;
+    }
+  }
 
+  .community-buttons {
+    margin-top: $small;
+    padding-top: $medium;
+    border-top: 1px solid $lightestGrey;
+    a {
+      padding: $micro $tiny $micro $tiny;
+      margin-right: $micro;
+      background-color: $lightishGrey;
+      color: white;
+      border-radius: $borderRadius;
+    }
+    a:hover {
+      background-color: $darkGreen;
+    }
+    a:active {
+      background-color: $darkerGreen;
     }
   }
 
@@ -44,6 +64,11 @@
         width: 32px;
         margin: 0 $micro $micro 0;
         border-radius: 16px;
+        transition: 0.1s;
+      }
+      img:hover {
+        transform: scale(1.3);
+        box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25), 0 4px 12px 0 rgba(0,0,0,0.25);
       }
     }
 

website/src/css/imports/hero.css

@@ -72,7 +72,6 @@
   }
 
   .hero-graphic {
-    /* margin: 0 auto $large auto; */
     transform: scale(1.1) rotate(2deg);
 
     @media screen and (min-width: $tablet) {
@@ -81,6 +80,24 @@
       margin-bottom: 0;
     }
 
+    a.hero-videolink {
+      display: block;
+      text-align: center;
+      margin-top: $micro;
+      padding: $micro 0 $micro 0;
+      font-size: 14px;
+      font-weight: $semibold;
+      color: white;
+      background-color: rgba(255,255,255,0.1);
+      border-radius: $borderRadius;
+    }
+    a.hero-videolink:hover {
+      background-color: rgba(255,255,255,0.2);
+    }
+    a.hero-videolink:active {
+      background-color: rgba(255,255,255,0.4);
+    }
+
     img {
       border-radius: $largeBorderRadius;
       box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);

website/src/css/imports/whatsnew.css

@@ -21,6 +21,9 @@
       background-color: $darkGrey;
       border-radius: $borderRadius;
     }
+    a:active {
+      background-color: $darkerGrey;
+    }
     li {
       min-width: 250px;
       max-width: 350px;