#+TITLE: ReadTheOrg style #+AUTHOR: Fabrice Niessen #+EMAIL: (concat "fniessen" at-sign "pirilampo.org") #+DESCRIPTION: #+KEYWORDS: #+LANGUAGE: en #+OPTIONS: H:4 num:t toc:2 #+SETUPFILE: ~/.dotfiles/org/theme-readtheorg-local-abs.setup # See http://pandoc.org/README.html for another organization of the sections * Overview Get the lowdown on the key pieces of ReadTheOrg's infrastructure, including our approach to better HTML export. * Typography :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: #+begin_src css @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); #+end_src ** Headings #+begin_src css h1,h2,h3,h4,h5,h6,legend{ font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif; font-weight:700; margin-top:0; } h1{ font-size:175%; } .subtitle{ font-size:95%; /* of h1 */ } h2{ font-size:150%; } h3{ font-size:125%; } h4{ font-size:115%; } h5{ font-size:110%; } h6{ font-size:100%; } h4,h5,h6{ color:#2980B9; font-weight:300; } #+end_src ** Body #+begin_src css html{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-size:100%; height:100%; overflow-x:hidden; } body{ background:#edf0f2; color:#404040; font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; font-weight:normal; margin:0; min-height:100%; overflow-x:hidden; } #content{ background:#fcfcfc; height:100%; margin-left:300px; /* margin:auto; */ max-width:800px; min-height:100%; padding:1.618em 3.236em; } p{ font-size:16px; line-height:24px; margin:0px 0px 24px 0px; } #+end_src ** Bold #+begin_src css b,strong{ font-weight:bold} #+end_src ** Blockquotes #+begin_src css blockquote{ background-color: #F0F0F0; border-left:5px solid #CCCCCC; font-style:italic; line-height:24px; margin:0px 0px 24px 0px; /* margin-left:24px; */ padding: 6px 20px; } #+end_src ** Lists #+begin_src css ul,ol,dl{ line-height:24px; list-style-image:none; /* list-style:none; */ margin:0px 0px 24px 0px; padding:0; } #+end_src #+begin_src css li{ margin-left: 24px; } dd{ margin:0; } #+end_src #+begin_src css #content .section ul,#content .toctree-wrapper ul,article ul{ list-style:disc; line-height:24px; margin-bottom:24px} #content .section ul li,#content .toctree-wrapper ul li,article ul li{ list-style:disc; margin-left:24px} #content .section ul li p:last-child,#content .toctree-wrapper ul li p:last-child,article ul li p:last-child{ margin-bottom:0} #content .section ul li ul,#content .toctree-wrapper ul li ul,article ul li ul{ margin-bottom:0} #content .section ul li li,#content .toctree-wrapper ul li li,article ul li li{ list-style:circle} #content .section ul li li li,#content .toctree-wrapper ul li li li,article ul li li li{ list-style:square} #content .section ul li ol li,#content .toctree-wrapper ul li ol li,article ul li ol li{ list-style:decimal} #content .section ol,#content ol,article ol{ list-style:decimal; line-height:24px; margin-bottom:24px} #content .section ol li,#content ol li,article ol li{ list-style:decimal; margin-left:24px} #content .section ol li p:last-child,#content ol li p:last-child,article ol li p:last-child{ margin-bottom:0} #content .section ol li ul,#content ol li ul,article ol li ul{ margin-bottom:0} #content .section ol li ul li,#content ol li ul li,article ol li ul li{ list-style:disc} #+end_src *** Unordered *** Ordered *** Description #+begin_src css dl dt{ font-weight:bold; } dl p,dl table,dl ul,dl ol{ margin-bottom:12px !important; } dl dd{ margin:0 0 12px 24px; } #+end_src * Media queries :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: #+begin_src css @media print{ .codeblock,pre.src{ white-space:pre.src-wrap} } @media print{ html,body,section{ background:none !important} ,,*{ box-shadow:none !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important} a,a:visited{ text-decoration:underline} pre.src,blockquote{ page-break-inside:avoid} thead{ display:table-header-group} tr,img{ page-break-inside:avoid} img{ max-width:100% !important} @page{ margin:0.5cm} p,h2,h3{ orphans:3; widows:3} h2,h3{ page-break-after:avoid} } @media print{ #postamble{ display:none} #content{ margin-left:0} } @media print{ #table-of-contents{ display:none} @page{ size: auto; margin: 25mm 25mm 25mm 25mm;} body { margin: 0px;} } #+end_src #+begin_src css @media screen and (max-width: 768px){ } #+end_src #+begin_src css @media only screen and (max-width: 480px){ } @media screen and (max-width: 768px){ .tablet-hide{ display:none} } @media screen and (max-width: 480px){ .mobile-hide{ display:none} } #+end_src #+begin_src css @media screen and (max-width: 480px){ } #+end_src #+begin_src css @media screen and (max-width: 768px){ #content{ margin-left:0} #content #content{ padding:1.618em} #content.shift{ position:fixed; min-width:100%; left:85%; top:0; height:100%; overflow:hidden} } @media screen and (min-width: 1400px){ #content{ background:rgba(0,0,0,0.05)} #content{ background:#fcfcfc} } #+end_src #+begin_src css @media screen and (max-width: 768px){ #copyright{ width:85%; display:none} #copyright.shift{ display:block} img{ width:100%; height:auto} } #+end_src #+begin_src css @media screen and (max-width: 480px){ #content .sidebar{ width:100%} } #+end_src * Code :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: ** Inline #+begin_src css code{ background:#fff; border:solid 1px #e1e4e5; /* color:#000; for clickable code */ font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; font-size:75%; max-width:100%; overflow-x:auto; padding:0 5px; white-space:nowrap; } #+end_src ** Basic block #+begin_src css .codeblock-example{ border:1px solid #e1e4e5; border-bottom:none; padding:24px; padding-top:48px; font-weight:500; background:#fff; position:relative} .codeblock-example:after{ content:"Example"; position:absolute; top:0px; left:0px; background:#9B59B6; color:#fff; padding:6px 12px} .codeblock-example.prettyprint-example-only{ border:1px solid #e1e4e5; margin-bottom:24px} .codeblock,pre.src,#content .literal-block{ border:1px solid #e1e4e5; padding:12px; overflow-x:auto; background:#fff; margin:1px 0 24px 0} pre.src{ /* color:#404040; */ display:block; font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; font-size:12px; line-height:1.5; margin:1px 0px 24px 0px; overflow:auto; padding:12px; white-space:pre; } #+end_src ** Sample output #+begin_src css .example{ background:#f3f6f6; border:1px solid #e1e4e5; color:#404040; font-size: 12px; line-height: 1.5; margin-bottom:24px; padding:12px; } #+end_src * Tables :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: ** Basic example #+begin_src css table{ border-collapse:collapse; border-spacing:0; empty-cells:show; margin-bottom:24px; border-bottom:1px solid #e1e4e5; } td{ vertical-align:top} table td,table th{ font-size:90%; margin:0; overflow:visible; padding:8px 16px; background-color:white; border:1px solid #e1e4e5; } table thead th{ font-weight:bold; border-top:3px solid #e1e4e5; border-bottom:1px solid #e1e4e5; } #+end_src ** Optional table caption #+begin_src css table caption{ color:#000; font:italic 85%/1 arial,sans-serif; padding:1em 0; } #+end_src ** Striped rows #+begin_src css table tr:nth-child(2n-1) td{ background-color:#f3f6f6; } table tr:nth-child(2n) td{ background-color:white; } #+end_src * Images :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: ** Optional image caption #+begin_src css .figure p{ color:#000; font:italic 85%/1 arial,sans-serif; padding:1em 0; } #+end_src * Helper classes :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: #+begin_src css .rotate-90{ -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); } .rotate-270{ -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -ms-transform:rotate(270deg); -o-transform:rotate(270deg); transform:rotate(270deg); } #+end_src * Responsive utilities :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: Responsive for sidebar: #+begin_src css #toggle-sidebar, #table-of-contents .close-sidebar { display: none; } @media screen and (max-width: 768px) { #table-of-contents { display: none; width: 60%; } #table-of-contents h2 a { display: block; } #table-of-contents:target { display: block; } #copyright, #postamble { display: none; } #toggle-sidebar { background-color: #2980B9; display: block; margin-bottom: 1.6em; padding: 0.6em; text-align: center; } #toggle-sidebar h2 { color: white; font-size: 100%; line-height: 50px; margin: 0; padding: 0; } #table-of-contents .close-sidebar { color: rgba(255, 255, 255, 0.3); display: inline-block; margin: 0px 10px 0px 45px; padding: 10px; } } #+end_src * CSS :PROPERTIES: :header-args: :tangle css/readtheorg.css :END: #+begin_src css *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } figcaption,figure,footer,header,hgroup,nav{ display:block} #+end_src #+begin_src css ins{ background:#ff9; color:#000; text-decoration:none} mark{ background:#ff0; color:#000; font-style:italic; font-weight:bold} #+end_src #+begin_src css small{ font-size:85%} sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline} sup{ top:-0.5em} sub{ bottom:-0.25em} #+end_src #+begin_src css img{ -ms-interpolation-mode:bicubic; vertical-align:middle; max-width:100%} svg:not(:root){ overflow:hidden} figure{ margin:0} label{ cursor:pointer} legend{ border:0; margin-left:-7px; padding:0; white-space:normal} #+end_src #+begin_src css .fa:before,#content .admonition-title:before,#content h1 .headerlink:before,#content h2 .headerlink:before,#content h3 .headerlink:before,#content h4 .headerlink:before,#content h5 .headerlink:before,#content h6 .headerlink:before,#content dl dt .headerlink:before,.icon:before,.wy-dropdown .caret:before,.wy-inline-validate.wy-inline-validate-success .wy-input-context:before,.wy-inline-validate.wy-inline-validate-danger .wy-input-context:before,.wy-inline-validate.wy-inline-validate-warning .wy-input-context:before,.wy-inline-validate.wy-inline-validate-info .wy-input-context:before,.wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo,.btn,input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],input[type="color"],select,textarea,#table-of-contents li.on a,#table-of-contents li.current>a,.wy-side-nav-search>a,.wy-side-nav-search .wy-dropdown>a,.wy-nav-top a{ -webkit-font-smoothing:antialiased} /*! * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */@font-face{ font-family:'FontAwesome'; src:url("../fonts/fontawesome-webfont.eot?v=4.1.0"); src:url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"),url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); font-weight:normal; font-style:normal} .fa,#content .admonition-title,.icon{ display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} .fa-ul{ padding-left:0; margin-left:2.14286em; list-style-type:none} .fa-ul>li{ position:relative} .fa-li{ position:absolute; left:-2.14286em; width:2.14286em; top:0.14286em; text-align:center} .fa-li.fa-lg{ left:-1.85714em} .fa-border{ padding:.2em .25em .15em; border:solid 0.08em #eee; border-radius:.1em} .fa,#content .admonition-title{ font-family:inherit} .fa:before,#content .admonition-title:before{ font-family:"FontAwesome"; display:inline-block; font-style:normal; font-weight:normal; line-height:1; text-decoration:inherit} a .fa,a #content .admonition-title,#content a .admonition-title{ display:inline-block; text-decoration:inherit} .nav #content .admonition-title,#content .nav .admonition-title,.nav .icon{ display:inline} .wy-alert,#content .note,#content .attention,#content .caution,#content .danger,#content .error,#content .hint,#content .important,#content .tip,#content .warning,#content .seealso,#content .admonitiontodo{ padding:12px; line-height:24px; margin-bottom:24px; /* background:#e7f2fa; */ } .wy-alert-title,#content .admonition-title{ color:#fff; font-weight:bold; display:block; color:#fff; /* background:#6ab0de; */ /* margin:-12px; */ padding:6px 12px; margin-bottom:0px} #content .danger,#content .error{ background:#fdf3f2} .wy-alert.wy-alert-warning,#content .wy-alert-warning.note,#content .attention,#content .caution,#content .wy-alert-warning.danger,#content .wy-alert-warning.error,#content .wy-alert-warning.hint,#content .wy-alert-warning.important,#content .wy-alert-warning.tip,#content .warning,#content .wy-alert-warning.seealso,#content .admonitiontodo{ background:#ffedcc} #content .admonition-title.note:before, #content .admonition-title.seealso:before, #content .admonition-title.warning:before, #content .admonition-title.caution:before, #content .admonition-title.attention:before, #content .admonition-title.tip:before, #content .admonition-title.hint:before, #content .admonition-title.important:before, #content .admonition-title.error:before, #content .admonition-title.danger:before{ font-family:FontAwesome; content: "";} #content .note,#content .seealso{ background:#e7f2fa} .wy-alert p:last-child,#content .note p:last-child,#content .attention p:last-child,#content .caution p:last-child,#content .danger p:last-child,#content .error p:last-child,#content .hint p:last-child,#content .important p:last-child,#content .tip p:last-child,#content .warning p:last-child,#content .seealso p:last-child,#content .admonitiontodo p:last-child{ margin-bottom:0} #content .admonition-title.tip,#content .admonition-title.important,#content .admonition-title.hint{ line-height: 1; background:#1abc9c} #content .important,#content .tip,#content .hint{ background:#dbfaf4} #content .admonition-title.note,#content .admonition-title.seealso{ line-height: 1; background:#6ab0de} #content .admonition-title.warning,#content .admonition-title.caution,#content .admonition-title.attention{ line-height: 1; background:#F0B37E} #content .admonition-title.error,#content .admonition-title.danger{ line-height: 1; background:#f29f97} #+end_src #+begin_src css legend{ display:block; width:100%; border:0; padding:0; white-space:normal; margin-bottom:24px; font-size:150%; *margin-left:-7px} label{ display:block; margin:0 0 0.3125em 0; color:#333; font-size:90%} #+end_src #+begin_src css a{ color:#2980B9; text-decoration:none; cursor:pointer} a:hover,a:active{ outline:0; } a:hover{ color:#3091d1} a:visited{ color:#9B59B6} #+end_src #+begin_src css .left{ text-align:left} .center{ text-align:center} .right{ text-align:right} #+end_src #+begin_src css hr{ display:block; height:1px; border:0; border-top:1px solid #e1e4e5; margin:24px 0; padding:0} #+end_src #+begin_src css #table-of-contents li{ list-style:none; margin-left: 0px; } #table-of-contents header{ height:32px; display:inline-block; line-height:32px; padding:0 1.618em; display:block; font-weight:bold; text-transform:uppercase; font-size:80%; color:#2980B9; white-space:nowrap} #table-of-contents ul{ margin-bottom:0} #table-of-contents li.divide-top{ border-top:solid 1px #404040} #table-of-contents li.divide-bottom{ border-bottom:solid 1px #404040} #table-of-contents li.current{ background:#e3e3e3} #table-of-contents li.current a{ color:gray; border-right:solid 1px #c9c9c9; padding:0.4045em 2.427em} #table-of-contents li.current a:hover{ background:#d6d6d6} #table-of-contents li a{ /* color:#404040; */ padding:0.4045em 1.618em; position:relative; /* background:#fcfcfc; */ border:none; /* border-bottom:solid 1px #c9c9c9; */ /* border-top:solid 1px #c9c9c9; */ padding-left:1.618em -4px} #table-of-contents li.on a:hover,#table-of-contents li.current>a:hover{ background:#fcfcfc} #table-of-contents li ul li a{ /* background:#c9c9c9; */ padding:0.4045em 2.427em} #table-of-contents li ul li ul li a{ padding:0.4045em 3.236em} #table-of-contents li.current ul{ display:block} /* #table-of-contents li ul{ */ /* margin-bottom:0; */ /* display:none} */ #table-of-contents .local-toc li ul{ display:block} #table-of-contents li ul li a{ margin-bottom:0; color:#b3b3b3; font-weight:normal} #table-of-contents a{ display:inline-block; line-height:18px; padding:0.4045em 1.618em; display:block; position:relative; font-size:90%; color:#b3b3b3; direction: ltr; } #table-of-contents a:hover{ background-color:#4e4a4a; cursor:pointer} /* #text-table-of-contents { */ /* overflow:scroll; */ /* } */ #table-of-contents{ position:fixed; top:0; left:0; width:300px; overflow-x:hidden; overflow-y:scroll; height:100%; background:#343131; z-index:200; scrollbar-base-color: #1F1D1D; scrollbar-arrow-color: #b3b3b3; scrollbar-shadow-color: #1F1D1D; scrollbar-track-color : #343131; } #table-of-contents h2{ z-index:200; background-color:#2980B9; text-align:center; padding:0.809em; display:block; color:#fcfcfc; font-size: 100%; margin-bottom:0.809em} #+end_src #+begin_src css ul.nav li ul li { display: none; } ul.nav li ul li ul li { display: none; } ul.nav li.active ul li { display: inline; } ul.nav li.active ul li ul li { display: inline; } ul.nav li.active ul li a { background-color: #E3E3E3; color: #8099B0; border-right:solid 1px #c9c9c9 !important; } ul.nav li.active ul li.active a { background-color: #C9C9C9; color: black !important; font-weight: bold !important; } ul.nav li.active ul li.active ul li.active a { color: black !important; font-weight: bold !important; display: block !important; } ul.nav li.active ul li.active ul li a { color: #808080 !important; font-weight: normal !important; display: block !important; } ul.nav li.active ul li ul li a { display: none !important; } /* ul.nav li ul li ul li { */ /* display: none !important; /\* as long as nav is on multiple levels of ul *\/ */ /* /\* display: none; /\* as long as nav is on multiple levels of ul *\\/ *\/ */ /* } */ ul.nav li ul li ul li ul li { display: none !important; /* as long as nav is on multiple levels of ul */ /* display: none; /* as long as nav is on multiple levels of ul *\/ */ } ul.nav li.active > a { border-bottom:solid 1px #c9c9c9 !important; /* XXX Restrict it to 2nd level */ border-right:solid 1px #c9c9c9 !important; } ul.nav li.active a { color: gray !important; font-weight:bold; background-color: white; border-right:solid 0px white !important; } ul.nav > li.active > a { color: black !important; } #+end_src #+begin_src css footer{ color:#999} footer p{ margin-bottom:12px} #+end_src #+begin_src css #copyright, #postamble{ position:fixed; bottom:0; left:0; width:300px; color:#fcfcfc; background:#1f1d1d; border-top:solid 10px #343131; font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; font-size: 90%; z-index:400; padding:12px; } #postamble .author { font-size: 100%; margin-bottom: 0px; } #postamble .date { font-size: 90%; margin-bottom: 0px; color: #27AE60; } #postamble .creator,#postamble .validation { display:none; } #copyright a{ color:#2980B9; text-decoration:none} #copyright .rst-current-version{ padding:12px; background-color:#272525; display:block; text-align:right; font-size:90%; cursor:pointer; color:#27AE60; *zoom:1} #+end_src #+begin_src css #content img{ max-width:100%; } #content div.figure{ margin-bottom:24px} #content div.figure.align-center{ text-align:center} #content .section>img,#content .section>a>img{ margin-bottom:24px} .verse{ border-left:5px solid #6AB0DE; background-color: #E7F2FA; padding: 6px 20px; font-style:italic; } #content .note .last,#content .attention .last,#content .caution .last,#content .danger .last,#content .error .last,#content .hint .last,#content .important .last,#content .tip .last,#content .warning .last,#content .seealso .last,#content .admonitiontodo .last{ margin-bottom:0} #content .admonition-title:before{ margin-right:4px} #content .section ol p,#content .section ul p{ margin-bottom:12px} #content h1 .headerlink,#content h2 .headerlink,#content h3 .headerlink,#content h4 .headerlink,#content h5 .headerlink,#content h6 .headerlink,#content dl dt .headerlink{ display:none; visibility:hidden; font-size:14px} #content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{ visibility:visible; content:""; font-family:FontAwesome; display:inline-block} #content h1:hover .headerlink,#content h2:hover .headerlink,#content h3:hover .headerlink,#content h4:hover .headerlink,#content h5:hover .headerlink,#content h6:hover .headerlink,#content dl dt:hover .headerlink{ display:inline-block} #content .sidebar{ float:right; width:40%; display:block; margin:0 0 24px 24px; padding:24px; background:#f3f6f6; border:solid 1px #e1e4e5} #content .sidebar p,#content .sidebar ul,#content .sidebar dl{ font-size:90%} #content .sidebar .last{ margin-bottom:0} #content .sidebar .sidebar-title{ display:block; font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif; font-weight:bold; background:#e1e4e5; padding:6px 12px; margin:-24px; margin-bottom:24px; font-size:100%} #content .highlighted{ background:#F1C40F; display:inline-block; font-weight:bold; padding:0 6px} #content .footnote-reference,#content .citation-reference{ vertical-align:super; font-size:90%} #+end_src #+begin_src css span[id*='MathJax-Span']{ color:#404040} .math{ text-align:center} #footnotes{ border-top:1px solid #e1e4e5; padding-top: 36px; } h2.footnotes{ display:none; } .footnum, .footref{ color: #2980b9; font-size: 170%; font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; } .footnum:before, .footref:before{ content:"["; } .footnum:after, .footref:after{ content:"]"; } .footpara { color: #999; font-size: 90%; font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; padding-top: 8px; line-height: 1.25em; /* display: inline; */ } #+end_src #+begin_src css .todo{ background-color: #f29f97; padding: 0px 4px; color: #fff; } .WAIT, .nilWAIT{ background-color: #6AB097; } .done{ background-color: #6ab0de; padding: 0px 4px; color: #fff; } .tag span { background-color: #EDEDED; border: 1px solid #EDEDED; color: #939393; cursor: pointer; display: block; float: right; font-size: 80%; font-weight: normal; margin: 0 3px; padding: 1px 2px; border-radius: 10px; } .tag .FLAGGED { background-color: #DB2D27; border: 1px solid #DB2D27; color: white; font-weight: bold; } .timestamp { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; font-size: 90%; color: navy; } #+end_src See http://stackoverflow.com/questions/10535432/tmux-man-page-search-highlighting for nice yellow or orange boxes. #+begin_src css .inlinetask { background: #FFF9E3; /* url(dialog-todo.png) no-repeat 10px 8px; */ border: 3px solid #FFEB8E; /* border-right-style: none; */ /* border-left-style: none; */ /* padding: 10px 20px 10px 60px; */ padding: 9px 12px; margin-bottom: 24px; font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif} #+end_src * Htmlize :PROPERTIES: :header-args: :tangle css/htmlize.css :END: #+begin_src css .org-bold { /* bold */ font-weight: bold; } .org-bold-italic { /* bold-italic */ font-weight: bold; font-style: italic; } .org-buffer-menu-buffer { /* buffer-menu-buffer */ font-weight: bold; } .org-builtin { /* font-lock-builtin-face */ color: #7a378b; } .org-button { /* button */ text-decoration: underline; } .org-calendar-today { /* calendar-today */ text-decoration: underline; } .org-change-log-acknowledgement { /* change-log-acknowledgement */ color: #b22222; } .org-change-log-conditionals { /* change-log-conditionals */ color: #a0522d; } .org-change-log-date { /* change-log-date */ color: #8b2252; } .org-change-log-email { /* change-log-email */ color: #a0522d; } .org-change-log-file { /* change-log-file */ color: #0000ff; } .org-change-log-function { /* change-log-function */ color: #a0522d; } .org-change-log-list { /* change-log-list */ color: #a020f0; } .org-change-log-name { /* change-log-name */ color: #008b8b; } .org-comint-highlight-input { /* comint-highlight-input */ font-weight: bold; } .org-comint-highlight-prompt { /* comint-highlight-prompt */ color: #00008b; } .org-comment { /* font-lock-comment-face */ color: #999988; font-style: italic; } .org-comment-delimiter { /* font-lock-comment-delimiter-face */ color: #999988; font-style: italic; } .org-completions-annotations { /* completions-annotations */ font-style: italic; } .org-completions-common-part { /* completions-common-part */ color: #000000; background-color: #ffffff; } .org-completions-first-difference { /* completions-first-difference */ font-weight: bold; } .org-constant { /* font-lock-constant-face */ color: #008b8b; } .org-diary { /* diary */ color: #ff0000; } .org-diff-context { /* diff-context */ color: #7f7f7f; } .org-diff-file-header { /* diff-file-header */ background-color: #b3b3b3; font-weight: bold; } .org-diff-function { /* diff-function */ background-color: #cccccc; } .org-diff-header { /* diff-header */ background-color: #cccccc; } .org-diff-hunk-header { /* diff-hunk-header */ background-color: #cccccc; } .org-diff-index { /* diff-index */ background-color: #b3b3b3; font-weight: bold; } .org-diff-nonexistent { /* diff-nonexistent */ background-color: #b3b3b3; font-weight: bold; } .org-diff-refine-change { /* diff-refine-change */ background-color: #d9d9d9; } .org-dired-directory { /* dired-directory */ color: #0000ff; } .org-dired-flagged { /* dired-flagged */ color: #ff0000; font-weight: bold; } .org-dired-header { /* dired-header */ color: #228b22; } .org-dired-ignored { /* dired-ignored */ color: #7f7f7f; } .org-dired-mark { /* dired-mark */ color: #008b8b; } .org-dired-marked { /* dired-marked */ color: #ff0000; font-weight: bold; } .org-dired-perm-write { /* dired-perm-write */ color: #b22222; } .org-dired-symlink { /* dired-symlink */ color: #a020f0; } .org-dired-warning { /* dired-warning */ color: #ff0000; font-weight: bold; } .org-doc { /* font-lock-doc-face */ color: #8b2252; } .org-escape-glyph { /* escape-glyph */ color: #a52a2a; } .org-file-name-shadow { /* file-name-shadow */ color: #7f7f7f; } .org-flyspell-duplicate { /* flyspell-duplicate */ color: #cdad00; font-weight: bold; text-decoration: underline; } .org-flyspell-incorrect { /* flyspell-incorrect */ color: #ff4500; font-weight: bold; text-decoration: underline; } .org-fringe { /* fringe */ background-color: #f2f2f2; } .org-function-name { /* font-lock-function-name-face */ color: teal; } .org-header-line { /* header-line */ color: #333333; background-color: #e5e5e5; } .org-help-argument-name { /* help-argument-name */ font-style: italic; } .org-highlight { /* highlight */ background-color: #b4eeb4; } .org-holiday { /* holiday */ background-color: #ffc0cb; } .org-isearch { /* isearch */ color: #b0e2ff; background-color: #cd00cd; } .org-isearch-fail { /* isearch-fail */ background-color: #ffc1c1; } .org-italic { /* italic */ font-style: italic; } .org-keyword { /* font-lock-keyword-face */ color: #0086b3; } .org-lazy-highlight { /* lazy-highlight */ background-color: #afeeee; } .org-link { /* link */ color: #0000ff; text-decoration: underline; } .org-link-visited { /* link-visited */ color: #8b008b; text-decoration: underline; } .org-log-edit-header { /* log-edit-header */ color: #a020f0; } .org-log-edit-summary { /* log-edit-summary */ color: #0000ff; } .org-log-edit-unknown-header { /* log-edit-unknown-header */ color: #b22222; } .org-match { /* match */ background-color: #ffff00; } .org-next-error { /* next-error */ background-color: #eedc82; } .org-nobreak-space { /* nobreak-space */ color: #a52a2a; text-decoration: underline; } .org-org-archived { /* org-archived */ color: #7f7f7f; } .org-org-block { /* org-block */ color: #7f7f7f; } .org-org-block-begin-line { /* org-block-begin-line */ color: #b22222; } .org-org-block-end-line { /* org-block-end-line */ color: #b22222; } .org-org-checkbox { /* org-checkbox */ font-weight: bold; } .org-org-checkbox-statistics-done { /* org-checkbox-statistics-done */ color: #228b22; font-weight: bold; } .org-org-checkbox-statistics-todo { /* org-checkbox-statistics-todo */ color: #ff0000; font-weight: bold; } .org-org-clock-overlay { /* org-clock-overlay */ background-color: #ffff00; } .org-org-code { /* org-code */ color: #7f7f7f; } .org-org-column { /* org-column */ background-color: #e5e5e5; } .org-org-column-title { /* org-column-title */ background-color: #e5e5e5; font-weight: bold; text-decoration: underline; } .org-org-date { /* org-date */ color: #a020f0; text-decoration: underline; } .org-org-document-info { /* org-document-info */ color: #191970; } .org-org-document-info-keyword { /* org-document-info-keyword */ color: #7f7f7f; } .org-org-document-title { /* org-document-title */ color: #191970; font-size: 144%; font-weight: bold; } .org-org-done { /* org-done */ color: #228b22; font-weight: bold; } .org-org-drawer { /* org-drawer */ color: #0000ff; } .org-org-ellipsis { /* org-ellipsis */ color: #b8860b; text-decoration: underline; } .org-org-footnote { /* org-footnote */ color: #a020f0; text-decoration: underline; } .org-org-formula { /* org-formula */ color: #b22222; } .org-org-headline-done { /* org-headline-done */ color: #bc8f8f; } .org-org-hide { /* org-hide */ color: #ffffff; } .org-org-latex-and-export-specials { /* org-latex-and-export-specials */ color: #8b4513; } .org-org-level-1 { /* org-level-1 */ color: #0000ff; } .org-org-level-2 { /* org-level-2 */ color: #a0522d; } .org-org-level-3 { /* org-level-3 */ color: #a020f0; } .org-org-level-4 { /* org-level-4 */ color: #b22222; } .org-org-level-5 { /* org-level-5 */ color: #228b22; } .org-org-level-6 { /* org-level-6 */ color: #008b8b; } .org-org-level-7 { /* org-level-7 */ color: #7a378b; } .org-org-level-8 { /* org-level-8 */ color: #8b2252; } .org-org-link { /* org-link */ color: #0000ff; text-decoration: underline; } .org-org-meta-line { /* org-meta-line */ color: #b22222; } .org-org-mode-line-clock { /* org-mode-line-clock */ color: #000000; background-color: #bfbfbf; } .org-org-mode-line-clock-overrun { /* org-mode-line-clock-overrun */ color: #000000; background-color: #ff0000; } .org-org-quote { /* org-quote */ color: #7f7f7f; } .org-org-scheduled { /* org-scheduled */ color: #006400; } .org-org-scheduled-previously { /* org-scheduled-previously */ color: #b22222; } .org-org-scheduled-today { /* org-scheduled-today */ color: #006400; } .org-org-sexp-date { /* org-sexp-date */ color: #a020f0; } .org-org-special-keyword { /* org-special-keyword */ color: #a020f0; } .org-org-table { /* org-table */ color: #0000ff; } .org-org-tag { /* org-tag */ font-weight: bold; } .org-org-target { /* org-target */ text-decoration: underline; } .org-org-time-grid { /* org-time-grid */ color: #b8860b; } .org-org-todo { /* org-todo */ color: #ff0000; font-weight: bold; } .org-org-upcoming-deadline { /* org-upcoming-deadline */ color: #b22222; } .org-org-verbatim { /* org-verbatim */ color: #7f7f7f; } .org-org-verse { /* org-verse */ color: #7f7f7f; } .org-org-warning { /* org-warning */ color: #ff0000; font-weight: bold; } .org-outline-1 { /* outline-1 */ color: #0000ff; } .org-outline-2 { /* outline-2 */ color: #a0522d; } .org-outline-3 { /* outline-3 */ color: #a020f0; } .org-outline-4 { /* outline-4 */ color: #b22222; } .org-outline-5 { /* outline-5 */ color: #228b22; } .org-outline-6 { /* outline-6 */ color: #008b8b; } .org-outline-7 { /* outline-7 */ color: #7a378b; } .org-outline-8 { /* outline-8 */ color: #8b2252; } .org-preprocessor { /* font-lock-preprocessor-face */ color: #7a378b; } .org-query-replace { /* query-replace */ color: #b0e2ff; background-color: #cd00cd; } .org-regexp-grouping-backslash { /* font-lock-regexp-grouping-backslash */ font-weight: bold; } .org-regexp-grouping-construct { /* font-lock-regexp-grouping-construct */ font-weight: bold; } .org-region { /* region */ background-color: #eedc82; } .org-secondary-selection { /* secondary-selection */ background-color: #ffff00; } .org-shadow { /* shadow */ color: #7f7f7f; } .org-show-paren-match { /* show-paren-match */ background-color: #40e0d0; } .org-show-paren-mismatch { /* show-paren-mismatch */ color: #ffffff; background-color: #a020f0; } .org-string { /* font-lock-string-face */ color: #dd1144; } .org-tool-bar { /* tool-bar */ color: #000000; background-color: #bfbfbf; } .org-tooltip { /* tooltip */ color: #000000; background-color: #ffffe0; } .org-trailing-whitespace { /* trailing-whitespace */ background-color: #ff0000; } .org-type { /* font-lock-type-face */ color: #228b22; } .org-underline { /* underline */ text-decoration: underline; } .org-variable-name { /* font-lock-variable-name-face */ color: teal; } .org-warning { /* font-lock-warning-face */ color: #ff0000; font-weight: bold; } .org-widget-button { /* widget-button */ font-weight: bold; } .org-widget-button-pressed { /* widget-button-pressed */ color: #ff0000; } .org-widget-documentation { /* widget-documentation */ color: #006400; } .org-widget-field { /* widget-field */ background-color: #d9d9d9; } .org-widget-inactive { /* widget-inactive */ color: #7f7f7f; } .org-widget-single-line-field { /* widget-single-line-field */ background-color: #d9d9d9; } #+end_src * JS :PROPERTIES: :header-args: :tangle js/readtheorg.js :END: #+begin_src js $(function() { $('.note').before("

Note

"); $('.seealso').before("

See also

"); $('.warning').before("

Warning

"); $('.caution').before("

Caution

"); $('.attention').before("

Attention

"); $('.tip').before("

Tip

"); $('.important').before("

Important

"); $('.hint').before("

Hint

"); $('.error').before("

Error

"); $('.danger').before("

Danger

"); }); $( document ).ready(function() { // Shift nav in mobile when clicking the menu. $(document).on('click', "[data-toggle='wy-nav-top']", function() { $("[data-toggle='wy-nav-shift']").toggleClass("shift"); $("[data-toggle='rst-versions']").toggleClass("shift"); }); // Close menu when you click a link. $(document).on('click', ".wy-menu-vertical .current ul li a", function() { $("[data-toggle='wy-nav-shift']").removeClass("shift"); $("[data-toggle='rst-versions']").toggleClass("shift"); }); $(document).on('click', "[data-toggle='rst-current-version']", function() { $("[data-toggle='rst-versions']").toggleClass("shift-up"); }); // Make tables responsive $("table.docutils:not(.field-list)").wrap("
"); }); $( document ).ready(function() { $('#text-table-of-contents ul').first().addClass('nav'); // ScrollSpy also requires that we use // a Bootstrap nav component. $('body').scrollspy({target: '#text-table-of-contents'}); // add sticky table headers $('table').stickyTableHeaders(); // set the height of tableOfContents var $postamble = $('#postamble'); var $tableOfContents = $('#table-of-contents'); $tableOfContents.css({paddingBottom: $postamble.outerHeight()}); // add TOC button var toggleSidebar = $('

Table of Contents

'); $('#content').prepend(toggleSidebar); // add close button when sidebar showed in mobile screen var closeBtn = $('Close'); var tocTitle = $('#table-of-contents').find('h2'); tocTitle.append(closeBtn); }); window.SphinxRtdTheme = (function (jquery) { var stickyNav = (function () { var navBar, win, stickyNavCssClass = 'stickynav', applyStickNav = function () { if (navBar.height() <= win.height()) { navBar.addClass(stickyNavCssClass); } else { navBar.removeClass(stickyNavCssClass); } }, enable = function () { applyStickNav(); win.on('resize', applyStickNav); }, init = function () { navBar = jquery('nav.wy-nav-side:first'); win = jquery(window); }; jquery(init); return { enable : enable }; }()); return { StickyNav : stickyNav }; }($)); #+end_src