CSS: Fix colors, footer styling

content/@theme/styles.css

@@ -17,3 +17,234 @@ ul.nav.navbar-nav {
 .top-nav .topnav-search {
   flex-grow: 1;
 }
+
+:root {
+  /* XRPL color palette; match to styles/_colors.scss
+    Some colors don't have a 10 equivalent so 9 is repeated.
+    
+    Note, at present these variables are mostly overridden by
+    styled-components variables which are in reverse order, so
+    we can't actually use these variables as-is.
+  */
+  /* Redocly doesn't have vars for grays by default  */
+  --color-gray-1: #F5F5F7;
+  --color-gray-2: #E0E0E1;
+  --color-gray-3: #C1C1C2;
+  --color-gray-4: #A2A2A4;
+  --color-gray-5: #838386;
+  --color-gray-6: #454549;
+  --color-gray-7: #343437;
+  --color-gray-8: #232325;
+  --color-gray-9: #111112;
+  --color-gray-10: var(--color-gray9);
+
+  /* color-red = XRPL $magenta */
+  --color-red-1: #FFE5F2;
+  --color-red-2: #FFB2D8;
+  --color-red-3: #FF80BF;
+  --color-red-4: #FF4BA4;
+  --color-red-5: #FF198B;
+  --color-red-6: #E50071;
+  --color-red-7: #B20058;
+  --color-red-8: #80003F;
+  --color-red-9: #4C0026;
+  --color-red-10: #4C0026;
+  
+  /* color-green = XRPL $green */
+  --color-green-1: #D6FAE7;
+  --color-green-2: #ADF5CE;
+  --color-green-3: #84F0B6;
+  --color-green-4: #5BEB9D;
+  --color-green-5: #32E685;
+  --color-green-6: #2DCF78;
+  --color-green-7: #28B86A;
+  --color-green-8: #1E8A50;
+  --color-green-9: #145C35;
+  --color-green-10: #0A2E1B;
+  
+  /* color-gold = XRPL $yellow */
+  --color-gold-1: #FEFFE5;
+  --color-gold-2: #FDFFB2;
+  --color-gold-3: #FCFF80;
+  --color-gold-4: #FBFF4C;
+  --color-gold-5: #FAFF19;
+  --color-gold-6: #E0E500;
+  --color-gold-7: #AEB200;
+  --color-gold-8: #7D8000;
+  --color-gold-9: #4B4C00;
+  --color-gold-10: #4B4C00;
+  
+  /* color-blue = XRPL $blue */
+  --color-blue-1: #E5F5FF;
+  --color-blue-2: #B2E0FF;
+  --color-blue-3: #80CCFF;
+  --color-blue-4: #4BB7FF;
+  --color-blue-5: #19A3FF;
+  --color-blue-6: #008AE5;
+  --color-blue-7: #006BB2;
+  --color-blue-8: #004D80;
+  --color-blue-9: #002E4C;
+  --color-blue-10: #001133;
+  
+  /* color purple = XRPL $blue-purple */
+  --color-purple-1: #F0E5FF;
+  --color-purple-2: #D2B2FF;
+  --color-purple-3: #B480FF;
+  --color-purple-4: #9A52FF;
+  --color-purple-5: #7919FF;
+  --color-purple-6: #5F00E5;
+  --color-purple-7: #4A00B2;
+  --color-purple-8: #350080;
+  --color-purple-9: #20004C;
+  --color-purple-10: #20004C;
+  
+  /* color-magenta = XRPL $red-purple */
+  --color-magenta-1: #FBE5FF;
+  --color-magenta-2: #F2B2FF;
+  --color-magenta-3: #EA80FF;
+  --color-magenta-4: #E24CFF;
+  --color-magenta-5: #D919FF;
+  --color-magenta-6: #C000E5;
+  --color-magenta-7: #9500B2;
+  --color-magenta-8: #6B0080;
+  --color-magenta-9: #40004C;
+  --color-magenta-10: #40004C;
+  
+  /* XRPL doesn't have a color-cyan equivalent
+  --color-cyan-1: #e6fffb;
+  --color-cyan-2: #b5f5ec;
+  --color-cyan-3: #87e8de;
+  --color-cyan-4: #5cdbd3;
+  --color-cyan-5: #36cfc9;
+  --color-cyan-6: #13c2c2;
+  --color-cyan-7: #08979c;
+  --color-cyan-8: #006d75;
+  --color-cyan-9: #00474f;
+  --color-cyan-10: #002329; */
+  
+  /* color-yellow = XRPL $yellow */
+  --color-yellow-1: #FEFFE5;
+  --color-yellow-2: #FDFFB2;
+  --color-yellow-3: #FCFF80;
+  --color-yellow-4: #FBFF4C;
+  --color-yellow-5: #FAFF19;
+  --color-yellow-6: #E0E500;
+  --color-yellow-7: #AEB200;
+  --color-yellow-8: #7D8000;
+  --color-yellow-9: #4B4C00;
+  --color-yellow-10: #4B4C00;
+  
+  /* XRPL doesn't have a color-lime equivalent
+  --color-lime-1: #fcffe6;
+  --color-lime-2: #f4ffb8;
+  --color-lime-3: #eaff8f;
+  --color-lime-4: #d3f261;
+  --color-lime-5: #bae637;
+  --color-lime-6: #a0d911;
+  --color-lime-7: #7cb305;
+  --color-lime-8: #5b8c00;
+  --color-lime-9: #3f6600;
+  --color-lime-10: #254000; */
+  
+  /* XRPL doesn't have a color-geekblue equivalent
+  --color-geekblue-1: #f0f5ff;
+  --color-geekblue-2: #d6e4ff;
+  --color-geekblue-3: #adc6ff;
+  --color-geekblue-4: #85a5ff;
+  --color-geekblue-5: #597ef7;
+  --color-geekblue-6: #2f54eb;
+  --color-geekblue-7: #1d39c4;
+  --color-geekblue-8: #10239e;
+  --color-geekblue-9: #061178;
+  --color-geekblue-10: #030852; */
+
+  /* Dark mode colors by default */
+  --color-primary-bg: var(--color-gray-9);
+/*  --color-primary-bg-hover: #d6dfff;
+  --color-primary-border: #adbcff;
+  --color-primary-border-hover: #8a99ff;
+  --color-primary-hover: #6678ff;
+  --color-primary-base: #434dfa;
+  --color-primary-active: #2f31d4;
+  --color-primary-text-hover: #201dad;
+  --color-primary-text: #161087;
+  --color-primary-text-active: #0d086e;*/
+  
+  --link-text-color: #fff;
+  --link-decoration: underline;
+  --link-font-weight: var(--font-weight-regular);
+
+  --link-hover-text-color: #9a52ff;
+  --link-hover-decoration: underline;
+
+  --link-active-decoration: underline;
+  --link-active-text-color: var(--color-blue-7);
+
+  --link-visited-text-color: #fff;
+  --link-visited-decoration: underline;
+
+  --bg-base: var(--color-gray-9);
+  --bg-raised: var(--color-gray-8);
+  --background-color: var(--bg-base);
+
+  --font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --heading-font-family: var(--font-family-base);
+
+  --inline-code-font-family: "Space Mono", monospace;
+  --inline-code-text-color: #5beb9d; /* $green-400 */
+  --inline-code-background-color: #0a2e1b; /* $green-1000 */
+  --inline-code-border-radius: 0;
+
+  --heading-anchor-color: #9a52ff;
+  --sidebar-border-color: transparent;
+  --sidebar-background-color: transparent;
+
+  --border-radius-md: 4px;
+
+  --code-block-background-color: #232325;
+  --code-block-controls-background-color: #232325;
+  --code-block-controls-border: none;
+  --code-block-border-color: #232325;
+  --code-block-padding: 0 2rem 1.5rem 2rem;
+  --code-block-border-radius: 4px;
+
+  --breadcrumbs-margin-bottom: 0.5rem;
+  --breadcrumbs-text-color: var(--color-gray-4);
+  --breadcrumbs-gap: 0 8px;
+  --breadcrumbs-font-size: 0.833em;
+
+  --language-picker-min-height: 38px;
+
+  --footer-background-color: transparent;
+  --footer-dividing-border-color: transparent;
+  --footer-border-color: transparent;
+  --footer-title-font-weight: 600;
+  --footer-title-font-size: 1rem;
+  --footer-title-text-color: #A2A2A4;
+}
+
+:root.light {
+  --link-hover-text-color: #4A00B2;
+  --link-visited-text-color: #000;
+  --text-secondary: #000;
+  --code-block-background-color: #E0E0E1;
+  --code-block-controls-background-color: #E0E0E1;
+  --code-block-controls-border: none;
+  --code-block-border-color: #E0E0E1;
+  
+  --code-block-tokens-function-color: #B23C00;
+  --code-block-tokens-operator-color: #000;
+  --code-block-tokens-comment-color: #343437;
+  --code-block-tokens-string-color: #145C35;
+  --inline-code-background-color: #E0E0E1;
+
+  --search-trigger-background-color: #E0E0E1;
+  --search-trigger-text-color: #838386;
+  --language-picker-border-color: #C1C1C2;
+  --language-picker-background-color: #E0E0E1;
+  --select-list-background-color: #E0E0E1;
+
+  --footer-title-text-color: #000;
+  --bg-raised: var(--color-gray-2);
+  --button-background-color: var(--color-gray-2);
+}

content/redocly.yaml

@@ -41,6 +41,8 @@ theme:
   markdown:
     partialsFolders: ["_snippets", "_code-samples", "_api-examples"]
   footer:
+    logo:
+      hide: true
     copyrightText: © 2024 XRP Ledger. Open Source.
     items:
       - group: About

styles/_cards.scss

@@ -117,12 +117,13 @@
 }
 
 /* Full-link cards */
-a.card {
+main a.card {
   border: 0;
-  color: $white !important;
+  color: $white;
 }
 a.card:hover,
-a:hover .card-new {
+a:hover .card-new,
+[data-component-name="Markdown/MarkdownWrapper"] a.card {
   text-decoration: none !important;
 }
 a.card:hover h3 {

styles/_content.scss

@@ -1,6 +1,6 @@
 /* Content text styling (applies mostly to Markdown-generated content)------- */
 
-article {
+[data-component-name="Markdown/MarkdownWrapper"] article {
   padding-bottom: 50px;
 
   p code,
@@ -23,14 +23,10 @@ article {
     &:first-child {
       margin-top: 0;
       line-height: 1.2;
-
-      &::before {
-        margin-top: -80px;
-      }
     }
   }
 
-  h2 {
+  h2, h2.md {
     margin-top: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 2.5rem;
@@ -38,7 +34,7 @@ article {
     line-height: 1.2;
   }
 
-  h3 {
+  h3, h3.md {
     font-size: 2.125rem;
     margin-top: 2rem;
     margin-bottom: 1rem;

styles/_footer.scss

@@ -1,12 +1,10 @@
 /* Footer ------------------------------------------------------------------- */
 
-.xrpl-footer {
-  .footer-nav{
-    .nav-item{
-      text-shadow: #111112 0px 0px 2px, #111112 1px 1px 2px, #111112 2px 2px 3px,
-      #111112 2px 2px 4px, #111112 2px 2px 5px, #111112 2px 2px 6px, #111112 -1px -1px 2px,
-      #111112 -2px -2px 3px, #111112 -2px -2px 4px;
-    }
+[data-component-name="Footer/Footer"] {
+  [data-component-name="Footer/FooterColumn"] {
+    text-shadow: #111112 0px 0px 2px, #111112 1px 1px 2px, #111112 2px 2px 3px,
+    #111112 2px 2px 4px, #111112 2px 2px 5px, #111112 2px 2px 6px, #111112 -1px -1px 2px,
+    #111112 -2px -2px 3px, #111112 -2px -2px 4px;
   }
   padding: 7.5rem 2rem;
 

styles/_pages.scss

@@ -992,9 +992,10 @@
       &::before {
         display: block;
         content: " ";
-        margin-top: -80px;
-        height: 80px;
+        margin-top: -40px;
+        height: 40px;
         visibility: hidden;
+        pointer-events: none;
       }
 
       >a {

styles/_top-nav.scss

@@ -567,9 +567,10 @@ article h6:before,
 .interactive-block:before {
   display: block;
   content: " ";
-  margin-top: -80px;
-  height: 80px;
+  margin-top: -40px;
+  height: 40px;
   visibility: hidden;
+  pointer-events: none;
 }
 
 // Fix so links aren't unclickable underneath the header anchor-fix

styles/light/_light-theme.scss

@@ -282,7 +282,8 @@ h6,
 // Navigation ------------------------------------------------------------------
 
 a,
-nav a {
+nav a,
+a:not([role="button"]) {
   color: $light-fg;
 
   &.btn-primary {
@@ -296,7 +297,8 @@ nav a {
 
   &:hover,
   &:active,
-  &.active {
+  &.active
+  {
     color: $light-link-hover-color;
   }
 
@@ -361,11 +363,11 @@ article a.button,
   }
 
   // nav "hero" images
-  #top-nav-hero-docs {
+  #dropdown-hero-for-docs > img {
     content: url(../img/icons/lightmode/docs.svg);
   }
 
-  #top-nav-hero-contribute {
+  #dropdown-hero-for-community > img {
     content: url(../img/icons/lightmode/contribute.svg);
   }
 
@@ -494,7 +496,8 @@ a.osano-cm-link {
 }
 
 // Layout elements -------------------------------------------------------------
-.card,
+main .card,
+.landing .card,
 .cta-card {
   color: $light-fg;
   background-color: $light-standout-bg;
@@ -1206,20 +1209,23 @@ $placeholder-color: $gray-600;
 
 }
 
-.tutorial-card-grid {
+main article .card-grid {
+  color: $black;
+
   code {
     background-color: $green-100;
   }
 
-  .card-icon-container {
+  .card-icon-container,
+  &.card-grid-3xN .card-icon-container {
     background: $gray-300;
   }
 }
 
-.footer-nav {
-  .nav-item {
-    text-shadow: #F5F5F7 0px 0px 2px, #F5F5F7 1px 1px 2px, #F5F5F7 2px 2px 3px,
-      #F5F5F7 2px 2px 4px, #F5F5F7 2px 2px 5px, #F5F5F7 2px 2px 6px, #F5F5F7 -1px -1px 2px,
-      #F5F5F7 -2px -2px 3px, #F5F5F7 -2px -2px 4px;
+[data-component-name="Footer/Footer"] {
+  [data-component-name="Footer/FooterColumn"] {
+    text-shadow: $gray-100 0px 0px 2px, $gray-100 1px 1px 2px, $gray-100 2px 2px 3px,
+      $gray-100 2px 2px 4px, $gray-100 2px 2px 5px, $gray-100 2px 2px 6px, $gray-100 -1px -1px 2px,
+      $gray-100 -2px -2px 3px, $gray-100 -2px -2px 4px;
   }
 }