scratch.css

/* line numbers */
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; position: absolute; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
	div.sourceCode { overflow: auto; }
}
@media print {
	code.sourceCode { white-space: pre-wrap; }
	a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine { position: relative; }
pre.numberSource a.sourceLine:empty { position: absolute; }
pre.numberSource a.sourceLine::before {
	content: attr(data-line-number);
	position: absolute; left: -5em; text-align: right; vertical-align: baseline;
	border: none; pointer-events: all;
	-webkit-touch-callout: none; -webkit-user-select: none;
	-khtml-user-select: none; -moz-user-select: none;
	-ms-user-select: none; user-select: none;
	padding: 0 4px; width: 4em;
	color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
@media screen {
	a.sourceLine::before { text-decoration: underline; }
}

/* tweaked pandoc.css */
/* {
	box-sizing: border-box;
} */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	display: block;
}
audio, canvas, video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden] {
	display: none;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	color: #657b83;
}
body {
	font-family: 'PT Sans', sans-serif;
	font-size: 12px;
	background-color: #fdf6e3;
}
@media only screen and (min-width: 480px) {
	body {
		font-size: 14px;
	}
}
@media only screen and (min-width: 1000px) {
	body {
		font-size: 16px;
	}
}
a:focus {
	outline: thin dotted;
}
a:active, a:hover {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b, strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
mark {
	background: #ff0;
	color: #000;
}
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
	max-width: 100%;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 0;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}
button, input {
	line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled],
input[disabled] {
	cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
textarea {
	background-color: inherit;
	color: inherit;
	padding: 0.5em;
	font-family: 'Inconsolata', monospace;
	line-height: 1.15;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
textarea::placeholder {
	color: #93a1a1;
}
/* anchors */
a {
	color: #b58900;
}
a:visited {
	color: #cb4b16;
}
a:hover {
	color: #cb4b16;
}
*::-moz-selection {
	background: rgba(38, 139, 210, 0.3);
}
*::selection {
	background: rgba(38, 139, 210, 0.3);
}

/* title author date */
h1.title {
	font-size: 2.5em;
	color: #586e75;
}
div.right h1.title {
	text-align: center;
	margin-bottom: 0;
}
div.right p.author {
	text-align: center;
	margin-top: 0;
}
/* headers */
h1, h2, h3, h4, h5, h6 {
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 700;
}
h1 {
	color: #b58900;
	font-size: 1.75em;
}
h2, h3, h4, h5, h6 {
	color: #268bd2;
}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 {
	font-size: 1em;
	font-weight: normal;
}
blockquote {
	color: #839496;
	margin-left: 0;
	padding-left: 3em;
	border-left: 0.5em #657b83 solid;
}
dl {
	margin-bottom: 1em;
}

dt {
	font-weight: bold;
	margin-bottom: .8em;
}

dd {
	margin: 0 0 .8em 2em;
}

dd:last-child {
	margin-bottom: 0;
}


img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}

figure {
	display: block;
	text-align: center;
	margin: 1em 0;
}

figure img {
	border: none;
	margin: 0 auto;
}

figcaption {
	font-size: 0.8em;
	font-style: italic;
	margin: 0 0 .8em;
}
table {
	margin-bottom: 2em;
	border-bottom: 1px solid #93a1a1;
	border-right: 1px solid #93a1a1;
	border-spacing: 0;
	border-collapse: collapse;
}

table th {
	padding: .2em 1em;
	background-color: #eee8d5;
	border-top: 1px solid #93a1a1;
	border-left: 1px solid #93a1a1;
}

table td {
	padding: .2em 1em;
	border-top: 1px solid #93a1a1;
	border-left: 1px solid #93a1a1;
	vertical-align: top;
}

/* code stuff */
.sourceCode {
	background-color: #eee8d5;
}
code {
	background-color: #eee8d5;
	padding: 2px;
}
code, kbd, pre, samp {
	font-family: 'Inconsolata', monospace;
}
code {
	white-space: pre !important;
	/* word-wrap: break-word; */
}
pre {
	background-color: #eee8d5;
	color: #657b83;
	overflow-x: auto;
	/* border: 1pt solid #93a1a1; */
	padding: 1em;
	/* box-shadow: 5pt 5pt 8pt #eee8d5; */
}
pre code { color: #657B83; padding: 0; }
code span.kw { color: #859900; font-weight: normal; font-style: normal; } /* Keyword */
code span.dt { color: #B58900; font-weight: normal; font-style: normal; } /* DataType */
code span.dv { color: #2AA198; font-weight: normal; font-style: normal; } /* DecVal */
code span.bn { color: #2AA198; font-weight: normal; font-style: normal; } /* BaseN */
code span.fl { color: #2AA198; font-weight: normal; font-style: normal; } /* Float */
code span.ch { color: #2AA198; font-weight: normal; font-style: normal; } /* Char */
code span.st { color: #2AA198; font-weight: normal; font-style: normal; } /* String */
code span.co { color: #93A1A1; font-weight: normal; font-style: italic; } /* Comment */
code span.ot { color: #268BD2; font-weight: normal; font-style: normal; } /* Other */
code span.al { color: #DC322F; font-weight: normal; font-style: normal; } /* Alert */
code span.fu { color: #268BD2; font-weight: normal; font-style: normal; } /* Function */
code span.er { color: #DC322F; font-weight: normal; font-style: normal; } /* Error */
code span.wa { color: #CB4B16; font-weight: normal; font-style: italic; } /* Warning */
code span.cn { color: #2AA198; font-weight: normal; font-style: normal; } /* Constant */
code span.sc { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialChar */
code span.vs { color: #657B83; font-weight: normal; font-style: normal; } /* VerbatimString */
code span.ss { color: #DC322F; font-weight: normal; font-style: normal; } /* SpecialString */
code span.im { color: #657B83; font-weight: normal; font-style: normal; } /* Import */
code span.va { color: #268BD2; font-weight: normal; font-style: normal; } /* Variable */
code span.cf { color: #859900; font-weight: normal; font-style: normal; } /* ControlFlow */
code span.op { color: #859900; font-weight: normal; font-style: normal; } /* Operator */
code span.bu { color: #657B83; font-weight: normal; font-style: normal; } /* BuiltIn */
code span.ex { color: #657B83; font-weight: normal; font-style: normal; } /* Extension */
code span.pp { color: #CB4B16; font-weight: normal; font-style: normal; } /* Preprocessor */
code span.at { color: #657B83; font-weight: normal; font-style: normal; } /* Attribute */
code span.do { color: #93A1A1; font-weight: normal; font-style: italic; } /* Documentation */
code span.an { color: #93A1A1; font-weight: normal; font-style: italic; } /* Annotation */
code span.cv { color: #93A1A1; font-weight: normal; font-style: italic; } /* CommentVar */
code span.in { color: #93A1A1; font-weight: normal; font-style: italic; } /* Information */

/*
 * CREDITS:
 * solarized light theme from https://github.com/thomasf/solarized-css
 * also copied over stuff from https://gist.github.com/killercup/5917178 to make it more markdown friendly
 * syntax-highlighting from https://github.com/jez/tufte-pandoc-css/blob/master/pandoc-solarized.css
 * random stuff copied from default pandoc template
 * tons of random fixes
 */

html, body {
	margin:0; padding:0;
}
body { min-width: 1000px }
html, body, div#bigwrap, .row, .col, textarea, #editor {
	box-sizing: border-box;
}
.col {
	padding: .5em;
	border: 1pt solid #93a1a1;
}
/*
 * header above .row above footer, with .row filling up space
 */
div#bigwrap {
	height: 100vh;
	display: flex;
	flex-direction: column;
}
div.row {
	flex-grow: 1;
}
header, footer {
	flex-grow: 0;
}

header, footer, div.row {
	padding: 0 1em;
}

/*
 * .left | .right half-half split
 */
div#smallwrap {
	display: flex;
	min-height: 0; /* firefox wants this */
	flex-direction: row; 	/* this gets toggled */
}
div.col {
	flex: 1;
}
div.left {
	align-items: stretch;
	max-width: 50%;
}
div.right {
	overflow-y: auto;
	padding-bottom: 50vh; /* overscroll */
}

/* floating settings, TODO: hideable */
div#floating-thing {
	position: absolute;
	/* just gonna check it in a corner (quite literally) */
	top:0; right:0;
	margin:1em; padding:1em;
	background-color: #eee8d5;
	border: 1pt solid #93a1a1
}

.CodeMirror {
	height: 100%; /* fill up vertical space */
	font-size: 14px;
	font-family: "Menlo", "Inconsolata", monospace;
}

/* command display */
div.left { position: relative; }
div#command-display-container {
	position: absolute;
	bottom: .5em;
	right: .5em;
	min-width: 5em;
	padding: .1em;
	z-index: 14; /* want this below the dialog */
	font-family: "Menlo", "Inconsolata", monospace;
}

/* override solarized colorscheme because fuck italic comments */
.cm-s-solarized .cm-comment {
	color: #93a1a1;
	font-style: unset;
}

.cm-delim { color: #b58900; }

.cm-math { color: #268bd2; }