blissfuljs/style/style.css

Lightweight helper library for modern browsers.

@font-face {
	font-family: 'Great Vibes';
	src: url('greatvibes.woff');
}

:root {
	--yellow: hsl(61, 86%, 77%);
	--lightblue: hsl(145, 34%, 89%);
	--blue: hsl(190, 52%, 50%);
	--magenta: hsl(350, 80%, 55%);
	--darkgray: hsl(227, 15%, 24%);

	--body-font: Optima, Candara, sans-serif;
}

body {
	margin: auto;
	font: 100%/1.6 Optima, Candara, sans-serif;
	font-kerning: normal;
	font-synthesis: none;
	background-color: white;
	color: hsl(227, 15%, 24%);
}

	@keyframes pulse {
		to { line-height: 3; }
	}

	body[data-loading]::before {
		content: "Loading…";
		position: fixed;
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
		z-index: 2;
		padding: .5em .8em;
		border-radius: .3em;
		background: rgba(0,0,0,.5);
		color: white;
		font-size: 120%;
		animation: pulse .5s alternate infinite;
	}

a {
	color: hsl(190, 52%, 50%);
}

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

button, .button {
	display: inline-block;
	padding: 0 .5em;
	border: 0;
	border-radius: .3em;
	margin: 0 .2em;
	background: hsl(190, 52%, 50%);
	color: white;
	font: inherit;
	text-decoration: none;
	font-size: 80%;
	font-weight: 100;
	text-transform: uppercase;
	cursor: pointer;
}

	button:hover,
	.button:hover {
		background: hsl(350, 80%, 55%);
	}

ul {
	padding: 0;
}

h1 {
	margin: 1em 0 0;
	font-family: Great Vibes;
	font-size: 300%;
	line-height: 1.2;
	font-weight: normal;
	color: hsl(350, 80%, 55%);
}

section section h1,
section article h1,
h2 {
	margin: 2em 0 0;
	font-family: inherit;
	font-size: 150%;
	font-weight: bold;
}

section section section h1,
section section article h1,
section h2 {
	font-size: 120%;
	color: hsl(227, 10%, 50%);
}

details summary {
	display: block;
	cursor: pointer;
}

	details summary h2 {
		display: inline;
		margin: 0;
	}

body > header,
body > nav,
body > section,
body > footer {
	padding: 0 calc(50% - 24rem);
}

	@media (max-width: 50em) {
		body > header,
		body > nav,
		body > section,
		body > footer {
			padding: 0 2em;
		}
	}

	@media (min-width: 100em) {
		body > header,
		body > nav,
		body > section,
		body > footer {
			padding: 0 calc(50% - 35rem);
		}
	}

@keyframes move {
	from { background-position: -7.5em 100%, -5em 100%, -10em 100%, -20em 100%; }
}

body > header {
	position: relative;
	padding-top: .5em;
	font-size: 200%;
	color: hsl(190, 52%, 50%);

	background: radial-gradient(circle at 50% 90%, white 1em, hsla(0,0%,100%,0) 0) -2.5em 100% / 5em 5em,
	            radial-gradient(circle at bottom, white 1.5em, hsl(145, 34%, 99%) 2em, hsla(145, 34%, 99%, 0) 0) 0em 100% / 5em 5em,
	            radial-gradient(circle at bottom, white 2em, hsl(145, 34%, 99%) 3em, hsla(145, 34%, 99%, 0) 0) 0 100% / 10em 10em,
	            radial-gradient(circle at bottom, white 3em, hsl(145, 34%, 98%) 4em, hsla(145, 34%, 99%, 0) 0) 0em 100% / 20em 20em;
	background-repeat: repeat-x;
	background-color: hsl(145, 34%, 89%);
	animation: 20s move infinite linear;
}

	body > header:hover {
		animation-play-state: paused;
	}

	body > header h1,
	.logo {
		position: relative;
		display: inline-block;
		padding: .5em .75em 0 0;
		margin: 0;
		font: 300%/1 Great Vibes, cursive;
		color: hsl(190, 52%, 50%);
		background: url("logo.svg") 1.5em 0 / 1.2em 1.2em no-repeat;
	}

	body > header p,
	.logo span {
		margin: -.75em 0 0;
		text-transform: uppercase;
		font-size: 50%;
		line-height: 1;
		letter-spacing: .08em;
	}


body > section#intro {}

	body > section#intro p {
		font-size: 120%;
		font-style: italic;
	}

	body > section#intro ul {
		font-size: 80%;
	}

		body > section#intro li {
			position: relative;
			margin: 0 0 1em 2.5em;
			list-style: none;
		}

		@media (min-width: 50em) {
			body > section#intro li {
				display: inline-block;
				vertical-align: top;
				width: calc(50% - 2.8em);
			}
		}

			body > section#intro li::before {
				content: "✓";
				position: absolute;
				right: 100%;
				top: 0;
				z-index: -1;
				color: hsl(145, 50%, 80%);
				font-size: 400%;
				line-height: 1;
			}

			body > section#intro li strong {
				display: block;
				font-size: 125%;
			}

			body > section#intro li a {
				color: inherit;
			}

	body > section#intro nav {
		margin: 2em 0;
		text-align: center;
	}

		body > section#intro nav a {
			display: inline-block;
			padding: .1em .5em;
			border: .15em solid;
			border-radius: .3em;
			margin: 0 .1em;
			font-size: 120%;
			text-decoration: none;
			font-weight: 600;
			color: hsl(350, 80%, 55%);
		}

		body > section#intro nav a:hover,
		.button:hover {
			background: hsl(350, 80%, 55%);
			border-color: hsl(350, 80%, 55%);
			color: white;
		}

#docs article:target {
	background: linear-gradient(hsla(0,0%,100%,.6), white 60%) 0 0 / 100%  8em,
	            repeating-linear-gradient(135deg, hsl(61, 86%, 77%) 0, hsl(61, 86%, 77%) .5em, white 0, white 1em) 0 0 / 100% 8em repeat-x;
}

body > footer {
	padding-top: 1em;
	padding-bottom: 1em;
	margin-top: 1em;
	background: hsl(227, 15%, 24%);
	color: white;
}

	footer .twitter-follow-button {
		float: right;
		-webkit-filter: hue-rotate(-20deg);
		filter: hue-rotate(-20deg);
	}

/* Index page */
#download {}

	#download p {
		margin: .3em 0;
		font-weight: bold;
	}

	.bliss-compression {
		margin: 1em 0;
	}

	.bliss-type label {
		display: block;
		padding: 1em;
		border-radius: .6em;
		margin: 0 .5% .5em;
		box-sizing: border-box;
		font-size: 80%;
		cursor: pointer;
		border: .2em solid hsl(145, 34%, 89%);
	}

	@media (min-width: 50em) {
		.bliss-type label {
			display: inline-block;
			vertical-align: top;
			width: 48%;
		}
	}

	.bliss-type label:hover {
		background: hsl(145, 34%, 96%);
	}

	.bliss-type input {
		position: absolute;
		clip: rect(0,0,0,0);
	}

	.bliss-type :checked + label {
		background: hsl(145, 34%, 89%);
	}

	#download .bliss-type code {
		background: none;
		box-shadow: none;
	}

	.bliss-type .logo {
		display: block;
		width: fit-content;
		margin: 0 auto .2em;
		font-size: 500%;
	}

		[for="type-shy"] .logo {
			background-image: url("logo-shy.svg");
			color: hsl(350, 80%, 55%);
		}

		.bliss-type .logo span {
			display: block;
			text-align: right;
			font-family: Optima, Candara, sans-serif;
			font-size: 25%;
		}

	#download .button {
		display: block;
		width: 6em;
		font-size: 150%;
		border-radius: .25em;
		margin: auto;
		text-align: center;
		line-height: 1.8;
	}

#quick-look pre {
	position: relative;
	overflow: visible;
	box-shadow: none;
}

	#quick-look pre code {
		display: block;
		overflow: auto;
	}

@media (min-width: 50em) {
	#quick-look .comparison {
		display: -webkit-flex;
		display: flex;
		margin: 1.5em 0;
	}

	#quick-look .comparison pre {
		position: relative;
		width: calc(50% - .4em);
		box-sizing: border-box;
		padding: .5em 0;
		border-radius: .5em;
	}

	#quick-look code {
		tab-size: 2;
	}
}

@media (min-width: 50em) and (max-width: 100em) {
	#quick-look .comparison pre {
		font-size: 75%;
	}
}

	#quick-look pre::before {
		position: absolute;
		bottom: 100%;
		font: bold 100%/.6 Optima, Candara, sans-serif;
	}

	#quick-look pre::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: -1;
		width: calc(50vw - 0.6em);
		background-color: inherit;
	}

	#quick-look pre.bliss::after {
		left: 0;
	}

	#quick-look pre.vanilla::after {
		right: 0;
	}

	#quick-look pre.vanilla {
		background: linear-gradient(to left, hsla(350, 80%, 96%,0), hsl(350, 80%, 96%)),
		            linear-gradient(hsla(0,0%,100%,.5) 50%, transparent 0) 0 0 / auto 3em content-box padding-box
		            hsl(350, 80%, 96%);
		border-right: .3em solid white;
	}

		#quick-look pre.vanilla::before {
			content: "Plain Vanilla JS";
			color: hsl(350, 80%, 55%);
			right: 1em;
		}

	#quick-look pre.bliss {
		background: linear-gradient(to right, hsla(145, 34%, 95%,0), hsl(145, 34%, 95%)),
		            linear-gradient(hsla(0,0%,100%,.5) 50%, transparent 0) 0 0 / auto 3em content-box padding-box
		            hsl(145, 34%, 95%);
		padding-left: .8em;
		border-left: .3em solid white;
	}

		#quick-look pre.bliss::before {
			content: "Blissful Vanilla JS";
			color: hsl(190, 52%, 50%);
			left: 1em;
		}

.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: hsl(350, 80%, 55%);
	text-decoration: none;
	color: #f5ebd6;
	box-shadow: 0 0.1em 0 0.1em rgba(0, 0, 0, 0.15);
	z-index: 1;
}

	.github-ribbon:hover {
		background: black;
		color: white;
	}

.github-star {
	position: absolute;
	top: 1em;
	right: 1em;
}