#+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
- header-args
- :tangle css/readtheorg.css
#+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
- header-args
- :tangle css/readtheorg.css
#+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
- header-args
- :tangle css/readtheorg.css
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
- header-args
- :tangle css/readtheorg.css
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
- header-args
- :tangle css/readtheorg.css
Optional image caption
#+begin_src css
.figure p{
color:#000;
font:italic 85%/1 arial,sans-serif;
padding:1em 0;
}
#+end_src
Helper classes
- header-args
- :tangle css/readtheorg.css
#+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
- header-args
- :tangle css/readtheorg.css
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 {
background-color:#2980B9;
width:100%;
height:50px;
left:0;
top:0;
color: white;
font-size: 100%;
line-height: 50px;
position:fixed;
margin: 0;
padding: 0;
opacity:0.7;
z-index: 10;
}
#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
- header-args
- :tangle css/readtheorg.css
#+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;
}
.nav .timestamp {
color: inherit;
}
#+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
- header-args
- :tangle css/htmlize.css
#+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
- header-args
- :tangle js/readtheorg.js
#+begin_src js
$(function() {
$('.note').before("<p class='admonition-title note'>Note</p>");
$('.seealso').before("<p class='admonition-title seealso'>See also</p>");
$('.warning').before("<p class='admonition-title warning'>Warning</p>");
$('.caution').before("<p class='admonition-title caution'>Caution</p>");
$('.attention').before("<p class='admonition-title attention'>Attention</p>");
$('.tip').before("<p class='admonition-title tip'>Tip</p>");
$('.important').before("<p class='admonition-title important'>Important</p>");
$('.hint').before("<p class='admonition-title hint'>Hint</p>");
$('.error').before("<p class='admonition-title error'>Error</p>");
$('.danger').before("<p class='admonition-title danger'>Danger</p>");
});
$( 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("<div class='wy-table-responsive'></div>");
});
$( 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'});
// DON'T add sticky table headers (Fix issue #69?)
// $('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 = $('<div id="toggle-sidebar"><a href="#table-of-contents"><h2>Table of Contents</h2></a></div>');
$('#content').prepend(toggleSidebar);
// add close button when sidebar showed in mobile screen
var closeBtn = $('<a class="close-sidebar" href="#">Close</a>');
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