From dfd85dee88c5b6061a573126b21319ab6bebe03c Mon Sep 17 00:00:00 2001
From: Ralph Amissah <ralph@amissah.com>
Date: Mon, 7 Aug 2017 08:01:27 -0400
Subject: css, separate files and reorganization

- separate files for html seg, scroll & epub
- output_xmls_css.org, reorganized org file
---
 org/output_xmls_css.org | 1018 ++++++++++++++++++++++++++++-------------------
 1 file changed, 611 insertions(+), 407 deletions(-)

(limited to 'org/output_xmls_css.org')

diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org
index 574d562..7bef1dd 100644
--- a/org/output_xmls_css.org
+++ b/org/output_xmls_css.org
@@ -25,16 +25,29 @@
 module sdp.output.xmls_css;
 template SiSUcss() {
   auto SiSUcss() {
-    string css_shared="
+    string _css_html_seg="
 <<css_shared>>
+<<css_html_seg>>
+";
+    string _css_html_scroll="
+<<css_shared>>
+<<css_html_scroll>>
+";
+    string _css_epub="
+<<css_shared>>
+<<css_epub>>
 ";
     struct _css {
-      auto html_css() {
-        string _css = "/* SiSU css html stylesheet */\n" ~ css_shared;
+      auto html_seg_css() {
+        string _css = "/* SiSU css html seg stylesheet */\n" ~ _css_html_seg;
+        return _css;
+      }
+      auto html_scroll_css() {
+        string _css = "/* SiSU css html scroll stylesheet */\n" ~ _css_html_scroll;
         return _css;
       }
       auto epub_css() {
-        string _css = "/* SiSU css epub stylesheet */\n" ~ css_shared;
+        string _css = "/* SiSU css epub stylesheet */\n" ~ _css_epub;
         return _css;
       }
     }
@@ -43,7 +56,9 @@ template SiSUcss() {
 }
 #+END_SRC
 
-** shared_css
+** css
+*** html shared
+**** general
 
 #+name: css_shared
 #+BEGIN_SRC css
@@ -55,121 +70,17 @@ template SiSUcss() {
     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;
     background-color: #ffffff;
   }
+#+END_SRC
+
+**** link
+
+#+name: css_shared
+#+BEGIN_SRC css
   a:link {
     color: #003399;
     text-decoration: none;
@@ -193,6 +104,12 @@ template SiSUcss() {
     color: #003399;
     text-decoration: underline;
   }
+#+END_SRC
+
+**** div
+
+#+name: css_shared
+#+BEGIN_SRC css
   div {
     margin-left: 0;
     margin-right: 0;
@@ -201,6 +118,114 @@ template SiSUcss() {
     margin-left: 5%;
     margin-right: 1%;
   }
+  div.substance {
+    width: 100%;
+    background-color: #ffffff;
+  }
+  div.ocn {
+    width: 5%;
+    float: right;
+    top: 0;
+    background-color: #ffffff;
+  }
+  div.endnote {
+    width: 95%;
+    background-color: #fffffff;
+  }
+  div.toc {
+    position: absolute;
+    float: left;
+    margin: 0;
+    padding: 0;
+    padding-top: 0.5em;
+    border: 0;
+    width: 13em;
+    background-color: #eeeeee;
+    margin-right:1em;
+  }
+  div.summary {
+    margin: 0;
+    padding: 0;
+    border-left: 13em solid #eeeeee;
+    padding-left: 1em;
+    background-color: #eeeeee;
+  }
+  div.content, div.main_column {
+    margin: 0;
+    padding: 0;
+    border-left: 13em solid #ffffff;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  div.content0, div.main_column0 {
+    margin: 0;
+    padding: 0;
+    border-left: 0% solid #ffffff;
+    padding-left: 5%;
+  }
+  div.scroll {
+    margin: 0;
+    padding: 0;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  div.content:after {
+    content:' ';
+    clear:both;
+    display:block;
+    height:0;
+    overflow:hidden
+  }
+  div.footer {
+    clear:left;
+    padding: 0.5em;
+    font-size: 80%;
+    margin: 0;
+  }
+  div.toc ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  div.toc li ul a, li ul span.currentlink
+  {
+    font-weight: normal;
+    font-size: 90%;
+    padding-left: 2em;
+    background-color: #eeeeee;
+  }
+  div.toc a, span.currentlink{
+    display:block;
+    text-decoration: none;
+    padding-left: 0.5em;
+    color: #0000aa;
+  }
+  hr {
+    width: 90%;
+    margin-top: 1.8em;
+    margin-bottom: 1.8em;
+  }
+  span.currentlink {
+    text-decoration: none;
+    background-color: #aaaaf9;
+  }
+  div.toc a:visited {
+    color: #0000aa;
+  }
+  div.toc a:hover {
+    color: #000000;
+    background-color: #f9f9aa;
+  }
+  nav#toc ol {
+    list-style-type: none;
+  }
+#+END_SRC
+
+**** paragraphs headings blocks
+***** misc
+
+#+name: css_shared
+#+BEGIN_SRC css
   .norm, .bold, .verse, .group, .block, .alt {
     line-height: 133%;
     margin-left: 0em;
@@ -223,27 +248,161 @@ template SiSUcss() {
     margin-top: 0.8em;
     margin-bottom: 0.8em;
   }
+#+END_SRC
+
+***** paragraph general
+
+#+name: css_shared
+#+BEGIN_SRC css
   /* spaced */
   p.spaced { white-space: pre; }
-  /* indent */
-  p.norm { }
-  p.i1 { padding-left: 1em; }
-  p.i2 { padding-left: 2em; }
-  p.i3 { padding-left: 3em; }
-  p.i4 { padding-left: 4em; }
-  p.i5 { padding-left: 5em; }
-  p.i6 { padding-left: 6em; }
-  p.i7 { padding-left: 7em; }
-  p.i8 { padding-left: 8em; }
-  p.i9 { padding-left: 9em; }
-  /* hanging indent */
-  p[indent=\"h0i0\"] {
-    padding-left: 0em;
-    text-indent:  0em;
+  p.block {
+    white-space: pre;
   }
-  p[indent=\"h0i1\"] {
-    padding-left: 1em;
-    text-indent: -1em;
+  p.group { }
+  p.alt { }
+  p.verse {
+    white-space: pre;
+    margin-bottom: 6px;
+  }
+  p.code {
+    font-family: inconsolata, andale mono, courier new, courier, monospace;
+    font-size: 90%;
+    text-align: left;
+    background-color: #eeeeee;
+    white-space: pre;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+  p.caption {
+    text-align: left;
+    font-size: 80%;
+    display: inline;
+  }
+  p.endnote {
+    font-size: 96%;
+    line-height: 120%;
+    text-align: left;
+    margin-right: 15mm;
+  }
+  p.endnote_indent {
+    font-size: 96%;
+    line-height: 120%;
+    text-align: left;
+    margin-left: 2em;
+    margin-right: 15mm;
+  }
+  p.center {
+    text-align: center;
+  }
+  p.bold {
+    font-weight: bold;
+  }
+  p.bold_left {
+    font-weight: bold;
+    text-align: left;
+  }
+  p.centerbold {
+    text-align: center;
+    font-weight: bold;
+  }
+  p.em {
+    font-weight: bold;
+    font-style: normal;
+    background: #fff3b6;
+  }
+  p.small {
+    font-size: 80%;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 6px;
+    text-align: left;
+  }
+  .tiny, .tiny_left, .tiny_right, .tiny_center {
+    font-size: 10px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    color: #777777;
+    margin-right: 6px;
+    text-align: left;
+  }
+  p.tiny { }
+  p.tiny_left {
+    margin-left: 0px;
+    margin-right: 0px;
+    text-align: left;
+  }
+  p.tiny_right {
+    margin-right: 1em;
+    text-align: right;
+  }
+  p.tiny_center {
+    margin-left: 0px;
+    margin-right: 0px;
+    text-align: center;
+  }
+  p.concordance_word {
+    line-height: 150%;
+    font-weight: bold;
+    display: inline;
+    margin-top: 4px;
+    margin-bottom: 1px;
+  }
+  p.concordance_count {
+    font-size: 80%;
+    color: #777777;
+    display: inline;
+    margin-left: 0em;
+  }
+  p.concordance_object {
+    font-size: 80%;
+    line-height: 120%;
+    text-align: left;
+    margin-left: 3em;
+    margin-top: 1px;
+    margin-bottom: 3px;
+  }
+  p.book_index_lev1 {
+    line-height: 100%;
+    margin-top: 4px;
+    margin-bottom: 1px;
+  }
+  p.book_index_lev2 {
+    line-height: 100%;
+    text-align: left;
+    margin-left: 3em;
+    margin-top: 1px;
+    margin-bottom: 3px;
+  }
+  tt {
+    font-family: inconsolata, andale mono, courier new, courier, monospace;
+    background-color: #eeeeee;
+  }
+#+END_SRC
+
+***** paragraph indent
+
+#+name: css_shared
+#+BEGIN_SRC css
+  /* indent */
+  p.norm { }
+  p.i1 { padding-left: 1em; }
+  p.i2 { padding-left: 2em; }
+  p.i3 { padding-left: 3em; }
+  p.i4 { padding-left: 4em; }
+  p.i5 { padding-left: 5em; }
+  p.i6 { padding-left: 6em; }
+  p.i7 { padding-left: 7em; }
+  p.i8 { padding-left: 8em; }
+  p.i9 { padding-left: 9em; }
+  /* hanging indent */
+  p[indent=\"h0i0\"] {
+    padding-left: 0em;
+    text-indent:  0em;
+  }
+  p[indent=\"h0i1\"] {
+    padding-left: 1em;
+    text-indent: -1em;
   }
   p[indent=\"h0i2\"] {
     padding-left: 2em;
@@ -637,193 +796,83 @@ template SiSUcss() {
     padding-left: 9em;
     text-indent:  0em;
   }
-  p.block {
-    white-space: pre;
-  }
-  p.group { }
-  p.alt { }
-  p.verse {
-    white-space: pre;
-    margin-bottom: 6px;
-  }
-  p.code {
-    font-family: inconsolata, andale mono, courier new, courier, monospace;
-    font-size: 90%;
-    text-align: left;
-    background-color: #eeeeee;
-    white-space: pre;
+#+END_SRC
+
+***** misc including tables & lists
+
+#+name: css_shared
+#+BEGIN_SRC css
+  note { white-space: pre; }
+  label.ocn {
+    width: 2%;
+    float: right;
+    top: 0;
+    font-size: 10px;
     margin-top: 0px;
-    margin-bottom: 0px;
+    margin-bottom: 5px;
+    color: #777777;
+    margin-right: 5px;
+    text-align: right;
+    background-color: #ffffff;
   }
-  p.caption {
+  table { }
+  tr { }
+  th,td {
+    vertical-align: top;
     text-align: left;
-    font-size: 80%;
-    display: inline;
   }
-  p.endnote {
-    font-size: 96%;
-    line-height: 120%;
-    text-align: left;
-    margin-right: 15mm;
+  th {
+    font-weight: bold;
   }
-  p.endnote_indent {
-    font-size: 96%;
-    line-height: 120%;
+  em {
+    font-weight: bold;
+    font-style: italic;
+  }
+  p.left,th.left,td.left {
     text-align: left;
-    margin-left: 2em;
-    margin-right: 15mm;
   }
-  p.center {
-    text-align: center;
+  p.small_left,th.small_left,td.small_left {
+    text-align: left;
+    font-size: 80%;
   }
-  p.bold {
-    font-weight: bold;
+  p.right,th.right,td.right {
+    text-align: right;
   }
-  p.bold_left {
-    font-weight: bold;
+  ul, li {
+    list-style-type: none;
+    list-style: none;
+    padding-left: 20px;
+    display: block;
+    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
+    font-weight: normal;
+    line-height: 150%;
     text-align: left;
+    text-indent: 0mm;
+    margin-left: 1em;
+    margin-right: 2em;
+    margin-top: 3px;
+    margin-bottom: 3px;
   }
-  p.centerbold {
-    text-align: center;
-    font-weight: bold;
+  li {
+    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
   }
-  p.em {
-    font-weight: bold;
-    font-style: normal;
-    background: #fff3b6;
+  ul {
   }
-  p.small {
-    font-size: 80%;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-right: 6px;
+#+END_SRC
+
+***** headings
+
+#+name: css_shared
+#+BEGIN_SRC css
+  h0, h1, h2, h3, h4, h5, h6, h7 {
+    font-weight: bold;
+    line-height: 120%;
     text-align: left;
+    margin-top: 20px;
+    margin-bottom: 10px;
   }
-  .tiny, .tiny_left, .tiny_right, .tiny_center {
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: #777777;
-    margin-right: 6px;
-    text-align: left;
-  }
-  p.tiny { }
-  p.tiny_left {
-    margin-left: 0px;
-    margin-right: 0px;
-    text-align: left;
-  }
-  p.tiny_right {
-    margin-right: 1em;
-    text-align: right;
-  }
-  p.tiny_center {
-    margin-left: 0px;
-    margin-right: 0px;
-    text-align: center;
-  }
-  p.concordance_word {
-    line-height: 150%;
-    font-weight: bold;
-    display: inline;
-    margin-top: 4px;
-    margin-bottom: 1px;
-  }
-  p.concordance_count {
-    font-size: 80%;
-    color: #777777;
-    display: inline;
-    margin-left: 0em;
-  }
-  p.concordance_object {
-    font-size: 80%;
-    line-height: 120%;
-    text-align: left;
-    margin-left: 3em;
-    margin-top: 1px;
-    margin-bottom: 3px;
-  }
-  p.book_index_lev1 {
-    line-height: 100%;
-    margin-top: 4px;
-    margin-bottom: 1px;
-  }
-  p.book_index_lev2 {
-    line-height: 100%;
-    text-align: left;
-    margin-left: 3em;
-    margin-top: 1px;
-    margin-bottom: 3px;
-  }
-  tt {
-    font-family: inconsolata, andale mono, courier new, courier, monospace;
-    background-color: #eeeeee;
-  }
-  note { white-space: pre; }
-  label.ocn {
-    width: 2%;
-    float: right;
-    top: 0;
-    font-size: 10px;
-    margin-top: 0px;
-    margin-bottom: 5px;
-    color: #777777;
-    margin-right: 5px;
-    text-align: right;
-    background-color: #ffffff;
-  }
-  table { }
-  tr { }
-  th,td {
-    vertical-align: top;
-    text-align: left;
-  }
-  th {
-    font-weight: bold;
-  }
-  em {
-    font-weight: bold;
-    font-style: italic;
-  }
-  p.left,th.left,td.left {
-    text-align: left;
-  }
-  p.small_left,th.small_left,td.small_left {
-    text-align: left;
-    font-size: 80%;
-  }
-  p.right,th.right,td.right {
-    text-align: right;
-  }
-  ul, li {
-    list-style-type: none;
-    list-style: none;
-    padding-left: 20px;
-    display: block;
-    font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman;
-    font-weight: normal;
-    line-height: 150%;
-    text-align: left;
-    text-indent: 0mm;
-    margin-left: 1em;
-    margin-right: 2em;
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
-  li {
-    background: url(../image_sys/bullet_09.png) no-repeat 0px 6px;
-  }
-  ul {
-  }
-  h0, h1, h2, h3, h4, h5, h6, h7 {
-    font-weight: bold;
-    line-height: 120%;
-    text-align: left;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-  h4.norm, h5.norm, h6.norm, h7.norm {
-    margin-top: 10px;
+  h4.norm, h5.norm, h6.norm, h7.norm {
+    margin-top: 10px;
     margin-bottom: 0px;
   }
   h0 { font-size: 125%; }
@@ -911,108 +960,13 @@ template SiSUcss() {
     margin-top: 0px;
     margin-bottom: 0px;
   }
-  div.substance {
-    width: 100%;
-    background-color: #ffffff;
-  }
-  div.ocn {
-    width: 5%;
-    float: right;
-    top: 0;
-    background-color: #ffffff;
-  }
-  div.endnote {
-    width: 95%;
-    background-color: #fffffff;
-  }
-  div.toc {
-    position: absolute;
-    float: left;
-    margin: 0;
-    padding: 0;
-    padding-top: 0.5em;
-    border: 0;
-    width: 13em;
-    background-color: #eeeeee;
-    margin-right:1em;
-  }
-  div.summary {
-    margin: 0;
-    padding: 0;
-    border-left: 13em solid #eeeeee;
-    padding-left: 1em;
-    background-color: #eeeeee;
-  }
-  div.content, div.main_column {
-    margin: 0;
-    padding: 0;
-    border-left: 13em solid #ffffff;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-  div.content0, div.main_column0 {
-    margin: 0;
-    padding: 0;
-    border-left: 0% solid #ffffff;
-    padding-left: 5%;
-  }
-  div.scroll {
-    margin: 0;
-    padding: 0;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-  div.content:after {
-    content:' ';
-    clear:both;
-    display:block;
-    height:0;
-    overflow:hidden
-  }
-  div.footer {
-    clear:left;
-    padding: 0.5em;
-    font-size: 80%;
-    margin: 0;
-  }
-  div.toc ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  div.toc li ul a, li ul span.currentlink
-  {
-    font-weight: normal;
-    font-size: 90%;
-    padding-left: 2em;
-    background-color: #eeeeee;
-  }
-  div.toc a, span.currentlink{
-    display:block;
-    text-decoration: none;
-    padding-left: 0.5em;
-    color: #0000aa;
-  }
-  hr {
-    width: 90%;
-    margin-top: 1.8em;
-    margin-bottom: 1.8em;
-  }
-  span.currentlink {
-    text-decoration: none;
-    background-color: #aaaaf9;
-  }
-  div.toc a:visited {
-    color: #0000aa;
-  }
-  div.toc a:hover {
-    color: #000000;
-    background-color: #f9f9aa;
-  }
-  /* in toc no list numbering */
-  nav#toc ol {
-    list-style-type: none;
-  }
+#+END_SRC
+
+*** html seg
+**** previous next
+
+#+name: css_html_seg
+#+BEGIN_SRC css
   .icon-bar {
     width: 100%;
     overflow: auto;
@@ -1069,3 +1023,253 @@ template SiSUcss() {
    }
   .arrow { fill: #333333; }
 #+END_SRC
+
+**** flex
+
+#+name: css_html_seg
+#+BEGIN_SRC css
+  /* 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;
+  }
+#+END_SRC
+
+**** TODO grid
+
+Consider what if anything should be used here
+
+#+name: css_html_seg
+#+BEGIN_SRC css
+  /* 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;
+  }
+#+END_SRC
+
+*** html scroll
+**** flex
+
+#+name: css_html_scroll
+#+BEGIN_SRC css
+  /* 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;
+  }
+#+END_SRC
+
+**** grid
+
+#+name: css_html_scroll
+#+BEGIN_SRC css
+  /* 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;
+  }
+#+END_SRC
+*** epub xhtml
+
+#+name: css_epub
+#+BEGIN_SRC css
+#+END_SRC
-- 
cgit v1.2.3