plugin.css

{{{appCSS}}}

/* FOOTNOTES */
.footnote-ref {
  font-size: 12px;
  line-height: 0.5em;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

/* MATHS */
.katex {font-size: 1.2em}

/* IMAGE CAPTION */
.caption {display: block;}

/* TWITTER PLUGIN */
blockquote.twitter-tweet {padding: 2em;}
blockquote.twitter-tweet p {margin: 0}

/* IMAGE SIZE */
img {max-width: 100%;height: auto;}

/* CODE HIGHLIGHTING */

pre {
  padding: 0.7em 1em;
  background: {{light_background}};
  margin: 0 -1em;
}

pre, code {font: inherit;}

.hljs {
  display: block;
  overflow-x: auto;
}

.hljs-comment,
.hljs-quote {
  color: {{medium_text}};
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: {{body_text_color}};
  font-weight: bold;
}

.hljs-number,
.hljs-literal {
  color: {{medium_text}};
}

.hljs-string,
.hljs-doctag,
.hljs-formula {
  color: {{medium_text}};
  background: {{light_background}}
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: {{body_text_color}};
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-class .hljs-title,
.hljs-type,
.hljs-name {
  color: {{medium_text}};
  font-weight: bold;
}

.hljs-tag {
  color: {{medium_text}};
}

.hljs-regexp {
    color: {{medium_text}};
    background: {{light_background}}
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: {{body_text_color}};
  background: {{light_background}}
}

.hljs-built_in,
.hljs-builtin-name {
  color: {{body_text_color}};
  text-decoration: underline;
}

.hljs-meta {
  color: {{body_text_color}};
  opacity: 0.5;
  font-weight: bold;
}

.hljs-deletion {
  color: {{background_color}};
  background: {{light_background}}
}

.hljs-addition {
  color: {{body_text_color}};
  background: {{light_background}}
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}


/* LAYOUT */

.container {position: relative;}

.margin {
  position: absolute;
  box-sizing: border-box;
  width: 29.3333%;
}

.margin p {font-style: italic;}

.left.margin {
  left: -29.3333%;
  padding-right: 30px;
  text-align: right;
}

.right.margin {
  right: -29.3333%;
  padding-left: 30px;
}

.wide {
  width: 158.6666667%;
  margin-left: -29.3333333%;
  overflow: auto; /* collapses internal margins */
}

.wide.left, .wide.right {width: 129.3333333%;float: none;}
.wide.left {margin: 0 0 0 -29.3333333%}
.wide.right {margin: 0 -29.3333333% 0 0}

.margin p, .column p {margin-top: 2px}
.margin h1, .margin h2, .margin h3 {margin-top:0}

.column {
  box-sizing: border-box;
  float: left;
}

.column.two {
  width: 50%;
  padding-right: 12px;
}

.column.three {width: 33.333333%;padding: 0 16px 0 0;}
.column.three + .column.three {padding: 0 8px}
.column.three + .column.three + .column.three {padding: 0 0 0 16px}

.column.four {width: 25%;padding-right: 18px;}
.column.four + .column.four {padding: 0 12px 0 6px;}
.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}



.column.two + .column.two {
  padding: 0 0 0 12px;
}

@media screen and (max-width: 1060px) {

  .margin,
  .margin.right,
  .margin.left {position: relative;display: block;top: auto;left: auto;right: auto;bottom: auto;}

  .margin.right {float: right;}
  .margin.left {text-align: left;float: left;}

  .wide, .wide.left, .wide.right {width: 100%;margin: 0}
}


@media screen and (max-width: 600px) {
  .margin {width: 40%;}
  .margin.right {padding-left: 16px;}
  .margin.left {padding-right: 16px;}
}