path: root/static/css/story.less

@font-sans: 'Quattrocento Sans',-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
@font-serif: 'Spectral', Georgia, Times, serif;
@shaded-bg: #f6f8fa;
@border: #dfe2e5;
@muted-text: #6a737d;

// Typography designed for clarity and elegance on a large, modern (hi-res)
// display.  But when reading on an cellphone, a sans-serif font family is much
// nicer, so apply serif fonts to the article only at larger sizes or in print.
h1, h2, h3, h4, .sans-serif {
	font-family: @font-sans;
}

body {
	article {
		font-family: @font-serif;
		@media only screen and (max-width: 30em) {
			p, li {
				font-family: @font-sans;
			}
		}
	}
	@media only screen and (min-width: 50em) {
		&.is-page-true.feature-depth:not(.feature-nodepth):not(.feature-nohdr) article {
			margin-top: -2em;
			box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0.5em 0.125em;
		}
	}
}

header {
	h1, h2 {
		@media screen only {
			text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.3);
		}
	}
}

// General element styling
blockquote {
	margin: 0;
	padding: 0 1rem;
	color: @muted-text;
	border-left: 0.25rem solid @border;
}

pre {
	border: 1px solid @border;
	border-radius: 3px;
	font-size: 75%;
	line-height: 1.4;
	padding: 1em;
	background: @shaded-bg;
	overflow: auto;
}
p>code, li>code, a>code, td>code {
	font-size: 80%;
	background: @shaded-bg;
	margin: 0;
	border-radius: 3px;
	padding: 0.15em 0.25em;
}

article img {
	max-width: 100%;
}

hr {
	height: 0px;
	border-style: none none solid none;
	border-bottom-color: @border;
}

table caption {
	text-align: left;
	font-family: @font-serif;
	font-style: italic;
	padding: 0px 0.5rem;
}

// Story uses feature-X and feature-noX classes to enable/disable a lot of
// typography and other features.
body.feature-hyphenate:not(.feature-nohyphenate) article {
	p, li, td, caption, figcaption, th {
		word-wrap: break-word;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	pre, code {
		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
	}
}

body.feature-justify:not(.feature-nojustify) article {
	p, li {
		text-align: justify;
	}
}

body.feature-hrfleuron:not(.feature-nohrfleuron) article > hr {
	border-style: none;
	width: 0px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 3rem;
	&:before {
		content: "\002766";
	}
}

body.feature-hrdinkus:not(.feature-nohrdinkus) article > hr {
	border-style: none;
	width: 0px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 3rem;
	&:before {
		content: "*\000A0\000A0*\000A0\000A0*";
	}
}

figure {
	margin: 0px;
	padding: 0px;
	img {
		display: block;
	}
}

@media screen {
	// Image captions should only be "hidden" overlays on the images in screen
	// mode.  Even if feature-figcaption-hidden is defined, if
	// feature-figcaption-visible is set, this all should be disabled.
	body.feature-figcaption-hidden:not(.feature-figcaption-visible) figure {
		position: relative;
	}
	body.feature-figcaption-hidden:not(.feature-figcaption-visible) figcaption {
		position: absolute;
		bottom: 0px;
		display: block;
		width: 100%;
		color: white;
		background-color: rgba(0, 0, 0, 0.75);
		padding: 1rem;
		visibility: hidden;
	}
	body.feature-figcaption-hidden figure:hover figcaption {
		visibility: visible;
	}
}

// Default table styling is GitHub-inspired. It's overridden by
// .feature-tablefig below, so it applies only if that class isn't active.
body:not(.feature-tablefig) table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	width: 100%;
	overflow: auto;
	font-size: 85%;
	font-family: @font-sans;
	tr:nth-child(2n) {
		background-color: @shaded-bg;
	}
	th, td {
		display: table-cell;
		vertical-align: inherit;
		padding: .25rem .5rem;
		border: 1px solid @border;
	}
	th {
		font-weight: 600;
	}
}

// A typeface with fixed-width numerals is nice if there are many cells filled
// with numbers.
body.feature-tablefw:not(.feature-tablefig) td {
	font-family: arial;
}

// This table style is more of an academic paper look.
body.feature-tablefig:not(.feature-notablefig) table {
	border-spacing: 0;
	border-collapse: collapse;
	overflow: auto;
	font-size: 85%;
	font-family: inherit;
	border-top: 2px solid black;
	thead, tbody {
		border-bottom: 1px solid black;
	}
	th, td {
		display: table-cell;
		vertical-align: bottom;
		padding: 0 .5rem;
	}
	th {
		font-weight: 600;
		padding-top: .5rem;
	}
}

// Add labels and counters to table and figure captions.
body {
	counter-reset: figure-counter table-counter;
	&.feature-fignum {
		figure figcaption::before {
			counter-increment: figure-counter;
			content: "Figure " counter(figure-counter) ". ";
		}
		table	caption::before {
			counter-increment: table-counter;
			content: "Table " counter(table-counter) ". ";
		}
	}
}

// Use front matter in the blog post to add CSS class names to the <body> tag.
.feature-h3-cl h3 { clear: left; }
.feature-h3-cr h3 { clear: right; }
.feature-h3-cb h3 { clear: both; }
.feature-nosubtitle h2 {
	display: none;
}

// Hugo creates a div.footnotes around an <ol> for footnotes
.footnotes {
	font-size: 80%;
}

// For KaTeX's rendered elements, the font-size tends to be mismatched. Reset.
.math {
	font-size: 1rem;
}

.about-the-author img {
	float: left;
	max-width: 100px;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 100%;
	margin: 0 1rem 1rem 0;
}

blockquote.tweet {
	border: 1px solid @border;
	border-radius: 5px;
	padding: 4px 20px;
	color: black;
}

.pagination li {
	display: inline-block;
	a {
		padding: .5rem .625rem;
		background-color: white;
		color: #333;
		border: 1px solid #ddd;
		border-radius: 3px;
		text-decoration: none;
	}
	&.disabled {
		display: none;
	}
	&.active {
		a:link, a:active, a:visited {
			background-color: #ddd;
		}
	}
}

img[src~="3dbook"] {
	max-width: 120px;
}

@media screen {
	// Pseudo-3d book covers via http://srobbin.com/blog/3d-css-book-covers/
	// The images should be 400x525px but displayed at smaller size.
	// Give the book images a 3dbook pseudo-class in the URL fragment.
	// [![img](/img.jpg# 3dbook)](http://example.com/)
	// There's some JS that runs from story.js that will find the img,
	// and give its wrapper <a> the right classes, and the containing <p> still
	// more classes:
	// <p class="books"><a class="book"><img></a></p>

	// Fallback book cover styles
	.book {
		display: inline-block;
		box-shadow: 5px 5px 20px #333;
		margin: 1rem;
	}

	.book img { vertical-align: middle; }

	.books {
		-moz-perspective: 100px;
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		display: inline-block;
		float: right;
		margin: 0px 0px 1rem 1rem;
	}

	.book {
		position: relative;
		-moz-perspective: 100px;
		-moz-transform: rotateY(-3deg);
		-webkit-transform: perspective(100) rotateY(-3deg);
		outline: 1px solid transparent; // Helps smooth jagged edges in Firefox
		box-shadow: none;
		margin: 0;
	}

	.book img {
		position: relative !important;
	}

	.book:before,
	.book:after {
		position: absolute;
		top: 2%;
		height: 96%;
		content: ' ';
		z-index: -1;
	}

	.book:before {
		width: 100%;
		left: 6.5%;
		background-color: #484848;
		box-shadow: 0px 3px 20px 2px #333;
	}

	.book:after {
		width: 5%;
		left: 100%;
		background-color: #EFEFEF;
		box-shadow: inset 0px 0px 5px #aaa;
		-moz-transform: rotateY(20deg);
		-webkit-transform: perspective(100) rotateY(20deg);
	}
}

// These will be hidden in screen media, but visible in print
.display-print {
	display: none;
}

@media print {
	* {
		color: black !important;
	}
	pre, code {
		font-size: .85rem;
		background: white !important;
		padding: 3px !important;
	}
	img[src~="3dbook"] {
		border: 1px solid black;
		float: right;
		margin: 0px 0px 1rem 1rem;
	}
	.footnote-return {
		display: none;
	}
	a, a:link, a:visited, a:hover {
		text-decoration: underline black;
	}
	.footnote-ref a, .category a {
		text-decoration: none !important;
	}
	#hdr {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
	h2 {
		margin-top: 1rem !important;
		margin-bottom: 1rem !important;
		font-style: italic;
	}
	h3 a:link, h3 a:visited {
		text-decoration: none;
	}
	.hide-print {
		display: none !important;
	}
	.display-print {
		display: inline !important;
	}
	.f4 {
		font-size: 1rem !important;
	}
	.measure-wide { // increase line width to compensate for the decrease in font size
		max-width: 45em !important;
	}
	main { // don't waste paper on extra blank pages
		padding-bottom: 0 !important;
	}
	.math {
		font-size: .85rem !important;
	}
	article {
		border-bottom-style: none !important;
	}
}

.hljs{display:block;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}