style.scss

// Colors
$accent1: hsl(185, 40%, 50%); // turquoise
$accent2: hsl(10, 50%, 40%); // dark red
$base: hsl(40, 60%, 90%); // beige

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

body {
	font: 100%/1.5 Rockwell, Arvo, Helvetica Neue, sans-serif;
	margin: 0;
}

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;
}

::-webkit-input-placeholder { color: hsla(0,0%,100%,.5); }
::-moz-placeholder { color: hsla(0,0%,100%,.5); }

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

a {
	color: inherit;
}

header, section, footer {
	max-width: 900px;
	padding: 1.5em calc(50% - 450px);
	background: $accent1;
	color: $base;
}

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

header {
	display: -webkit-flex;
	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;
			}

			a[href="stretchy.js"],
			a:hover {
				border-color: $base;
			}

			a:hover {
				background: $base;
				color: $accent1;
			}
		}
}

section:nth-of-type(odd) {
	background: $base;
	color: black;

	h1 {
		color: $accent2;
	}
}

section:nth-of-type(even) {
	padding-top: 2em;
	padding-bottom: 2em;
	background: svg(svg-polygon($base, "0,0 100,100 200,0"), "0 0 200 100") top / 1em auto repeat-x,
	            svg(svg-polygon($base, "0,100 100,0 200,100"), "0 0 200 100") bottom / 1em auto repeat-x;
	background-color: $accent2;

	h1 {
		color: $base;
	}

	&:last-of-type {
		background-image: svg(svg-polygon($base, "0,0 100,100 200,0"), "0 0 200 100"),
		                  svg(svg-polygon($accent1, "0,100 100,0 200,100"), "0 0 200 100");
	}
}

#features {
	ul {
		padding: 0;
		list-style: none;
	}

	@media (min-width: 600px) {
		ul {
			-webkit-columns: 2;
			-moz-columns: 2;
			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: $accent1;
			}

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

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

#examples {
	overflow: hidden;

	label,
	textarea {
		display: block;
	}

	textarea {

	}

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

	label {
		margin: 1em 0;
	}
}

#api {
	dt {
		font-weight: bold;
	}

	dd + dt {
		margin-top: 1em;
	}
}

footer {
	background: $accent1 url(logo.svg) 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: $accent2;
	text-decoration: none;
	color: $base;
	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;
}