174 lines
4.4 KiB
CSS
174 lines
4.4 KiB
CSS
/* CSS to be used for HTML Org-mode export
|
||
|
||
Author: Yann Esposito
|
||
*/
|
||
body {
|
||
font-family: "Helvetica neue", sans-serif;
|
||
font-size: 15px;
|
||
line-height: 20px;
|
||
max-width: 50em;
|
||
margin: 0 auto;
|
||
hyphens: auto;
|
||
-webkit-hyphens: auto;
|
||
-moz-hyphens:auto;
|
||
-ms-hyphens:auto;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6,
|
||
pre, code, blockquote, ol, ul,
|
||
ol ol, ul ul, ul ol, ol ul, li,
|
||
p, section, header, footer {
|
||
float: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6,
|
||
pre, code, blockquote,
|
||
p, ul, ol, section, header, footer, .figure {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
h1 { font-size: 1em; }
|
||
h2 { font-size: 1em; }
|
||
h3 { font-size: 1em; }
|
||
h4 { font-size: 1em; }
|
||
h5 { font-size: 1em; }
|
||
h6 { font-size: 1em; }
|
||
h1::before { content: "# "; opacity: 0.5; }
|
||
h2::before { content: "## "; opacity: 0.5; }
|
||
h3::before { content: "### "; opacity: 0.5; }
|
||
h4::before { content: "#### "; opacity: 0.5; }
|
||
h5::before { content: "##### "; opacity: 0.5; }
|
||
h6::before { content: "###### "; opacity: 0.5; }
|
||
hr {
|
||
position: relative;
|
||
height: 20px;
|
||
font-size: 0;
|
||
line-height: 0;
|
||
overflow: hidden;
|
||
border: 0;
|
||
margin: 20px 0;
|
||
}
|
||
hr:after {
|
||
content: "----------------------------------------------------------------------------------------------------";
|
||
font-family: "courrier new", monospace;
|
||
position: absolute;
|
||
opacity: 0.3;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
width: 100%;
|
||
word-wrap: break-word;
|
||
}
|
||
pre { max-width: 100%; overflow: scroll; }
|
||
pre::after,pre::before {
|
||
content: "~~~~~~~~~";
|
||
font-size: 16px;
|
||
line-height: 20px;
|
||
display: block;
|
||
opacity: 0.3; }
|
||
pre::before {
|
||
content: "~~~~~~~~~ " attr(class);
|
||
}
|
||
code {
|
||
font-family: "courrier new", monospace;
|
||
}
|
||
pre code { background: none; }
|
||
blockquote {
|
||
margin-left: 0;
|
||
position: relative;
|
||
padding-left: 17px;
|
||
padding-left: 2ch;
|
||
overflow: hidden;
|
||
}
|
||
blockquote *:first-child {margin-top: 0;}
|
||
blockquote *:last-child {margin-bottom: 0;}
|
||
blockquote:after {
|
||
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
|
||
white-space: pre;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
line-height: 20px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
li {
|
||
position: relative;
|
||
display: block;
|
||
}
|
||
li li { padding-left: 20px; }
|
||
ul > li:before {
|
||
content: "– ";
|
||
font-weight: bold;
|
||
opacity: 0.5;
|
||
}
|
||
ol {
|
||
counter-reset: ol;
|
||
}
|
||
ol > li:before {
|
||
content: counter(ol) ". ";
|
||
counter-increment: ol;
|
||
font-weight: bold;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* colors */
|
||
|
||
img { max-width: 100%;
|
||
max-height: 800px;
|
||
margin: 20px auto; }
|
||
footer { font-size: 0.8em; opacity: 0.5; }
|
||
footer:hover { opacity: 1; }
|
||
navigation { font-weight: bold;
|
||
font-family: "courrier new", monospace;
|
||
}
|
||
navigation a { display: inline-block;
|
||
padding: .5ex 1ex;
|
||
margin-right: 1em;
|
||
}
|
||
.article-date { opacity: 0.5; font-size: 0.8; }
|
||
|
||
table { width: 100%; margin: 20px 0; border-collapse: collapse; }
|
||
th { height: 20px;
|
||
padding: 0 10px;
|
||
text-align: left;
|
||
}
|
||
td { height: 20px;
|
||
vertical-align: middle;
|
||
padding: 0 10px; }
|
||
|
||
/* colors */
|
||
body {
|
||
background: #00151b; // 0.5 darker than #002b36;
|
||
color: #839496;
|
||
}
|
||
p a, p a:visited { color: #93a1a1; }
|
||
a, a:visited { color: #2aa198; }
|
||
a:active, a:hover, a:focus { color: #268bd2; }
|
||
thead { background-color: #073642;
|
||
color: #93a1a1; }
|
||
tr:hover { background-color: #073642;
|
||
}
|
||
h1 { color: #6c71c4;}
|
||
h2 { color: #d33682;}
|
||
h3 { color: #dc322f;}
|
||
h4 { color: #cb4b16;}
|
||
h5 { color: #b58900;}
|
||
h6 { color: #859900;}
|
||
td, th { border-color: #073642; }
|
||
code { background: #002b36; }
|
||
/* -------- */
|
||
/* org mode statuses */
|
||
.todo, .done { color: #000; font-family: "courier new", monospace; font-size: 12px; font-weight: bold; line-height: 20px; padding: 1px 1ex; }
|
||
.TODO { background-color: #dc322f; }
|
||
.IN_PROGRESS { background-color: #b58900; }
|
||
.IN_REVIEW { background-color: #2aa198; }
|
||
.HOLD { background-color: #6c71c4; }
|
||
.WAITING { background-color: #6c71c4; }
|
||
.DONE { background-color: #859900; }
|
||
.CANCELED { background-color: #d33682; }
|
||
.timestamp-wrapper { font-family: "courier new", monospace; font-size: 12px; }
|