html css using grid & flex (remove tables)

7 files changed, 487 insertions, 244 deletions

diff --git a/org/meta_abstraction.org b/org/meta_abstraction.org
index 63ac9ba..f7291cf 100644
--- a/org/meta_abstraction.org
+++ b/org/meta_abstraction.org
@@ -4216,7 +4216,7 @@ auto _heading_matched_(L,C,O,K,Lv,Lc,T,Me)(
 #+name: abs_functions_para
 #+BEGIN_SRC d
 void _para_match_(L,O,K,I,B,T,C)(
-             L  line, // watch
+             L  line,
   return ref O  an_object,
   return ref K  an_object_key,
   return ref I  indent,
diff --git a/org/output_xmls.org b/org/output_xmls.org
index ffbd7ed..a89cc88 100644
--- a/org/output_xmls.org
+++ b/org/output_xmls.org
@@ -51,6 +51,47 @@ import
 #+END_SRC
 
 *** misc
+**** div delimiter
+
+#+name: xhtml_format_objects
+#+BEGIN_SRC d
+string div_delimit(
+  string                     part,
+  return ref string          previous_part
+){
+  string delimit = "";
+  string delimit_ = "";
+  if (part != previous_part) {
+    switch (part) {
+    case "head":
+      delimit_ ~= "\n<div class=\"doc_title\">\n" ;
+      break;
+    case "toc_seg":
+      delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+      break;
+    case "toc_scroll":
+      delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+      break;
+    case "bookindex_seg":
+      delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+      break;
+    case "bookindex_scroll":
+      delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+      break;
+    default:
+      delimit_ ~= "\n<div class=\"doc_" ~ part ~ "\">\n" ;
+      break;
+    }
+    if (previous_part.length > 0) {
+      delimit ~= "\n</div>";
+    }
+    previous_part = part;
+    delimit ~=  delimit_;
+  }
+  // you also need to close the last div, introduce a footer?
+  return delimit;
+}
+#+END_SRC
 **** special characters
 
 #+name: xhtml_format_objects
@@ -195,21 +236,17 @@ auto site_info_button(Dm)(
   string _location_3_url ="http://www.sisudoc.org";
   string _location_3_lnk ="sisu";
   string o;
-  o = format(q"¶<!-- Site info button close -->
- <table summary="home button / home information" border="0" cellpadding="3" cellspacing="0">
- <tr><td align="left" bgcolor="#ffffff">
-  <p class="tiny_left"><a href="%s" target="_top">
-    %s
-  </a></p>
-  <p class="tiny_left"><a href="%s" target="_top">
-    %s
-  </a></p>
-  <p class="tiny_left"><a href="%s" target="_top">
-    %s
-  </a></p>
- </td></tr>
- </table>
- <!-- Site info button close -->¶",
+  o = format(q"¶<div class="flex-menu-option">
+      <p class="tiny_left"><a href="%s" target="_top">
+        %s
+      </a></p>
+      <p class="tiny_left"><a href="%s" target="_top">
+        %s
+      </a></p>
+      <p class="tiny_left"><a href="%s" target="_top">
+        %s
+      </a></p>
+    </div>¶",
   _location_1_url,
   _location_1_lnk,
   _location_2_url,
@@ -231,19 +268,19 @@ auto inline_search_form(Dm)(
   string _action="http://www.sisudoc.org/cgi-bin/search.cgi";
   string _db="SiSU.7a.manual";
   string o;
-  o = format(q"¶<!-- SiSU Search open -->
-<a name="search"></a>
-<form method="get" action="%s" target="_top">
-<font size="2">
-<input type="text" name="s1" size="24" maxlength="255" />
-<input type="hidden" name="db" value="%s" />
-<input type="hidden" name="ltd" value="1000" />
-<input type="hidden" name="off" value="0" />
-<input type="hidden" name="doc" value="live-manual" /><br />
-<input type="submit" name="search" value="search doc" />
-<input type="submit" name="search" value="search db" />
-</font></form>
-<!-- SiSU Search close -->¶",
+  o = format(q"¶<div class="flex-menu-option">
+      <a name="search"></a>
+      <form method="get" action="%s" target="_top">
+      <font size="2">
+      <input type="text" name="s1" size="24" maxlength="255" />
+      <input type="hidden" name="db" value="%s" />
+      <input type="hidden" name="ltd" value="1000" />
+      <input type="hidden" name="off" value="0" />
+      <input type="hidden" name="doc" value="live-manual" /><br />
+      <input type="submit" name="search" value="search doc" />
+      <input type="submit" name="search" value="search db" />
+      </font></form>
+    </div>¶",
   _action,
   _db,
   );
@@ -276,34 +313,17 @@ auto html_head(Dm)(
 </head>
 <body lang="%s">
 <a name="top" id="top"></a>
-<div class="icon-bar">
-<div class="left-bar">
-<div class="table-bar">
-<table summary="table of contents segment navigation band" id="toc" width="85%%" bgcolor="#ffffff">
-<tr><td width="20%%">
- <!-- Site info button open -->
- %s
- <!-- Site info button close -->
-</td>
-<td width="75%%" align="center">
-<table summary="segment navigation available documents types: toc,doc,pdf,concordance" border="0" cellpadding="3" cellspacing="0">
-<tr>
-<td align="center" bgcolor="#ffffff">
-  <td align="center" bgcolor="#ffffff">
-  <a href="../../manifest/sisu.en.html" target="_top">
-    <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
-      [&nbsp;document&nbsp;manifest&nbsp;]
-    </font>
-  </a>
-</td>
-  <!-- SiSU Search open -->
-   %s
-  <!-- SiSU Search close -->
-</tr></table>
-</td>
-</table>
-</div>
-</div>%s¶",
+<div class='delimit headband'>
+  <div class="flex-menu-bar">
+    %s
+    <div class="flex-menu-option">
+      <a href="../../manifest/sisu.en.html" target="_top">
+        <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
+          [&nbsp;document&nbsp;manifest&nbsp;]
+        </font>
+      </a>
+    </div>
+    %s%s¶",
     doc_matters.dochead_meta["title"]["full"],
     (doc_matters.dochead_meta["creator"]["author"].empty) ? ""
       : ", " ~ doc_matters.dochead_meta["creator"]["author"],
@@ -389,7 +409,8 @@ auto epub3_seg_head(Dm)(
 #+BEGIN_SRC d
 auto tail() {
   string o;
-  o = format(q"¶  <a name="bottom" id="bottom"></a>
+  o = format(q"¶  </div>
+  <a name="bottom" id="bottom"></a>
   <a name="end" id="end"></a>
 </body>
 </html>¶");
@@ -597,66 +618,62 @@ auto nav_pre_next_svg(O)(
     toc = "";
     prev = "";
   } else {
-    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"/>
-          </svg>
-        </div>
-      </a>
-¶",
+    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"/>
+            </svg>
+          </div>
+        </a>¶",
     );
   }
   if (obj.segname_prev == "") {
     prev = "";
-  } else {                               // previous
-    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)">
-          </svg>
-        </div>
-      </a>
-¶",
+  } else {
+    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)">
+            </svg>
+          </div>
+        </a>¶",
       obj.segname_prev,
     );
   }
-  if (obj.segname_next == "") {            // next
+  if (obj.segname_next == "") {
     next = "";
   } else {
-    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) ">
-          </svg>
-        </div>
-      </a>
-¶",
+    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) ">
+            </svg>
+          </div>
+        </a>¶",
       obj.segname_next,
     );
   }
-  string _toc_pre_next = format(q"¶
-   <!-- <div class="icon-bar"> -->
-    <div class="nav-bar">
-      %s
-      %s
-      %s
+  string _toc_pre_next = format(q"¶        <div class="flex-menu-option">
+      <div class="nav-bar">
+        %s
+        %s
+        %s
+      </div>
     </div>
   </div>
-¶",
+</div>¶",
     toc,
     prev,
     next,
   );
-  string _pre_next = format(q"¶
-    <div class="nav-bar">
-      %s
-      %s
+  string _pre_next = format(q"¶        <div class="flex-menu-option">
+      <div class="nav-bar">
+        %s
+        %s
+      </div>
     </div>
-¶",
+  </div>
+</div>¶",
     prev,
     next,
   );
@@ -1306,8 +1323,11 @@ void scroll(D,I)(
   string[] doc_html;
   string[] doc;
   string suffix = ".html";
+  string previous_part = "";
+  string delimit = "";
   foreach (part; doc_matters.keys_seq.scroll) {
     foreach (obj; doc_abstraction[part]) {
+      delimit = xhtml_format.div_delimit(part, previous_part);
       string _txt = xhtml_format.special_characters(obj, obj.text);
       switch (obj.of_part) {
       case "frontmatter":              assert(part == "head" || "toc_scroll");
@@ -1315,7 +1335,7 @@ void scroll(D,I)(
         case "para":
           switch (obj.is_a) {
           case "heading":
-            doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+            doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
             break;
           case "toc":
             doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1339,7 +1359,7 @@ void scroll(D,I)(
         case "para":
           switch (obj.is_a) {
           case "heading":
-            doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+            doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
             break;
           case "para":
             doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1393,7 +1413,7 @@ void scroll(D,I)(
         case "para":
           switch (obj.is_a) {
           case "heading":
-            doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+            doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
             break;
           case "endnote":              assert(part == "endnotes");
             doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1489,11 +1509,13 @@ void seg(D,I)(
   string[] doc;
   string segment_filename;
   string[] top_level_headings = ["","","",""];
-  string _bottom_bar ="";
   string previous_seg_filename = "";
   string suffix = ".html";
+  string previous_part = "";
+  string delimit = "";
   foreach (part; doc_matters.keys_seq.seg) {
     foreach (obj; doc_abstraction[part]) {
+      delimit = xhtml_format.div_delimit(part, previous_part);
       string _txt = xhtml_format.special_characters(obj, obj.text);
       if (obj.is_a == "heading") {
         assert(part == "head" || "toc_seg" || "body" || "endnotes" || "glossary" || "bibliography" || "bookindex_seg" || "blurb" || "tail");
@@ -1528,10 +1550,8 @@ void seg(D,I)(
         case 4:
           segment_filename = obj.segment_anchor_tag;
           doc_html[segment_filename] ~= xhtml_format.html_head(doc_matters, "seg");
-          doc_html_endnotes[previous_seg_filename] ~= _bottom_bar; // places after segment text and endnotes
           auto navigation_bar = xhtml_format.nav_pre_next_svg(obj);
-          doc_html[segment_filename] ~= navigation_bar.toc_pre_next;
-          _bottom_bar = navigation_bar.toc_pre_next;
+          doc_html[segment_filename] ~= navigation_bar.toc_pre_next; // navigation bar
           previous_seg_filename = segment_filename;
           foreach (top_level_heading; top_level_headings) {
             // writeln(top_level_heading);
diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org
index 1adb168..574d562 100644
--- a/org/output_xmls_css.org
+++ b/org/output_xmls_css.org
@@ -47,6 +47,124 @@ template SiSUcss() {
 
 #+name: css_shared
 #+BEGIN_SRC css
+  *{
+    padding: 0px;
+    margin: 0px;
+  }
+  body {
+    height: 100vh;
+    background-color: #ffffff;
+  }
+  /* flex */
+  .flex-menu-bar {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -webkit-align-items: center;
+    align-items: center;
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .flex-menu-option {
+    background-color: white;
+    margin: 8px;
+  }
+  .flex-list {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    display: block;
+    align-items: center;
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .flex-list-item {
+    background-color: white;
+    margin: 4px;
+  }
+  /* grid */
+  .wrapper {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      \"headband\"
+      \"doc_header\"
+      \"doc_title\"
+      \"doc_toc\"
+      \"doc_prefix\"
+      \"doc_intro\"
+      \"doc_body\"
+      \"doc_endnotes\"
+      \"doc_glossary\"
+      \"doc_biblio\"
+      \"doc_bookindex\"
+      \"doc_blurb\"
+      \"doc_suffix\";
+    margin: 0px;
+    padding: 0px;
+    background-color: #ffffff;
+  }
+  .delimit {
+    border-style: none;
+    border-color: white;
+    padding: 10px;
+  }
+  .headband {
+    grid-area: headband;
+    background-color: #ffffff;
+  }
+  .doc_header {
+    grid-area: doc_header;
+  }
+  .doc_title {
+    grid-area: doc_title;
+  }
+  .doc_toc {
+    grid-area: doc_toc;
+  }
+  .doc_prefix {
+    grid-area: doc_prefix;
+  }
+  .doc_intro {
+    grid-area: doc_intro;
+  }
+  .doc_body {
+    grid-area: doc_body;
+  }
+  .doc_endnotes {
+    grid-area: doc_endnotes;
+  }
+  .doc_glossary {
+    grid-area: doc_glossary;
+  }
+  .doc_biblio {
+    grid-area: doc_biblio;
+  }
+  .doc_bookindex {
+    grid-area: doc_bookindex;
+  }
+  .doc_blurb {
+    grid-area: doc_blurb;
+  }
+  .doc_suffix {
+    grid-area: doc_suffix;
+  }
+  .nav-ul {
+    list-style: none;
+    float: left;
+  }
+  .nav-li {
+    float: left;
+    padding-right: 0.7em;
+  }
+  .nav-li a {
+    text-decoration: none;
+    color: white;
+  }
+  footer {
+    background-color: #00704e;
+  }
+  /* regular */
   body {
     color: black;
     background: #ffffff;
@@ -906,23 +1024,9 @@ template SiSUcss() {
     display: inline;
     overflow: auto;
   }
-  .table-bar {
-    float: left;
-    overflow: auto;
-    width: 100%;
-    display: inline;
-  }
-  .nav-bar {
-    width: 15%;
-    float: right;
-    display: inline;
-    transition: all 0.3s ease;
-    position: relative;
-    padding-bottom: 3em;
-    background: #ffffff;
-  }
   .toc-button {
     position: absolute;
+    top: 8px;
     width: 2em;
     height: 2em;
     border-radius: 50%;
@@ -941,7 +1045,7 @@ template SiSUcss() {
   }
   .prev-next-button {
     position: absolute;
-    top: 0em;
+    top: 8px;
     width: 2em;
     height: 2em;
     border-radius: 50%;
diff --git a/src/sdp/meta/metadoc_from_src.d b/src/sdp/meta/metadoc_from_src.d
index 5445333..732dbd0 100644
--- a/src/sdp/meta/metadoc_from_src.d
+++ b/src/sdp/meta/metadoc_from_src.d
@@ -3358,7 +3358,7 @@ template SiSUdocAbstraction() {
     }
   }
   void _para_match_(L,O,K,I,B,T,C)(
-               L  line, // watch
+               L  line,
     return ref O  an_object,
     return ref K  an_object_key,
     return ref I  indent,
diff --git a/src/sdp/output/html.d b/src/sdp/output/html.d
index b961d4c..8145417 100644
--- a/src/sdp/output/html.d
+++ b/src/sdp/output/html.d
@@ -22,8 +22,11 @@ template outputHTML() {
     string[] doc_html;
     string[] doc;
     string suffix = ".html";
+    string previous_part = "";
+    string delimit = "";
     foreach (part; doc_matters.keys_seq.scroll) {
       foreach (obj; doc_abstraction[part]) {
+        delimit = xhtml_format.div_delimit(part, previous_part);
         string _txt = xhtml_format.special_characters(obj, obj.text);
         switch (obj.of_part) {
         case "frontmatter":              assert(part == "head" || "toc_scroll");
@@ -31,7 +34,7 @@ template outputHTML() {
           case "para":
             switch (obj.is_a) {
             case "heading":
-              doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+              doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
               break;
             case "toc":
               doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -55,7 +58,7 @@ template outputHTML() {
           case "para":
             switch (obj.is_a) {
             case "heading":
-              doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+              doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
               break;
             case "para":
               doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -109,7 +112,7 @@ template outputHTML() {
           case "para":
             switch (obj.is_a) {
             case "heading":
-              doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+              doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
               break;
             case "endnote":              assert(part == "endnotes");
               doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -192,11 +195,13 @@ template outputHTML() {
     string[] doc;
     string segment_filename;
     string[] top_level_headings = ["","","",""];
-    string _bottom_bar ="";
     string previous_seg_filename = "";
     string suffix = ".html";
+    string previous_part = "";
+    string delimit = "";
     foreach (part; doc_matters.keys_seq.seg) {
       foreach (obj; doc_abstraction[part]) {
+        delimit = xhtml_format.div_delimit(part, previous_part);
         string _txt = xhtml_format.special_characters(obj, obj.text);
         if (obj.is_a == "heading") {
           assert(part == "head" || "toc_seg" || "body" || "endnotes" || "glossary" || "bibliography" || "bookindex_seg" || "blurb" || "tail");
@@ -231,10 +236,8 @@ template outputHTML() {
           case 4:
             segment_filename = obj.segment_anchor_tag;
             doc_html[segment_filename] ~= xhtml_format.html_head(doc_matters, "seg");
-            doc_html_endnotes[previous_seg_filename] ~= _bottom_bar; // places after segment text and endnotes
             auto navigation_bar = xhtml_format.nav_pre_next_svg(obj);
-            doc_html[segment_filename] ~= navigation_bar.toc_pre_next;
-            _bottom_bar = navigation_bar.toc_pre_next;
+            doc_html[segment_filename] ~= navigation_bar.toc_pre_next; // navigation bar
             previous_seg_filename = segment_filename;
             foreach (top_level_heading; top_level_headings) {
               // writeln(top_level_heading);
diff --git a/src/sdp/output/xmls.d b/src/sdp/output/xmls.d
index c100bbc..57056de 100644
--- a/src/sdp/output/xmls.d
+++ b/src/sdp/output/xmls.d
@@ -14,6 +14,42 @@ template outputXHTMLs() {
   mixin SiSUoutputRgxInit;
   struct outputXHTMLs {
     static auto rgx = Rgx();
+    string div_delimit(
+      string                     part,
+      return ref string          previous_part
+    ){
+      string delimit = "";
+      string delimit_ = "";
+      if (part != previous_part) {
+        switch (part) {
+        case "head":
+          delimit_ ~= "\n<div class=\"doc_title\">\n" ;
+          break;
+        case "toc_seg":
+          delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+          break;
+        case "toc_scroll":
+          delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+          break;
+        case "bookindex_seg":
+          delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+          break;
+        case "bookindex_scroll":
+          delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+          break;
+        default:
+          delimit_ ~= "\n<div class=\"doc_" ~ part ~ "\">\n" ;
+          break;
+        }
+        if (previous_part.length > 0) {
+          delimit ~= "\n</div>";
+        }
+        previous_part = part;
+        delimit ~=  delimit_;
+      }
+      // you also need to close the last div, introduce a footer?
+      return delimit;
+    }
     string special_characters(O)(
       auto return ref const O    obj,
       string                     _txt
@@ -123,21 +159,17 @@ template outputXHTMLs() {
       string _location_3_url ="http://www.sisudoc.org";
       string _location_3_lnk ="sisu";
       string o;
-      o = format(q"¶<!-- Site info button close -->
-     <table summary="home button / home information" border="0" cellpadding="3" cellspacing="0">
-     <tr><td align="left" bgcolor="#ffffff">
-      <p class="tiny_left"><a href="%s" target="_top">
-        %s
-      </a></p>
-      <p class="tiny_left"><a href="%s" target="_top">
-        %s
-      </a></p>
-      <p class="tiny_left"><a href="%s" target="_top">
-        %s
-      </a></p>
-     </td></tr>
-     </table>
-     <!-- Site info button close -->¶",
+      o = format(q"¶<div class="flex-menu-option">
+          <p class="tiny_left"><a href="%s" target="_top">
+            %s
+          </a></p>
+          <p class="tiny_left"><a href="%s" target="_top">
+            %s
+          </a></p>
+          <p class="tiny_left"><a href="%s" target="_top">
+            %s
+          </a></p>
+        </div>¶",
       _location_1_url,
       _location_1_lnk,
       _location_2_url,
@@ -153,19 +185,19 @@ template outputXHTMLs() {
       string _action="http://www.sisudoc.org/cgi-bin/search.cgi";
       string _db="SiSU.7a.manual";
       string o;
-      o = format(q"¶<!-- SiSU Search open -->
-    <a name="search"></a>
-    <form method="get" action="%s" target="_top">
-    <font size="2">
-    <input type="text" name="s1" size="24" maxlength="255" />
-    <input type="hidden" name="db" value="%s" />
-    <input type="hidden" name="ltd" value="1000" />
-    <input type="hidden" name="off" value="0" />
-    <input type="hidden" name="doc" value="live-manual" /><br />
-    <input type="submit" name="search" value="search doc" />
-    <input type="submit" name="search" value="search db" />
-    </font></form>
-    <!-- SiSU Search close -->¶",
+      o = format(q"¶<div class="flex-menu-option">
+          <a name="search"></a>
+          <form method="get" action="%s" target="_top">
+          <font size="2">
+          <input type="text" name="s1" size="24" maxlength="255" />
+          <input type="hidden" name="db" value="%s" />
+          <input type="hidden" name="ltd" value="1000" />
+          <input type="hidden" name="off" value="0" />
+          <input type="hidden" name="doc" value="live-manual" /><br />
+          <input type="submit" name="search" value="search doc" />
+          <input type="submit" name="search" value="search db" />
+          </font></form>
+        </div>¶",
       _action,
       _db,
       );
@@ -192,34 +224,17 @@ template outputXHTMLs() {
     </head>
     <body lang="%s">
     <a name="top" id="top"></a>
-    <div class="icon-bar">
-    <div class="left-bar">
-    <div class="table-bar">
-    <table summary="table of contents segment navigation band" id="toc" width="85%%" bgcolor="#ffffff">
-    <tr><td width="20%%">
-     <!-- Site info button open -->
-     %s
-     <!-- Site info button close -->
-    </td>
-    <td width="75%%" align="center">
-    <table summary="segment navigation available documents types: toc,doc,pdf,concordance" border="0" cellpadding="3" cellspacing="0">
-    <tr>
-    <td align="center" bgcolor="#ffffff">
-      <td align="center" bgcolor="#ffffff">
-      <a href="../../manifest/sisu.en.html" target="_top">
-        <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
-          [&nbsp;document&nbsp;manifest&nbsp;]
-        </font>
-      </a>
-    </td>
-      <!-- SiSU Search open -->
-       %s
-      <!-- SiSU Search close -->
-    </tr></table>
-    </td>
-    </table>
-    </div>
-    </div>%s¶",
+    <div class='delimit headband'>
+      <div class="flex-menu-bar">
+        %s
+        <div class="flex-menu-option">
+          <a href="../../manifest/sisu.en.html" target="_top">
+            <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
+              [&nbsp;document&nbsp;manifest&nbsp;]
+            </font>
+          </a>
+        </div>
+        %s%s¶",
         doc_matters.dochead_meta["title"]["full"],
         (doc_matters.dochead_meta["creator"]["author"].empty) ? ""
           : ", " ~ doc_matters.dochead_meta["creator"]["author"],
@@ -293,7 +308,8 @@ template outputXHTMLs() {
     }
     auto tail() {
       string o;
-      o = format(q"¶  <a name="bottom" id="bottom"></a>
+      o = format(q"¶  </div>
+      <a name="bottom" id="bottom"></a>
       <a name="end" id="end"></a>
     </body>
     </html>¶");
@@ -457,66 +473,62 @@ template outputXHTMLs() {
         toc = "";
         prev = "";
       } else {
-        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"/>
-              </svg>
-            </div>
-          </a>
-    ¶",
+        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"/>
+                </svg>
+              </div>
+            </a>¶",
         );
       }
       if (obj.segname_prev == "") {
         prev = "";
-      } else {                               // previous
-        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)">
-              </svg>
-            </div>
-          </a>
-    ¶",
+      } else {
+        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)">
+                </svg>
+              </div>
+            </a>¶",
           obj.segname_prev,
         );
       }
-      if (obj.segname_next == "") {            // next
+      if (obj.segname_next == "") {
         next = "";
       } else {
-        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) ">
-              </svg>
-            </div>
-          </a>
-    ¶",
+        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) ">
+                </svg>
+              </div>
+            </a>¶",
           obj.segname_next,
         );
       }
-      string _toc_pre_next = format(q"¶
-       <!-- <div class="icon-bar"> -->
-        <div class="nav-bar">
-          %s
-          %s
-          %s
+      string _toc_pre_next = format(q"¶        <div class="flex-menu-option">
+          <div class="nav-bar">
+            %s
+            %s
+            %s
+          </div>
         </div>
       </div>
-    ¶",
+    </div>¶",
         toc,
         prev,
         next,
       );
-      string _pre_next = format(q"¶
-        <div class="nav-bar">
-          %s
-          %s
+      string _pre_next = format(q"¶        <div class="flex-menu-option">
+          <div class="nav-bar">
+            %s
+            %s
+          </div>
         </div>
-    ¶",
+      </div>
+    </div>¶",
         prev,
         next,
       );
diff --git a/src/sdp/output/xmls_css.d b/src/sdp/output/xmls_css.d
index 637bca9..0165e56 100644
--- a/src/sdp/output/xmls_css.d
+++ b/src/sdp/output/xmls_css.d
@@ -5,6 +5,124 @@ module sdp.output.xmls_css;
 template SiSUcss() {
   auto SiSUcss() {
     string css_shared="
+  *{
+    padding: 0px;
+    margin: 0px;
+  }
+  body {
+    height: 100vh;
+    background-color: #ffffff;
+  }
+  /* flex */
+  .flex-menu-bar {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -webkit-align-items: center;
+    align-items: center;
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .flex-menu-option {
+    background-color: white;
+    margin: 8px;
+  }
+  .flex-list {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    display: block;
+    align-items: center;
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .flex-list-item {
+    background-color: white;
+    margin: 4px;
+  }
+  /* grid */
+  .wrapper {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      \"headband\"
+      \"doc_header\"
+      \"doc_title\"
+      \"doc_toc\"
+      \"doc_prefix\"
+      \"doc_intro\"
+      \"doc_body\"
+      \"doc_endnotes\"
+      \"doc_glossary\"
+      \"doc_biblio\"
+      \"doc_bookindex\"
+      \"doc_blurb\"
+      \"doc_suffix\";
+    margin: 0px;
+    padding: 0px;
+    background-color: #ffffff;
+  }
+  .delimit {
+    border-style: none;
+    border-color: white;
+    padding: 10px;
+  }
+  .headband {
+    grid-area: headband;
+    background-color: #ffffff;
+  }
+  .doc_header {
+    grid-area: doc_header;
+  }
+  .doc_title {
+    grid-area: doc_title;
+  }
+  .doc_toc {
+    grid-area: doc_toc;
+  }
+  .doc_prefix {
+    grid-area: doc_prefix;
+  }
+  .doc_intro {
+    grid-area: doc_intro;
+  }
+  .doc_body {
+    grid-area: doc_body;
+  }
+  .doc_endnotes {
+    grid-area: doc_endnotes;
+  }
+  .doc_glossary {
+    grid-area: doc_glossary;
+  }
+  .doc_biblio {
+    grid-area: doc_biblio;
+  }
+  .doc_bookindex {
+    grid-area: doc_bookindex;
+  }
+  .doc_blurb {
+    grid-area: doc_blurb;
+  }
+  .doc_suffix {
+    grid-area: doc_suffix;
+  }
+  .nav-ul {
+    list-style: none;
+    float: left;
+  }
+  .nav-li {
+    float: left;
+    padding-right: 0.7em;
+  }
+  .nav-li a {
+    text-decoration: none;
+    color: white;
+  }
+  footer {
+    background-color: #00704e;
+  }
+  /* regular */
   body {
     color: black;
     background: #ffffff;
@@ -864,23 +982,9 @@ template SiSUcss() {
     display: inline;
     overflow: auto;
   }
-  .table-bar {
-    float: left;
-    overflow: auto;
-    width: 100%;
-    display: inline;
-  }
-  .nav-bar {
-    width: 15%;
-    float: right;
-    display: inline;
-    transition: all 0.3s ease;
-    position: relative;
-    padding-bottom: 3em;
-    background: #ffffff;
-  }
   .toc-button {
     position: absolute;
+    top: 8px;
     width: 2em;
     height: 2em;
     border-radius: 50%;
@@ -899,7 +1003,7 @@ template SiSUcss() {
   }
   .prev-next-button {
     position: absolute;
-    top: 0em;
+    top: 8px;
     width: 2em;
     height: 2em;
     border-radius: 50%;