Top nav: dropdown shapes & contents

styles/_top-nav.scss

@@ -93,6 +93,7 @@
         font-size: 14px;
         color: $gray-300;
         margin: 0;
+        white-space: normal;
       }
     }
   }
@@ -120,13 +121,25 @@
 
       &.show {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: repeat(3, 180px);
         gap: 40px;
+        left: -200px;
+
+        // &#topnav_dd_docshtml {
+        //   grid-template-columns: 180px 180px 300px;
+        // }
+
+        &#topnav_dd_contributehtml {
+          grid-template-columns: 200px;
+        }
 
         .dropdown-hero {
           grid-row: 1;
           grid-column: 1 / 4;
         }
+        #dropdown-hero-for-documentation {
+          grid-column: 1 / 3;
+        }
 
         // "About" dropdown placement
         .col-for-xrp-ledger {
@@ -157,9 +170,20 @@
           grid-column: 2;
           grid-row: 2 / 4;
         }
-
-        // "Community" dropdown placement
-        // TODO
+        .col-for-popular-pages {
+          grid-column: 3;
+          grid-row: 1 / 3;
+          background-color: $gray-800;
+          margin: -40px -40px -40px 0;
+          padding: 40px;
+        }
+        .col-for-questions {
+          grid-column: 3;
+          grid-row: 3;
+          background-color: $gray-800;
+          margin:  0 -40px -40px 0px;
+          padding: 0  40px  40px  40px;
+        }
       }
 
       &.smaller-dropdown {
@@ -167,7 +191,20 @@
       }
 
       .dropdown-item {
-        line-height: 2rem;
+        line-height: 1rem;
+        padding: .75rem 0;
+        white-space: normal;
+
+        &.dropdown-hero {
+          padding: 0;
+        }
+
+        &:first-child {
+          padding-top: 0;
+        }
+        &:last-child {
+          padding-bottom: 0;
+        }
       }
     }
   }