design.css of the Common Design

Here is the complete design.css of the common design. Use it as a reference and to compare how the common marmota.app designs render slide. You can also download the raw version of this file.

.slide {
	overflow: hidden;
	color: var(--fg-color-1-normal);
	background: var(--bg-color-1-normal);

	--spacing-smallest: 0.125em;
	--spacing-small: 0.25em;
	--spacing-normal: 0.5em;
	--spacing-large: 1em;
	--spacing-largest: 2em;

	--syntax-highlight-color-strong: var(--fg-color-1-strong);
	--syntax-highlight-color-standard: var(--fg-color-1-light);
	--syntax-highlight-color-1: var(--fg-color-2-light);
	--syntax-highlight-color-2: var(--fg-color-3-light);
	--syntax-highlight-color-3: var(--fg-color-4-light);
	--syntax-highlight-bg-deletion: var(--fg-color-4-light);
	--syntax-highlight-fg-deletion: var(--bg-color-1-light);
	--syntax-highlight-bg-addition: var(--fg-color-2-light);
	--syntax-highlight-fg-addition: var(--bg-color-1-light);
}

.slide h1 {
	font-size: 200%;
	font-weight: bold;
	margin-top: calc(var(--slide-height) * .1);
	margin: 0;
}
.slide h2 {
	font-size: 150%;
	font-weight: bold;
	margin: 0;
}
.slide h3 {
	font-size: 125%;
	font-weight: bold;
	margin: 0;
}
.slide h4 {
	font-size: 110%;
	font-weight: bold;
	margin: 0;
}

.slide-design-highlight {
	background: var(--bg-color-3-normal);
	color: var(--fg-color-3-strong);
}

.author {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1000;
}
.slide-number {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	top: 0;
	left: 0;
	z-index: 1000;
}
.info-1 {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	top: 0;
	right: 0;
	z-index: 1000;
}
.info-2 {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	bottom: 0;
	left: 0;
	z-index: 1000;
}
.info-3 {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1000;
}
.info-4 {
	position: absolute;
	padding: var(--spacing-smallest) var(--spacing-small);
	bottom: 0;
	right: 0;
	z-index: 1000;
}

.slide > section {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	padding: var(--spacing-large) var(--spacing-largest);
}
.slide > section > div:after {
	clear:both;
}
.slide > section section.break-column {
	width: calc(50% - var(--spacing-normal));
	float: left;
}
.slide > section section.break-column:nth-child(2n) {
	margin-left: var(--spacing-large);
}
.slide > section section:only-child {
	width: 100%;
	float: none;
}
blockquote {
	display: block;
	border-left: 2px solid var(--fg-color-1-normal);

	padding: 0;
	padding-left: var(--spacing-large);

	margin: 0 var(--spacing-largest);
}
.box-borders {
	border: 1px solid var(--fg-color-1-normal);
	padding: var(--spacing-small) var(--spacing-normal);
}
.box-borders > section > div > p:first-child {
	margin-top: 0;
}
.box-borders > section > div > p:last-child {
	margin-bottom: 0;
}
a, a:hover, a:visited, a:active {
	color: var(--fg-color-2-normal);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
}

.color-alternative {
	color: var(--bg-color-2-normal);
}
.shadow {
	--shadow-color: var(--fg-color-2-light);
	text-shadow: 2px 2px 6px var(--shadow-color);
}
.color-alternative.shadow {
	--shadow-color: var(--fg-color-1-normal);
}

p {
	text-align: justify;
}

li > p:first-child {
	margin: 0;
}
li > p:first-of-type {
	margin-top: 0;
}
li > p:last-child {
	margin-bottom: 0;
}

table {
	border-collapse: collapse;
}
th, td {
	border: 1px solid var(--fg-color-1-light);
	padding: var(--spacing-small) var(--spacing-normal);
}
th {
	color: var(--fg-color-2-normal);
	background: var(--bg-color-2-normal);
}

.arrow {
	position: relative;
}

.arrow-graphics {
	width: 2em;
	height: 2em;
	position: absolute;

	fill-rule: evenodd;
	clip-rule: evenodd;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 1.5;
}
.arrow-graphics .arrow-path {
	fill: var(--fg-color-6-normal);
	stroke: var(--bg-color-1-normal);
	stroke-width: 20px;
}

.chart svg {
	--chart-width: initial;
	--chart-height: initial;

	width: var(--chart-width);
	height: var(--chart-height);

	border: 1px solid var(--fg-color-1-light);

	display: block;
	margin: var(--spacing-small) auto;
}

.chart .title {
	font-size: 140px;
	fill: var(--fg-color-1-normal);
	dominant-baseline: hanging;
	text-anchor: middle;

}
.chart .axis .label {
	font-size: 60px;
	fill: var(--fg-color-1-normal);
}
.chart .axis-x .label {
	dominant-baseline: hanging;
	text-anchor: middle;
}
.chart .axis-y .label {
	dominant-baseline: middle;
	text-anchor: end;
}
.chart .axis .axis-line {
	width: 2px;
	stroke: var(--fg-color-1-normal)
}
.line-chart .series {
	fill: none;
	stroke: var(--series-color);
	stroke-width: 6px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bar-chart .series {
	fill: var(--series-color);
}
.chart .series-1 { --series-color: var(--fg-color-1-normal); }
.chart .series-2 { --series-color: var(--fg-color-2-normal); }
.chart .series-3 { --series-color: var(--fg-color-3-normal); }
.chart .series-4 { --series-color: var(--fg-color-4-normal); }
.chart .series-5 { --series-color: var(--fg-color-5-normal); }
.chart .series-6 { --series-color: var(--fg-color-6-normal); }
.chart .series-7 { --series-color: var(--fg-color-1-strong); }
.chart .series-8 { --series-color: var(--fg-color-2-strong); }
.chart .series-9 { --series-color: var(--fg-color-3-strong); }
.chart .series-10 { --series-color: var(--fg-color-4-strong); }
.chart .series-11 { --series-color: var(--fg-color-5-strong); }
.chart .series-12 { --series-color: var(--fg-color-6-strong); }
.chart .series-13 { --series-color: var(--fg-color-1-light); }
.chart .series-14 { --series-color: var(--fg-color-2-light); }
.chart .series-15 { --series-color: var(--fg-color-3-light); }
.chart .series-16 { --series-color: var(--fg-color-4-light); }
.chart .series-17 { --series-color: var(--fg-color-5-light); }
.chart .series-18 { --series-color: var(--fg-color-6-light); }

.hljs {
	padding: var(--spacing-normal);

	color: var(--syntax-highlight-color-standard);

	font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	tab-size: 4;
}

pre.hljs {
	display: block;
	background: var(--bg-color-2-normal);
	border: 1px solid var(--fg-color-1-normal);
}

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

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

.hljs-tag {
	color: var(--syntax-highlight-color-1);
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
	color: var(--syntax-highlight-color-2);
}

.hljs-string,
.hljs-bullet {
	color: var(--syntax-highlight-color-3);
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
	color: var(--syntax-highlight-color-1);
	font-weight: bold;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
	color: var(--syntax-highlight-color-3);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
	color: var(--syntax-highlight-color-2);
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
	color: var(--syntax-highlight-color-standard);
	font-style: italic;
}

.hljs-regexp,
.hljs-link {
	color: var(--syntax-highlight-color-1);
}

.hljs-meta {
	color: var(--syntax-highlight-color-1);
}

.hljs-deletion {
	background-color: var(--syntax-highlight-bg-deletion);
	color: var(--syntax-highlight-fg-deletion);
}

.hljs-addition {
	background-color: var(--syntax-highlight-bg-addition);
	color: var(--syntax-highlight-fg-addition);
}

.hljs a {
	color: inherit;
}

.hljs a:focus,
.hljs a:hover {
	color: inherit;
	text-decoration: underline;
}