more homepage styling

docs/homepage/assets/scss/_cyan_theme.scss

@@ -1,30 +1,50 @@
 @import 'variables';
 
 #v-select {
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   max-width: 500px;
   margin: 0 auto;
   .dropdown-toggle {
     background: #fff;
     border-color: rgba(82, 166, 183, 0.39);
   }
-  .selected-tag {
-    color: #147688;
-    background-color: #d7f3f9;
-    border-color: #91ddec;
-    .close {
-      color: #147688;
-      opacity: .5;
-    }
-  }
+  //.selected-tag {
+  //  color: #147688;
+  //  background-color: #d7f3f9;
+  //  border-color: #91ddec;
+  //  .close {
+  //    color: #147688;
+  //    opacity: .5;
+  //  }
+  //}
   &.dropdown.open .dropdown-toggle,
   &.dropdown.open .dropdown-menu,
   &.dropdown.open .open-indicator:before {
     border-color: #4CC3D9;
   }
   .active a {
-    background: rgba(50,50,50,.1);
+    background: rgba(50, 50, 50, .1);
     color: #333;
   }
+
+  &.dropdown li {
+    border-bottom: 1px solid rgba($code-grey, .1);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.dropdown li a {
+    padding: 10px 20px;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    font-size: 1.5em;
+    .octicon {
+      font-size: 1.5em;
+      width: 1.5em;
+    }
+  }
   &.dropdown .highlight a,
   &.dropdown li:hover a {
     background: #4CC3D9;

docs/homepage/assets/scss/_demo.scss

@@ -5,6 +5,10 @@ body {
   height: 100vh;
 }
 
+[v-cloak] {
+  display: none;
+}
+
 body {
   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -48,6 +52,11 @@ p.lead {
   line-height: 1.4;
 }
 
+.accolades a {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
 .btn {
   display: inline-block;
   margin-bottom: 0;
@@ -73,9 +82,30 @@ p.lead {
 
   ul {
     padding-left: 0;
-    margin-left: 50px;
+    margin: 2em 2em;
     text-align: left;
   }
+
+  + p {
+    margin-top: 0;
+    margin-bottom: 2em;
+  }
+}
+
+code {
+  color: $code-grey;
+  font-family: 'Fira Code', 'monospace';
+  display: inline-block;
+  padding: .5em;
+  margin-top: 1.5em;
+  margin-bottom: 1em;
+  border-radius: 5px;
+  background: rgba(255,255,255,.5);
+  font-size: 20px;
+}
+
+.cta .btn {
+  margin: 0 .5em;
 }
 
 .btn-outline {
@@ -105,7 +135,20 @@ p.lead {
   }
 }
 
-.accolades a {
-  margin-left: 0;
-  margin-right: 5px;
+.overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background: rgba($code-black, .8);
+  transform: translateY(200vh);
+  transition: .25s transform;
+  &.active {
+    transform: translateY(0);
+  }
 }