peruse.css

/* CUSTOM FONTS */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=block');

/* PAGE LAYOUT */

body {
	max-width: 800px;

	/* To make room for navigation footer. Without this, the page is too short to show it. */
	padding-bottom: 5em;

	/* Center the application in the viewport */
	margin-left: auto;
	margin-right: auto;

	font-weight: 400;
	font-family: "Lora", serif;
	font-size: 14pt;
	line-height: 1.75em;

}

.book {
	/* This helps absolute position things relative to the book */
	position: relative; 
}

.page {
	opacity: 0;
	transition: opacity 0.25s ease-in;
}

.page.page-loaded {
	opacity: 1;
}

p {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	margin-right: 1.5em;

	/* Allow paragraphs to break on words to support small screens. */
	word-break: break-word;
}

strong, b {
	font-weight: 700;
}

/* COLORS */

body {
	/* Customizable colors */
	background-color: white;
	color: black;
}

/* HEADERS */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", serif;
	font-weight: 700;
}

.title {
	margin-bottom: 0;
}

.subtitle {
	margin-top: 0;
	font-weight: normal;
	font-style: italic;
}

.title .chapter-number {
	font-size: 18pt;
	display: inline-block; /* For the section name */
}

.chapter-number {
	font-family: "Raleway";
	font-weight: normal;
	font-style: italic;
	color: gray;
	margin-right: 0.35em;
}

.authors {
	margin-bottom: 0.5em;
}

.section-name {
	display: inline-block;
	font-weight: normal;
	font-size: 12pt;
	font-style: normal;
	color: gray;
}

.tag {
	font-size: 10pt;
	display: inline-block;
	background-color: lightGray;
	padding: 0.1em 0.5em;
	border-radius: 0.5em;
}

/* FLOURISHES */

/* This implements aa drop cap in the first letter of the first paragraph of each chapter on the page. */
.chapter > p:first-of-type::first-letter {
	padding: 0 .25rem;
	margin: 0 .25rem 0 0;
	font-size: 4rem;
	font-weight: 700;
	float: left;
	line-height: 1;
	color: black;
}

/* LISTS */

ol li {
	margin-bottom: 0.5em;
	list-style-type: decimal;
}

ol ol li {
	list-style-type: lower-alpha;
}

ol ol ol li {
	list-style-type: upper-alpha;
}

/* IMAGES */

.figure {
	margin-top: 1em;
	margin-bottom: 1em;
	width: 100%;
}

.figure-caption {
	text-align: center;
	color: #535351;
	line-height: 1.5em;
	font-size: 12pt;
	margin-top: 0.1em;
	margin-bottom: 1em;
	margin-left: 1em;
	margin-right: 1em;
}

.figure-img {
	border-radius: 3px;
	width: 100%;
	margin-bottom: 0;
}

.figure-credit {
	display: block;
	text-align: right;
	font-style: italic;
	font-size: 8pt;
	margin-right: 1em;
}

.figure-preview {
	display: inline-block;
	width: 10rem;
	margin: 1em;
	vertical-align: bottom;
}

.figure-preview img {
	width: 100%;
	height: auto;
}

.figure-full {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
}

#scroll-reminder {
	position: fixed;
	bottom: 4em;
	left: 50%;
	animation: bounce 3s infinite;
	animation-timing-function: ease;
	width: 0; 
	height: 0;
	margin-left: -1rem;
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1rem solid white;
	mix-blend-mode: difference;
}

#scroll-reminder.past-title {
	display: none;
}

@keyframes bounce {
	0% { bottom: 4em; }
	50% { bottom: 5em; }
	100% { bottom: 4em; }
}

.chapter-header .figure {
	margin-top: 0;
}

/* EMBEDS */

.embed-responsive {
	border-radius: 4px;
}

/* LINKS */

a {
	color: rgb(14, 121, 209);
}

/* TABLE OF CONTENTS */

.forthcoming {
	opacity: 0.5;
}

/* BLOCK QUOTES */

blockquote {
	border-top: 1px solid lightGray;
	border-bottom: 1px solid lightGray;
	padding: 1em;
	margin-bottom: 1em;
	margin-top: 1em;
	font-style: italic;
	clear: both;
}

blockquote .blockquote-caption {
	font-size: 12pt;
	color: gray;
}

/* CALLOUTS */

.callout {
	border: 1px solid lightGray;
	margin-bottom: 1em;
	margin-top: 1em;
	padding-left: 1em;
	padding-right: 1em;
	margin-right: 1em;
	clear: both;
}

/* TABLES */

.table {
	line-height: 1.4em;
	border-top: 1px solid lightGray;
	border-bottom: 1px solid lightGray;
	margin-bottom: 1em;
	clear: both;
}

.rows center {
	font-style: italic;
}

/* ERRORS */

.alert-danger {
	font-weight: 400;
	padding: .25em;
}

/* HIGHLIGHTS */

.content-highlight {
	border-radius: 2px;
	animation: pulse .75s 3;
	animation-fill-mode: forwards;
}

/* A little circle at the point of the annotation */
.label.content-highlight {
	display: inline-block;
	width: 3em;
	height: 3em;
	border-radius: 3em;
	position: absolute;
	z-index: -1;
	margin-left: -1em;
	margin-top: -0.5em;
}

@keyframes pulse {
	0% { background-color: rgb(255, 255, 255); }
	50% { background-color: rgb(179, 219, 251); }
	100% { background-color: rgb(255, 255, 255); }
}

/* REFERENCES, FOOTNOTES, and GLOSSARY */

.reference .summary {
	font-size: 80%;
	padding-left: 1em;
	display: inline-block;
	border-left: 4px solid rgb(220,220,220);
	margin-top: 1em;
	font-style: italic;
}

.footnote, .marginal .reference {
	font-size: 0.8rem;
	font-style: normal;
	color: black;
}

.footnote-symbol, .citation-symbol {
	color: rgb(14, 121, 209);
}

/* This enables us to layout the numbers and letters in a neat right-aligned floating grid. */
.reference, .footnote {
	position: relative;
}

.references .reference, .footnote {
	display: block;
	line-height: 1.2rem;
	margin-left: 1rem;
	margin-bottom: 1rem;
	text-align: left;
}

.reference .citation-symbol, .footnote .footnote-symbol {
	display: block;
	float: left;
	margin-top: 1em;
	position: absolute;
	left: -1.75em;
	text-align: right;
	width: 1.5em; /* Just enough space for 2 digits, a bit of a hack */
}

.terminology .marginal-interactor {
	border-bottom: 2px solid lightGray;
}

.definition {
	display: block;
	padding-left: 0.75rem;
	font-size: 10pt;
	line-height: 1.25rem;
	text-align: left;
	margin-left: 0.25rem;
	margin-bottom: 1rem;
	background: linear-gradient(to right, lightGray 0px, lightGray 2px, transparent 2px) no-repeat right
}

.definition .definition-synonyms {
	color: grey;
	font-style: italic;
}

/* MARGINALS */

.outline {
	font-family: "Raleway", serif;
	font-weight: normal;
	font-size: 12pt;
	color: grey;
}

.outline-header-nav {
	display: inline-block;
	margin-bottom: 0.75rem;
	width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
}

.outline-header {
	display: block;
	line-height: 1.4rem;
	text-indent: -0.5rem;
    padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 0.75rem;
}

.outline-header-level-0 {
	font-size: 1rem;
}

.outline-header-level-1 {
	font-size: 0.9rem;
}

.outline-header-level-2 {
	font-size: 0.8rem;
	font-style: italic;
	margin-left: 1em;
}

.outline a {
	color: grey;
	text-decoration: none;
}

.outline a:hover {
	text-decoration: none;
}

/* Only apply this on devices with hover abilities. */
@media (hover: hover) {
	.outline a:hover {
		color: black;
	}
}

a .outline-header-active {
	color: black;
}

/* Mobile */
@media screen and (max-width: 1200px) {

	/* Fixed position for small screens. */
	.marginal {
		background-color: white;
		padding: 0.75em;
		border: 1px solid lightGrey;
		position: fixed;
		width: auto;
		height: auto;
		left: 0;
		right: 0;
		bottom: 2em;
		z-index: 1;
		cursor: pointer;
		transform: translateY(0);
		transition: transform 0.2s ease-in;
	}

	/* Handle nested marginals by just not showing them. */
	.marginal .marginal {
		display: none;
	}

	.marginal-interactor {
		cursor: pointer;
	}

	.marginal-interactor:hover {
		font-weight: bold;
	}

	.terminology .marginal-interactor:hover {
		font-weight: normal;
	}

	.terminology:hover {
		border-bottom-color: black !important;
	}

	.marginal-hidden {
		transform: translateY(100%);
		transition: transform 0.2s ease-out;
		height: 0;
		bottom: 0;
	}

	.outline {
		position: fixed;
		top: 100%; /* Put it all the way off screen on the bottom, then let JS translate */
		left: 0;
		right: 0;
		width: auto;
		z-index: 1; /* Put it above content when it's a sheet in the footer */
		padding: 1em;
		border-top: 1px solid lightGray;
		text-align: left;
		transition: transform 0.2s ease-in;
		cursor: pointer;
		background-color: rgba(255,255,255, .9);
		box-shadow: 0px -1px 2px rgba(0,0,0,.25);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		/* Cap height at window size. If the content is too tall, scroll it. */
		max-height: 100%;
		overflow-y: scroll;
	}

	/* Make a little centered box to store the outline to preserve its left aligned structure, while making it easier to click. */
	.outline-headers {
		width: 20em;
		margin: auto;
	}

	.outline-header-nav {
		text-align: center;
		text-indent: 0 !important; /* Override header default */
		font-size: 1.25rem !important;
	}

	.outline-collapse-cue {
		position: absolute;
		top: 1rem;
		right: 1rem;
		transition: transform 0.2s ease-in;
		font-size: 1.25em !important;
	}

	.outline-expanded .outline-collapse-cue {
		transform: rotate(180deg);
	}

	.outline.outline-expanded {
		transform: translateY(-100%);
	}

	.outline.outline-collapsed {
		transform: translateY(-4rem);
	}

}

/* Desktop */
@media screen and (min-width: 1200px) {

	.marginal-left-inset {
		float: left;
		clear: both;
		width: 75%;
		margin-left: -30% !important;
		margin-right: 2em;
	}

	.marginal-right-inset {
		float: right;
		clear: both;
		width: 75%;
		margin-right: -30% !important;
		margin-left: 2em;
	}

	/* On larger screens, put marginal right things in the right margin. */
	.marginal {
		float: right;
		width: 12rem;
		display: block;
		padding-bottom: 0.5rem;
		position: absolute;
	}

	.marginal-hovered .citation-symbol, .marginal-hovered .footnote-symbol {
		font-weight: bold;
	}

	.terminology .marginal-interactor.marginal-hovered {
		border-bottom-color: black !important;
		border-bottom-width: 3px;
	}

	.terminology .marginal.marginal-hovered .definition {
		background: linear-gradient(to right, black 0px, black 3px, transparent 3px) no-repeat right
	}

	.outline {
		width: 12em;
		z-index: -1; /* Put it below everything when it's in the margin. */
		border-right: 1px solid lightGray;
		padding: 0.5em;
		background-color: white;
	}

	/* When the outline is fixed to the left, it's translated by it's width (with some padding). */
	/* It's left position is set outline.js. This class is set by outline.js. */
	.outline.outline-fixed-left {
		position: fixed;
		display: inline-block;
		top: 50px;
		transform: translateX(-14em);
	}

	/* When the outline is fixed to title, it's positioned absolutely relative to the book container. */
	/* We set a margin appropriate for it's width above. This class is set by outline.js. */
	.outline.outline-title-left {
		position: absolute;
		margin-left: -14em;
	}

	.outline-collapse-cue {
		display: none;
	}

}

/* SYNTAX HIGHLIGHTING */

.code {
	font-size: 11pt;
	white-space: pre-wrap;	
	border: 1px solid #EAEAEA;
	color: gray;
	background-color: #FCFAFA;
	clear: both;
}

.code-block {
	display: block;
	padding: 1em;
	line-height: 1.5em;
	border-radius: 3px;
}

.code-inline {
	display: inline;
	padding: 0.1em;
}

.code-inline code {
	display: inline;	
	padding: 0em;
}

.code-language {
	float: right;
	margin-top: -2rem;
	font-size: small;
	color: gray;
	margin-right: 0.5rem;
}

/* Comment */
.hljs-comment,
.hljs-quote {
  color: #696969;
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #d91e18;
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #aa5d00;
}

/* Yellow */
.hljs-attribute {
  color: #aa5d00;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #008000;
}

/* Blue */
.hljs-title,
.hljs-section {
  color: #007faa;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #7928a1;
}

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

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

/* PYTHON SUPPORT */

.python button {
	background: rgb(240,240,240);
	border: 1px solid lightGray;
	width: 10%;
	height: 3rem;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

.python .python-output {
	width: 90%;
	border: 1px solid lightGray;
	padding: 0.5rem;
	height: 3rem;
	overflow-y: scroll;
	display: inline-block;
	vertical-align: top;
	color: grey;
	font-family: "SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;
	font-size: 11pt;
}

/* EDITOR */

.editor {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: white;
	border: 1px solid lightGray;
	box-shadow: 5px 5px 5px 3px rgba(150,150,150,.5);
	padding: 2em;
	z-index: 1;
}

.editor textarea {
	width: 100%;
	height: 15em;
	padding: 1em;
}

/* LOADING */

.loading {
	position: fixed;
	width: 80px;
	height: 80px;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
	z-index: 1;
}

.loading div {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: lightGrey;
	animation: loading 1.2s linear infinite;
}

.loading div:nth-child(1) {
	top: 8px;
	left: 8px;
	animation-delay: 0s;
}
.loading div:nth-child(2) {
	top: 8px;
	left: 32px;
	animation-delay: -0.4s;
}
.loading div:nth-child(3) {
	top: 8px;
	left: 56px;
	animation-delay: -0.8s;
}
.loading div:nth-child(4) {
	top: 32px;
	left: 8px;
	animation-delay: -0.4s;
}
.loading div:nth-child(5) {
	top: 32px;
	left: 32px;
	animation-delay: -0.8s;
}
.loading div:nth-child(6) {
	top: 32px;
	left: 56px;
	animation-delay: -1.2s;
}
.loading div:nth-child(7) {
	top: 56px;
	left: 8px;
	animation-delay: -0.8s;
}
.loading div:nth-child(8) {
	top: 56px;
	left: 32px;
	animation-delay: -1.2s;
}
.loading div:nth-child(9) {
	top: 56px;
	left: 56px;
	animation-delay: -1.6s;
}

@keyframes loading {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}