Docs: start redoing landing page

styles/_colors.scss

@@ -112,6 +112,8 @@ $text-muted:      $gray-200;
 $breadcrumb-bg:   $black;
 $breadcrumb-active-color: $gray-400;
 
+$card-bg:   $gray-800;
+
 $dropdown-bg:     $gray-900;
 $dropdown-divider-bg: $black;
 $dropdown-border-color: $gray-900;

styles/_landings.scss

@@ -221,3 +221,33 @@
   border: 2px solid $white;
   background: $dark;
 }
+
+// Docs page -------------------------------------------------------------------
+
+#software-and-sdks {
+  .card-deck .card {
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  .card-deck .card:nth-child(1) {
+    background-image: url(../../img/cards/green.svg);
+  }
+  .card-deck .card:nth-child(2) {
+    background-image: url(../../img/cards/neutral-blue.svg);
+  }
+  .card-deck .card:nth-child(3) {
+    background-image: url(../../img/cards/magenta-orange.svg);
+  }
+  .card-deck .card:nth-child(4) {
+    background-image: url(../../img/cards/orange-yellow.svg);
+  }
+
+  .circled-logo {
+    background-color: $gray-600;
+    border-radius: 50%;
+    padding: .75rem;
+    width: 50px;
+    height: 50px;
+  }
+}

styles/_layout.scss

@@ -226,7 +226,7 @@ $columns: 12; // Number of columns in the grid system
   @for $width from 1 through $columns {
     .col-new-#{$width} {
       flex-basis: $width / $columns * 100%;
-    }  
+    }
   }
   .col-new {
     background-position: bottom;
@@ -242,7 +242,7 @@ $columns: 12; // Number of columns in the grid system
     @include media-breakpoint-up(lg) {
       margin: 40px;
     }
-    
+
     &#pink-purple {
       background-image: url(../../img/cards/pink-purple.svg);
     }
@@ -252,6 +252,9 @@ $columns: 12; // Number of columns in the grid system
     &#light-green {
       background-image: url(../../img/cards/light-green.svg);
     }
+    &#green {
+      background-image: url(../../img/cards/green.svg);
+    }
     &#orange {
       background-image: url(../../img/cards/orange.svg);
     }
@@ -282,7 +285,7 @@ $columns: 12; // Number of columns in the grid system
     &#blue-light-blue {
       background-image: url(../../img/cards/blue-light-blue.svg);
     }
-    
+
   }
 
   .card-new {
@@ -305,22 +308,10 @@ $columns: 12; // Number of columns in the grid system
 
 
 
-/* Grid Box Vertical numbers ------------------------------------------------ */
-.flag-vertical {
-  color: $gray-200;
-  position: absolute;
-  top: 2em;
-  right: 3em;
-  width: 20px;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-  -webkit-transform-origin: 100% 100%;
-  -ms-transform-origin: 100% 100%;
-  transform-origin: 100% 100%;
-  font-size: 0.833em;
-  letter-spacing: 2px;
-}
+// 4-column layout used in docs.html -------------------------------------------
+// #doc-types .card-columns {
+//   column-count: 3;
+// }
 
 // Misc. layout styles ---------------------------------------------------------
 

styles/_status-labels.scss

@@ -219,3 +219,9 @@
     }
   }
 }
+
+.tag-cloud {
+  .list-inline-item {
+    margin-top: 1.5rem;
+  }
+}

styles/_top-nav.scss

@@ -581,6 +581,12 @@
   margin-top: -80px;
   height: 80px;
   visibility: hidden;
+  z-index: -1;
+}
+
+// Fix so links aren't unclickable underneath the header anchor-fix
+a {
+  z-index: 1;
 }
 
 // Animated chevron (e.g. for language dropdown) -------------------------------

styles/xrpl.scss

@@ -15,6 +15,10 @@ $border-radius-sm: 4px;
 $dropdown-border-width: 1px;
 $enable-shadows: true;
 $dropdown-box-shadow: 0px 5px 40px $gray-900;
+$card-spacer-x: 2rem;
+$card-spacer-y: 2rem;
+$card-border-radius: $border-radius-lg;
+$card-columns-gap: 2rem;
 $caret-width: .4em;
 
 $input-btn-padding-y: 1rem;