html css using grid & flex (remove tables)

1 files changed, 120 insertions, 16 deletions

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%;