diff --git a/css/customstyles-precice.css b/css/customstyles-precice.css
index 7d5ea70edc..e4921067cf 100644
--- a/css/customstyles-precice.css
+++ b/css/customstyles-precice.css
@@ -1,65 +1,76 @@
 /* (Material) changes to the customstyles.css start here */
 
 body {
-    font-size: 16px;
-    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
-    padding-top: 70px;      /* https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top */
+  font-size: 16px;
+  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding-top: 70px;
+  /* https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top */
 }
 
 .banner-container {
-  margin-top:-20px;
+  margin-top: -20px;
 }
+
 a.navbar-brand {
-    padding-top: 12px;
+  padding-top: 12px;
 }
+
 .navbar-brand-text {
-    height: 28px;
-    padding-left: 1px; /* 1px */
-    display: inline;
-    vertical-align: top;
+  height: 28px;
+  padding-left: 1px;
+  /* 1px */
+  display: inline;
+  vertical-align: top;
 }
+
 /* use :before pseudo-class to rotate icon independent of text */
 .navbar-brand-icon:before {
-    width: 25px;
-    height: 25px;
-    content: '';
-    display: inline-block;
-    background: url('../images/icon.svg');
-    background-size: 25px 25px;
-    background-repeat: no-repeat;
-    background-position: top left;
-    transition: all 400ms;
-}
-a:hover > .navbar-brand-icon:before{
-    transform: rotate(180deg);
+  width: 25px;
+  height: 25px;
+  content: '';
+  display: inline-block;
+  background: url('../images/icon.svg');
+  background-size: 25px 25px;
+  background-repeat: no-repeat;
+  background-position: top left;
+  transition: all 400ms;
 }
+
+a:hover>.navbar-brand-icon:before {
+  transform: rotate(180deg);
+}
+
 /* .nav styles both topnav and sidenav, so use .nav.navbar-nav */
-.nav.navbar-nav > li > a {
-    font-size: 14px;
-    line-height: 20px;
-    padding: 4px 10px;
-    font-weight: 500;
-    margin-top: 11px;
-}
-.nav > li > a {
-    font-size: 14px;
-    line-height: 20px;
-    padding: 4px 10px;
+.nav.navbar-nav>li>a {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 10px;
+  font-weight: 500;
+  margin-top: 11px;
 }
+
+.nav>li>a {
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 10px;
+}
+
 /* rightmost icons */
-.nav > li > a.nav-external {
-    font-size: 24px;
-    line-height: 20px;
-    padding: 2px 0px;
-    margin-top: 11px;
+.nav>li>a.nav-external {
+  font-size: 24px;
+  line-height: 20px;
+  padding: 2px 0px;
+  margin-top: 11px;
 }
+
 @media (max-width: 1200px) {
-    .nav > li > a.nav-external {
-        float: left;
-    }
+  .nav>li>a.nav-external {
+    float: left;
+  }
 }
+
 /* Fix Firefox/normalize.css bug https://github.com/necolas/normalize.css/issues/740 */
-details > summary {
+details>summary {
   display: list-item;
   margin-bottom: 10px;
 }
@@ -68,15 +79,18 @@ details > summary {
 
 h2.page-header {
   /*border-bottom: 1px solid #0A76BB;*/
-  border-bottom: 1px solid rgba(10,118,187, 0);
+  border-bottom: 1px solid rgba(10, 118, 187, 0);
   font-size: 28px;
 }
+
 .row {
   margin-bottom: 0px;
 }
+
 .panel-precice {
   padding-top: 5px;
 }
+
 .panel-heading-precice {
   position: relative;
   /*left: -5px;
@@ -85,6 +99,7 @@ h2.page-header {
   margin-bottom: -15px;
   padding: 10px 15px;
 }
+
 .panel-heading-precice strong {
   font-size: 1.2em;
   line-height: 1.2em;
@@ -96,19 +111,25 @@ h2.page-header {
 .no-margin {
   margin: 0;
 }
+
 .less-top-margin {
   margin-top: -20px;
 }
+
 .less-bottom-margin {
   margin-bottom: -20px;
 }
+
 .citation-link {
   margin-top: 15px;
 }
-.vertical-align { /* https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025 */
-    display: flex;
-    align-items: center;
+
+.vertical-align {
+  /* https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3/25517025#25517025 */
+  display: flex;
+  align-items: center;
 }
+
 /* https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height */
 /* https://stackoverflow.com/questions/20503064/twitter-bootstrap-3-panels-of-equal-height-in-a-fluid-row */
 /*.equal {
@@ -117,22 +138,25 @@ h2.page-header {
   flex-wrap: wrap;
 }*/
 @media (min-width: 992px) {
-   .equal{
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-    }
+  .equal {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  }
 }
+
 /* add horizontal scoll on code blocks */
-pre > code {
+pre>code {
   overflow: auto;
   word-wrap: normal;
   white-space: pre;
 }
+
 div.col-flex {
   display: flex;
   flex-flow: column;
-  align-content: stretch;  /* file up remaining space */
+  align-content: stretch;
+  /* file up remaining space */
 }
 
 /* Search bar and results */
@@ -141,7 +165,8 @@ div.col-flex {
   font-size: 12px;
   background-color: white;
   position: absolute;
-  top: 40px; /* if you change anything about the nav, you'll prob. need to reset the top and left values here.*/
+  top: 40px;
+  /* if you change anything about the nav, you'll prob. need to reset the top and left values here.*/
   left: 20px;
   z-index: 69;
   width: 380px;
@@ -150,45 +175,55 @@ div.col-flex {
   max-height: 800px;
   overflow: auto;
 }
+
 .result-item {
   /*margin-bottom: 30px;*/
   border-top: 1px solid whitesmoke;
 }
+
 a.result-link {
   font-size: 14px;
 }
+
 .result-link .ais-Highlight {
   color: #111;
   font-style: normal;
   text-decoration: underline;
 }
+
 .nav li #search-results a.result-breadcrumbs {
   color: #424242;
   font-size: 15px;
   display: block;
   padding-left: 10px;
 }
+
 .result-breadcrumb {
   /*font-size: 18px;*/
   color: #424242;
 }
+
 .result-breadcrumb .ais-Highlight {
   font-weight: bold;
   font-style: normal;
 
 }
+
 .result-snippet .ais-Highlight {
   color: #2a7ae2;
   font-style: normal;
   font-weight: bold;
 }
+
 .result-snippet img {
   display: none;
 }
+
 .result-snippet {
   color: #333;
   padding-left: 10px;
 }
+
 #search-results h2 {
   font-size: 18px;
   margin: 0;
@@ -196,32 +231,67 @@ a.result-link {
   margin-top: 5px;
   padding-left: 10px;
 }
+
 #search-results a {
   background-color: transparent;
   display: inline;
 }
+
 #search-results a:hover {
   color: #333;
 }
+
 .nav li #search-results a {
   line-height: 1em;
   font-size: 1em;
   display: inline;
   padding: 0px;
 }
+
 #search-results p {
   margin-bottom: 5px;
 }
 
+/* Algolia search box widget styles
+   Previously injected via JS in algolia-search.js — moved here for proper separation of concerns */
+.ais-search-box--powered-by {
+  margin-top: -15px;
+  padding-right: 5px;
+}
+
+.nav li a.ais-search-box--powered-by-link {
+  padding: 0;
+  background-color: transparent;
+  display: inline-block;
+}
+
+.ais-search-box--input {
+  padding-left: 10px;
+  border-color: #0A76BB;
+}
+
+.ais-search-box {
+  padding: .5em;
+  margin-bottom: 0px;
+  margin-left: 10px;
+  margin-top: 0px;
+  width: 20em;
+  font-size: 0.8em;
+  box-sizing: border-box;
+  height: 50px;
+}
+
 /* Contributors section */
 .devlist {
   border: 1px solid #0a76bb;
   border-radius: 5px;
   padding: 0;
 }
+
 .devlist>li.devlist-first {
   border-top: 1px solid transparent;
 }
+
 ul.devlist>li {
   display: flex;
   flex-flow: row wrap;
@@ -238,18 +308,21 @@ ul.devlist>li {
   margin-right: 1rem;
 
 }
+
 .devlist>li .devlist-img>img {
   border-radius: 5px;
   width: 100%;
   margin: 0;
   border: 1px solid lightgrey;
 }
+
 .devlist>li .devlist-left {
   flex: 1 1 0px;
   width: auto;
   align-items: center;
   display: flex;
 }
+
 .devlist>li .devlist-right {
   flex: 0 0 auto;
   width: auto;
@@ -262,10 +335,12 @@ ul.devlist>li {
   align-items: center;
   font-size: larger;
 }
+
 .devlist>li .devlist-right li+li {
   margin-left: 16px;
 }
-.devlist-left > p {
+
+.devlist-left>p {
   margin-bottom: 0;
 }
 
@@ -276,31 +351,36 @@ ul.devlist>li {
   padding: 9.5px;
   margin-bottom: 10px;
 }
+
 .workshop-event p:first-of-type {
   margin-top: 10px;
 }
-*:focus
-{
+
+*:focus {
   outline: none;
 }
+
 @media screen and (max-width: 767px) {
-  .table-responsive > .table > thead > tr > th,
-  .table-responsive > .table > tbody > tr > th,
-  .table-responsive > .table > tfoot > tr > th,
-  .table-responsive > .table > thead > tr > td,
-  .table-responsive > .table > tbody > tr > td,
-  .table-responsive > .table > tfoot > tr > td {
+
+  .table-responsive>.table>thead>tr>th,
+  .table-responsive>.table>tbody>tr>th,
+  .table-responsive>.table>tfoot>tr>th,
+  .table-responsive>.table>thead>tr>td,
+  .table-responsive>.table>tbody>tr>td,
+  .table-responsive>.table>tfoot>tr>td {
     white-space: normal;
   }
 }
 
 /* print styles */
 @media print {
+
   /* https://www.matuzo.at/blog/i-totally-forgot-about-print-style-sheets/ */
   #tg-sb-sidebar,
   .githubEditButton {
     display: none;
   }
+
   body {
     padding-top: 0;
   }
@@ -308,7 +388,7 @@ ul.devlist>li {
 
 /* Testimonials == community stories */
 @media (max-width: 767px) {
-  .testimonials h2{
+  .testimonials h2 {
     padding-top: 80px;
   }
 }
@@ -318,44 +398,55 @@ ul.devlist>li {
   Uses 'position: sticky' which offsets relative to its nearest scrolling ancestor and containing block
   see https://developer.mozilla.org/en-US/docs/Web/CSS/position
 */
-ul.nav.affix { 
-  position: static; /* override 'position: fixed' for <ul> */
+ul.nav.affix {
+  position: static;
+  /* override 'position: fixed' for <ul> */
 }
+
 div#tg-sb-sidebar {
-  position: sticky; /* set for <div> instead of <ul> */
+  position: sticky;
+  /* set for <div> instead of <ul> */
   top: 40px;
 }
+
 /* Unstick the sidebar if window is too small */
-@media (max-height: 850px) { /* this value may need to be updated if sidebar height increases */
-  div#tg-sb-sidebar  {
+@media (max-height: 850px) {
+
+  /* this value may need to be updated if sidebar height increases */
+  div#tg-sb-sidebar {
     position: static;
   }
 }
+
 /* Unstick on mobile */
 @media (max-width: 991px) {
-  div#tg-sb-sidebar  {
+  div#tg-sb-sidebar {
     position: static;
   }
+
   /* style navtabs */
-  .post-content ol li, .post-content ul li {
+  .post-content ol li,
+  .post-content ul li {
     margin: 0px;
   }
+
   div.tab-content {
     padding: 0px;
     background-color: white;
-    }
+  }
+
   div.tab-content div.tab-pane pre {
     margin-top: 0px;
   }
 }
 
 /* Hide default marker Chromium/WebKit */
-details > summary::-webkit-details-marker {
+details>summary::-webkit-details-marker {
   display: none !important;
 }
 
 /* Hide default marker in Firefox */
-details > summary {
+details>summary {
   list-style: none;
   cursor: pointer;
   position: relative;
@@ -363,7 +454,7 @@ details > summary {
 }
 
 /* closed */
-details > summary::after {
+details>summary::after {
   content: "▼";
   position: absolute;
   right: 0;
@@ -373,6 +464,6 @@ details > summary::after {
 }
 
 /* open */
-details[open] > summary::after {
+details[open]>summary::after {
   content: "▲";
-}
+}
\ No newline at end of file
diff --git a/js/algolia-search.js b/js/algolia-search.js
index 3528c6730f..d3ecbf970d 100644
--- a/js/algolia-search.js
+++ b/js/algolia-search.js
@@ -3,7 +3,7 @@ const algoliaSearch = instantsearch({
   appId: '{{ site.algolia.application_id }}',
   apiKey: '{{ site.algolia.search_only_api_key }}',
   indexName: '{{ site.algolia.index_name }}',
-  searchFunction: function(helper) {          // hide search result in init query
+  searchFunction: function (helper) {          // hide search result in init query
     var searchResults = $('#search-results');
     if (helper.state.query === '') {
       searchResults.hide();
@@ -14,7 +14,7 @@ const algoliaSearch = instantsearch({
   }
 });
 
-const hitTemplate = function(hit) {
+const hitTemplate = function (hit) {
   let date = '';
   if (hit.date) {
     date = moment.unix(hit.date).format('MMM D, YYYY');
@@ -65,67 +65,15 @@ algoliaSearch.addWidget(
 
 algoliaSearch.start();
 
-// Patch the style of the search input bar generated by the above script
-// The equivalent CSS is below, however, including <style> in <body> is against the W3C commandments
-// Chrome and Firefox had baby called scope, but it didn't make it
-// https://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html
-var elem = document.querySelector('.ais-search-box--powered-by');
-elem.style.marginTop = '-15px';
-elem.style.paddingRight = '5px';
-
-var elem = document.querySelector('.nav li a.ais-search-box--powered-by-link');
-elem.style.padding = '0';
-elem.style.backgroundColor = 'transparent';
-elem.style.display = "inline-block";
-
-var elem = document.querySelector('.ais-search-box--input');
-elem.style.paddingLeft = '10px';
-elem.style.borderColor = '#0A76BB';
-
-var elem = document.querySelector('.ais-search-box');
-elem.style.padding = '.5em';
-elem.style.marginBottom = '0px';
-elem.style.marginLeft = '10px';
-elem.style.marginTop = '0px';
-elem.style.width = '20em';
-elem.style.fontSize = '0.8em';
-elem.style.height = '50px';
-elem.style.boxSizing = 'border-box';
-
-/*<style type="text/css">
-.ais-search-box--powered-by {
-  margin-top: -15px;
-  padding-right: 5px;
-}
-.nav li a.ais-search-box--powered-by-link {
-  padding: 0;
-  background-color: transparent;
-  display: inline-block;
-}
-.ais-search-box--input {
-  padding-left: 10px;
-  border-color: #0A76BB;
-}
-.ais-search-box {
-  padding: .5em;
-  margin-bottom: 0px;
-  margin-left: 10px;
-  margin-top: 0px;
-  width: 20em;
-  font-size: 0.8em;
-  box-sizing: border-box;
-  height: 50px;
-}
-</style>*/
 
 // some hacky JS to hide the search results until we move to docsearch (which is a true autocomplete-type search)
-document.addEventListener('mouseup', function(e) {
+document.addEventListener('mouseup', function (e) {
   var results = document.getElementById('search-results');
   if (!results.contains(e.target)) {
     results.style.display = 'none';
   }
 });
-document.addEventListener('mouseup', function(e) {
+document.addEventListener('mouseup', function (e) {
   var input = document.getElementById('search-input');
   var results = document.getElementById('search-results');
   if (input.contains(e.target)) {