colorjs.io/assets/css/style.src.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)) {
		--page-margin: max(1rem, (100vw - var(--page-width)) / 2);
		--rainbow-width: max(150vw, 900px)
	}

	@supports (-moz-margin-start: 0) {
		/* 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) {
		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;

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

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

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

	& 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);

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

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

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

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

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

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

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

figure {
	width: fit-content;

	& 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);

	& nav {
		& a {
			text-align: center;
		}

		& a:not(.logo) {
			flex: 1;
			padding: .6em;
			font-weight: 800;
			white-space: nowrap;

			&: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;

	& nav {
		display: flex;
		justify-content: stretch;
		order: 0;

		& .footer {
			display: none;
		}

		@media (max-width: 800px) {
			& .wide {
				display: none;
			}
		}

		& h1 {
			margin: 0;

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

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

	& nav {
		display: flex;
		flex-wrap: wrap;
		margin-top: 1rem;

		@media (max-width: 600px) {
			flex-flow: column;
		}
	}
}

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

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

		& > a {

			color: inherit;

			&[href^="#"] {
				&:hover {
					text-decoration: underline;
					text-decoration-color: var(--color-blue-light);

					&::before {
						content: "#";
						position: absolute;
						top: 0;
						right: 100%;
						color: var(--color-blue-light);
						font-weight: 900;
					}
				}
			}
		}
	}

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

		& .edit-page {
			margin-left: auto;
		}
	}
}

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

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

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

		&::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) {
		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);

	&::before {
		content: var(--label) ": ";
		color: var(--color);
		text-transform: uppercase;
		font-size: 85%;
		font-weight: 700;
	}

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

	& 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: "👉🏼";
}