#+TITLE: sdp defaults css #+AUTHOR: Ralph Amissah #+EMAIL: [[mailto:ralph.amissah@gmail.com][ralph.amissah@gmail.com]] #+DESCRIPTION: documents - structuring, publishing in multiple formats & search #+KEYWORDS #+LANGUAGE: en #+STARTUP: indent content #+OPTIONS: H:3 num:nil toc:t \n:nil @:t ::t |:t ^:nil _:nil -:t f:t *:t <:t #+OPTIONS: TeX:t LaTeX:t skip:nil d:nil todo:t pri:nil tags:not-in-toc #+OPTIONS: author:nil email:nil creator:nil timestamp:nil #+PROPERTY: header-args :padline no :exports code :noweb yes #+EXPORT_SELECT_TAGS: export #+EXPORT_EXCLUDE_TAGS: noexport #+FILETAGS: :sdp:rel:output: #+TAGS: assert(a) class(c) debug(d) mixin(m) sdp(s) tangle(T) template(t) WEB(W) noexport(n) - [[./sdp.org][sdp]] [[./][org/]] - [[./output_hub.org][output_hub]] * 0. output css defaults :module:sdp:output_xmls_css: ** 0. module template #+BEGIN_SRC d :tangle ../src/sdp/output/xmls_css.d /++ default css settings +/ module sdp.output.xmls_css; template SiSUcss() { auto SiSUcss() { 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_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_epub; return _css; } } return _css(); } } #+END_SRC ** css *** html shared **** general #+name: css_shared #+BEGIN_SRC css *{ padding: 0px; margin: 0px; } body { height: 100vh; background-color: #ffffff; } body { color: black; background: #ffffff; background-color: #ffffff; } #+END_SRC **** link #+name: css_shared #+BEGIN_SRC css a:link { color: #003399; text-decoration: none; } a:visited { color: #003399; text-decoration: none; } a:hover { color: #000000; background-color: #f9f9aa; } a.lnkocn:link { color: #777777; text-decoration: none; } a:hover img { background-color: #ffffff; } a:active { color: #003399; text-decoration: underline; } #+END_SRC **** div #+name: css_shared #+BEGIN_SRC css div { margin-left: 0; margin-right: 0; } div.p { 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; margin-right: 2em; margin-top: 12px; margin-bottom: 0px; padding-left: 0em; text-indent: 0em; } p, h0, h1, h2, h3, h4, h5, h6, h7 { display: block; font-family: verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman; font-size: 100%; font-weight: normal; line-height: 133%; text-align: justify; margin-left: 0em; margin-right: 2em; text-indent: 0mm; margin-top: 0.8em; margin-bottom: 0.8em; } #+END_SRC #+name: css_shared #+BEGIN_SRC css img { max-width: 100%; height: auto; } #+END_SRC ***** paragraph general #+name: css_shared #+BEGIN_SRC css /* spaced */ p.spaced { white-space: pre; } 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; 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; text-indent: -2em; } p[indent=\"h0i3\"] { padding-left: 3em; text-indent: -3em; } p[indent=\"h0i4\"] { padding-left: 4em; text-indent: -4em; } p[indent=\"h0i5\"] { padding-left: 5em; text-indent: -5em; } p[indent=\"h0i6\"] { padding-left: 6em; text-indent: -6em; } p[indent=\"h0i7\"] { padding-left: 7em; text-indent: -7em; } p[indent=\"h0i8\"] { padding-left: 8em; text-indent: -8em; } p[indent=\"h0i9\"] { padding-left: 9em; text-indent: -9em; } p[indent=\"h1i0\"] { padding-left: 0em; text-indent: 1em; } p[indent=\"h1i1\"] { padding-left: 1em; text-indent: 0em; } p[indent=\"h1i2\"] { padding-left: 2em; text-indent: -1em; } p[indent=\"h1i3\"] { padding-left: 3em; text-indent: -2em; } p[indent=\"h1i4\"] { padding-left: 4em; text-indent: -3em; } p[indent=\"h1i5\"] { padding-left: 5em; text-indent: -4em; } p[indent=\"h1i6\"] { padding-left: 6em; text-indent: -5em; } p[indent=\"h1i7\"] { padding-left: 7em; text-indent: -6em; } p[indent=\"h1i8\"] { padding-left: 8em; text-indent: -7em; } p[indent=\"h1i9\"] { padding-left: 9em; text-indent: -8em; } p[indent=\"h2i0\"] { padding-left: 0em; text-indent: 2em; } p[indent=\"h2i1\"] { padding-left: 1em; text-indent: 1em; } p[indent=\"h2i2\"] { padding-left: 2em; text-indent: 0em; } p[indent=\"h2i3\"] { padding-left: 3em; text-indent: -1em; } p[indent=\"h2i4\"] { padding-left: 4em; text-indent: -2em; } p[indent=\"h2i5\"] { padding-left: 5em; text-indent: -3em; } p[indent=\"h2i6\"] { padding-left: 6em; text-indent: -4em; } p[indent=\"h2i7\"] { padding-left: 7em; text-indent: -5em; } p[indent=\"h2i8\"] { padding-left: 8em; text-indent: -6em; } p[indent=\"h2i9\"] { padding-left: 9em; text-indent: -7em; } p[indent=\"h3i0\"] { padding-left: 0em; text-indent: 3em; } p[indent=\"h3i1\"] { padding-left: 1em; text-indent: 2em; } p[indent=\"h3i2\"] { padding-left: 2em; text-indent: 1em; } p[indent=\"h3i3\"] { padding-left: 3em; text-indent: 0em; } p[indent=\"h3i4\"] { padding-left: 4em; text-indent: -1em; } p[indent=\"h3i5\"] { padding-left: 5em; text-indent: -2em; } p[indent=\"h3i6\"] { padding-left: 6em; text-indent: -3em; } p[indent=\"h3i7\"] { padding-left: 7em; text-indent: -4em; } p[indent=\"h3i8\"] { padding-left: 8em; text-indent: -5em; } p[indent=\"h3i9\"] { padding-left: 9em; text-indent: -6em; } p[indent=\"h4i0\"] { padding-left: 0em; text-indent: 4em; } p[indent=\"h4i1\"] { padding-left: 1em; text-indent: 3em; } p[indent=\"h4i2\"] { padding-left: 2em; text-indent: 2em; } p[indent=\"h4i3\"] { padding-left: 3em; text-indent: 1em; } p[indent=\"h4i4\"] { padding-left: 4em; text-indent: 0em; } p[indent=\"h4i5\"] { padding-left: 5em; text-indent: -1em; } p[indent=\"h4i6\"] { padding-left: 6em; text-indent: -2em; } p[indent=\"h4i7\"] { padding-left: 7em; text-indent: -3em; } p[indent=\"h4i8\"] { padding-left: 8em; text-indent: -4em; } p[indent=\"h4i9\"] { padding-left: 9em; text-indent: -5em; } p[indent=\"h5i0\"] { padding-left: 0em; text-indent: 5em; } p[indent=\"h5i1\"] { padding-left: 1em; text-indent: 4em; } p[indent=\"h5i2\"] { padding-left: 2em; text-indent: 3em; } p[indent=\"h5i3\"] { padding-left: 3em; text-indent: 2em; } p[indent=\"h5i4\"] { padding-left: 4em; text-indent: 1em; } p[indent=\"h5i5\"] { padding-left: 5em; text-indent: 0em; } p[indent=\"h5i6\"] { padding-left: 6em; text-indent: -1em; } p[indent=\"h5i7\"] { padding-left: 7em; text-indent: -2em; } p[indent=\"h5i8\"] { padding-left: 8em; text-indent: -3em; } p[indent=\"h5i9\"] { padding-left: 9em; text-indent: -4em; } p[indent=\"h6i0\"] { padding-left: 0em; text-indent: 6em; } p[indent=\"h6i1\"] { padding-left: 1em; text-indent: 5em; } p[indent=\"h6i2\"] { padding-left: 2em; text-indent: 4em; } p[indent=\"h6i3\"] { padding-left: 3em; text-indent: 3em; } p[indent=\"h6i4\"] { padding-left: 4em; text-indent: 2em; } p[indent=\"h6i5\"] { padding-left: 5em; text-indent: 1em; } p[indent=\"h6i6\"] { padding-left: 6em; text-indent: 0em; } p[indent=\"h6i7\"] { padding-left: 7em; text-indent: -1em; } p[indent=\"h6i8\"] { padding-left: 8em; text-indent: -2em; } p[indent=\"h6i9\"] { padding-left: 9em; text-indent: -3em; } p[indent=\"h7i0\"] { padding-left: 0em; text-indent: 7em; } p[indent=\"h7i1\"] { padding-left: 1em; text-indent: 6em; } p[indent=\"h7i2\"] { padding-left: 2em; text-indent: 5em; } p[indent=\"h7i3\"] { padding-left: 3em; text-indent: 4em; } p[indent=\"h7i4\"] { padding-left: 4em; text-indent: 3em; } p[indent=\"h7i5\"] { padding-left: 5em; text-indent: 2em; } p[indent=\"h7i6\"] { padding-left: 6em; text-indent: 1em; } p[indent=\"h7i7\"] { padding-left: 7em; text-indent: 0em; } p[indent=\"h7i8\"] { padding-left: 8em; text-indent: -1em; } p[indent=\"h7i9\"] { padding-left: 9em; text-indent: -2em; } p[indent=\"h8i0\"] { padding-left: 0em; text-indent: 8em; } p[indent=\"h8i1\"] { padding-left: 1em; text-indent: 7em; } p[indent=\"h8i2\"] { padding-left: 2em; text-indent: 6em; } p[indent=\"h8i3\"] { padding-left: 3em; text-indent: 5em; } p[indent=\"h8i4\"] { padding-left: 4em; text-indent: 4em; } p[indent=\"h8i5\"] { padding-left: 5em; text-indent: 3em; } p[indent=\"h8i6\"] { padding-left: 6em; text-indent: 2em; } p[indent=\"h8i7\"] { padding-left: 7em; text-indent: 1em; } p[indent=\"h8i8\"] { padding-left: 8em; text-indent: 0em; } p[indent=\"h8i9\"] { padding-left: 9em; text-indent: -1em; } p[indent=\"h9i0\"] { padding-left: 0em; text-indent: 9em; } p[indent=\"h9i1\"] { padding-left: 1em; text-indent: 8em; } p[indent=\"h9i2\"] { padding-left: 2em; text-indent: 7em; } p[indent=\"h9i3\"] { padding-left: 3em; text-indent: 6em; } p[indent=\"h9i4\"] { padding-left: 4em; text-indent: 5em; } p[indent=\"h9i5\"] { padding-left: 5em; text-indent: 4em; } p[indent=\"h9i6\"] { padding-left: 6em; text-indent: 3em; } p[indent=\"h9i7\"] { padding-left: 7em; text-indent: 2em; } p[indent=\"h9i8\"] { padding-left: 8em; text-indent: 1em; } p[indent=\"h9i9\"] { padding-left: 9em; text-indent: 0em; } #+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: 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 { } #+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; } h4.norm, h5.norm, h6.norm, h7.norm { margin-top: 10px; margin-bottom: 0px; } h0 { font-size: 125%; } h1 { font-size: 120%; } h2 { font-size: 115%; } h3 { font-size: 110%; } h4 { font-size: 105%; } h5 { font-size: 100%; } h6 { font-size: 100%; } h7 { font-size: 100%; } h0, h1, h2, h3, h4, h5, h6, h7 { text-shadow: .2em .2em .3em gray; } h1.i { margin-left: 2em; } h2.i { margin-left: 3em; } h3.i { margin-left: 4em; } h4.i { margin-left: 5em; } h5.i { margin-left: 6em; } h6.i { margin-left: 7em; } h7.i { margin-left: 8em; } h8.i { margin-left: 9em; } h9.i { margin-left: 10em; } .toc { font-weight: normal; margin-top: 6px; margin-bottom: 6px; } h0.toc { margin-left: 1em; font-size: 120%; line-height: 150%; } h1.toc { margin-left: 1em; font-size: 115%; line-height: 150%; } h2.toc { margin-left: 2em; font-size: 110%; line-height: 140%; } h3.toc { margin-left: 3em; font-size: 105%; line-height: 120%; } h4.toc { margin-left: 4em; font-size: 100%; line-height: 120%; } h5.toc { margin-left: 5em; font-size: 95%; line-height: 110%; } h6.toc { margin-left: 6em; font-size: 90%; line-height: 110%; } h7.toc { margin-left: 7em; font-size: 85%; line-height: 100%; } .subtoc { margin-right: 34%; font-weight: normal; } h5.subtoc { margin-left: 2em; font-size: 80%; margin-top: 2px; margin-bottom: 2px; } h6.subtoc { margin-left: 3em; font-size: 75%; margin-top: 0px; margin-bottom: 0px; } h7.subtoc { margin-left: 4em; font-size: 70%; margin-top: 0px; margin-bottom: 0px; } #+END_SRC *** html seg **** previous next #+name: css_html_seg #+BEGIN_SRC css .icon-bar { width: 100%; overflow: auto; margin: 0em 0em 0em; } .left-bar { width: 85%; float: left; display: inline; overflow: auto; } .toc-button { position: absolute; top: 8px; width: 2em; height: 2em; border-radius: 50%; background: #cccccc; } .toc-button svg { position: relative; left: 25%; top: 25%; width: 150%; height: 150%; } .toc-button p { vertical-align: center; font-size: 120%; } .prev-next-button { position: absolute; top: 8px; width: 2em; height: 2em; border-radius: 50%; background: #cccccc; } .prev-next-button svg { position: relative; left: 20%; top: 20%; width: 60%; height: 60%; } .menu { right: 6em; } .previous { right: 3em; } .next { right: 0em; } .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 * __END__