colorjs.io/assets/css/home.src.css

Color space agnostic color manipulation library

body > header {
	padding-bottom: 1rem;
}

.logo {
	margin: 1em auto;
	width: fit-content;
	display: grid;
	grid-gap: .3em 0;
	grid-template-columns: minmax(1em, auto) 1fr;
	font-size: 200%;

	& h1 {
		margin: 0;
		color: hsl(var(--gray) 48%);
		font-family: var(--font-sans);
		font-weight: 700;
		letter-spacing: -.03em;
	}

	& h2 {
		grid-row: 2;
		margin: 0;
		font-style: italic;
		font-size: 52%;
		font-weight: 800;
		color: hsl(220, 10%, 30%);
	}

	& img {
		grid-row: 1 / span 2;
		height: 3em;
	}
}

#features {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1.5rem 0;
	align-items: start;
}

@media (min-width: 800px) {
	#features {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 800px) {
	#features {
		padding: 1rem;
	}
}

	#features article {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: .1em .5em;
	}

	#features article::before {
		content: "✓";
		color: var(--color-green);
		font-size: 300%;
		line-height: .8;
		grid-row: 1 / span 2;
	}

	#features h4 {
		margin: 0;
	}

	#features p {
		margin: 0;
		font-size: 75%;
	}