her.esy.fun/src/css/minimalist.css
Yann Esposito (Yogsototh) 32ab26c448
Fixes for css too.
2019-11-11 01:05:52 +01:00

828 lines
21 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* CSS to be used for HTML Org-mode export
Author: Yann Esposito
*/
:root {
--font-size: 14px;
--line-height: 16px;
}
/* Fonts */
body {
font-family: Consolas, Anonymous Pro, Monaco, monospace;
font-size: var(--font-size);
line-height: var(--line-height);
}
code {
font-family: Menlo, Monaco, monospace;
}
pre, pre code {
font-family: Menlo, Monaco, monospace;
line-height: 1em;
}
.todo, .done {
font-family: Menlo, Monaco, monospace;
}
/* Layout */
body {
margin: 0;
padding: 0;
border: 0;
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;
}
footer {
font-size: .8em;
line-height: 1.25em;
padding: 1em 0;
}
h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header,
figure {
margin-top: 1em;
margin-bottom: 1em;
}
figure {
margin: 1em 0px;
}
figure > img {
margin: 0px;
}
li {
position: relative;
display: block;
padding-left: 1.5em;
}
ul > li:before {
content: " ";
opacity: 0.5;
float: left;
position: relative;
left: -1.5em;
text-align: right;
width: 0;
}
ol {
counter-reset: ol;
}
ol > li:before {
content: counter(ol) ". ";
counter-increment: ol;
float: left;
text-align: right;
position: relative;
left: -1.5em;
width: 0;
}
ol > li:nth-child(n+10) {
padding-left:28px;
}
ol > li:nth-child(n+10):before {
left: -28px;
}
img {
max-width: 100%;
max-height: 800px;
margin: 1em auto;
}
p > img, li > img {
max-height: 1em;
margin: 0;
vertical-align: middle;
}
table {
max-width: 100%;
margin: 1em 0;
border-collapse: collapse;
border: solid 1px;
overflow: scroll;
}
td, th {
height: 1em;
padding: 0 10px;
text-align: left;
vertical-align: middle;
border-right: solid 1px;
border-left: solid 1px;
}
sup {
vertical-align: top;
position: relative;
top: -.25em;
}
sup > a {
text-decoration: none;
padding: 1px 2px;
font-weight: bold;
}
/* Markdown tricks */
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: "# ";
}
h2::before {
content: "## ";
}
h3::before {
content: "### ";
}
h4::before {
content: "#### ";
}
h5::before {
content: "##### ";
}
h6::before {
content: "###### ";
}
hr {
position: relative;
height: 1px;
line-height: 0;
overflow: hidden;
border: 0;
}
hr:after {
content: "----------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
width: 100%;
font-weight: bold;
word-wrap: break-word;
}
pre { max-width: 100%; overflow: scroll; }
pre::after,pre::before {
content: "~~~~~~~~~";
display: block; }
pre::before {
content: "~~~~~~~~~ " attr(class);
}
pre code {
background: none;
}
blockquote {
margin-left: 0;
position: relative;
padding-left: 17px;
padding-left: 2ch;
overflow: hidden;
}
.notes *:first-child,
blockquote *:first-child {
margin-top: 0;
}
.notes *:last-child,
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;
}
navigation {
font-weight: bold;
display: block;
margin: 10px 0;
}
navigation > a {
margin-right: 10px;
}
/* org mode ids and classes */
.figure {
margin-top: 1em;
margin-bottom: 1em;
}
#content,.content {
max-width: 46em;
margin: 0 1em;
padding: 1px;
margin: 0 auto;
}
#content:first-child {
margin-top: 0;
}
#postamble {
margin-top: 1em;
}
.timestamp-wrapper {
font-size: 12px;
}
.todo, .done {
font-size: 12px;
font-weight: bold;
padding: 1px 1ex;
}
.article-date {
font-size: 0.8em;
font-style: italic;
float: right;
}
.footpara {
display: inline;
}
.footdef > sup {
vertical-align: middle;
}
.footdef > sup::after {
content: ": ";
}
.notes {
padding: 5px 10px;
}
.notes::before {
content: "☞";
float: left;
display: inline-block;
width: 1.5em;
}
.underline {
text-decoration: underline;
}
#preamble:after, #postamble:before {
content: "--------------------------------------------------------------------------------";
display: block;
height: 1em;
overflow: hidden;
text-align: center;
width: 100%;
}
/* colors theme */
:root {
color-scheme: light dark; /* support color scheme */
--base03: #202631;
--base02: #2B313C;
--base01: #656B74;
--base00: #727781;
--base0: #8B919B;
--base1: #989EA8;
--base2: #E5E8ED;
--base3: #F4F7FC;
--yellow: #A98D50;
--orange: #aa6550;
--red: #b85a64;
--magenta: #af53b0;
--violet: #846f93;
--blue: #5679a4;
--cyan: #4c8493;
--green: #728b5c;
--transparent: rgba(255,255,255,0);
/* Solaryzed accented colors */
--main-background: var(--base03);
--main-foreground: var(--base0);
--second-background: var(--base02);
--second-foreground: var(--base01);
--reveal-foreground: var(--base1);
--reveal-background: var(--base02);
--soft-foreground: var(--base01);
--border-color: var(--base02);
--todo-txt: #000;
--color-h1: var(--reveal-foreground);
--color-h2: var(--reveal-foreground);
--color-h3: var(--reveal-foreground);
--color-h4: var(--reveal-foreground);
--color-h5: var(--reveal-foreground);
--color-h6: var(--reveal-foreground);
--color-link: var(--green);
}
/* org colors */
@media (prefers-color-scheme: light) {
:root {
--main-background: var(--base3);
--main-foreground: var(--base00);
--second-background: var(--base2);
--second-foreground: var(--base1);
--reveal-foreground: var(--base01);
--reveal-background: var(--base2);
--soft-foreground: var(--base1);
--border-color: var(--base2);
--todo-txt: #FFF;
--color-h1: var(--reveal-foreground);
--color-h2: var(--reveal-foreground);
--color-h3: var(--reveal-foreground);
--color-h4: var(--reveal-foreground);
--color-h5: var(--reveal-foreground);
--color-h6: var(--reveal-foreground);
--color-link: var(--orange);
}
}
/* Dark themes soften and darken images */
@media (prefers-color-scheme: dark) {
img {
filter: saturate(0.8) brightness(0.8);
}
}
#labels {
width: 100%;
text-align: right;
}
#labels label {
text-decoration: underline;
cursor: pointer;
font-style: italic;
}
/* Light themes does not soften and darken images */
input#light:checked ~ .main img,
input#simple:checked ~ .main img ,
input#modern:checked ~ .main img {
filter: none;
}
input#dark:checked ~ .main img,
input#darksimple:checked ~ .main img {
filter: saturate(0.8) brightness(0.8);
}
input#matrix:checked ~ .main img {
filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(2.5);
}
input#simple:checked ~ .main #preamble:after,
input#simple:checked ~ .main #postamble:before,
input#darksimple:checked ~ .main #preamble:after,
input#darksimple:checked ~ .main #postamble:before,
input#modern:checked ~ .main #preamble:after,
input#modern:checked ~ .main #postamble:before
{
display: none;
}
/* --------------------------------------------------------------------------- */
/* Dark theme selected */
input#dark:checked ~ .main, input#dark:checked ~ #labels {
--main-background: var(--base03);
--main-foreground: var(--base0);
--second-background: var(--base02);
--second-foreground: var(--base01);
--reveal-foreground: var(--base1);
--reveal-background: var(--base02);
--soft-foreground: var(--base01);
--border-color: var(--base02);
--todo-txt: #000;
--color-h1: var(--reveal-foreground);
--color-h2: var(--reveal-foreground);
--color-h3: var(--reveal-foreground);
--color-h4: var(--reveal-foreground);
--color-h5: var(--reveal-foreground);
--color-h6: var(--reveal-foreground);
--color-link: var(--green);
}
/* --------------------------------------------------------------------------- */
/* Light theme selected */
input#light:checked ~ .main, input#light:checked ~ #labels {
--main-background: var(--base3);
--main-foreground: var(--base01);
--second-background: var(--base2);
--second-foreground: var(--base00);
--reveal-foreground: var(--base01);
--reveal-background: var(--base2);
--soft-foreground: var(--base1);
--border-color: var(--base2);
--todo-txt: #FFF;
--color-h1: var(--reveal-foreground);
--color-h2: var(--reveal-foreground);
--color-h3: var(--reveal-foreground);
--color-h4: var(--reveal-foreground);
--color-h5: var(--reveal-foreground);
--color-h6: var(--reveal-foreground);
--color-link: var(--orange);
}
/* --------------------------------------------------------------------------- */
/* Light simple theme selected */
input#simple:checked ~ .main, input#simple:checked ~ #labels {
--main-background: #fff;
--main-foreground: #333;
--second-background: #eee;
--second-foreground: #222;
--reveal-foreground: #000;
--reveal-background: #fff;
--soft-foreground: #555;
--border-color: #CCC;
--todo-txt: #333;
--color-h1: #333;
--color-h2: #333;
--color-h3: #333;
--color-h4: #333;
--color-h5: #333;
--color-h6: #333;
--color-link: var(--orange);
font-family: "Helvetica Neue";
font-size: 14px;
line-height: 1.5em;
}
input#simple:checked ~ #labels .content{
margin: 0 auto;
}
input#simple:checked ~ .main .content,
input#simple:checked ~ .main #content {
margin: 0 auto;
}
input#simple:checked ~ .main code,
input#simple:checked ~ .main pre{
font-family: monospace;
}
/* --------------------------------------------------------------------------- */
/* Dark matrix theme selected */
input#matrix:checked ~ .main, input#matrix:checked ~ #labels {
--main-background: #000;
--main-foreground: #0b0;
--second-background: #040;
--second-foreground: #080;
--reveal-foreground: #0f0;
--reveal-background: #000;
--soft-foreground: #080;
--border-color: #080;
--todo-txt: #0b0;
--color-h1: #0b0;
--color-h2: #0b0;
--color-h3: #0b0;
--color-h4: #0b0;
--color-h5: #0b0;
--color-h6: #0b0;
--color-link: #080;
font-family: monospace;
}
input#matrix:checked ~ .main code,
input#matrix:checked ~ .main pre {
font-family: monospace;
}
/* --------------------------------------------------------------------------- */
/* Light modern theme selected */
input#modern:checked ~ .main, input#modern:checked ~ #labels {
--main-background: #fff;
--main-foreground: #444;
--second-background: #eee;
--second-foreground: #aaa;
--reveal-foreground: #000;
--reveal-background: #eee;
--soft-foreground: #888;
--border-color: #ddd;
--todo-txt: #000;
--color-link: var(--magenta);
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.5em;
}
input#modern:checked ~ #labels a {
color: #fff;
}
input#modern:checked ~ .main .content,
input#modern:checked ~ .main #content {
margin: 0 auto;
}
input#modern:checked ~ .main blockquote:after {
display: none;
}
input#modern:checked ~ .main blockquote {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
font-size: 20px;
line-height: 30px;
border-left: solid 10px;
}
input#modern:checked ~ .main h1,
input#modern:checked ~ .main h2 {
font-family: "Hoefler Text", Georgia, serif;
font-style: italic;
font-size: 2em;
line-height: 1.5em;
margin: 1em 0;
color: var(--reveal-foreground);
}
input#modern:checked ~ .main h3,
input#modern:checked ~ .main h4,
input#modern:checked ~ .main h5,
input#modern:checked ~ .main h6 {
font-weight: 200;
font-size: 1.5em;
line-height: 1.5em;
margin: 1em 0;
color: var(--reveal-foreground);
}
input#modern:checked ~ .main h4{
font-size: 1.25em;
line-height: 1.25em;
}
input#modern:checked ~ .main h5,
input#modern:checked ~ .main h6 {
font-size: 1em;
line-height: 1em;
}
input#modern:checked ~ .main #preamble {
border-bottom: solid 1px rgba(0,0,0,0.2);
}
input#modern:checked ~ .main #postamble {
border-top: solid 1px rgba(0,0,0,0.2);
}
input#modern:checked ~ .main #preamble h1 {
font-size: 4em;
line-height: 1.5em;
margin: .5em 0;
}
input#modern:checked ~ .main h1::before,
input#modern:checked ~ .main h2::before,
input#modern:checked ~ .main h3::before,
input#modern:checked ~ .main h4::before,
input#modern:checked ~ .main h5::before,
input#modern:checked ~ .main h6::before {
content: "";
}
input#modern:checked ~ .main pre {
font-size: 14px;
line-height: 1em;
border-left: solid 4px var(--soft-foreground);
padding-left: 1em;
}
input#modern:checked ~ .main pre::before,
input#modern:checked ~ .main pre::after {
content: "";
}
input#modern:checked ~ .main #preamble,
input#modern:checked ~ .main #postamble {
background-color: var(--cyan);
padding: 1em 0;
}
input#modern:checked ~ .main #preamble {
margin-bottom: 2em;
}
input#modern:checked ~ .main #postamble {
margin-top: 2em;
}
input#modern:checked ~ .main #postamble code {
background-color: transparent;
}
input#modern:checked ~ .main #preamble *,
input#modern:checked ~ .main #postamble * {
color: #fff;
}
input#modern:checked ~ #labels {
background: var(--cyan);
color: #fff;
}
input#modern:checked ~ #labels .content {
margin: 0 auto;
}
/* --------------------------------------------------------------------------- */
/* Dark simple theme selected */
input#darksimple:checked ~ .main, input#darksimple:checked ~ #labels {
--main-background: #000;
--main-foreground: #ccc;
--second-background: #111;
--second-foreground: #ddd;
--reveal-foreground: #fff;
--reveal-background: #000;
--soft-foreground: #ccc;
--border-color: #ccc;
--todo-txt: #ccc;
--color-h1: #ccc;
--color-h2: #ccc;
--color-h3: #ccc;
--color-h4: #ccc;
--color-h5: #ccc;
--color-h6: #ccc;
--color-link: var(--green);
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.5em;
}
input#darksimple:checked ~ #labels .content{
margin: 0 auto;
}
input#darksimple:checked ~ .main code,
input#darksimple:checked ~ .main pre {
font-family: monospace;
}
input#darksimple:checked ~ .main .content,
input#darksimple:checked ~ .main #content {
margin: 0 auto;
}
/* --------------------------------------------------------------------------- */
/* Default color theme */
body,.main {
background: var(--main-background);
color: var(--main-foreground);
min-height: 100vh;
}
::selection, .main ::selection,
::-moz-selection, .main ::-moz-selection {
color: white;
background-color: var(--blue);
}
a, a:visited,
.main a, .main a:visited {
color: var(--reveal-foreground);
}
b, strong, i, em {
color: var(--reveal-foreground);
}
sup > a {
background: var(--reveal-background);
}
body > input { display:none; }
#labels {
background: var(--second-background);
color: var(--second-foreground);
}
.keywords {
color: var(--second-foreground);
}
li .keywords {
float: right;
}
.main ol > li:before, ol > li:before {
color: var(--soft-foreground)
}
pre::after,pre::before,hr:after,
.main pre::after,.main pre::before,.main hr:after {
color: var(--soft-foreground);
}
#labels label:hover,
a:hover, a:active, a:focus,
.main a:hover,.main a:active,.main a:focus {
color: white;
background: var(--color-link);
}
navigation a, navigation a:visited,
.main navigation a,.main navigation a:visited {
color: var(--soft-foreground);
}
navigation a:focus, navigation a:hover,
.main navigation a:focus,.main navigation a:hover {
color: white;
background: var(--color-link);
}
thead,
.main thead {
background-color: var(--reveal-background);
color: var(--second-foreground);
}
#preamble:after, #postamble:before {
color: var(--second-foreground);
}
tr:hover,
.main tr:hover {
background-color: var(--reveal-background);
}
.description {
color: var(--second-foreground);
}
h1, .main h1 {
color: var(--color-h1);
}
h2, .main h2 {
color: var(--color-h2);
}
h3, .main h3 {
color: var(--color-h3);
}
h4, .main h4 {
color: var(--color-h4);
}
h5, .main h5 {
color: var(--color-h5);
}
h6, .main h6 {
color: var(--color-h6);
}
table, td, th,
.main table,.main td,.main th {
border-color: var(--border-color);
}
code, .main code {
background: var(--reveal-background);
}
blockquote:after, .main blockquote:after {
color: var(--soft-foreground);
}
#preamble,#postamble,.main #preamble, .main #postamble {
border-color: var(--transparent);
}
.article-date, .main .article-date {
color: var(--soft-foreground);
}
/* -------- */
/* org colors */
.todo, .done, .main .todo, .main .done {
background-color: var(--reveal-background);
border: solid 1px;
height: 10px;
display: inline-block;
line-height: 12px;
font-weight: bold;
font-size: 10px;
}
.TODO, .main .TODO {
color: var(--red);
}
.IN_PROGRESS, .main .IN_PROGRESS {
color: var(--yellow);
}
.IN_REVIEW, .main .IN_REVIEW {
color: var(--cyan);
}
.HOLD, .main .HOLD {
color: var(--violet);
}
.WAITING, .main .WAITING {
color: var(--violet);
}
.DONE, .main .DONE {
color: var(--green);
}
.CANCELED, .main .CANCELED {
color: var(--magenta);
}
.notes, .main .notes {
background-color: var(--reveal-background);
color: var(--reveal-foreground);
}
/* ---- SYNTAX HIGHLIGHTING ---- */
pre span.org-builtin {color:var(--cyan);}
pre span.org-string {color:var(--green);}
pre span.org-doc {color:var(--green);}
pre span.org-keyword {color:var(--green);}
pre span.org-variable-name {color:var(--blue);}
pre span.org-function-name {color:var(--blue);}
pre span.org-type {color:var(--yellow);}
pre span.org-preprocessor {color:var(--second-foreground);}
pre span.org-constant {color:var(--yellow);}
pre span.org-comment-delimiter {color:var(--second-foreground);}
pre span.org-comment {color:var(--second-foreground);}
pre span.org-css-selector {color:var(--cyan);}
pre span.org-outshine-level-1 {color:var(--second-foreground);}
pre span.org-outshine-level-2 {color:var(--second-foreground);}
pre span.org-outshine-level-3 {color:var(--second-foreground);}
pre span.org-outshine-level-4 {color:var(--second-foreground);}
pre span.org-outshine-level-5 {color:var(--second-foreground);}
pre span.org-outshine-level-6 {color:var(--second-foreground);}
pre span.org-outshine-level-7 {color:var(--second-foreground);}
pre span.org-outshine-level-8 {color:var(--second-foreground);}
pre span.org-outshine-level-9 {color:var(--second-foreground);}
pre span.org-nix-builtin {color:var(--blue);}
pre span.org-nix-attribute {color:var(--cyan);}
pre span.org-highlight-number-number {color:var(--reveal-foreground);}
pre span.org-rainbow-delimiters-depth-1 {color:var(--cyan);}
pre span.org-rainbow-delimiters-depth-2 {color:var(--blue);}
pre span.org-rainbow-delimiters-depth-3 {color:var(--violet);}
pre span.org-rainbow-delimiters-depth-4 {color:var(--magenta);}
pre span.org-rainbow-delimiters-depth-5 {color:var(--red);}
pre span.org-rainbow-delimiters-depth-6 {color:var(--orange);}
pre span.org-rainbow-delimiters-depth-7 {color:var(--yellow);}
pre span.org-rainbow-delimiters-depth-8 {color:var(--green);}
pre span.org-rainbow-delimiters-depth-9 {color:var(--cyan);}
pre span.org-sh-quoted-exec {color:var(--magenta);}
pre span.org-sh-heredoc {color:var(--green);}
pre span.org-diff-added {color:var(--green);}
pre span.org-diff-changed {color:var(--blue);}
pre span.org-diff-header {color:var(--yellow);}
pre span.org-diff-hunk-header {color:var(--magenta);}
pre span.org-diff-none {color:var(--second-foreground);}
pre span.org-diff-removed {color:var(--red);}