colorjs.io/assets/css/style.css

Color space agnostic color manipulation library

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100..900&display=swap');
@import url('prism.css');
@import url('../../notebook/color-notebook.css');

:root {
	--gray: 220 10%;

	--font-sans: Public Sans, Helvetica Neue, sans-serif;
	--font-serif: Playfair Display, serif;
	--font-monospace: Consolas, Monaco, monospace;
	--font-body: var(--font-sans);
	--font-headings: var(--font-serif);

	--color-red: hsl(0 80% 50%);
	--color-green: hsl(90 50% 45%);
	--color-blue: hsl(210 80% 55%);

	--color-accent1: var(--color-red);
	--color-accent2: var(--color-green);
	--color-accent3: var(--color-blue);

	--page-width: 60rem;
	--page-margin: calc((100vw - var(--page-width)) / 2);

	--rainbow-width: 150vw;
	--rainbow: linear-gradient(to right, var(--gradient-steps, var(--color-red), var(--color-green), var(--color-blue), var(--color-red)))
	           var(--rainbow-width) 0 / var(--rainbow-width) .3em fixed;
	--rainbow-scroll: rainbow-scroll 20s linear 2 both
}

@supports (width: max(1px, 1rem)) {

:root {
		--page-margin: max(1rem, (100vw - var(--page-width)) / 2);
		--rainbow-width: max(150vw, 900px)
}
	}

@supports (-moz-margin-start: 0) {

:root {
		/* Firefox does terribly with this effect */
		--rainbow-scroll: initial
}
	}

@keyframes rainbow-scroll {
	from {
		background-position-x: 0;
	}
}

@media (max-width: 20rem) {
	:root {
		--page-width: 98vw;
	}
}

body {
	display: flex;
	flex-flow: column;
	align-items: stretch;
	font: 300 120%/1.5 var(--font-body);
	margin: 0;
	min-height: 100vh
}

@media (max-width: 600px) {

body {
		font-size: 100%
}
	}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings);
	font-weight: 900;
	line-height: 1;
}

a {
	color: var(--color-blue);
	mix-blend-mode: multiply;
	font-weight: bolder
}

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

a:active {
		color: var(--color-red);
	}

fieldset {
	border: 1px solid hsl(var(--gray) 80%);
	border-radius: .2em
}

fieldset legend {
		font: 700 120%/1 var(--font-headings);
	}

table {
	width: 100%;
	border: 5px solid transparent;
	border-radius: .2em;
	border-spacing: 0;
	border-collapse: collapse;
	background: var(--rainbow);
	animation: var(--rainbow-scroll)
}

table th,
	table td {
		text-align: left;
		padding: .2em .4em;
	}

table thead th {
			color: white;
			font-size: 80%;
		}

table tbody th,
		table tbody td,
		table tfoot th,
		table tfoot td {
			background: hsla(0 0% 100% / .95);
			border: 1px solid transparent;
		}

table tbody tr:nth-of-type(even) td,
			table tbody tr:nth-of-type(even) th,
			table tfoot tr:nth-of-type(even) td,
			table tfoot tr:nth-of-type(even) th {
				background: hsla(0 0% 100% / .8);
			}

dl {
	display: grid;
	grid-gap: 0 .3em
}

dl dt {
		grid-column: 1;
		opacity: .75;
	}

dl dd {
		grid-column: 2;
		margin: 0;
	}

figure {
	width: fit-content
}

figure figcaption {
		margin-top: .5em;
		font-size: 70%;
		color: hsl(var(--gray) 35%);
		text-align: center;
	}

body > header,
body > footer {
	padding-left: var(--page-margin);
	padding-right: var(--page-margin);
	animation: var(--rainbow-scroll)
}

body > header nav a, body > footer nav a {
			text-align: center;
		}

body > header nav a:not(.logo), body > footer nav a:not(.logo) {
			flex: 1;
			padding: .6em;
			font-weight: 800;
			white-space: nowrap
		}

body > header nav a:not(.logo):hover, body > footer nav a:not(.logo):hover {
				background: var(--rainbow);
				-webkit-background-clip: initial;
				color: white;
				text-decoration: none;
			}

[mv-app="colorNotebook"] h1,
body > header > h1 {
	margin: 0;
	color: hsl(220, 10%, 48%);
	font: 600 300% var(--font-sans);
	letter-spacing: -.03em;
	margin: .5em 0;
}

body > header {
	display: flex;
	flex-flow: column;
	--bg: var(--gray) 96%;
	background: linear-gradient(hsl(var(--bg) / .85), hsl(var(--bg) / .8)) 0 .3em no-repeat fixed,
		var(--rainbow)
		hsl(var(--bg));
	background-size: 100% 2.3em, var(--rainbow-width) 2.6em;
	background-repeat: no-repeat, repeat-x
}

body > header nav {
		display: flex;
		justify-content: stretch;
		order: 0
	}

body > header nav .footer {
			display: none;
		}

@media (max-width: 800px) {
			body > header nav .wide {
				display: none;
			}
		}

body > header nav h1 {
			margin: 0
		}

body > header nav h1 img {
				height: 2.15em;
				margin-bottom: -1.5em;
				margin-left: -.3em;
			}

body > footer {
	padding-top: 1rem;
	background: var(--rainbow),
		hsl(var(--gray) 20%);
	animation: var(--rainbow-scroll);
	background-position-y: bottom;
	background-repeat: repeat-x;
	color: white
}

body > footer a {
		color: var(--color-blue-light);
		mix-blend-mode: initial;
	}

body > footer nav {
		display: flex;
		flex-wrap: wrap;
		margin-top: 1rem
	}

@media (max-width: 600px) {

body > footer nav {
			flex-flow: column
	}
		}

main {
	flex: 1;
	width: var(--page-width);
	max-width: calc(100vw - 2em);
	margin: auto;
	padding: 1em;
	padding-top: 0
}

main h2 {
		position: relative;
		font-size: 250%;
		line-height: 1.2;
		color: var(--color-red)
	}

main h2 > a {

			color: inherit
		}

main h2 > a[href^="#"]:hover {
					text-decoration: underline;
					text-decoration-color: var(--color-blue-light)
				}

main h2 > a[href^="#"]:hover::before {
						content: "#";
						position: absolute;
						top: 0;
						right: 100%;
						color: var(--color-blue-light);
						font-weight: 900;
					}

main > footer {
		margin-top: 2rem;
		display: flex
	}

main > footer .edit-page {
			margin-left: auto;
		}

.edit-page {
	font-weight: 700;
	color: hsl(var(--gray) 60%)
}

.edit-page::before {
		content: "✏️";
		display: inline-block;
		vertical-align: .4em;
		width: .8em;
		height: .8em;
		border: .1em solid;
		border-radius: .15em;
		margin-right: .5em;
		background: var(--color-blue-lighter);
		line-height: .2;
		text-indent: -.45em;
	}

.edit-page:not(:hover):not(:focus) {
		text-decoration: none
	}

.edit-page:not(:hover):not(:focus)::before {
			filter: grayscale();
			background: white;
		}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / .02) 0 50%) 0 0 / 1.5em 1.5em content-box border-box;
	background-color: hsl(var(--gray) 98%);
}

pre[class*="language-"] {
	flex: 1;
	max-width: calc(100vw - 2 * var(--page-margin, 1rem))
}

@media (max-width: 600px) {

pre[class*="language-"] {
		font-size: 80%
}
	}

@supports (-webkit-background-clip: text) and (not (-moz-margin-start: 0)) {
	body > header nav a,
	body > footer nav a,
	main h2 {
		background: var(--rainbow);
		animation: var(--rainbow-scroll);
		-webkit-background-clip: text;
		color: transparent;
	}
}

.read-more::before {
	content: "▸ ";
}

.warning,
.tip,
.note {
	position: relative;
	background: var(--color-light);
	padding: .8em 1em;
	border-left: .3em solid var(--color)
}

.warning::before, .tip::before, .note::before {
		content: var(--label) ": ";
		color: var(--color);
		text-transform: uppercase;
		font-size: 85%;
		font-weight: 700;
	}

.warning::after, .tip::after, .note::after {
		content: var(--emoji);
		position: absolute;
		top: -.7em;
		left: -.6em;
		font-size: 200%;
		text-shadow: .02em .05em .1em rgb(0 0 0 /.2);
	}

.warning code:not(.foo), .tip code:not(.foo), .note code:not(.foo) {
		background: hsl(0 0% 100% / .5);
	}

.warning {
	--color-light: var(--color-red-lighter);
	--color: var(--color-red);
	--label: "Warning";
	--emoji: "⚠️";
}

.tip {
	--color-light: var(--color-blue-lighter);
	--color: var(--color-blue);
	--label: "Tip";
	--emoji: "💡";
}

.note {
	--color-light: var(--color-green-lighter);
	--color: var(--color-green);
	--label: "Note";
	--emoji: "👉🏼";
}