jekyll-theme-chalk 0.1.1

data/_assets/yarn/fluidbox/demo/src/css/styles.scss

@@ -0,0 +1,1131 @@
+// Mixins
+@mixin prefix($property, $value, $prefixes: ()) {
+	@each $prefix in $prefixes {
+		#{'-' + $prefix + '-' + $property}: $value;
+	}
+ 
+	// Output standard non-prefixed declaration
+	#{$property}: $value;
+}
+
+/* Component styles */
+@font-face {
+	font-family: 'Blokk';
+	src: url('../fonts/BLOKKRegular.eot');
+	src: url('../fonts/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
+		 url('../fonts/BLOKKRegular.woff') format('woff'),
+		 url('../fonts/BLOKKRegular.svg#BLOKKRegular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: 'fontello';
+	src: url('../fonts/fontello.eot');
+	src: url('../fonts/fontello.eot#iefix') format('embedded-opentype'),
+		 url('../fonts/fontello.woff') format('woff'),
+		 url('../fonts/fontello.ttf') format('truetype'),
+		 url('../fonts/fontello.svg#fontello') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+.code-toggle, .anchor {
+	text-decoration: none;
+	&::before {
+		font-family: "fontello";
+		font-style: normal;
+		font-weight: normal;
+		speak: none;
+
+		display: inline-block;
+		text-decoration: inherit;
+		width: 1em;
+		margin-right: .2em;
+		text-align: center;
+		/* opacity: .8; */
+
+		/* For safety - reset parent styles, that can break glyph codes*/
+		font-variant: normal;
+		text-transform: none;
+		 
+		/* fix buttons height, for twitter bootstrap */
+		line-height: 1em;
+	}
+}
+
+html {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 16px;
+}
+body {
+	color: #333;
+	height: 100%;
+	line-height: 1.5em;
+	overflow-x: hidden;
+}
+header {
+	background-color: #333;
+	box-sizing: border-box;
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 1.5rem;
+	overflow: hidden;
+	padding: 3rem 16.66667%;
+	position: relative;
+	width: 100%;
+	height: 100vh;
+	min-height: 30rem;
+	text-shadow: 0 0 .5rem rgba(0,0,0,.125);
+	transition: all .25s ease-in-out;
+
+	&::before, &::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transition: all .25s ease-in-out;
+	}
+	&::before {
+		background-image: url('http://i.imgur.com/yYv5u81.jpg');
+		background-size: cover;
+		background-repeat: none;
+		background-position: center center;
+		
+	}
+	&::after {
+		background-color: rgba(0,0,0,.5);
+		opacity: 0;
+	}
+	&:hover::after {
+		opacity: 1;
+	}
+
+	& > * {
+		position: relative;
+		z-index: 3;
+	}
+
+	h1 {
+		font-weight: 300;
+		font-size: 6rem;
+		line-height: 1em;
+		margin: 0 0 .5rem 0;
+		text-align: center;
+	}
+	.byline {
+		display: block;
+		font-family: 'PT Serif', Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
+		font-size: 1.2em;
+		font-style: italic;
+		text-align: center;
+	}
+	#skip {
+		border: none;
+		display: block;
+		position: absolute;
+		bottom: 1.5rem;
+		left: 0;
+		right: 0;
+		height: 1.5rem;
+		svg {
+			display: block;
+			margin: 0 auto;
+			width: 3rem;
+			height: 1.5rem;
+			path { fill: rgba(255,255,255,.75); }
+		}
+	}
+}
+
+footer {
+	background-color: #333;
+	box-sizing: border-box;
+	color: #eee;
+	padding: 1.5rem 16.66667%;
+	width: 100%;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	line-height: 1.25em;
+	position: relative;
+	.user-message & {
+		color: #eee;
+		margin-top: 0;
+		margin-bottom: .5rem;
+	}
+}
+h2 {
+	font-size: 3em;
+}
+h3 {
+	font-size: 2em;
+	margin: 4rem 0 1rem 0;
+	h2 + & { margin-top: 1rem; }
+}
+h4 {
+	border-bottom: 1px solid rgba(0,0,0,.125);
+	color: #777;
+	font-size: 1.5em;
+	margin: 2.25rem 0 .25rem 0;
+}
+a.anchor {
+	font-size: 1em;
+	opacity: 0;
+	position: absolute;
+	left: -1.5em;
+	width: 1em;
+	height: 1em;
+	text-decoration: none;
+	&::before { content: '\e800'; }
+	h2 & {
+		font-size: 2rem;
+	}
+}
+h2, h3, h4 {
+	&:hover a.anchor { opacity: 1; }
+}
+p {
+	margin: 0;
+	margin-bottom: 1.5rem;
+}
+.filler {
+	color: #999;
+	font-family: "Blokk", Arial, sans-serif;
+}
+.message {
+	background-color: #FDC68A;
+	border-left: .75rem solid #F26C4F;
+	margin-bottom: 1.5rem;
+	padding: .75rem 1.5rem;
+	font-size: .85rem;
+	a:hover {
+		border-color: rgba(0,0,0,.5);
+		color: rgba(0,0,0,.5);
+	}
+	&.note {
+		background-color: #7BCDC8;
+		border-color: #00A99D;
+	}
+}
+hr {
+	border: none;
+	border-top: .125rem solid #ddd;
+	margin-bottom: 1.375rem;
+}
+a {
+	color: #333;
+	text-decoration: underline;
+	transition: all .125s ease-in-out;
+}
+	a:hover {
+		color: #4a7298;
+	}
+ul {
+	margin-top: -.75rem;
+}
+a.code-toggle {
+	border: none;
+	background-color: #CFCFCF;
+	display: block;
+	font-weight: bold;
+	line-height: 1.5rem;
+	padding: .5rem 1rem;
+	text-align: center;
+	&::before {
+		content: '\e801';
+		margin-right: .5rem;
+	}
+	& ~ pre { margin-top: 0; }
+}
+pre,
+pre[class*=language-] {
+	background-color: #f5f2f0;
+	border: 1px solid #CFCFCF;
+	box-sizing: border-box;
+	display: block;
+	margin-bottom: 1.5rem;
+	padding: 0;
+	font-size: .85rem;
+	width: 100%;
+
+	p + & {
+		margin-top: -.75rem;
+	}
+
+	& > code[data-language]::before {
+		font-family: 'Open Sans';
+		letter-spacing: 1px;
+		opacity: 0;
+		padding: 0 .5rem;
+		text-transform: uppercase;
+		transition: all .25s ease-in-out;
+	}
+	&:hover code[data-language]::before { opacity: 1; }
+}
+code {
+	background-color: #f5f2f0;
+	border: 1px solid #CFCFCF;
+	border-radius: 4px;
+	display: inline-block;
+	font-size: .875rem;
+	margin: 0 .125rem;
+	padding: 0 .25rem;
+	pre > &,
+	pre[class*=language-] > &[data-language] {
+		background-color: transparent;
+		border: none;
+		border-radius: 0;
+		display: block;
+		overflow: visible;
+		padding: 1rem;
+	}
+	pre & a {
+		border: none;
+		&:hover { color: inherit; }
+	}
+	.user-message & {
+		background-color: rgba(#eee,.75);
+		border-color: rgba(#333,.5);
+		color: #333;
+		line-height: 1.25em;
+	}
+}
+button[type="button"] {
+	background-color: #4a7298;
+	border: 1px solid rgba(0,0,0,.25);
+	box-shadow: inset 0 0 1px 0 rgba(255,255,255,.5);
+	border-radius: 4px;
+	color: #eee;
+	cursor: pointer;
+	line-height: 1rem;
+	margin-bottom: 1.5rem;
+	padding: .75rem 2rem;
+
+	&[disabled] {
+		background-color: #999;
+		cursor: not-allowed;
+	}
+	&:hover {
+		background-image: linear-gradient(to bottom, rgba(0,0,0,.125) 0%, rgba(0,0,0,0) 50%);
+	}
+}
+.user-message {
+	background: rgb(102,102,102); /* Old browsers */
+	background: linear-gradient(135deg,  rgba(102,102,102,1) 0%,rgba(85,85,85,1) 100%); /* W3C */
+	border-radius: 4px;
+	color: #eee;
+	margin-bottom: 1.5rem;
+	padding: .5rem 1rem .5rem 4rem;	
+	position: relative;
+
+	&::before, &::after {
+		content: '';
+		display: block;
+		position: absolute;
+		left: 0;
+		width: 3rem;
+	}
+	&::after {
+		color: rgba(#333,.75);
+		top: 50%;
+		font-weight: bold;
+		text-align: center;
+		transform: translateY(-50%);
+	}
+	&::before {
+		background-color: rgba(#eee,.5);
+		top: 0;
+		bottom: 0;
+	}
+
+	&.warning {
+		background: rgb(206,129,57); /* Old browsers */
+		background: linear-gradient(135deg,  rgba(206,129,57,1) 0%,rgba(177,49,49,1) 100%); /* W3C */
+		color: #eee;
+		&::after { content: '!'; }
+	}
+	&.reminder {
+		background: rgb(249,211,107); /* Old browsers */
+		background: linear-gradient(135deg,  rgba(249,211,107,1) 0%,rgba(234,167,72,1) 100%); /* W3C */
+		color: #7c541f;
+		&::after { content: '!'; }
+	}
+	&.note {
+		background: rgb(97,149,198); /* Old browsers */
+		background: linear-gradient(135deg,  rgba(97,149,198,1) 0%,rgba(74,114,152,1) 100%); /* W3C */
+		color: #eee;
+		&::after { content: '\002021'; }
+	}
+	&.approved {
+		background: rgb(103,168,42); /* Old browsers */
+		background: linear-gradient(135deg,  rgba(103,168,42,1) 0%,rgba(70,124,31,1) 100%); /* W3C */
+		color: #eee;
+		&::after { content: '\002714'; }
+	}
+	& > *:last-child {
+		margin-bottom: 0;
+	}
+
+	a {
+		color: #eee;
+	}
+	&.reminmder a {
+		color: #7c541f;
+	}
+
+	/* Responsive messages */
+	&[data-viewport-threshold] {
+		display: none;
+	}
+}
+	div.user-message {
+		margin: 3rem 0;
+		padding: 1.5rem 3rem 1.5rem 5rem;
+	}
+table {
+	border-collapse: collapse;
+	line-height: 1.5em;
+	margin-bottom: 3rem;
+	position: relative;
+	width: 100%;
+
+	&.wider {
+		left: -12.5%;
+		width: 125%;
+	}
+
+	// General cells
+	td, th {
+		border-left: 2px solid #fff;
+		border-right: 2px solid #fff;
+		padding: 1rem;
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+		&:first-child { border-left: none; }
+		&:last-child  { border-right: none; }
+	}
+
+	// Specific table compartment styles
+	thead {
+		font-size: .8rem;
+		font-weight: bold;
+		letter-spacing: 2px;
+		line-height: 1rem;
+		text-transform: uppercase;
+		td, th {
+			border-bottom: 3px solid #ccc;
+			padding: .25rem 1rem;
+		}
+	}
+	tbody {
+		tr {
+			&:nth-child(odd) {
+				background-color: #e6e6e6;
+			}
+			&:last-child {
+				border-bottom: 1px solid #ccc;
+			}
+			&:target {
+				background-color: transparent;
+				th { background-color: #8BA3B0; color: #eee; }
+				td { background-color: rgba(#8BA3B0, .5); }
+				a.anchor { color: #8BA3B0; opacity: 1; }
+			}
+			th {
+				text-align: left;
+			}
+		}
+	}
+
+	p {
+		margin-bottom: .5rem;
+	}
+
+	pre {
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+	p + pre, p + pre[class*=language-] {
+		margin-top: .25rem;
+	}
+}
+
+/* Main */
+main {
+	margin: 0 16.66667%;
+	section {
+		border-bottom: 1px solid #ccc;
+		margin-bottom: 1.5rem;
+		padding: 1.5rem 0;
+	}
+}
+
+/* Cards */
+.cards {
+	display: flex;
+	flex-flow: row wrap;
+	margin: -.25rem;
+	margin-bottom: 1.25rem;
+	overflow: hidden;
+
+	svg {
+		display: block;
+		margin: 0 auto .75rem;
+		width: 5.25rem;
+		height: 5.25rem;
+		transition: all .125s ease-in-out;
+		& path {
+			fill: #eee;
+			transition: fill .125s ease-in-out;
+		}
+	}
+
+	& > a {
+		box-sizing: border-box;
+		border: none;
+		border-radius: 4px;
+		color: #eee;
+		flex: 1 auto;
+		margin: .25rem;
+		padding: 1.5rem;
+		text-align: center;
+		text-decoration: none;
+		transition: all .25s ease-in-out;
+
+		&.card-medium {
+			background-color: #57ad68;
+			flex-basis: 100%;
+			svg { background-color: #eee; path { fill: #57ad68; } }
+		}
+		&.card-github {
+			background-color: #ff9933;
+			flex-basis: auto;
+		}
+		&.card-cdnjs {
+			background-color: #bf3e11;
+			flex-basis: auto;
+			.branding {
+				display: block;
+				font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
+				letter-spacing: 1px;
+				line-height: 5rem;
+				margin-bottom: .75rem;
+				font-size: 3em;
+			}
+		}
+
+		.branding {
+			transition: all .25s ease-in-out;
+		}
+		&:hover .branding {
+			@include prefix(transform, scale(1.25), webkit ms);
+		}
+	}
+}
+
+/* Three dimensional visualization of Fluidbox */
+#fluidbox-3d {
+	margin: 0 0 1.5rem 0;
+	padding: 0;
+	position: relative;
+	perspective: 5000;	/* Keep things isometric */
+	width: 100%;
+	height: 600px;
+	position: relative;
+	* {
+		display: block;
+		transform-style: preserve-3d;
+	}
+	figcaption {
+		font-size: .85rem;
+		position: absolute;
+		bottom: 0;
+		margin-top: .75rem;
+		text-align: center;
+		width: 100%;
+	}
+	.canvas {
+		position: absolute;
+		top: 60%;
+		left: 50%;
+		transform: translate(-50%,-50%) rotateX(45deg) rotateZ(45deg);
+		transition: all .5s ease-in-out;
+	}
+	a, .fluidbox__wrap {
+		border: none;
+	}
+	img {
+		display: block;
+		opacity: .5 !important;			/* Override required for presentation, do not use in actual production code! */
+		width: 20rem;
+		transition: all .25s ease-in-out;
+		transform: translate3d(0,0,0);
+	}
+	.fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
+		position: absolute;
+		opacity: .5 !important;				/* Override required for presentation, do not use in actual production code! */
+		top: 0 !important;					/* Override required for presentation, do not use in actual production code! */
+		left: 0 !important;					/* Override required for presentation, do not use in actual production code! */
+		transition: all .25s ease-in-out;
+		transition-delay: 0;
+		&::after {
+			background-color: #333;
+			border-radius: 4px;
+			color: #eee;
+			display: block;
+			opacity: 0 !important;
+			pointer-events: none;
+			position: absolute;
+			padding: .5rem 1rem;
+			top: 0;
+			left: 100%;
+			width: 10rem;
+			transform: rotateZ(-45deg) rotateX(-65deg) translate(1rem, -50%) !important;
+			transform-origin: 0% 0%;
+		}
+
+		&:hover {
+			&::after { opacity: 1 !important; }
+		}
+	}
+	.fluidbox__ghost {
+		background-image: url('http://i.imgur.com/ouqMP4F.jpg');
+		transform: translate3d(0, 0, 6rem) !important;		/* Override required for presentation, do not use in actual production code! */
+		&::after {
+			content: 'Ghost element will be expanded to fill screen (conditionally, based on available image resolution)';
+		}
+	}
+	.fluidbox__loader {
+		background-image: url('http://placehold.it/500x500/333333/eeeeee/&text=Loader');
+		background-size: cover;
+		pointer-events: auto;
+		perspective: none;								/* Override required for presentation, do not use in actual production code! */
+		transform: translate3d(0, 0, 12rem) !important;	/* Override required for presentation, do not use in actual production code! */
+		&::after {
+			content: 'Loader will be hidden when image is loaded in actual scenario';
+		}
+		&::before {
+			display: none;
+		}
+	}
+	.fluidbox__overlay {
+		background-image: url('http://placehold.it/500x500/cccccc/333333/&text=Overlay');
+		background-size: cover;
+		opacity: 0 !important;								/* Override required for presentation, do not use in actual production code! */
+		transform: translate3d(0, 0, 3rem) !important;		/* Override required for presentation, do not use in actual production code! */
+		&::after {
+			content: 'Overlay to fade out other elements on page';
+		}
+	}
+
+	.fluidbox--opened {
+		.fluidbox__ghost {
+			transform: translate3d(0, 0, 12rem) !important;	/* Override required for presentation, do not use in actual production code! */
+		}
+		.fluidbox__loader {
+			transform: translate3d(0, 0, 18rem) !important;	/* Override required for presentation, do not use in actual production code! */
+		}
+		.fluidbox__overlay {
+			opacity: .5 !important;							/* Override required for presentation, do not use in actual production code! */
+			transform: translate3d(0, 0, 6rem) !important;	/* Override required for presentation, do not use in actual production code! */
+		}
+	}
+
+	&:hover {
+		@include prefix(perspective, 2000, webkit);
+		.canvas {
+			transform: translate(-50%,-33%) rotateX(65deg) rotateZ(45deg);
+		}
+		img, .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
+			opacity: .25 !important;	/* Override required for presentation, do not use in actual production code! */
+			&:hover {
+				opacity: 1 !important;	/* Override required for presentation, do not use in actual production code! */
+			}
+		}
+	}
+}
+
+/* Adjust positioning of images to introduce variety */
+.demo {
+	a {
+		&.fluidbox--closed {
+			background-color: #eee;
+			border: none;
+			cursor: -webkit-zoom-in;
+			cursor: -moz-zoom-in;
+			margin-bottom: 1.5rem;
+		}
+
+		&.fluidbox--opened {
+			cursor: -webkit-zoom-out;
+			cursor: -moz-zoom-out;
+		}
+
+		img, picture {
+			display: block;
+			margin: 0 auto;
+			max-width: 100%;
+		}
+
+		&[class^='float'] {
+			margin: 1rem;
+			margin-top: 0;
+			width: 33.33333%;
+			&.float-left {
+				float: left;
+				margin-left: 0;
+			}
+			&.float-right {
+				float: right;
+				margin-right: 0;
+			}
+		}
+
+		&.has-border img {
+			border: 4px solid #111;
+		}
+		&.has-padding img {
+			padding: 4px;
+		}
+	}
+
+	.gallery {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-between;
+		a {
+			margin-bottom: 1rem;
+			&.col-1 { width: 100%; }
+			&.col-2 { width: 49%; width: calc(50% - .5rem); }
+			&.col-3 { width: 32%; width: calc(33.33333% - .66667rem); }
+		}
+	}
+
+	.box {
+		background-color: #eee;
+		border: 1px solid rgba(0,0,0,.25);
+		box-sizing: border-box;
+		padding-bottom: 66.66667%;
+		position: relative;
+		width: 100%;
+		img {
+			position: absolute;
+			top: 2rem;
+			left: 2rem;
+			width: 50%;
+		}
+	}
+}
+
+/* Flexbox */
+.cols {
+	display: flex;
+	flex-flow: row wrap;
+	margin: 0 -1rem 2rem -1rem;
+
+	& > * {
+		flex-grow: 1;
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+
+	&.cols-nowrap {
+		flex-wrap: nowrap;
+		& > * {
+			flex-grow: 1;
+			margin-bottom: 0 !important;
+		}
+	}
+
+	@for $i from 1 through 5 {
+		&.cols-#{$i} > * {
+			width: percentage(1/$i);
+		}
+	}
+
+	figcaption { margin-top: .5rem; }
+}
+
+/* Width overrides */
+.full-width {
+	position: relative;
+	left: -25%;
+	width: 150%;
+}
+
+
+/* Code blocks */
+.code-block {
+	margin-bottom: 1.5rem;
+	pre { margin-bottom: 0; }
+}
+	.code-block pre {
+		margin-bottom: 0;
+	}
+.token { &.cr, &.lf, &.tab:not(:empty) { &::before { content: ''; } } }
+
+
+/* Custom events */
+#custom-events-demo {
+	& > div:first-child {
+		flex-grow: 0;
+		text-align: center;
+		img {
+			margin-bottom: 1rem;
+			max-height: 30rem;
+		}
+	}
+}
+#fluidbox-toggle {
+	appearance: none;
+	background-color: #fafafa;
+	border: 1px solid #d3d3d3;
+	border-radius: .75rem;
+	box-shadow: inset 0 0 0 1px #d3d3d3;
+	cursor: pointer;
+	outline: none;
+	height: 1.5rem;
+	position: relative;
+	transition: border .25s .15s, box-shadow .25s .3s, padding .25s, opacity .25s;
+	width: 3rem;
+	vertical-align: top;
+	&::after {
+		background-color: #fff;
+		border: 1px solid #d3d3d3;
+		border-radius: 50%;
+		content: '';
+		display: block;
+		height: calc(1.5rem - 4px);
+		left: 0;
+		position: absolute;
+		right: calc(1.5rem);
+		top: 0;
+		transition: border .25s .15s, left .25s .1s, right .15s .175s;
+	}
+	&:checked {
+		border-color: #53d76a;
+		box-shadow: inset 0 0 0 .75rem #53d76a;
+		padding-left: 1.5rem;
+		transition: border .25s, box-shadow .25s, padding .25s .15s;
+		&::after {
+			border-color: #53d76a;
+			left: calc(1.5rem);
+			right: 0;
+			transition: border .25s, left .15s .25s, right .25s .175s;
+		}
+	}
+	&:disabled {
+		opacity: 0.5;
+	}
+	& + label {
+		color: #666;
+		margin-left: .5rem;
+	}
+}
+#custom-events__log {
+	position: relative;
+	text-align: left;
+	div {
+		border: 1px solid rgba(0,0,0,.125);
+		background-color: #eee;
+		padding: 1rem 2rem;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		overflow-y: auto;
+	}
+	ul {
+		list-style: none;
+		padding: 0;
+		li { 
+			margin-bottom: .5rem;
+			& > span { display: block; }
+			& > .evt {
+				background-color: #999;
+				border-radius: .5em;
+				display: block;
+				float: left;
+				font-size: .75em;
+				margin: .5em .5em 0 0;
+				padding: 0 .5em 0;
+				height: 1em;
+				&.dsc { padding-left: 1.5em; }
+			}
+			
+			&.fluidbox-event-ready,
+			&.fluidbox-event-destroyed,
+			&.fluidbox-event-openend,
+			&.fluidbox-event-closeend {
+				border-bottom: 1px dashed rgba(#555,.25);
+				padding-bottom: .5rem;
+			}
+			&:last-child {
+				border: none;
+				padding-bottom: 0;
+			}
+		}
+	}
+}
+#custom-trigger-1-social {
+	position: fixed;
+	bottom: 2.5%;
+	left: 0;
+	right: 0;
+	opacity: 0;
+	padding: 1rem 0;
+	background-color: rgba(255,255,255,.75);
+	z-index: 1011;
+	text-align: center;
+	transition: all .25s ease-in-out;
+	transform: translateY(100%);
+
+	&.visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	ul {
+		display: flex;
+		justify-content: center;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		li { padding: 0 1rem; }
+		a {
+			background-color: rgba(0,0,0,.125);
+			border-radius: 4px;
+			border: none;
+			display: inline-block;
+			padding: 0 .5rem;
+			&:hover {
+				background-color: rgba(74,114,152,.75);
+				color: #eee;
+			}
+		}
+	}
+}
+
+
+/* Dynamic image loading button */
+#loadImg + article {
+	background-color: #eee;
+	border: 1px solid rgba(0,0,0,.25);
+	box-sizing: border-box;
+	padding: 1rem 2rem;
+}
+
+/* Custom overlays */
+.fluidbox__overlay {
+	.overlay-1 & { background-color: rgba(153,145,139,.85); }
+	.overlay-2 & {
+		background-color: transparent;
+		background-image: linear-gradient(to top left, rgba(130,168,158,0.85), rgba(134,150,173,.85));
+	}
+	.overlay-3 & {
+		background-color: #000;
+		&::before {
+			background-image: url('http://i.imgur.com/3qj1wfN.jpg');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: cover;
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			opacity: .33333;
+			filter: blur(4px);
+		}
+	}
+}
+
+
+/* Footer */
+footer {
+	p {
+		color: #999;
+		margin: 0;
+		text-align: center;
+	}
+	a {
+		color: #ccc;
+		&:hover {
+			border-bottom-color: #eee;
+			color: #eee;
+		}
+	}
+	svg {
+		display: block;
+		fill: #ccc;
+		width: 2rem;
+		height: 2rem;
+		margin: 0 auto 1rem;
+	}
+}
+
+
+/* Media queries, unrelated to functionality of Fluidbox */
+@media only screen and (max-width: 768px) {
+	header {
+		max-height: 500px;
+		h1 {
+			font-size: 5rem;
+		}
+	}
+	.cards {
+		flex-flow: row wrap;
+	}
+	.demo a[class^='float'] {
+		width: 50%; 
+	}
+	.filler {
+		font-size: .75em;
+	}
+
+	/* Adjust float */
+	.demo a[class^='float'] {
+		width: 25%;
+	}
+
+	/* Fluidbox 3D */
+	#fluidbox-3d {
+		.fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
+			&::after {
+				top: 100%;
+				left: 100%;
+				width: 10rem;
+				transform: rotateZ(-45deg) rotateX(-65deg) translate(-50%, -50%) !important;
+			}
+		}
+	}
+
+	/* Responsive tables */
+	table, thead, tbody, th, td, tr { 
+		display: block; 
+	}
+	table {
+		font-size: 1rem;
+		left: 0;
+		line-height: 1.5rem;
+		width: 100%;
+		td, th {
+			border: none;
+			position: relative;
+			padding-left: 35%;
+			&::before {
+				padding: 0 .5rem;
+				position: absolute;
+				left: 0;
+				width: 35%; 
+				white-space: nowrap;
+			}
+		}
+		thead {
+			display: none;
+			td { border: none; }
+		}
+		tbody {
+			tr {
+				background-color: transparent !important;
+				margin-bottom: 1rem;
+				th {
+					background-color: #ddd;
+					border-bottom: 2px solid rgba(#000,.1);
+				}
+				td {
+					background-color: rgba(#ddd, .5);
+					border-bottom: 1px solid #fff;
+					&:last-child { border: none; }
+				}
+				th, td {
+					&::before {
+						font-size: .8rem;
+						font-weight: bold;
+						letter-spacing: 2px;
+						line-height: 1.5rem;
+						text-transform: uppercase;
+					}
+				}
+				&:target {
+					th { background-color: #8BA3B0; }
+					td { background-color: rgba(#8BA3B0,.5); }
+				}
+			}
+		}
+	}
+	#markup-details {
+		tbody {
+			td:nth-of-type(1)::before	{ content: 'Variable'; }
+			td:nth-of-type(2)::before	{ content: 'Description'; }
+		}
+	}
+	#configuration-options {
+		tbody {	
+			th::before					{ content: 'Property'; }
+			td:nth-of-type(1)::before	{ content: 'Type'; }
+			td:nth-of-type(2)::before	{ content: 'Default'; }
+			td:nth-of-type(3)::before	{ content: 'Description'; }
+		}
+	}
+	.cols {
+		flex-wrap: wrap;
+		& > * { width: 100%; }
+		&.cols-nowrap {
+			flex-wrap: wrap;
+			& > * {
+				margin-bottom: 1rem !important;
+				width: 100%;
+			}
+		}
+	}
+	#custom-events__log {
+		div {
+			position: relative;
+			max-height: 50vh;
+		}
+	}
+}
+@media only screen and (max-width: 600px) {
+	.user-message {
+		&[data-viewport-threshold="600"] {
+			display: block;
+		}
+	}
+	.demo {
+		.gallery {
+			a {
+				&, &[class^='col'] {
+					margin-bottom: .5rem;
+					width: 100%;
+				}
+			}
+		}
+		a[class^='float'] {
+			float: none;
+			margin: 0 0 1rem 0;
+			width: 100%;
+		}
+	}
+}
+@media only screen and (max-width: 480px) {
+	html {
+		font-size: 12px;
+	}
+}
+
+@supports (backdrop-filter: none) {
+	header::after {
+		backdrop-filter: blur(10px);
+	}
+	#custom-trigger-1-social {
+		backdrop-filter: blur(10px);
+	}
+}