Source code of my website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
personal_website/styles.scss

579 lines
9.7 KiB

$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;
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;
}
#myflex div {
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
max-width: 40em;
font-size: inherit;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}
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;
}
#myflex div {
background-color: #F0F0F0;
color: #000000;
border: 2px solid #aaaaaa;
}
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;
// }
#myflex div {
background-color: #232629;
color: #FFFFFF;
border: 2px solid #cfcfc2;
}
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 */
}