style.postcss

@import url(https://fonts.googleapis.com/css?family=Arvo:400,700|Damion);

:root {
	--accent1: hsl(185, 40%, 50%); /* turquoise */
	--accent2: hsl(10, 50%, 40%); /* dark red */
	--base-color: hsl(40, 60%, 90%); /* beige */
}

body {
	font: 100%/1.5 Rockwell, Arvo, Helvetica Neue, sans-serif;
	margin: 0;
	display: flex;
	flex-flow: column;

}

code, pre {
	font-family: Consolas, Monaco, Ubuntu Mono, monospace;
}

input, textarea, select {
	border: 2px solid;
	padding: .1em .3em;
	font: inherit;
	background: transparent;
	color: inherit;
	box-sizing: border-box;

	&::placeholder {
		color: inherit;
		opacity: .6;
	}
}

h1 {
	margin: 0;
	font: 300% Damion, cursive;
}

a {
	color: inherit;
}

:where(h1, h2, h3, h4, h5, h6) a:not(:hover) {
	text-decoration: none;
}

header,
section,
footer,
body > md-block:not([rendered="remote"]) {
	max-width: 900px;
	padding: 1.5em calc(50% - 450px);
}

header, footer {
	background: var(--accent1);
	color: var(--base-color);
}

@media (max-width: 950px) {
	header, section, footer {
		padding: 1.5em 2em;
	}
}

header {
	display: flex;

	& > h1 {
		display: inline-block;
		width: 350px;
		margin-bottom: -.66em;
		margin-left: -2em;
	}

	& iframe {
		display: block;
		width: 100%;
		border: 0;
	}

	& > div {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: column;
		flex-flow: column;
		-webkit-flex: 1;
		flex: 1;
		text-align: right;
		margin: 0;
	}

		& p {
			-webkit-flex: 1;
			flex: 1;
			margin: 0;
			font-size: 150%;
			line-height: 1.2;
			font-weight: bold;
			letter-spacing: -.03em;
		}

		& nav {
			font: 160% Damion, cursive;

			& ul {
				margin: 0;
			}

			& li {
				display: inline;
				list-style: none;
			}

			& a {
				display: inline-block;
				padding: .15em .4em .15em .3em;
				border-radius: .3em;
				text-decoration: none;
				border: .12em solid transparent;
				line-height: 1;
			}

			& li:last-of-type a,
			& a:hover {
				border-color: var(--base-color);
			}

			& a:hover {
				background: var(--base-color);
				color: var(--accent1);
			}
		}
}

section section {
	padding: 0;
}

body > section,
body > md-block:not([rendered="remote"]),
md-block > section,
#features {
	background: var(--base-color);
	color: black;
	order: 3;

	& h1 {
		color: var(--accent2);
	}
}

body > md-block:not([rendered="remote"]) {
	order: 1;
}

md-block > section:nth-of-type(odd),
#examples {
	padding-top: 2em;
	padding-bottom: 2em;
	--next-section-background: var(--base-color);
	--prev-section-background: var(--base-color);
	background: conic-gradient(from -45deg at bottom, var(--prev-section-background, transparent) 25%, transparent 0 100%) top,
	            conic-gradient(from -45deg at bottom, transparent 25%, var(--next-section-background, transparent) 0 100%) bottom;
	background-color: var(--accent2);
	background-size: 1em .5em;
	background-repeat: repeat-x;
	color: var(--base-color);

	& h1 {
		color: var(--base-color);
	}
}

md-block > section:last-of-type {
	--next-section-background: var(--accent1);
}



#features {
	order: 1;

	& ul {
		padding: 0;
		list-style: none;
	}

	@media (min-width: 600px) {
		& ul {
			columns: 2;
		}
	}

		& li {
			position: relative;
			break-inside: avoid;
			-webkit-column-break-inside: avoid;
			font-size: 70%;
			margin: 0 0 1em 2.5em;
		}

			& li::before {
				content: "✓";
				position: absolute;
				top: .05em;
				right: 100%;
				margin-right: .1em;
				font-size: 320%;
				line-height: 1;
				color: var(--accent1);
			}

			& li strong {
				display: block;
				font-size: 150%;

				& a:not(:hover) {
					text-decoration: none;
				}
			}
}

#examples {
	order: 2;
	overflow: hidden;

	& label,
	& textarea {
		display: block;
	}

	& label:first-of-type {
		float: right;
		margin-top: -.6em;
	}

	& label {
		margin: 1em 0;
	}
}

footer {
	order: 4;
	background: var(--accent1) url(logo.svg#beige) right / auto 100% no-repeat;
	background-origin: content-box;
}

.github-ribbon {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(90deg) translateX(70.71067814%) rotate(-90deg) rotate(-45deg) translateY(-100%);
	transform-origin: 0 0;
	padding: .4em 3em;
	background: var(--accent2);
	text-decoration: none;
	color: var(--base-color);
	box-shadow: 0 .1em 0 .1em rgba(0,0,0,.15);

	&:hover {
		background: black;
		color: white;
	}
}

.social-media {
	@media (min-width: 1150px) {
		& {
			position: absolute;
			top: 1em;
			right: 1em;
			width: -webkit-min-content;
			width: -moz-min-content;
			width: min-content;
		}
	}
}

#carbonads {
    position: absolute;
    top: 75vh;
    right: 1em;
    max-width: 130px;
    padding: 1em;
    border: 1px solid silver;
    font-size: 50%;
    line-height: 1.5;
    background: hsla(0,0%,100%,.9);
}

@media (max-width: 950px) {
    #carbonads {
        display: none;
    }
}

.carbon-text {
    display: block;
    text-decoration: none;
}

md-block[rendered="remote"],
md-block[rendered="content"] {
	display: contents;
}

md-block header {
	display: none;
}

md-block:not([rendered]) {
	white-space: pre-line;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
	border: 1px solid var(--accent1);
	padding: .3em .5em;
}

th {
	background: var(--accent1);
	color: var(--base-color);
}