delete center search bar, adjust dark mode and modal position

styles/_forms.scss

@@ -93,6 +93,23 @@
     box-shadow: none;
     background-color: $gray-700;
   }
+  .DocSearch-Button {
+    background: $gray-800;
+    width: 700px;
+  }
+  .DocSearch-Button:hover {
+    background: $gray-800;
+    .DocSearch-Button-Placeholder {
+      color: $white;
+    }
+  }
+  .DocSearch-Search-Icon {
+    color: $white !important;
+  }
+  .DocSearch-Modal{
+    max-width: 700px;
+    margin-right: 7em;
+  }
 
   @include media-breakpoint-down(md) {
     .algolia-autocomplete .ds-dropdown-menu {

styles/light/_light-theme.scss

@@ -21,8 +21,18 @@ body {
   }
 }
 
-h1, h2, h3, h4, h5, h6,
+h1,
-.h1, .h2, .h3, .h4, .h5, .h6 {
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   &:not(.chip) {
     color: $light-fg;
   }
@@ -62,7 +72,9 @@ h1, h2, h3, h4, h5, h6,
 }
 
 // Forms and inputs ------------------------------------------------------------
-.search, .input-group, .form-group {
+.search,
+.input-group,
+.form-group {
   .input-group-text {
     background-color: $gray-200;
     color: $gray-800;
@@ -101,6 +113,18 @@ h1, h2, h3, h4, h5, h6,
 
 // Algolia search results
 .xrp-ledger-dev-portal {
+  .DocSearch-Button {
+    background: var(--docsearch-searchbox-background);
+  }
+  .DocSearch-Button:hover {
+    background: var(--docsearch-searchbox-background);
+    .DocSearch-Button-Placeholder {
+      color: var(--docsearch-text-color);
+    }
+  }
+  .DocSearch-Search-Icon {
+    color: var(--docsearch-text-color) !important;
+  }
   // The extra specificity makes this override the default Algolia styles.
   .algolia-autocomplete {
     .ds-dropdown-menu [class^="ds-dataset-"] {
@@ -129,7 +153,14 @@ h1, h2, h3, h4, h5, h6,
       color: $black;
       background-color: $gray-300;
     }
-    .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    .algolia-docsearch-suggestion--category-header
+      .algolia-docsearch-suggestion--category-header-lvl0
+      .algolia-docsearch-suggestion--highlight,
+    .algolia-docsearch-suggestion--category-header
+      .algolia-docsearch-suggestion--category-header-lvl1
+      .algolia-docsearch-suggestion--highlight,
+    .algolia-docsearch-suggestion--text
+      .algolia-docsearch-suggestion--highlight {
       background-color: $gray-300;
     }
   }
@@ -137,7 +168,8 @@ h1, h2, h3, h4, h5, h6,
 
 // Navigation ------------------------------------------------------------------
 
-a, nav a {
+a,
+nav a {
   color: $light-fg;
 
   &.btn-primary {
@@ -149,7 +181,9 @@ a, nav a {
     }
   }
 
-  &:hover, &:active, &.active {
+  &:hover,
+  &:active,
+  &.active {
     color: $light-link-hover-color;
   }
 
@@ -158,7 +192,9 @@ a, nav a {
   }
 }
 
-a.card:hover, &:active, &.active {
+a.card:hover,
+&:active,
+&.active {
   // Don't turn link-card text purple on hover
   color: $light-fg;
 }
@@ -167,7 +203,6 @@ a.card:hover, &:active, &.active {
   color: $light-fg-muted;
 }
 
-
 // Buttons
 .btn-outline-secondary,
 .content a.button,
@@ -175,7 +210,8 @@ a.card:hover, &:active, &.active {
   color: $dark;
   border-color: $dark;
 
-  &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):active {
+  &:not(:disabled):not(.disabled):hover,
+  &:not(:disabled):not(.disabled):active {
     color: $primary;
     border-color: $primary;
     background-color: transparent;
@@ -190,7 +226,7 @@ a.card:hover, &:active, &.active {
   color: $gray-600;
 
   &:hover {
-    color: $primary
+    color: $primary;
   }
 }
 
@@ -223,7 +259,8 @@ a.card:hover, &:active, &.active {
     border-color: $gray-100;
     box-shadow: $light-box-shadow;
 
-    a:hover, a.active {
+    a:hover,
+    a.active {
       color: $light-link-hover-color;
     }
 
@@ -302,7 +339,6 @@ aside .active > a:hover {
   }
 }
 
-
 .page-toc,
 .command-list {
   border-left: 1px solid $black;
@@ -327,15 +363,14 @@ aside .active > a:hover {
 }
 
 .copyright-license {
-  text-shadow: white 0px 0px 2px, white 1px 1px 2px,
+  text-shadow: white 0px 0px 2px, white 1px 1px 2px, white 2px 2px 3px,
-               white 2px 2px 3px, white 2px 2px 4px,
+    white 2px 2px 4px, white 2px 2px 5px, white 2px 2px 6px, white -1px -1px 2px,
-               white 2px 2px 5px, white 2px 2px 6px,
-               white -1px -1px 2px,
     white -2px -2px 3px, white -2px -2px 4px;
 }
 
 // Layout elements -------------------------------------------------------------
-.card, .cta-card {
+.card,
+.cta-card {
   color: $light-fg;
   background-color: $light-standout-bg;
   box-shadow: $light-box-shadow;
@@ -353,7 +388,6 @@ aside .active > a:hover {
   }
 }
 
-
 // FAQ
 .page-faq,
 .mini-faq {
@@ -414,7 +448,8 @@ aside .active > a:hover {
 }
 
 // Callouts
-.devportal-callout.caution, .devportal-callout.注意 {
+.devportal-callout.caution,
+.devportal-callout.注意 {
   border-color: $yellow-700;
 
   > strong:first-child::before {
@@ -422,7 +457,8 @@ aside .active > a:hover {
   }
 }
 
-.devportal-callout.tip, .devportal-callout.ヒント {
+.devportal-callout.tip,
+.devportal-callout.ヒント {
   border-color: $green-600;
 
   > strong:first-child::before {
@@ -465,7 +501,6 @@ pre code {
   border-color: $gray-100;
 }
 
-
 .interactive-block {
   .breadcrumb-item.done a::after {
     color: $green-900;
@@ -477,7 +512,6 @@ pre code {
   background-color: $light-standout-bg;
 }
 
-
 .rpc-tool {
   pre .toggle {
     color: $white;
@@ -488,7 +522,6 @@ pre code {
   }
 }
 
-
 // Individual page styles ------------------------------------------------------
 
 // Homepage
@@ -498,7 +531,9 @@ pre code {
   }
 
   #benefits-list {
-    @each $benefit in "public", "streamlined", "performance", "low-cost", "community", "reliability" {
+    @each $benefit in "public", "streamlined", "performance", "low-cost",
+      "community", "reliability"
+    {
       ##{$benefit} {
         content: url("../img/icons/lightmode/#{$benefit}.svg");
       }
@@ -515,7 +550,7 @@ pre code {
 
 #wallets {
   #wallet-xumm {
-    content: url("../img/wallets/lightmode/xumm.svg")
+    content: url("../img/wallets/lightmode/xumm.svg");
   }
 }
 
@@ -544,7 +579,8 @@ pre code {
 
 // Carbon calculator
 .page-calculator {
-  #co2Animation, #gasAnimation {
+  #co2Animation,
+  #gasAnimation {
     //filter: invert(100%) hue-rotate(200deg) brightness(1.8);
     // Leave these dark for now
     background: $body-bg;
@@ -567,27 +603,36 @@ pre code {
 
 // Use Cases & Featured Projects page
 .page-uses {
-  @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
+  @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins",
+    "nft", "defi", "cbdc"
+  {
     ##{$usecase} {
       content: url("../img/icons/lightmode/#{$usecase}.svg");
     }
   }
 
   // darkened card graphics
-  @each $company,$card-graphic in (
+  @each $company,
+    $card-graphic
+      in (
         "bitpay": "blue-green",
         "exodus": "green",
         "forte": "light-blue-2",
         "ripple": "blue-light-blue",
         "xrplorer": "green-purple"
-  ) {
+      )
+  {
     ##{$company} .card-footer {
       background-image: url("../img/cards/lightmode/3col-#{$card-graphic}.svg");
     }
   }
 
   // Monochrome logos; invert.
-  #bitpay, #coil, #forte, #xrplorer, #gatehub {
+  #bitpay,
+  #coil,
+  #forte,
+  #xrplorer,
+  #gatehub {
     .biz-logo {
       filter: invert(100%);
     }
@@ -619,23 +664,21 @@ pre code {
 .landing-bg {
   opacity: 0.4;
   @include media-breakpoint-up(md) {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 .landing-builtin-bg {
   &::before {
     opacity: 0.4;
     @include media-breakpoint-up(md) {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 }
 
-
 // feedback widget
 #feedback-content {
   .docked-widget {
-
     .widget-header {
       background-color: $light-bg !important;
       color: $light-fg !important;
@@ -672,7 +715,6 @@ pre code {
     .card:nth-child(4) .card-footer {
       background-image: url(../img/cards/lightmode/4col-light-green.svg);
     }
-    
   }
   #run-a-network-node .text-cards a {
     color: $black;
@@ -715,25 +757,27 @@ pre code {
 
 // Placeholder text colors (search bars, etc.)
 $placeholder-color: $gray-600;
-::-webkit-input-placeholder { /* Chrome */
+::-webkit-input-placeholder {
+  /* Chrome */
   color: $placeholder-color;
 }
-:-ms-input-placeholder { /* IE 10+ */
+:-ms-input-placeholder {
+  /* IE 10+ */
   color: $placeholder-color;
 }
-::-moz-placeholder { /* Firefox 19+ */
+::-moz-placeholder {
+  /* Firefox 19+ */
   color: $placeholder-color;
   opacity: 1;
 }
-:-moz-placeholder { /* Firefox 4 - 18 */
+:-moz-placeholder {
+  /* Firefox 4 - 18 */
   color: $placeholder-color;
   opacity: 1;
 }
 
-
 // Events page
 .page-events {
-
   label {
     color: $gray-900;
   }
@@ -776,12 +820,10 @@ $placeholder-color: $gray-600;
     background: url(../img/events/event-location-light.svg);
   }
 
-
   .events-filter[type="checkbox"]::before {
     background-color: $gray-100;
   }
 
-
   .events-filter[type="checkbox"]:not(:disabled):checked:hover::after {
     background-image: url(../img/events/event-check.svg);
     background-repeat: no-repeat;
@@ -799,14 +841,13 @@ $placeholder-color: $gray-600;
   .events-filter[type="checkbox"]:not(:disabled):hover::after {
     background-color: $gray-100;
   }
-
 }
 
-
 .page-ambassadors {
-
   #benefits-list {
-    @each $benefits in "benefits-01", "benefits-02", "benefits-03", "benefits-04", "benefits-05", "benefits-06" {
+    @each $benefits in "benefits-01", "benefits-02", "benefits-03",
+      "benefits-04", "benefits-05", "benefits-06"
+    {
       ##{$benefits} {
         content: url("../img/ambassadors/lightmode/#{$benefits}.svg");
       }
@@ -814,7 +855,9 @@ $placeholder-color: $gray-600;
   }
 
   #eligibility-list {
-    @each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03", "eligibility-04", "eligibility-05" {
+    @each $eligibility in "eligibility-01", "eligibility-02", "eligibility-03",
+      "eligibility-04", "eligibility-05"
+    {
       ##{$eligibility} {
         content: url("../img/ambassadors/lightmode/#{$eligibility}.svg");
       }

template/base.html.jinja

@@ -127,6 +127,7 @@
 
 <!-- Algolia DocSearch -->
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<meta name="docsearch:language" content="en" />
 <script type="text/javascript">
 $(document).ready(() => {
   const ds = docsearch({

template/page-docs.html.jinja

@@ -11,16 +11,6 @@
         <h1 class="mb-18">{% trans %}What Would You Like to Learn?{% endtrans %}</h1>
         <h6 class="eyebrow mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
       </div>
-      <div class="center-search search">
-        <form role="search">
-          <div class="form-group">
-            <div class="input-group" id="centersearchboxcontainer">
-              <label class="input-group-prepend" for="centersearchboxcontainer"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
-              <input id="centersearchboxcontainer" type="text" class="form-control searchinput" placeholder="{% trans %}Search for articles, training, and code samples...{% endtrans %}">
-            </div><!--/.form-group-->
-          </div>
-        </form>
-      </div><!--/.center-search-->
     </div>
   </section>
 
@@ -128,15 +118,7 @@
 {% endblock %}
 
 {% block endbody %}
-<script type="text/javascript"> docsearch({
+
-  apiKey: '3431349deec23b0bc3dcd3424beb9a6e',
-  indexName: 'xrpl',
-  container: '#centersearchboxcontainer',
-  appId: 'R39QY3MZC7',
-  algoliaOptions: { 'facetFilters': ["lang:en"] },
-  debug: false
-  });
-</script>
 {% endblock %}