blissfuljs/style/docs.css

Lightweight helper library for modern browsers.

/* Documentation-specific CSS */

.tag:not(.token) {
	display: inline-block;
	vertical-align: middle;
	padding: 0 .4em;
	border-radius: .3em;
	background: black;
	color: white;
	font-weight: bold;
	font-size: .8rem;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: help;
}

	.tag.element {
		background: yellowgreen;
	}

	.tag.array {
		background: hsl(350, 80%, 55%);
	}

	.tag.set {
		background: hsl(190, 52%, 50%);
	}

	.tag.full {
		background: #c00;
	}

.args {}

	.args dt {
		margin-top: .6em;
		font-weight: bold;
		font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	}

	.args dd.type {
		width: 100%;
		margin-top: -1.5em;
		font-style: italic;
		text-align: right;
	}

@media (min-width: 75em) and (min-height: 40em) {
	#toc {
		white-space: nowrap;
		position: fixed;
		bottom: 0rem;
		padding: 1em;
		box-sizing: border-box;
		max-height: 100vh;
		overflow: auto;
		z-index: 1;
	}
}

@media (min-width: 75em) and (max-width: 110em) {
	#toc {
		bottom: 2.5rem;
		font-size: 80%;
	}
}

@media (max-width: 75em), (max-height: 55em) {
	#toc > ol {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

	#toc ol {
		list-style-type: none;
	}

	#toc > ol {
		padding-left: 0;
		font-weight: bold;
	}

	#toc ol ol {
		font-weight: normal;
		padding-left: 1em;
	}

		#toc ol ol a {
			color: hsl(227, 15%, 24%);
		}

.implementation + pre {
	display: none;
}

.implementation + pre.visible {
	display: block;
}

#docs article h1 a {
	color: inherit;
}

#vanilla table pre {
	box-shadow: none;
	padding: .6em 1em;
	border-radius: .3em;
}

pre:not(.def) + pre.def {
	margin-top: 1.5em;
}

/* Different color for examples */
.def ~ pre:not(.def),
.args ~ pre:not(.def),
.notes pre {
	background: hsl(350, 80%, 97%);
	box-shadow: -35vw 0 hsl(350, 80%, 97%), 35vw 0 hsl(350, 80%, 97%);
}