2019-07-09 12:03:32 +00:00
|
|
|
|
/* CSS to be used for HTML Org-mode export
|
|
|
|
|
|
|
|
|
|
Author: Yann Esposito
|
|
|
|
|
*/
|
2019-07-08 21:16:48 +00:00
|
|
|
|
body {
|
2019-07-11 22:26:33 +00:00
|
|
|
|
font-family: menlo, monospace;
|
2019-07-08 21:16:48 +00:00
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 20px;
|
2019-07-13 21:30:59 +00:00
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
2019-07-08 21:16:48 +00:00
|
|
|
|
hyphens: auto;
|
|
|
|
|
-webkit-hyphens: auto;
|
|
|
|
|
-moz-hyphens:auto;
|
|
|
|
|
-ms-hyphens:auto;
|
|
|
|
|
}
|
2019-07-14 08:26:15 +00:00
|
|
|
|
#preamble {
|
2019-07-19 23:12:41 +00:00
|
|
|
|
border-bottom: solid 1px;
|
2019-07-14 08:26:15 +00:00
|
|
|
|
}
|
|
|
|
|
#postamble {
|
2019-07-19 23:12:41 +00:00
|
|
|
|
border-top: solid 1px;
|
2019-07-14 08:26:15 +00:00
|
|
|
|
}
|
2019-07-13 21:30:59 +00:00
|
|
|
|
#preamble,#postamble {
|
2019-07-14 08:26:15 +00:00
|
|
|
|
padding: 10px 0;
|
2019-07-13 21:30:59 +00:00
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
#preamble:focus,#postamble:focus,
|
|
|
|
|
#preamble:hover,#postamble:hover {
|
|
|
|
|
opacity:1;
|
|
|
|
|
}
|
|
|
|
|
#content,.content {
|
|
|
|
|
max-width: 50em;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
2019-07-04 06:38:15 +00:00
|
|
|
|
|
|
|
|
|
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,
|
2019-07-14 08:26:15 +00:00
|
|
|
|
p, ul, ol, section, header, .figure {
|
2019-07-04 06:38:15 +00:00
|
|
|
|
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; }
|
2019-07-11 22:26:33 +00:00
|
|
|
|
h1::before { content: "# "; }
|
|
|
|
|
h2::before { content: "## "; }
|
|
|
|
|
h3::before { content: "### "; }
|
|
|
|
|
h4::before { content: "#### "; }
|
|
|
|
|
h5::before { content: "##### "; }
|
|
|
|
|
h6::before { content: "###### "; }
|
2019-07-04 06:38:15 +00:00
|
|
|
|
hr {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 20px;
|
|
|
|
|
font-size: 0;
|
|
|
|
|
line-height: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
hr:after {
|
|
|
|
|
content: "----------------------------------------------------------------------------------------------------";
|
2019-07-11 22:26:33 +00:00
|
|
|
|
font-family: menlo, monospace;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
position: absolute;
|
2019-07-07 16:11:45 +00:00
|
|
|
|
opacity: 0.3;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
}
|
2019-07-08 21:16:48 +00:00
|
|
|
|
pre { max-width: 100%; overflow: scroll; }
|
2019-07-05 21:29:02 +00:00
|
|
|
|
pre::after,pre::before {
|
|
|
|
|
content: "~~~~~~~~~";
|
2019-07-08 21:16:48 +00:00
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 20px;
|
2019-07-05 21:29:02 +00:00
|
|
|
|
display: block;
|
2019-07-08 21:16:48 +00:00
|
|
|
|
opacity: 0.3; }
|
2019-07-09 11:34:13 +00:00
|
|
|
|
pre::before {
|
|
|
|
|
content: "~~~~~~~~~ " attr(class);
|
|
|
|
|
}
|
2019-07-04 06:38:15 +00:00
|
|
|
|
code {
|
2019-07-11 22:26:33 +00:00
|
|
|
|
font-family: menlo, monospace;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
}
|
|
|
|
|
pre code { background: none; }
|
|
|
|
|
blockquote {
|
2019-07-08 21:16:48 +00:00
|
|
|
|
margin-left: 0;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 17px;
|
|
|
|
|
padding-left: 2ch;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
2019-07-08 21:16:48 +00:00
|
|
|
|
blockquote *:first-child {margin-top: 0;}
|
|
|
|
|
blockquote *:last-child {margin-bottom: 0;}
|
2019-07-04 06:38:15 +00:00
|
|
|
|
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;
|
|
|
|
|
}
|
2019-07-08 21:16:48 +00:00
|
|
|
|
li li { padding-left: 20px; }
|
|
|
|
|
ul > li:before {
|
|
|
|
|
content: "– ";
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
opacity: 0.5;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
}
|
|
|
|
|
ol {
|
|
|
|
|
counter-reset: ol;
|
|
|
|
|
}
|
2019-07-08 21:16:48 +00:00
|
|
|
|
ol > li:before {
|
|
|
|
|
content: counter(ol) ". ";
|
2019-07-04 06:38:15 +00:00
|
|
|
|
counter-increment: ol;
|
2019-07-08 21:16:48 +00:00
|
|
|
|
font-weight: bold;
|
|
|
|
|
opacity: 0.5;
|
2019-07-04 06:38:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* colors */
|
|
|
|
|
|
2019-07-13 21:30:59 +00:00
|
|
|
|
img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 800px;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
}
|
2019-07-14 08:26:15 +00:00
|
|
|
|
p > img, li > img {
|
|
|
|
|
max-height: 1em;
|
|
|
|
|
margin: 0;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
2019-07-13 21:30:59 +00:00
|
|
|
|
footer {
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
.article-date {
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
font-size: 0.8;
|
|
|
|
|
}
|
|
|
|
|
table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
border: solid 1px;
|
|
|
|
|
}
|
|
|
|
|
td, th {
|
|
|
|
|
height: 20px;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
border-right: solid 1px;
|
|
|
|
|
border-left: solid 1px;
|
|
|
|
|
}
|
|
|
|
|
navigation {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-family: menlo, monospace;
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 0 20px 0;
|
|
|
|
|
}
|
|
|
|
|
navigation > a {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.footpara { display: inline; }
|
|
|
|
|
.footdef > sup {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.footdef > sup::after {
|
|
|
|
|
content: ": ";
|
|
|
|
|
}
|
2019-07-11 22:26:33 +00:00
|
|
|
|
|
2019-07-19 23:42:00 +00:00
|
|
|
|
/* org mode statuses */
|
|
|
|
|
.timestamp-wrapper { font-family: menlo, monospace; font-size: 12px; }
|
|
|
|
|
.todo, .done { font-family: menlo, monospace;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
padding: 1px 1ex;
|
|
|
|
|
}
|
2019-07-11 22:26:33 +00:00
|
|
|
|
|
2019-07-19 23:42:00 +00:00
|
|
|
|
/* colors */
|
2019-07-11 22:26:33 +00:00
|
|
|
|
|
2019-07-19 23:12:41 +00:00
|
|
|
|
:root {
|
|
|
|
|
color-scheme: light dark;
|
|
|
|
|
--base03: #002b36;
|
|
|
|
|
--base02: #073642;
|
|
|
|
|
--base01: #586e75;
|
|
|
|
|
--base00: #657b83;
|
|
|
|
|
--base0: #839496;
|
|
|
|
|
--base1: #93a1a1;
|
|
|
|
|
--base2: #eee8d5;
|
|
|
|
|
--base3: #fdf6e3;
|
|
|
|
|
--yellow: #b58900;
|
|
|
|
|
--orange: #cb4b16;
|
|
|
|
|
--red: #dc322f;
|
|
|
|
|
--magenta: #d33682;
|
|
|
|
|
--violet: #6c71c4;
|
|
|
|
|
--blue: #268bd2;
|
|
|
|
|
--cyan: #2aa198;
|
|
|
|
|
--green: #859900;
|
|
|
|
|
--transparent: rgba(255,255,255,0);
|
2019-07-19 23:39:20 +00:00
|
|
|
|
|
2019-07-19 23:12:41 +00:00
|
|
|
|
--main-background: #00151b; /* 0.5 darker than #002b36; */
|
|
|
|
|
--main-foreground: var(--base0);
|
2019-07-19 23:39:20 +00:00
|
|
|
|
--second-foreground: var(--base0);
|
|
|
|
|
--reveal-background: var(--base03);
|
|
|
|
|
--border-color: var(--base02);
|
2019-07-19 23:12:41 +00:00
|
|
|
|
--todo-txt: #000;
|
|
|
|
|
}
|
2019-07-11 22:26:33 +00:00
|
|
|
|
|
2019-07-19 23:12:41 +00:00
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
|
:root {
|
|
|
|
|
--main-background: #fafafa;
|
|
|
|
|
--main-foreground: var(--base01);
|
|
|
|
|
--second-foreground: var(--base00);
|
|
|
|
|
--reveal-background: var(--base3);
|
|
|
|
|
--border-color: var(--base2);
|
|
|
|
|
--todo-txt: #FFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-07-11 22:26:33 +00:00
|
|
|
|
|
2019-07-09 11:34:13 +00:00
|
|
|
|
body {
|
2019-07-19 23:12:41 +00:00
|
|
|
|
background: var(--main-background);
|
|
|
|
|
color: var(--main-foreground);
|
|
|
|
|
}
|
|
|
|
|
a, a:visited { color: var(--base1); }
|
|
|
|
|
a:hover, a:active, a:focus { color: var(--yellow); }
|
|
|
|
|
thead { background-color: var(--reveal-background);
|
|
|
|
|
color: var(--second-fg); }
|
|
|
|
|
tr:hover { background-color: var(--reveal-background); }
|
2019-07-14 08:26:15 +00:00
|
|
|
|
#postamble:hover, #preamble:hover {
|
2019-07-19 23:12:41 +00:00
|
|
|
|
background-color: var(--reveal-background);
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
h1 { color: var(--violet);}
|
|
|
|
|
h2 { color: var(--magenta);}
|
|
|
|
|
h3 { color: var(--red);}
|
|
|
|
|
h4 { color: var(--orange);}
|
|
|
|
|
h5 { color: var(--yellow);}
|
|
|
|
|
h6 { color: var(--green);}
|
|
|
|
|
table, td, th { border-color: var(--border-color); }
|
|
|
|
|
code { background: var(--reveal-background); }
|
|
|
|
|
#preamble,#postamble {
|
|
|
|
|
border-color: var(--transparent);
|
|
|
|
|
}
|
2019-07-09 11:34:13 +00:00
|
|
|
|
/* -------- */
|
2019-07-11 22:26:33 +00:00
|
|
|
|
/* org colors */
|
2019-07-19 23:12:41 +00:00
|
|
|
|
.todo, .done { color: var(--todo-txt); }
|
2019-07-19 23:42:00 +00:00
|
|
|
|
.TODO { background-color: var(--red); }
|
|
|
|
|
.IN_PROGRESS { background-color: var(--yellow); }
|
|
|
|
|
.IN_REVIEW { background-color: var(--cyan); }
|
|
|
|
|
.HOLD { background-color: var(--violet); }
|
|
|
|
|
.WAITING { background-color: var(--violet); }
|
|
|
|
|
.DONE { background-color: var(--green); }
|
|
|
|
|
.CANCELED { background-color: var(--magenta); }
|