html, harvests search form, minor misc

- harvests add search form to db option
- dark theme input background color
  (follows cgi search form)
- html tidy

html tidy

9 files changed, 457 insertions, 40 deletions

diff --git a/org/out_harvest_metadata.org b/org/out_harvest_metadata.org
index bcd4472..b9d7296 100644
--- a/org/out_harvest_metadata.org
+++ b/org/out_harvest_metadata.org
@@ -136,6 +136,7 @@ template spineMetaDocHarvestsTopics() {
     M  _make_and_meta_struct,
     O  _opt_action,
   ) {
+      <<harvested_html_search>>
       <<harvested_topics>>
 <<harvested_html_themes>>
 <<harvested_topics_html_head_1>>
@@ -220,7 +221,14 @@ foreach(k, doc_harvest; hvst.harvests) {
 <a name="up" id="up"></a>
 <a name="start" id="start"></a>
 <h1>Metadata Harvest - Topics (output organised by language &amp; filetype)</h1>
-<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] [<a href="authors.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Authors&nbsp;</a>]</p>
+<div class="flex-menu-bar">
+<div class="flex-menu-option">
+<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
+ [<a href="authors.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Authors&nbsp;</a>]
+</p>
+</div>
+ %s
+</div>
 <p><a href="#A">A</a>,&nbsp;<a href="#B">B</a>,&nbsp;<a href="#C">C</a>,&nbsp;<a href="#D">D</a>,&nbsp;<a href="#E">E</a>,&nbsp;<a href="#F">F</a>,&nbsp;<a href="#G">G</a>,&nbsp;<a href="#H">H</a>,&nbsp;<a href="#I">I</a>,&nbsp;<a href="#J">J</a>,&nbsp;<a href="#K">K</a>,&nbsp;<a href="#L">L</a>,&nbsp;<a href="#M">M</a>,&nbsp;<a href="#N">N</a>,&nbsp;<a href="#O">O</a>,&nbsp;<a href="#P">P</a>,&nbsp;<a href="#Q">Q</a>,&nbsp;<a href="#R">R</a>,&nbsp;<a href="#S">S</a>,&nbsp;<a href="#T">T</a>,&nbsp;<a href="#U">U</a>,&nbsp;<a href="#V">V</a>,&nbsp;<a href="#W">W</a>,&nbsp;<a href="#X">X</a>,&nbsp;<a href="#Y">Y</a>,&nbsp;<a href="#Z">Z</a>,&nbsp;
 <p></p>
 <hr />
@@ -233,6 +241,7 @@ foreach(k, doc_harvest; hvst.harvests) {
 ┃",
   _opt_action.css_theme_default ? theme_light_0 : theme_dark_0,
   _opt_action.css_theme_default ? theme_light_1 : theme_dark_1,
+  inline_search_form(_make_and_meta_struct),
 ) ~ "\n";
 #+END_SRC
 
@@ -467,6 +476,7 @@ template spineMetaDocHarvestsAuthors() {
     M  _make_and_meta_struct,
     O  _opt_action,
   ) {
+      <<harvested_html_search>>
 <<harvested_html_themes>>
 <<harvested_authors_html_head_1>>
 <<harvested_html_head>>
@@ -502,7 +512,14 @@ template spineMetaDocHarvestsAuthors() {
 <a name="up" id="up"></a>
 <a name="start" id="start"></a>
 <h1>Metadata Harvest - Authors (output organised by language &amp; filetype)</h1>
-<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] [<a href="topics.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Topics&nbsp;</a>]</p>
+<div class="flex-menu-bar">
+<div class="flex-menu-option">
+<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
+ [<a href="topics.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Topics&nbsp;</a>]
+</p>
+</div>
+%s
+</div>
 <p></p>
 <hr />
 <p><a href="#A">A</a>,&nbsp;<a href="#B">B</a>,&nbsp;<a href="#C">C</a>,&nbsp;<a href="#D">D</a>,&nbsp;<a href="#E">E</a>,&nbsp;<a href="#F">F</a>,&nbsp;<a href="#G">G</a>,&nbsp;<a href="#H">H</a>,&nbsp;<a href="#I">I</a>,&nbsp;<a href="#J">J</a>,&nbsp;<a href="#K">K</a>,&nbsp;<a href="#L">L</a>,&nbsp;<a href="#M">M</a>,&nbsp;<a href="#N">N</a>,&nbsp;<a href="#O">O</a>,&nbsp;<a href="#P">P</a>,&nbsp;<a href="#Q">Q</a>,&nbsp;<a href="#R">R</a>,&nbsp;<a href="#S">S</a>,&nbsp;<a href="#T">T</a>,&nbsp;<a href="#U">U</a>,&nbsp;<a href="#V">V</a>,&nbsp;<a href="#W">W</a>,&nbsp;<a href="#X">X</a>,&nbsp;<a href="#Y">Y</a>,&nbsp;<a href="#Z">Z</a>,&nbsp;
@@ -515,6 +532,7 @@ template spineMetaDocHarvestsAuthors() {
 ┃",
   _opt_action.css_theme_default ? theme_light_0 : theme_dark_0,
   _opt_action.css_theme_default ? theme_light_1 : theme_dark_1,
+  inline_search_form(_make_and_meta_struct),
 ) ~ "\n";
       string[string] _au;
       string[] _auth_date_title;
@@ -646,6 +664,10 @@ string theme_dark_0 = format(q"┃
     color                    : #FFFFFF;
     background               : #777777;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 ┃");
 string theme_light_0 = format(q"┃
   body {
@@ -686,6 +708,10 @@ string theme_light_0 = format(q"┃
   a.lev3:hover {
     background               : #BBBBBB;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 ┃");
 #+END_SRC
 
@@ -753,6 +779,43 @@ string theme_light_1 = format(q"┃
 ┃");
 #+END_SRC
 
+*** search form
+
+#+NAME: harvested_html_search
+#+BEGIN_SRC d
+@safe string inline_search_form(M)(
+  M  _make_and_meta_truct,
+) {
+  string o;
+  string _form;
+  if (_opt_action.html_search_link) {
+    o = format(q"┃
+<div class="flex-menu-option">
+<!-- SiSU Spine Search -->
+<form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
+<font size="2">
+<input type="text" name="sf" size="24" maxlength="255">%s
+<input type="hidden" name="sml" value="1000">
+<input type="hidden" name="ec" value="on">
+<input type="hidden" name="url" value="on">
+<button type="submit" form="search">db</button>
+</font></form>
+<!-- SiSU Spine Search -->
+</div>┃",
+    _make_and_meta_struct.conf.w_srv_cgi_action,
+    (_make_and_meta_struct.conf.w_srv_db_sqlite.empty)
+      ? ""
+      : "\n    <input type=\"hidden\" name=\"db\" value=\""
+        ~ _make_and_meta_struct.conf.w_srv_db_sqlite
+        ~ "\">",
+    );
+  } else {
+    o = "";
+  }
+  return o;
+}
+#+END_SRC
+
 *** harvested html head
 
 #+NAME: harvested_html_head
@@ -852,6 +915,35 @@ string theme_light_1 = format(q"┃
     font-size                : 80%%;
     margin-left              : 6em;
   }%s
+  /* flex */
+  .flex-menu-bar {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-flex-wrap        : wrap;
+    -webkit-align-items      : center;
+    align-items              : center;
+    width                    : 100%%;
+    margin-left              : 0%%;
+    margin-right             : 2%%;
+    background-color         : inherited;
+  }
+  .flex-menu-option {
+    background-color         : inherited;
+    margin-right             : 4px;
+  }
+  .flex-list {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-align-items      : center;
+    display                  : block;
+    align-items              : center;
+    width                    : 100%%;
+    background-color         : inherited;
+  }
+  .flex-list-item {
+    background-color         : inherited;
+    margin                   : 4px;
+  }
 </style>
 <link rel="shortcut icon" href="../_sisu/image/rb7.ico" />
 #+END_SRC
diff --git a/org/out_metadata.org b/org/out_metadata.org
index f7f8700..13d6708 100644
--- a/org/out_metadata.org
+++ b/org/out_metadata.org
@@ -22,6 +22,7 @@
 module doc_reform.io_out.metadata;
 template outputMetadata() {
   @safe void outputMetadata(T)( T  doc_matters) {
+    <<harvested_html_search>>
     <<output_imports>>
 <<harvested_html_themes>>
 <<harvested_topics_html_head_1>>
@@ -77,17 +78,17 @@ metadata_ ~= format(q"┃<body lang="en" xml:lang="en">
 <a name="up" id="up"></a>
 <a name="start" id="start"></a>
 ┃");
+metadata_ ~= "<div class=\"flex-menu-bar\"><div class=\"flex-menu-option\">";
 if (doc_matters.opt.action.html_harvest_link) {
   metadata_ ~= format(q"┃<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] Metadata Harvest
    [<a href="../../authors.html">&nbsp;Authors&nbsp;</a>]
    [<a href="../../topics.html">&nbsp;Topics&nbsp;</a>]</p>
-<hr />
 ┃");
 } else {
   metadata_ ~= format(q"┃<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
-<hr />
 ┃");
 }
+metadata_ ~= "</div>" ~ inline_search_form(doc_matters) ~ "</div><hr />";
 if (!(doc_matters.conf_make_meta.meta.title_full.empty)) {
   metadata_ ~= "<p class=\"lev0\">Title: <b><a href=\"" ~ doc_matters.src.filename_base ~ "/toc.html\">" ~ doc_matters.conf_make_meta.meta.title_full       ~ "</a></b></p>";
 } else if (doc_matters.opt.action.debug_do || doc_matters.opt.action.very_verbose) {
@@ -258,7 +259,7 @@ metadata_write_output(doc_matters, metadata_);
 **** head
 
 #+NAME: harvested_html_themes
-#+BEGIN_SRC d
+#+BEGIN_SRC css
 string theme_dark_0 = format(q"┃
   body {
     color                    : #CCCCCC;
@@ -284,6 +285,10 @@ string theme_dark_0 = format(q"┃
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 ┃");
 string theme_light_0 = format(q"┃
   body {
@@ -310,13 +315,17 @@ string theme_light_0 = format(q"┃
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 ┃");
 #+END_SRC
 
 **** levels
 
 #+NAME: harvested_html_themes
-#+BEGIN_SRC d
+#+BEGIN_SRC css
 string theme_dark_1 = format(q"┃
   h1 {
     color                    : #FFFFFF;
@@ -454,6 +463,35 @@ string theme_light_1 = format(q"┃
     font-size                : 80%%;
     margin-left              : 6em;
   }%s
+  /* flex */
+  .flex-menu-bar {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-flex-wrap        : wrap;
+    -webkit-align-items      : center;
+    align-items              : center;
+    width                    : 100%%;
+    margin-left              : 0%%;
+    margin-right             : 2%%;
+    background-color         : inherited;
+  }
+  .flex-menu-option {
+    background-color         : inherited;
+    margin-right             : 4px;
+  }
+  .flex-list {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-align-items      : center;
+    display                  : block;
+    align-items              : center;
+    width                    : 100%%;
+    background-color         : inherited;
+  }
+  .flex-list-item {
+    background-color         : inherited;
+    margin                   : 4px;
+  }
 </style>
 <link rel="shortcut icon" href="../_sisu/image/rb7.ico" />
 #+END_SRC
@@ -484,3 +522,42 @@ string theme_light_1 = format(q"┃
   doc_matters.opt.action.css_theme_default ? theme_light_1 : theme_dark_1,
 ) ~ "\n";
 #+END_SRC
+
+*** search form
+
+#+NAME: harvested_html_search
+#+BEGIN_SRC d
+@safe string inline_search_form(M)(
+  M  doc_matters,
+) {
+  string o;
+  string _form;
+  if (doc_matters.opt.action.html_search_link) {
+    o = format(q"┃
+<div class="flex-menu-option">
+<!-- SiSU Spine Search -->
+<form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
+<font size="2">
+<input type="text" name="sf" size="24" maxlength="255">%s
+<input type="hidden" name="sml" value="1000">
+<input type="hidden" name="ec" value="on">
+<input type="hidden" name="url" value="on">
+<button type="submit" form="search" name="fn" value="%s">doc</button>
+<button type="submit" form="search">db</button>
+</font></form>
+<!-- SiSU Spine Search -->
+</div>┃",
+    doc_matters.conf_make_meta.conf.w_srv_cgi_action,
+    (doc_matters.conf_make_meta.conf.w_srv_db_sqlite.empty)
+      ? ""
+      : "\n    <input type=\"hidden\" name=\"db\" value=\""
+        ~ doc_matters.conf_make_meta.conf.w_srv_db_sqlite
+        ~ "\">",
+    doc_matters.src.filename_base,
+    );
+  } else {
+    o = "";
+  }
+  return o;
+}
+#+END_SRC
diff --git a/org/out_xmls.org b/org/out_xmls.org
index 0211cd5..db1b2a0 100644
--- a/org/out_xmls.org
+++ b/org/out_xmls.org
@@ -200,7 +200,7 @@ import
 <meta name="generator" content="%s" />
 <link rel="generator" href="%s" />
 <!-- spine DocReform header metadata -->┃",
-    doc_matters.conf_make_meta.meta.title_full,
+    doc_matters.conf_make_meta.meta.title_full.replaceAll(regex("\""),    "&quot;"),
     doc_matters.conf_make_meta.meta.creator_author,
     _publisher,
     doc_matters.conf_make_meta.meta.date_published,
@@ -261,7 +261,6 @@ import
     o = format(q"┃
 <div class="flex-menu-option">
 <!-- SiSU Spine Search -->
-<a name="search"></a>
 <form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
 <font size="2">
 <input type="text" name="sf" size="24" maxlength="255">%s
@@ -397,7 +396,7 @@ import
 <body lang="%s">
 <a name="top" id="top"></a>┃",
     html_simple,
-    doc_matters.conf_make_meta.meta.title_full,
+    doc_matters.conf_make_meta.meta.title_full.replaceAll(regex("\""),    "&quot;"),
     (doc_matters.conf_make_meta.meta.creator_author.empty) ? ""
       : ", " ~ doc_matters.conf_make_meta.meta.creator_author,
     doc_matters.conf_make_meta.meta.title_full,
@@ -772,7 +771,7 @@ import
     toc = format(q"┃<a href="toc.html" target="_top">
           <div class="toc-button menu">
             <svg viewbox="0 0 100 100">
-              <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
+              <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" />
             </svg>
           </div>
         </a>┃",
@@ -784,7 +783,7 @@ import
     prev = format(q"┃<a href="%s.html" target="_top">
           <div class="prev-next-button previous">
             <svg viewbox="0 0 100 100">
-              <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)">
+              <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)" />
             </svg>
           </div>
         </a>┃",
@@ -797,18 +796,17 @@ import
     next = format(q"┃<a href="%s.html" target="_top">
           <div class="prev-next-button next">
             <svg viewbox="0 0 100 100">
-              <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) ">
+              <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform="translate(85,100) rotate(180)" />
             </svg>
           </div>
         </a>┃",
       obj.tags.segname_next,
     );
   }
-  string _toc_pre_next = format(q"┃        <div class="nav-bar">
-        %s
-        %s
-        %s
-      </div>
+  string _toc_pre_next = format(q"┃      <div class="nav-bar">
+      %s
+      %s
+      %s
     </div>
   </div>
 </div>┃",
@@ -816,10 +814,9 @@ import
     prev,
     next,
   );
-  string _pre_next = format(q"┃        <div class="nav-bar">
-        %s
-        %s
-      </div>
+  string _pre_next = format(q"┃      <div class="nav-bar">
+      %s
+      %s
     </div>
   </div>
 </div>┃",
diff --git a/org/out_xmls_css.org b/org/out_xmls_css.org
index 443f788..7e5ed46 100644
--- a/org/out_xmls_css.org
+++ b/org/out_xmls_css.org
@@ -157,6 +157,10 @@ template spineCss() {
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 #+END_SRC
 
 **** div
@@ -1073,6 +1077,10 @@ Consider what if anything should be used here
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 #+END_SRC
 
 **** div
diff --git a/src/doc_reform/io_out/metadata.d b/src/doc_reform/io_out/metadata.d
index 6c059ce..1d366b9 100644
--- a/src/doc_reform/io_out/metadata.d
+++ b/src/doc_reform/io_out/metadata.d
@@ -1,6 +1,39 @@
 module doc_reform.io_out.metadata;
 template outputMetadata() {
   @safe void outputMetadata(T)( T  doc_matters) {
+    @safe string inline_search_form(M)(
+      M  doc_matters,
+    ) {
+      string o;
+      string _form;
+      if (doc_matters.opt.action.html_search_link) {
+        o = format(q"┃
+    <div class="flex-menu-option">
+    <!-- SiSU Spine Search -->
+    <form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
+    <font size="2">
+    <input type="text" name="sf" size="24" maxlength="255">%s
+    <input type="hidden" name="sml" value="1000">
+    <input type="hidden" name="ec" value="on">
+    <input type="hidden" name="url" value="on">
+    <button type="submit" form="search" name="fn" value="%s">doc</button>
+    <button type="submit" form="search">db</button>
+    </font></form>
+    <!-- SiSU Spine Search -->
+    </div>┃",
+        doc_matters.conf_make_meta.conf.w_srv_cgi_action,
+        (doc_matters.conf_make_meta.conf.w_srv_db_sqlite.empty)
+          ? ""
+          : "\n    <input type=\"hidden\" name=\"db\" value=\""
+            ~ doc_matters.conf_make_meta.conf.w_srv_db_sqlite
+            ~ "\">",
+        doc_matters.src.filename_base,
+        );
+      } else {
+        o = "";
+      }
+      return o;
+    }
     import
       std.file,
       std.format;
@@ -32,6 +65,10 @@ string theme_dark_0 = format(q"┃
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 ┃");
 string theme_light_0 = format(q"┃
   body {
@@ -58,6 +95,10 @@ string theme_light_0 = format(q"┃
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 ┃");
 string theme_dark_1 = format(q"┃
   h1 {
@@ -179,6 +220,35 @@ string theme_light_1 = format(q"┃
     font-size                : 80%%;
     margin-left              : 6em;
   }%s
+  /* flex */
+  .flex-menu-bar {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-flex-wrap        : wrap;
+    -webkit-align-items      : center;
+    align-items              : center;
+    width                    : 100%%;
+    margin-left              : 0%%;
+    margin-right             : 2%%;
+    background-color         : inherited;
+  }
+  .flex-menu-option {
+    background-color         : inherited;
+    margin-right             : 4px;
+  }
+  .flex-list {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-align-items      : center;
+    display                  : block;
+    align-items              : center;
+    width                    : 100%%;
+    background-color         : inherited;
+  }
+  .flex-list-item {
+    background-color         : inherited;
+    margin                   : 4px;
+  }
 </style>
 <link rel="shortcut icon" href="../_sisu/image/rb7.ico" />
 </head>
@@ -230,17 +300,17 @@ string theme_light_1 = format(q"┃
     <a name="up" id="up"></a>
     <a name="start" id="start"></a>
     ┃");
+    metadata_ ~= "<div class=\"flex-menu-bar\"><div class=\"flex-menu-option\">";
     if (doc_matters.opt.action.html_harvest_link) {
       metadata_ ~= format(q"┃<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] Metadata Harvest
        [<a href="../../authors.html">&nbsp;Authors&nbsp;</a>]
        [<a href="../../topics.html">&nbsp;Topics&nbsp;</a>]</p>
-    <hr />
     ┃");
     } else {
       metadata_ ~= format(q"┃<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
-    <hr />
     ┃");
     }
+    metadata_ ~= "</div>" ~ inline_search_form(doc_matters) ~ "</div><hr />";
     if (!(doc_matters.conf_make_meta.meta.title_full.empty)) {
       metadata_ ~= "<p class=\"lev0\">Title: <b><a href=\"" ~ doc_matters.src.filename_base ~ "/toc.html\">" ~ doc_matters.conf_make_meta.meta.title_full       ~ "</a></b></p>";
     } else if (doc_matters.opt.action.debug_do || doc_matters.opt.action.very_verbose) {
diff --git a/src/doc_reform/io_out/xmls.d b/src/doc_reform/io_out/xmls.d
index ffcdcb6..b4c5e56 100644
--- a/src/doc_reform/io_out/xmls.d
+++ b/src/doc_reform/io_out/xmls.d
@@ -109,7 +109,7 @@ template outputXHTMLs() {
     <meta name="generator" content="%s" />
     <link rel="generator" href="%s" />
     <!-- spine DocReform header metadata -->┃",
-        doc_matters.conf_make_meta.meta.title_full,
+        doc_matters.conf_make_meta.meta.title_full.replaceAll(regex("\""),    "&quot;"),
         doc_matters.conf_make_meta.meta.creator_author,
         _publisher,
         doc_matters.conf_make_meta.meta.date_published,
@@ -158,7 +158,6 @@ template outputXHTMLs() {
         o = format(q"┃
     <div class="flex-menu-option">
     <!-- SiSU Spine Search -->
-    <a name="search"></a>
     <form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
     <font size="2">
     <input type="text" name="sf" size="24" maxlength="255">%s
@@ -282,7 +281,7 @@ template outputXHTMLs() {
     <body lang="%s">
     <a name="top" id="top"></a>┃",
         html_simple,
-        doc_matters.conf_make_meta.meta.title_full,
+        doc_matters.conf_make_meta.meta.title_full.replaceAll(regex("\""),    "&quot;"),
         (doc_matters.conf_make_meta.meta.creator_author.empty) ? ""
           : ", " ~ doc_matters.conf_make_meta.meta.creator_author,
         doc_matters.conf_make_meta.meta.title_full,
@@ -598,7 +597,7 @@ template outputXHTMLs() {
         toc = format(q"┃<a href="toc.html" target="_top">
               <div class="toc-button menu">
                 <svg viewbox="0 0 100 100">
-                  <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
+                  <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" />
                 </svg>
               </div>
             </a>┃",
@@ -610,7 +609,7 @@ template outputXHTMLs() {
         prev = format(q"┃<a href="%s.html" target="_top">
               <div class="prev-next-button previous">
                 <svg viewbox="0 0 100 100">
-                  <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)">
+                  <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)" />
                 </svg>
               </div>
             </a>┃",
@@ -623,18 +622,17 @@ template outputXHTMLs() {
         next = format(q"┃<a href="%s.html" target="_top">
               <div class="prev-next-button next">
                 <svg viewbox="0 0 100 100">
-                  <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) ">
+                  <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform="translate(85,100) rotate(180)" />
                 </svg>
               </div>
             </a>┃",
           obj.tags.segname_next,
         );
       }
-      string _toc_pre_next = format(q"┃        <div class="nav-bar">
-            %s
-            %s
-            %s
-          </div>
+      string _toc_pre_next = format(q"┃      <div class="nav-bar">
+          %s
+          %s
+          %s
         </div>
       </div>
     </div>┃",
@@ -642,10 +640,9 @@ template outputXHTMLs() {
         prev,
         next,
       );
-      string _pre_next = format(q"┃        <div class="nav-bar">
-            %s
-            %s
-          </div>
+      string _pre_next = format(q"┃      <div class="nav-bar">
+          %s
+          %s
         </div>
       </div>
     </div>┃",
diff --git a/src/doc_reform/io_out/xmls_css.d b/src/doc_reform/io_out/xmls_css.d
index 88af237..e882b4d 100644
--- a/src/doc_reform/io_out/xmls_css.d
+++ b/src/doc_reform/io_out/xmls_css.d
@@ -466,6 +466,10 @@ template spineCss() {
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
@@ -1176,6 +1180,10 @@ template spineCss() {
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
@@ -1885,6 +1893,10 @@ template spineCss() {
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
@@ -2521,6 +2533,10 @@ template spineCss() {
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
@@ -3156,6 +3172,10 @@ template spineCss() {
     color                    : #003399;
     text-decoration          : underline;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
@@ -3682,6 +3702,10 @@ template spineCss() {
     color                    : #888888;
     text-decoration          : underline;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
   div {
     margin-left              : 0;
     margin-right             : 0;
diff --git a/src/doc_reform/meta/metadoc_harvests_authors.d b/src/doc_reform/meta/metadoc_harvests_authors.d
index 132c0af..5555f9d 100644
--- a/src/doc_reform/meta/metadoc_harvests_authors.d
+++ b/src/doc_reform/meta/metadoc_harvests_authors.d
@@ -19,6 +19,37 @@ template spineMetaDocHarvestsAuthors() {
     M  _make_and_meta_struct,
     O  _opt_action,
   ) {
+      @safe string inline_search_form(M)(
+        M  _make_and_meta_truct,
+      ) {
+        string o;
+        string _form;
+        if (_opt_action.html_search_link) {
+          o = format(q"┃
+      <div class="flex-menu-option">
+      <!-- SiSU Spine Search -->
+      <form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
+      <font size="2">
+      <input type="text" name="sf" size="24" maxlength="255">%s
+      <input type="hidden" name="sml" value="1000">
+      <input type="hidden" name="ec" value="on">
+      <input type="hidden" name="url" value="on">
+      <button type="submit" form="search">db</button>
+      </font></form>
+      <!-- SiSU Spine Search -->
+      </div>┃",
+          _make_and_meta_struct.conf.w_srv_cgi_action,
+          (_make_and_meta_struct.conf.w_srv_db_sqlite.empty)
+            ? ""
+            : "\n    <input type=\"hidden\" name=\"db\" value=\""
+              ~ _make_and_meta_struct.conf.w_srv_db_sqlite
+              ~ "\">",
+          );
+        } else {
+          o = "";
+        }
+        return o;
+      }
 string theme_dark_0 = format(q"┃
   body {
     color                    : #CCCCCC;
@@ -60,6 +91,10 @@ string theme_dark_0 = format(q"┃
     color                    : #FFFFFF;
     background               : #777777;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 ┃");
 string theme_light_0 = format(q"┃
   body {
@@ -100,6 +135,10 @@ string theme_light_0 = format(q"┃
   a.lev3:hover {
     background               : #BBBBBB;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 ┃");
 string theme_dark_1 = format(q"┃
   h1 {
@@ -261,6 +300,35 @@ string theme_light_1 = format(q"┃
     font-size                : 80%%;
     margin-left              : 6em;
   }%s
+  /* flex */
+  .flex-menu-bar {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-flex-wrap        : wrap;
+    -webkit-align-items      : center;
+    align-items              : center;
+    width                    : 100%%;
+    margin-left              : 0%%;
+    margin-right             : 2%%;
+    background-color         : inherited;
+  }
+  .flex-menu-option {
+    background-color         : inherited;
+    margin-right             : 4px;
+  }
+  .flex-list {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-align-items      : center;
+    display                  : block;
+    align-items              : center;
+    width                    : 100%%;
+    background-color         : inherited;
+  }
+  .flex-list-item {
+    background-color         : inherited;
+    margin                   : 4px;
+  }
 </style>
 <link rel="shortcut icon" href="../_sisu/image/rb7.ico" />
 </head>
@@ -269,13 +337,21 @@ string theme_light_1 = format(q"┃
 <a name="up" id="up"></a>
 <a name="start" id="start"></a>
 <h1>Metadata Harvest - Authors (output organised by language &amp; filetype)</h1>
-<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] [<a href="topics.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Topics&nbsp;</a>]</p>
+<div class="flex-menu-bar">
+<div class="flex-menu-option">
+<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
+ [<a href="topics.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Topics&nbsp;</a>]
+</p>
+</div>
+%s
+</div>
 <p></p>
 <hr />
 <p><a href="#A">A</a>,&nbsp;<a href="#B">B</a>,&nbsp;<a href="#C">C</a>,&nbsp;<a href="#D">D</a>,&nbsp;<a href="#E">E</a>,&nbsp;<a href="#F">F</a>,&nbsp;<a href="#G">G</a>,&nbsp;<a href="#H">H</a>,&nbsp;<a href="#I">I</a>,&nbsp;<a href="#J">J</a>,&nbsp;<a href="#K">K</a>,&nbsp;<a href="#L">L</a>,&nbsp;<a href="#M">M</a>,&nbsp;<a href="#N">N</a>,&nbsp;<a href="#O">O</a>,&nbsp;<a href="#P">P</a>,&nbsp;<a href="#Q">Q</a>,&nbsp;<a href="#R">R</a>,&nbsp;<a href="#S">S</a>,&nbsp;<a href="#T">T</a>,&nbsp;<a href="#U">U</a>,&nbsp;<a href="#V">V</a>,&nbsp;<a href="#W">W</a>,&nbsp;<a href="#X">X</a>,&nbsp;<a href="#Y">Y</a>,&nbsp;<a href="#Z">Z</a>,&nbsp;
 ┃",
   _opt_action.css_theme_default ? theme_light_0 : theme_dark_0,
   _opt_action.css_theme_default ? theme_light_1 : theme_dark_1,
+  inline_search_form(_make_and_meta_struct),
 ) ~ "\n";
       string[string] _au;
       string[] _auth_date_title;
diff --git a/src/doc_reform/meta/metadoc_harvests_topics.d b/src/doc_reform/meta/metadoc_harvests_topics.d
index aeb7cba..5332659 100644
--- a/src/doc_reform/meta/metadoc_harvests_topics.d
+++ b/src/doc_reform/meta/metadoc_harvests_topics.d
@@ -19,6 +19,37 @@ template spineMetaDocHarvestsTopics() {
     M  _make_and_meta_struct,
     O  _opt_action,
   ) {
+      @safe string inline_search_form(M)(
+        M  _make_and_meta_truct,
+      ) {
+        string o;
+        string _form;
+        if (_opt_action.html_search_link) {
+          o = format(q"┃
+      <div class="flex-menu-option">
+      <!-- SiSU Spine Search -->
+      <form action="%s" target="_top" method="POST" accept-charset="UTF-8" id="search">
+      <font size="2">
+      <input type="text" name="sf" size="24" maxlength="255">%s
+      <input type="hidden" name="sml" value="1000">
+      <input type="hidden" name="ec" value="on">
+      <input type="hidden" name="url" value="on">
+      <button type="submit" form="search">db</button>
+      </font></form>
+      <!-- SiSU Spine Search -->
+      </div>┃",
+          _make_and_meta_struct.conf.w_srv_cgi_action,
+          (_make_and_meta_struct.conf.w_srv_db_sqlite.empty)
+            ? ""
+            : "\n    <input type=\"hidden\" name=\"db\" value=\""
+              ~ _make_and_meta_struct.conf.w_srv_db_sqlite
+              ~ "\">",
+          );
+        } else {
+          o = "";
+        }
+        return o;
+      }
       auto min_repeat_number = 42;
       string[] _document_topic_register;
       string[] _topic_register;
@@ -103,6 +134,10 @@ string theme_dark_0 = format(q"┃
     color                    : #FFFFFF;
     background               : #777777;
   }
+  input {
+    color                    : #FFFFFF;
+    background-color         : #777777;
+  }
 ┃");
 string theme_light_0 = format(q"┃
   body {
@@ -143,6 +178,10 @@ string theme_light_0 = format(q"┃
   a.lev3:hover {
     background               : #BBBBBB;
   }
+  input {
+    color                    : #000000;
+    background-color         : #FFFFFF;
+  }
 ┃");
 string theme_dark_1 = format(q"┃
   h1 {
@@ -302,6 +341,35 @@ string theme_light_1 = format(q"┃
     font-size                : 80%%;
     margin-left              : 6em;
   }%s
+  /* flex */
+  .flex-menu-bar {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-flex-wrap        : wrap;
+    -webkit-align-items      : center;
+    align-items              : center;
+    width                    : 100%%;
+    margin-left              : 0%%;
+    margin-right             : 2%%;
+    background-color         : inherited;
+  }
+  .flex-menu-option {
+    background-color         : inherited;
+    margin-right             : 4px;
+  }
+  .flex-list {
+    display                  : -webkit-flex;
+    display                  : flex;
+    -webkit-align-items      : center;
+    display                  : block;
+    align-items              : center;
+    width                    : 100%%;
+    background-color         : inherited;
+  }
+  .flex-list-item {
+    background-color         : inherited;
+    margin                   : 4px;
+  }
 </style>
 <link rel="shortcut icon" href="../_sisu/image/rb7.ico" />
 </head>
@@ -310,13 +378,21 @@ string theme_light_1 = format(q"┃
 <a name="up" id="up"></a>
 <a name="start" id="start"></a>
 <h1>Metadata Harvest - Topics (output organised by language &amp; filetype)</h1>
-<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>] [<a href="authors.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Authors&nbsp;</a>]</p>
+<div class="flex-menu-bar">
+<div class="flex-menu-option">
+<p>[<a href="../../index.html">&nbsp;HOME&nbsp;</a>]
+ [<a href="authors.html">&nbsp;Metadata&nbsp;Harvest&nbsp;-&nbsp;Authors&nbsp;</a>]
+</p>
+</div>
+ %s
+</div>
 <p><a href="#A">A</a>,&nbsp;<a href="#B">B</a>,&nbsp;<a href="#C">C</a>,&nbsp;<a href="#D">D</a>,&nbsp;<a href="#E">E</a>,&nbsp;<a href="#F">F</a>,&nbsp;<a href="#G">G</a>,&nbsp;<a href="#H">H</a>,&nbsp;<a href="#I">I</a>,&nbsp;<a href="#J">J</a>,&nbsp;<a href="#K">K</a>,&nbsp;<a href="#L">L</a>,&nbsp;<a href="#M">M</a>,&nbsp;<a href="#N">N</a>,&nbsp;<a href="#O">O</a>,&nbsp;<a href="#P">P</a>,&nbsp;<a href="#Q">Q</a>,&nbsp;<a href="#R">R</a>,&nbsp;<a href="#S">S</a>,&nbsp;<a href="#T">T</a>,&nbsp;<a href="#U">U</a>,&nbsp;<a href="#V">V</a>,&nbsp;<a href="#W">W</a>,&nbsp;<a href="#X">X</a>,&nbsp;<a href="#Y">Y</a>,&nbsp;<a href="#Z">Z</a>,&nbsp;
 <p></p>
 <hr />
 ┃",
   _opt_action.css_theme_default ? theme_light_0 : theme_dark_0,
   _opt_action.css_theme_default ? theme_light_1 : theme_dark_1,
+  inline_search_form(_make_and_meta_struct),
 ) ~ "\n";
       char _prev_k = "_".to!char;
       int _kn;