596 lines
9.9 KiB
SCSS
596 lines
9.9 KiB
SCSS
$text-pad: 1vw;
|
|
$text-width: 50em;
|
|
$article-width: calc(#{$text-width} + #{$text-pad} * 2);
|
|
$toc-max-width: 33em;
|
|
$toc-min-width: 15em;
|
|
$body-margin: 8px;
|
|
$block-indent: 2em;
|
|
$grey-pad-vertical: 0.5em;
|
|
$grey-pad-horizontal: 0.5rem;
|
|
$half-grey-box-border: 1px;
|
|
|
|
body {
|
|
margin: $body-margin $body-margin 2em $body-margin;
|
|
line-height: 1.5;
|
|
hyphens: auto;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
a:not(:hover) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#article h2 a,
|
|
#article h3 a,
|
|
#article h4 a,
|
|
#article h5 a,
|
|
#article h6 a {
|
|
color: inherit;
|
|
}
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
|
|
#myflex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: $half-grey-box-border;
|
|
}
|
|
|
|
.card {
|
|
flex-basis: 25em;
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
max-width: 50em;
|
|
margin: -$half-grey-box-border;
|
|
}
|
|
|
|
|
|
.middle {
|
|
height: 100%;
|
|
}
|
|
|
|
.inner {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 0.01px; // For some weird reason, this has to be non-zero, otherwise the link hitbox will be smaller at the top
|
|
}
|
|
|
|
|
|
div.abstract {
|
|
margin: 2em 2em 2em 2em;
|
|
font-size: 95%;
|
|
}
|
|
|
|
div.abstract-title {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
|
|
#sidebar {
|
|
line-height: 1.2;
|
|
padding-left: 1.8em;
|
|
box-sizing: border-box;
|
|
// Size 1: invisible anyway
|
|
// Size 2: 100% - body-margin*2 - article-width
|
|
// Size 3: toc-max-width
|
|
// Size 4: toc-max-width
|
|
max-width: calc(100% - #{$body-margin}*2 - #{$article-width});
|
|
position: fixed;
|
|
// Size 1: invisible anyway
|
|
// Size 2: article-width
|
|
// Size 3: 100% - body-margin*2- toc-max-width
|
|
// Size 4: 50% - $body-margin + $article-width/2
|
|
left: calc(max(#{$article-width} + #{$body-margin}, min(50% + #{$article-width}/2, 100% - #{$toc-max-width} - #{$body-margin})));
|
|
}
|
|
|
|
// Size 1: invisible
|
|
// Size 2: visible
|
|
// Size 3: visible
|
|
// Size 4: visible
|
|
@media not screen and (min-width: calc(#{$article-width} + #{$toc-min-width} + #{$body-margin}*2)) {
|
|
#sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#article {
|
|
// Size 1: 0
|
|
// Size 2: 0
|
|
// Size 3: 100% - text-width - toc-max-width
|
|
// Size 4: 50% - text-width/2
|
|
// 50% - #{$body-margin} - #{$article-width}/2
|
|
margin-left: calc(max(0px, min(100% - #{$article-width} - #{$toc-max-width}, 50% - #{$article-width}/2)));
|
|
//margin: auto;
|
|
padding-left: $text-pad;
|
|
padding-right: $text-pad;
|
|
padding-bottom: 4em;
|
|
max-width: $text-width;
|
|
}
|
|
|
|
#TOC li {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
#TOC>ul {
|
|
padding-left: 0;
|
|
}
|
|
|
|
|
|
code {
|
|
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
|
|
font-size: 85%;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
p code {
|
|
padding: 0.2em 0.2em
|
|
}
|
|
|
|
pre {
|
|
/* How much the grey area in code blocks extends outwards */
|
|
padding: $grey-pad-vertical $grey-pad-horizontal;
|
|
margin: 1em $block-indent;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
|
|
/* Needed for linenumbering:
|
|
```{.julia .numberLines startFrom="20"}
|
|
function f()
|
|
1+2
|
|
end
|
|
``` */
|
|
.sourceCode {
|
|
overflow: visible;
|
|
}
|
|
|
|
pre.numberSource {
|
|
counter-reset: source-line 0;
|
|
}
|
|
|
|
pre.numberSource code>span a:first-child {
|
|
counter-increment: source-line;
|
|
position: relative;
|
|
}
|
|
|
|
pre.numberSource code>span a:first-child::before {
|
|
content: counter(source-line);
|
|
position: absolute;
|
|
left: calc(-0.3em - #{$grey-pad-horizontal} - #{$block-indent});
|
|
user-select: none;
|
|
text-align: right;
|
|
vertical-align: baseline;
|
|
display: inline-block;
|
|
width: calc(#{$block-indent});
|
|
}
|
|
|
|
|
|
/* Some environments do not support the prefores-color-scheme media query. Then neither the light theme nor the dark theme will be used. We could just use the light theme as a default, but Idgaf.*/
|
|
@media (prefers-color-scheme: light) {
|
|
html {
|
|
color: #000000;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
:target {
|
|
// http://jsfiddle.net/davidThomas/NGyVL/
|
|
background-color: #ff0;
|
|
}
|
|
|
|
.card {
|
|
background-color: #F0F0F0;
|
|
border: 2*$half-grey-box-border solid #aaaaaa;
|
|
}
|
|
|
|
.middle {
|
|
color: #000000;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background-color: #F0F0F0;
|
|
}
|
|
|
|
/*
|
|
echo '$highlighting-css$' > temp.css
|
|
echo '`test`{.c}' | pandoc --template=./temp.css
|
|
*/
|
|
|
|
pre.numberSource code>span>a:first-child::before {
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
pre.numberSource {
|
|
border-left: 1px solid #aaaaaa;
|
|
}
|
|
|
|
|
|
code span.al {
|
|
color: #ff0000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Alert */
|
|
code span.an {
|
|
color: #60a0b0;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Annotation */
|
|
code span.at {
|
|
color: #7d9029;
|
|
}
|
|
|
|
/* Attribute */
|
|
code span.bn {
|
|
color: #40a070;
|
|
}
|
|
|
|
/* BaseN */
|
|
code span.bu {}
|
|
|
|
/* BuiltIn */
|
|
code span.cf {
|
|
color: #007020;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ControlFlow */
|
|
code span.ch {
|
|
color: #4070a0;
|
|
}
|
|
|
|
/* Char */
|
|
code span.cn {
|
|
color: #880000;
|
|
}
|
|
|
|
/* Constant */
|
|
code span.co {
|
|
color: #60a0b0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Comment */
|
|
code span.cv {
|
|
color: #60a0b0;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* CommentVar */
|
|
code span.do {
|
|
color: #ba2121;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Documentation */
|
|
code span.dt {
|
|
color: #902000;
|
|
}
|
|
|
|
/* DataType */
|
|
code span.dv {
|
|
color: #40a070;
|
|
}
|
|
|
|
/* DecVal */
|
|
code span.er {
|
|
color: #ff0000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Error */
|
|
code span.ex {}
|
|
|
|
/* Extension */
|
|
code span.fl {
|
|
color: #40a070;
|
|
}
|
|
|
|
/* Float */
|
|
code span.fu {
|
|
color: #06287e;
|
|
}
|
|
|
|
/* Function */
|
|
code span.im {}
|
|
|
|
/* Import */
|
|
code span.in {
|
|
color: #60a0b0;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Information */
|
|
code span.kw {
|
|
color: #007020;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Keyword */
|
|
code span.op {
|
|
color: #666666;
|
|
}
|
|
|
|
/* Operator */
|
|
code span.ot {
|
|
color: #007020;
|
|
}
|
|
|
|
/* Other */
|
|
code span.pp {
|
|
color: #bc7a00;
|
|
}
|
|
|
|
/* Preprocessor */
|
|
code span.sc {
|
|
color: #4070a0;
|
|
}
|
|
|
|
/* SpecialChar */
|
|
code span.ss {
|
|
color: #bb6688;
|
|
}
|
|
|
|
/* SpecialString */
|
|
code span.st {
|
|
color: #4070a0;
|
|
}
|
|
|
|
/* String */
|
|
code span.va {
|
|
color: #19177c;
|
|
}
|
|
|
|
/* Variable */
|
|
code span.vs {
|
|
color: #4070a0;
|
|
}
|
|
|
|
/* VerbatimString */
|
|
code span.wa {
|
|
color: #60a0b0;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Warning */
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color: #FFFFFF;
|
|
background-color: #000000;
|
|
}
|
|
|
|
:target {
|
|
background-color: #880;
|
|
}
|
|
|
|
// button {
|
|
// border-radius: 10px;
|
|
// background-color: #232629;
|
|
// color: #FFFFFF;
|
|
// border: 2px solid #cfcfc2;
|
|
// text-decoration: none;
|
|
// }
|
|
|
|
// button:hover {
|
|
// background-color: #7a7c7d;
|
|
// }
|
|
|
|
.card {
|
|
background-color: #232629;
|
|
border: 2*$half-grey-box-border solid #cfcfc2;
|
|
}
|
|
|
|
.middle {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
background-color: #232629;
|
|
}
|
|
|
|
a {
|
|
color: #8080FF
|
|
}
|
|
|
|
/*
|
|
echo '$highlighting-css$' > temp.css
|
|
echo '`test`{.c}' | pandoc --highlight-style breezedark --template=./temp.css
|
|
*/
|
|
|
|
pre.numberSource code>span>a:first-child::before {
|
|
color: #7a7c7d;
|
|
}
|
|
|
|
pre.numberSource {
|
|
border-left: 1px solid #7a7c7d;
|
|
}
|
|
|
|
div.sourceCode {
|
|
color: #cfcfc2;
|
|
}
|
|
|
|
|
|
code span {
|
|
color: #cfcfc2;
|
|
}
|
|
|
|
/* Normal */
|
|
code span.al {
|
|
color: #95da4c;
|
|
background-color: #4d1f24;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Alert */
|
|
code span.an {
|
|
color: #3f8058;
|
|
}
|
|
|
|
/* Annotation */
|
|
code span.at {
|
|
color: #2980b9;
|
|
}
|
|
|
|
/* Attribute */
|
|
code span.bn {
|
|
color: #f67400;
|
|
}
|
|
|
|
/* BaseN */
|
|
code span.bu {
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
/* BuiltIn */
|
|
code span.cf {
|
|
color: #fdbc4b;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ControlFlow */
|
|
code span.ch {
|
|
color: #3daee9;
|
|
}
|
|
|
|
/* Char */
|
|
code span.cn {
|
|
color: #27aeae;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Constant */
|
|
code span.co {
|
|
color: #7a7c7d;
|
|
}
|
|
|
|
/* Comment */
|
|
code span.cv {
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
/* CommentVar */
|
|
code span.do {
|
|
color: #a43340;
|
|
}
|
|
|
|
/* Documentation */
|
|
code span.dt {
|
|
color: #2980b9;
|
|
}
|
|
|
|
/* DataType */
|
|
code span.dv {
|
|
color: #f67400;
|
|
}
|
|
|
|
/* DecVal */
|
|
code span.er {
|
|
color: #da4453;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Error */
|
|
code span.ex {
|
|
color: #0099ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Extension */
|
|
code span.fl {
|
|
color: #f67400;
|
|
}
|
|
|
|
/* Float */
|
|
code span.fu {
|
|
color: #8e44ad;
|
|
}
|
|
|
|
/* Function */
|
|
code span.im {
|
|
color: #27ae60;
|
|
}
|
|
|
|
/* Import */
|
|
code span.in {
|
|
color: #c45b00;
|
|
}
|
|
|
|
/* Information */
|
|
code span.kw {
|
|
color: #cfcfc2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Keyword */
|
|
code span.op {
|
|
color: #cfcfc2;
|
|
}
|
|
|
|
/* Operator */
|
|
code span.ot {
|
|
color: #27ae60;
|
|
}
|
|
|
|
/* Other */
|
|
code span.pp {
|
|
color: #27ae60;
|
|
}
|
|
|
|
/* Preprocessor */
|
|
code span.re {
|
|
color: #2980b9;
|
|
background-color: #153042;
|
|
}
|
|
|
|
/* RegionMarker */
|
|
code span.sc {
|
|
color: #3daee9;
|
|
}
|
|
|
|
/* SpecialChar */
|
|
code span.ss {
|
|
color: #da4453;
|
|
}
|
|
|
|
/* SpecialString */
|
|
code span.st {
|
|
color: #f44f4f;
|
|
}
|
|
|
|
/* String */
|
|
code span.va {
|
|
color: #27aeae;
|
|
}
|
|
|
|
/* Variable */
|
|
code span.vs {
|
|
color: #da4453;
|
|
}
|
|
|
|
/* VerbatimString */
|
|
code span.wa {
|
|
color: #da4453;
|
|
}
|
|
|
|
/* Warning */
|
|
}
|