Fix CSS styles

- Move docs graphics to appropriate place
- Fix spacing of header anchors
- Fix display of card grids in md
- Fix display of badges
- Fix theme-aware diagram coloring
- Fix left table columns being line-broken too aggressively

content/@theme/markdoc/components.tsx

@@ -127,12 +127,12 @@ export function Badge(props: {
     if (props.href) {
       return (    
         <Link to={props.href}>
-          <img src={badge_url} alt={childstrings} className="badge" />
+          <img src={badge_url} alt={childstrings} className="shield" />
         </Link>
       )
     } else {
       return (
-        <img src={badge_url} alt={childstrings} className="badge" />
+        <img src={badge_url} alt={childstrings} className="shield" />
       )
     }
 }

content/resources/dev-tools/rpc-tool.page.tsx

@@ -252,7 +252,7 @@ export default function RpcTool() {
                   )}
                   {errorText === "" && (
                     <ul id="links" className="nav nav-pills">
-                      <li>
+                      <li className="nav-link">
                         <Link
                           id="permalink"
                           to={`/resources/dev-tools/rpc-tool#${inputText}`}
@@ -261,7 +261,7 @@ export default function RpcTool() {
                           {translate("Permalink")}
                         </Link>
                       </li>
-                      <li>
+                      <li className="nav-link">
                         <Link
                           id="explorerlink"
                           to={`https://livenet.xrpl.org/${inputType}/${inputText}`}

styles/_buttons.scss

@@ -1,6 +1,6 @@
 // Button styling --------------------------------------------------------------
 
-.btn, .content a.button, .content .btn {
+.btn, article a.button, article .btn {
   font-weight: bold;
   cursor: pointer;
   text-decoration: none;
@@ -9,7 +9,7 @@
   line-height: 16px;
 }
 
-.content a.button {
+article a.button {
   padding: .5rem 1rem;
   margin: 0 0.5rem;
   display: inline-block;

styles/_cards.scss

@@ -119,11 +119,11 @@
 /* Full-link cards */
 a.card {
   border: 0;
-  color: $white;
+  color: $white !important;
 }
 a.card:hover,
 a:hover .card-new {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 a.card:hover h3 {
   text-decoration: underline;
@@ -237,6 +237,72 @@ a.card:hover h3 {
   }
 }
 
+// Generic selection of card footers for Markdoc {% card-grid %}{% xrpl-card %} elements
+$footers-3col: "3-col-light-blue", "3-col-green-purple", "3col-purple-blue-green", "3col-magenta-3", "3col-green-blue", "3col-light-blue-2", "3col-orange-yellow-2", "3col-pink-purple", "3col-green-purple", "3col-magenta", "3-col-purple2", "3col-neutral-blue", "3col-purple-blue", "3-col-pink2", "3col-orange", "3col-light-green", "3col-blue-light-blue", "3col-green", "3-col-dark-blue", "3-col-purple", "3col-magenta-2", "3-col-light-blue-2", "3col-light-blue", "3col-magenta-orange", "3-col-purple-blue", "3col-orange-3", "3col-blue-green", "3-col-green", "3-col-orange", "3col-purple-blue-2", "3col-purple", "3-col-light-blue2", "3col-orange-yellow", "3-col-pink", "3col-green-2", "3col-orange-2", "3-col-pink-purple";
+
+@mixin card-footer-color($offset){
+  $index: 0;
+  @for $i from 1 through 9 {
+    .card:nth-child(#{$i}) .card-footer {
+      background-image: url("../img/cards/#{nth($footers-3col, $i+$offset)}.svg");
+    }
+  }
+}
+
+main article .card-grid {
+  &.card-grid-3xN {
+    grid-gap: 1rem;
+
+    .card {
+      padding: 0;
+      margin: 0.5rem;
+
+      .card-body {
+        padding: 1rem;
+      }
+
+    .card-icon-container {
+      width: 50px;
+      height: 50px;
+      background: $gray-600;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      margin-bottom: 12px;
+
+      img {
+        width: 70%;
+        height: 70%;
+      }
+    }
+
+      .card-footer {
+        font-size: 0;
+        line-height: 0;
+        padding: 1rem;
+        background-position: bottom;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-top: 0;
+      }
+    }
+
+    &:nth-of-type(0) {
+      @include card-footer-color(0);
+    }
+    &:nth-of-type(1) {
+      @include card-footer-color(9);
+    }
+    &:nth-of-type(2) {
+      @include card-footer-color(18);
+    }
+    &:nth-of-type(3) {
+      @include card-footer-color(27);
+    }
+  }
+}
+
 .cta-card {
   text-align: center;
   background-color: $gray-800;

styles/_content.scss

@@ -1,6 +1,6 @@
 /* Content text styling (applies mostly to Markdown-generated content)------- */
 
-.content {
+article {
   padding-bottom: 50px;
 
   p code,
@@ -98,6 +98,12 @@
       display: none;
     }
   }
+
+  .shield {
+    // {% badge ... %} (shields.io) components in md
+    display: inline-block !important;
+    vertical-align: middle;
+  }
 }
 
 .blurb a {

styles/_diagrams.scss

@@ -2,16 +2,11 @@
 //==============================================================================
 // These styles control the display of diagrams in page contents.
 
-.content {
+article {
   // Shrink images that would overflow the main column.
   img {
     max-width: 100%;
     height: auto;
-
-    .dactyl_badge {
-      // Exception: badges should be their original (small) size.
-      width: initial;
-    }
   }
 
   // Shrink or grow inlined SVG to fit the main column width.
@@ -30,7 +25,7 @@
 }
 
 
-html:not(.light) .content {
+html:not(.light) article {
 
   // Recolor UMLet diagrams for dark theme -------------------------------------
   svg[fill="black"] {

styles/_docs-landing.scss

@@ -4,41 +4,41 @@
 
 .light {
   .sdk-img {
-    content:url(../../img/graphics/sdk-white.png);
+    content:url(../img/graphics/sdk-white.png);
   }
 
   .ref-book-illustration {
-    content:url(../../img/graphics/ref-book-light.png)
+    content:url(../img/graphics/ref-book-light.png)
   }
 
   .tutorial-illustration {
-    content:url(../../img/graphics/tutorials-illustration-light.png)
+    content:url(../img/graphics/tutorials-illustration-light.png)
   }
 
   .concepts-doc-illustration {
-    content:url(../../img/graphics/concepts-docs-light.png)
+    content:url(../img/graphics/concepts-docs-light.png)
   }
 
   .use-cases {
     .wallet-illustration {
-      content:url(../../img/graphics/wallet-light.svg)
+      content:url(../img/graphics/wallet-light.svg)
     }
 
     .token-illustration {
-      content:url(../../img/graphics/tokens-light.png)
+      content:url(../img/graphics/tokens-light.png)
     }
 
     .connections-illustration {
-      content:url(../../img/graphics/nodes-light.svg)
+      content:url(../img/graphics/nodes-light.svg)
     }
   }
 
   .quickstart-image {
-    content:url(../../img/graphics/getting-started-pages-light.png)
+    content:url(../img/graphics/getting-started-pages-light.png)
   }
 
   .dev-tools-img {
-    content:url(../../img/graphics/dev-tools-light.svg)
+    content:url(../img/graphics/dev-tools-light.svg)
   }
 
   .dev-tools-link:hover p {
@@ -48,41 +48,41 @@
 
 .dark {
   .sdk-img {
-    content:url(../../img/graphics/sdk-black.png);
+    content:url(../img/graphics/sdk-black.png);
   }
 
   .ref-book-illustration {
-    content:url(../../img/graphics/ref-book.png)
+    content:url(../img/graphics/ref-book.png)
   }
 
   .tutorial-illustration {
-    content:url(../../img/graphics/tutorials-illustration.png)
+    content:url(../img/graphics/tutorials-illustration.png)
   }
 
   .concepts-doc-illustration {
-    content:url(../../img/graphics/concepts-doc.png)
+    content:url(../img/graphics/concepts-doc.png)
   }
 
   .use-cases {
     .wallet-illustration {
-      content:url(../../img/graphics/wallet-dark.png)
+      content:url(../img/graphics/wallet-dark.png)
     }
 
     .token-illustration {
-      content:url(../../img/graphics/tokens-dark.png)
+      content:url(../img/graphics/tokens-dark.png)
     }
 
     .connections-illustration {
-      content:url(../../img/graphics/nodes-dark.png)
+      content:url(../img/graphics/nodes-dark.png)
     }
   }
 
   .quickstart-image {
-    content:url(../../img/graphics/getting-started-pages-dark.svg)
+    content:url(../img/graphics/getting-started-pages-dark.svg)
   }
 
   .dev-tools-img {
-    content:url(../../img/graphics/dev-tools-dark.png)
+    content:url(../img/graphics/dev-tools-dark.png)
   }
 
   .dev-tools-link:hover p {

styles/_font.scss

@@ -169,17 +169,10 @@ p {
   h1, h2, h3, h4, h5,
   .github-edit-wrap .github-edit,
   .navbar .navbar-nav .nav-link,
-  .content .children-display li a,
+  article .children-display li a,
   .right-sidebar .level-1 a,
-  .right-sidebar .separator,
-  .use-case-step-num {
+  .right-sidebar .separator {
     font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
   }
 
-  // .section-marker {
-  //   transform: unset;
-  //   writing-mode: vertical-rl;
-  //   font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
-  // }
-
 }

styles/_landings.scss

@@ -5,8 +5,8 @@
     padding: 48px 0;
   }
 
-  .content .children-display,
-  .content .curated-links {
+  article .children-display,
+  article .curated-links {
     > ul > li {
       margin-top: 24px;
     }

styles/_layout.scss

@@ -180,6 +180,16 @@ section {
     .card-body {
       padding: 8px;
       padding-bottom: 24px;
+
+      .card-icon-container {
+        width: 50px;
+        height: 50px;
+
+        img {
+          width: 70%;
+          height: 70%;
+        }
+      }
     }
   }
 
@@ -209,75 +219,11 @@ section {
   }
 }
 
-// 3-column layout for docs pages ----------------------------------------------
-
-.xrp-ledger-dev-portal.sidebar-primary .main {
-  z-index: 5;
-  padding: 2rem;
-  min-height: 700px;
-
-  @include media-breakpoint-up(lg) {
-    top: 80px;
-  }
-}
-
-.left-sidebar {
-  padding: 2rem;
-
-  .external-link::after {
-    background-position: left 6px bottom 1px;
-    width: 2rem;
-
-  }
-
-  &:hover::after {
-    transform: translate(3px, -3px); // Translate the arrow up and to the right
-  }
-
-
-  @include media-breakpoint-up(lg) {
-    position: sticky;
-    max-height: calc(100vh - 80px);
-    top: 80px;
-    left: 0;
-    overflow: auto;
-    border: 0;
-  }
-}
-
-.right-sidebar {
-  padding: 2rem;
-  border: 1px solid $gray-600;
-
-  @include media-breakpoint-up(lg) {
-    position: sticky;
-    max-height: calc(100vh - 80px);
-    top: 80px;
-    right: 0;
-    overflow: auto;
-    border: 0;
-  }
-}
-
 
 /* Responsive design for different viewscreens ------------------------------ */
 
 @include media-breakpoint-down(md) {
-
-  .right-sidebar .card {
-    padding-left: 0;
-  }
-
-  #page-toc-wrapper {
-    position: static;
-    // display: block;
-    clear: both;
-    overflow-y: inherit;
-    max-width: 100%;
-    max-height: inherit;
-    word-break: break-all;
-  }
-  .main {
+  article {
     overflow-wrap: break-word;
     word-wrap: break-word;
     overflow: hidden;

styles/_pages.scss

@@ -44,7 +44,7 @@
   }
 
   #advanced-features {
-    $feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"];
+    $feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2" ];
 
     @for $i from 1 through 5 {
       .card:nth-child(#{$i}) .card-footer {
@@ -55,7 +55,7 @@
 
   #get-started {
     $gs-cards: [ "orange-yellow", "magenta-orange", "purple-blue-green",
-      "light-blue", "green-blue"];
+      "light-blue", "green-blue" ];
 
     @for $i from 1 through 5 {
       .card:nth-child(#{$i}) .card-footer {
@@ -906,7 +906,7 @@
     }
   }
 
-  .content {
+  article {
     @include media-breakpoint-up(lg) {
       max-width: 704px;
       margin-left: auto;
@@ -914,7 +914,7 @@
     }
   }
 
-  .content h6:first-of-type {
+  article h6:first-of-type {
     color: $green-500;
     margin-bottom: 1rem;
     margin-top: 2.5rem;
@@ -931,7 +931,7 @@
     }
   }
 
-  .content h1:first-of-type {
+  article h1:first-of-type {
     font-size: 2.625rem;
     line-height: 1.2;
     margin-top: 0;
@@ -1392,4 +1392,4 @@ html.light {
       background-image: url("../img/cards/3-col-light-blue-2.svg");
     }
   }
-}
+}

styles/_print.scss

@@ -39,7 +39,7 @@
 }
 
 
-  .content a[title="Source"] {
+  article a[title="Source"] {
     float: none;
   }
   /* Drop header, footer, sidebars */
@@ -52,7 +52,7 @@
     display: none !important;
   }
   /* Full-width content body */
-  .content, #main_content_body {
+  article, #main_content_body {
     position: static;
     display: block;
     width: auto;
@@ -77,24 +77,4 @@
   .container {
     margin-top: 1rem !important;
   }
-
-  #main_content_wrapper {
-    margin-top: 0;
-  }
-  #main_content_body::before {
-    display: none;
-  }
-  .xrp-ledger-dev-portal.sidebar-primary .main {
-    border: 0;
-  }
-  .sidebar-primary .row {
-    display: block;
-  }
-
-  #feedback-content{
-    display:none !important;
-  }
-  .jump-to-top {
-    display: none !important;
-  }
 }

styles/_tables.scss

@@ -1,29 +1,30 @@
 /* TABLE STYLING */
 
-.content table {
+article table {
   clear: right;
   margin-bottom: 48px;
-}
 
-.content table code {
-  word-break: normal;
-  white-space: nowrap;
-}
+  code {
+    word-break: normal;
+    white-space: nowrap;
+    overflow-wrap: normal;
+  }
 
-th {
-  border-bottom: 2px solid $gray-200;
-}
-tr {
-  border-bottom: 1px solid $gray-200;
-}
+  th {
+    border-bottom: 2px solid $gray-200;
+  }
+  tr {
+    border-bottom: 1px solid $gray-200;
+  }
 
-th, td {
-  padding: 0.2em;
-  vertical-align: text-top;
-}
+  th, td {
+    padding: 0.2em;
+    vertical-align: text-top;
+  }
 
-td:nth-child(1) {
-  font-weight: bold;
+  td:nth-child(1) {
+    font-weight: bold;
+  }
 }
 
 .landing-table {

styles/_top-banner.scss

@@ -58,19 +58,18 @@ $banner-top-offset: 108px;
   top: $banner-top-offset;
 }
 
-.main h1:before,
-.main h2:before,
-.main h3:before,
-.main h4:before,
-.main h5:before,
-.main h6:before,
-#main_content_wrapper:before,
+article h1:before,
+article h2:before,
+article h3:before,
+article h4:before,
+article h5:before,
+article h6:before,
 .interactive-block:before {
   margin-top: -$banner-top-offset;
   height: $banner-top-offset;
 }
 
-.content h1:first-child:before {
+article h1:first-child:before {
   margin-top: -$banner-top-offset;
 }
 

styles/_top-nav.scss

@@ -558,12 +558,12 @@ $nav-height: 80px;
 }
 
 // Fix so anchors don't jump under the fixed header ----------------------------
-.main h1:before,
-.main h2:before,
-.main h3:before,
-.main h4:before,
-.main h5:before,
-.main h6:before,
+article h1:before,
+article h2:before,
+article h3:before,
+article h4:before,
+article h5:before,
+article h6:before,
 .interactive-block:before {
   display: block;
   content: " ";

styles/_use-cases.scss

@@ -89,30 +89,6 @@ html.light{
   color: $black;
 }
 
-.use-case-external-link {
-  border: 1px solid $gray-300;
-}
-
-.content .use-case-external-link a {
-  text-decoration: none;
-  color: $black;
-}
-
-.use-case-step-num {
-  margin-top: 64px;
-  margin-bottom: 24px;
-  color: #eae7e6;
-  font-size: 5.16em;
-  font-weight: 400;
-  font-family: "Space Mono", sans-serif;
-}
-
-.use-case-step-length {
-  float: right;
-  color: #888;
-  font-size: 1rem;
-}
-
 .arrows-container {
   position: absolute;
   top: 50%;

styles/light/_light-theme.scss

@@ -1,5 +1,5 @@
 // General color elements ------------------------------------------------------
-.content {
+article {
 
   p code,
   table code,
@@ -318,7 +318,7 @@ a.card:hover,
 
 // Buttons
 .btn-outline-secondary,
-.content a.button,
+article a.button,
 .navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
   color: $dark;
   border-color: $dark;

styles/xrpl.scss

@@ -69,7 +69,6 @@ $line-height-base: 1.5;
 @import "_video.scss";
 @import "_contribute.scss";
 // @import "_top-banner.scss";
-@import "_tutorials.scss";
 @import "_docs-landing.scss";
 @import "_xrplai.scss";
 // Light/Dark theme settings ---------------------------------------------------