CSS work - make doc pages readable again

styles/_breadcrumbs.scss

@@ -11,7 +11,7 @@
   font-size: 0.833em;
 }
 .breadcrumb-item a {
-  color: hsla(14.999999999999947, 1.98%, 39.61%, 1.00);
+  color: $gray-200;
   text-decoration: none;
 }
 .breadcrumb-item a:hover {

styles/_content.scss

@@ -2,19 +2,14 @@
 h1 a,
 h2 a,
 h3 a {
-  color: $black;
+  color: $white;
   text-decoration: none;
 }
 h1 a:hover,
 h2 a:hover,
 h3 a:hover,
 .xrpl-footer h5 a:hover {
-  color: $black;
-}
-
-.header-link:hover {
-  //TODO: this class may not do anything useful?
-  color: $black;
+  color: $white;
 }
 
 /* Content text styling ----------------------------------------------------- */

styles/_layout.scss

@@ -1,7 +1,7 @@
 .landing section,
 .xrpl-footer .card-grid,
 #main_content_wrapper {
-  border-bottom: 1px solid $black;
+  border-bottom: 0;
 }
 
 
@@ -11,8 +11,8 @@
 
 /* main content area ----------------------------------- */
 .sidebar-primary .main {
-  border-left: 1px solid $gray-200;
-  border-right: 1px solid $gray-200;
+  border-left: none;
+  border-right: none;
 }
 
 // Card Grid styles ------------------------------------------------------------

styles/_side-nav.scss

@@ -1,11 +1,11 @@
 /* Left/right nav color scheme ------------------------------- */
 aside li a {
-  color: $gray-600;
+  color: $white;
   text-decoration: none;
   font-size: 1.05rem;
 }
 aside .sidenav_cat_title {
-  color: $black;
+  color: $white;
 }
 aside a:hover,
 aside .sidenav_cat_title:hover {
@@ -18,12 +18,12 @@ aside a.active:hover {
   font-weight: 700;
 }
 aside a.active-parent {
-  color: $gray-700;
+  color: $white;
   font-weight: 700;
 }
 
 .sidebar_pagelist {
-  border-left: 1px solid $gray-200;
+  border-left: 1px solid $white;
 }
 .sidebar_pagelist a,
 .right-sidebar li a {
@@ -47,7 +47,7 @@ aside a.active-parent {
   margin-left: 0;
   margin-top: 0;
   padding-left: 35px;
-  border-left: 1px solid $gray-200;
+  border-left: 1px solid $white;
 }
 .sidebar_pagelist .subpage:hover {
   padding-left: 35px;
@@ -63,18 +63,18 @@ aside a.active-parent {
 }
 
 .sidenav_cat_toggler {
-  background-color: $gray-600;
+  background-color: $white;
 }
 .sidenav_cat_toggler:hover {
   background-color: $primary;
 }
 
 .right-sidebar .card-body {
-  border-left: 1px solid $gray-200;
+  border-left: 1px solid $white;
 }
 
 .sidenav_parent a {
-  color: $black;
+  color: $white;
   display: block;
   font-size: 1.1rem;
   font-weight: 700;
@@ -82,12 +82,12 @@ aside a.active-parent {
 }
 
 .right-sidebar .level-1 a {
-  color: $black;
+  color: $white;
 }
 
 .right-sidebar .level-3 {
   padding-left: 16px;
-  border-left: 1px solid $gray-200;
+  border-left: 1px solid $white;
   margin-bottom: 0;
   padding-bottom: 5px;
 }
@@ -108,7 +108,6 @@ aside a.active-parent {
 .tree_nav {
   top: 48px;
   padding: 44px 24px 48px 0;
-  background-color: white;
 }
 
 .sidebar_pagelist {
@@ -226,7 +225,8 @@ aside a.active-parent {
 
 .right-sidebar .card-header {
   border-bottom: none;
-  background-color: white;
+  font-weight: bold;
+  font-size: 14px;
   padding: 10px 0;
 }
 

styles/_top-nav.scss

@@ -1,18 +1,19 @@
 /* Top navigation ----------------------------------------------------------- */
 
 .navbar.fixed-top {
-  box-shadow: inset 0 -1px 0 0 $gray-200;
+  background-color: $black; // TODO: unnecessary if top nav is no longer fixed
 }
 
 .navbar .navbar-nav .nav-link {
-  color: $gray-600;
+  color: $white;
 }
 
 .navbar .navbar-nav .nav-link:hover,
 .navbar .navbar-nav .nav-link:active,
 .navbar .navbar-nav .active .nav-link,
 .navbar .active-parent .nav-link {
-  color: $black;
+  color: $white;
+  font-weight: bold;
 }
 
 .navbar.fixed-top {
@@ -72,6 +73,8 @@
 }
 
 #topsearchbar {
+  background-color: $black;
+  color: $white;
   padding-right: 40px;
   width: 100%;
   font-size: 0.875rem;

styles/package.json

@@ -4,7 +4,7 @@
     "node-sass": "^4.14.1"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal.css --output-style compressed"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

styles/xrpl.scss

@@ -2,8 +2,8 @@
 
 // Set theme colors used by Bootstrap styles
 $white:    #FFF;
-$gray-100: #F9F7F7;
-$gray-200: #EBE8E7;
+$gray-100: #F5F7F9;
+$gray-200: #E1E4E8;
 $gray-300: #D3D0CF;
 $gray-400: #B3B0AF;
 $gray-500: #8D8A89;
@@ -11,21 +11,27 @@ $gray-600: #676463;
 $gray-700: #464443;
 $gray-800: #2E2D2C;
 $gray-900: #201F1E;
-$black:    #1B1818;
+$black:    #000;
 
-$primary:       #25A768; // Green
+$primary:       #19FF83; // Primary green
 $secondary:     $gray-600;
 $light:         $gray-200;
 $dark:          $black;
 $success:       #2BCB96; // light green
-$info:          #7699bb; // bluish
-$warning:       #D0DB60; // yellowish -- "caution" callout style
-$danger:        #AA4949; // wine red -- "warning" callout style
+$info:          #5111F4; // deep blue
+$warning:       #FEFF01; // yellow -- "caution" callout style
+$danger:        #FF2D9A; // rose -- "warning" callout style
 
 $code-color:    $gray-800;
 $body-color:    $black;
 $navbar-light-color: $gray-600;
 
+$body-bg:         $light;
+$code-color:      $gray-800;
+$body-color:      $gray-500;
+$headings-color:  $white;
+$text-muted:      $gray-400;
+$breadcrumb-bg:   $black;
 
 $navbar-padding-y: 0;
 $navbar-nav-link-padding-x: 1rem;
@@ -61,4 +67,3 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
 @import "_dev-tools.scss";
 @import "_print.scss";
 @import "_marketing.scss";
-