.main-content
	.palette-grid
		
		.palette-headers
			h1 Primary Colors
			h2 Main colors of the site. We're making it shine ☀️
		
		.palette.palette--main-color
			.palette__colors
				.palette__color(style="--bg-color: #FFD151;")
				.palette__shades
					.palette__shades__item(style="--bg-color:#FFEAAF") #FFEAAF
					.palette__shades__item(style="--bg-color:#FFE190") #FFE190
					.palette__shades__item(style="--bg-color:#FFD970") #FFD970
			.palette__info
				.palette__info__name Mustard
				.palette__info__hexcode #FFD151
		
		.palette.palette--main-color
			.palette__colors
				.palette__color(style="--bg-color: #FFAE03;")
				.palette__shades
					.palette__shades__item(style="--bg-color:#FFD275") #FFD275
					.palette__shades__item(style="--bg-color:#FFC447") #FFC447
					.palette__shades__item(style="--bg-color:#FFB519") #FFB519
			.palette__info
				.palette__info__name UCLA Gold
				.palette__info__hexcode #FFAE03
		
		.palette-headers
			h1 Secondary Colors
			h2 Remaining colors that make up the palette. Also useful for status/info alerts.
		
		.palette.palette--secondary-color
			.palette__colors
				.palette__color(style="--bg-color: #20A39E;")
				.palette__shades
					.palette__shades__item(style="--bg-color:#71C4C1") #71C4C1
					.palette__shades__item(style="--bg-color:#48B3AF") #48B3AF
			.palette__info
				.palette__info__name Light Sea Green
				.palette__info__hexcode #20A39E
		
		.palette.palette--secondary-color
			.palette__colors
				.palette__color(style="--bg-color: #EF5B5B;")
				.palette__shades
					.palette__shades__item(style="--bg-color:#F49696") #F49696
					.palette__shades__item(style="--bg-color:#F17878") #F17878
			.palette__info
				.palette__info__name Sunset Orange
				.palette__info__hexcode #EF5B5B
		
		.palette.palette--secondary-color
			.palette__colors
				.palette__color(style="--bg-color: #083D77;")
				.palette__shades
					.palette__shades__item.font-white(style="--bg-color:#6183A8") #6183A8
					.palette__shades__item.font-white(style="--bg-color:#34608F") #34608F
			.palette__info
				.palette__info__name Dark Cerulean
				.palette__info__hexcode #083D77
		
		.palette-headers
			h1 Many Shades of Gray
			h2 Let's try to keep the number of grays below 50.
	
		.palette.palette--grays
			.palette__color(style="--bg-color: #E8E9E9;")
			.palette__info
				.palette__info__name Platinum
				.palette__info__hexcode #E8E9E9
		.palette.palette--grays
			.palette__color(style="--bg-color: #D1D3D4;")
			.palette__info
				.palette__info__name Light Gray
				.palette__info__hexcode #D1D3D4
		.palette.palette--grays
			.palette__color(style="--bg-color: #BABDBF;")
			.palette__info
				.palette__info__name Gray
				.palette__info__hexcode #BABDBF
		.palette.palette--grays
			.palette__color(style="--bg-color: #808488;")
			.palette__info
				.palette__info__name Old Silver
				.palette__info__hexcode #808488
		.palette.palette--grays
			.palette__color(style="--bg-color: #666A6D;")
			.palette__info
				.palette__info__name Dim Gray
				.palette__info__hexcode #666A6D
		.palette.palette--grays
			.palette__color(style="--bg-color: #4D5052;")
			.palette__info
				.palette__info__name Feldgrau
				.palette__info__hexcode #4D5052
		.palette.palette--grays
			.palette__color(style="--bg-color: #333537;")
			.palette__info
				.palette__info__name Jet
				.palette__info__hexcode #333537
		.palette.palette--grays
			.palette__color(style="--bg-color: #1C1D1E;")
			.palette__info
				.palette__info__name Eerie Black
				.palette__info__hexcode #1C1D1E

aside.context
	.explanation
		| Hover over primary & secondary colors for additional shades. 
		br
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") Grid Experiment here
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled
body {
	background: #f9f9f9;
	font-family: "Comfortaa", sans-serif;
}

aside.context {
	text-align: center;
	color: #333;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #333;
		padding: 3px 0;
		border-bottom: 1px dashed;
	}
	.explanation {
		max-width: 700px;
		margin: 6em auto 0;
	}
}

footer {
	text-align: center;
	margin: 4em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #333;
		color: #333;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

.main-content {
	margin: 4em auto 0;
	max-width: 800px;
}

.palette-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto 300px auto 240px auto repeat(2, 200px);
	grid-gap: 20px;
	justify-content: center;
	padding: 20px;
}

.palette {
	background: #fff;
	overflow: hidden;
	position: relative;
	top: 0;
	padding: 0;
	box-shadow: 0px 5px 20px rgba(gray, 0.1);
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	flex-flow: column;
	transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	&:hover {
		top: -5px;
		box-shadow: 0 8px 20px rgba(gray, 0.12);
	}
	&--main-color {
		grid-column: span 6;
	}
	&--secondary-color {
		grid-column: span 4;
	}
	&--grays {
		grid-column: span 3;
	}
	&-headers {
		grid-column: span 12;
	}
}

.palette {
	&__info {
		color: #333;
		position: relative;
		flex: 0 0 auto;
		font-size: 14px;
		padding: 12px;
		&__name {
		}
		&__hexcode {
			margin-top: 3px;
			font-size: 12px;
			color: gray;
		}
	}
	&__colors {
		flex: 1;
		width: 100%;
		position: relative;
		display: flex;
		align-items: stretch;
	}
	&__color {
		background: var(--bg-color);
		height: 100%;
		flex: 1;
	}
	&__shades {
		flex: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		&__item {
			flex: 1 1 auto;
			background: var(--bg-color);
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			position: relative;
			left: 10px;
			font-size: 80%;
		}
	}
	&:hover .palette__shades {
		flex: 0 0 33%;
		transition: 0.2s ease;
		&__item {
			opacity: 1;
			left: 0;
			
			&:nth-child(1) {
				transition: .2s ease .2s;
			}
			&:nth-child(2) {
				transition: .2s ease .4s;
			}
			&:nth-child(3) {
				transition: .2s ease .6s;
			}
		}
	}
}

.font-white {
	color: #fff;
}

@media screen and (max-width: 768px) {
	.palette-grid {
		grid-template-rows: auto 300px auto repeat(2, 240px) auto repeat(4, 200px);
	}
	.palette--secondary-color, .palette--grays {
		grid-column: span 6;
	}
}

.palette-headers {
	margin: 60px 0 20px;
	h1 {
		margin: 10px 0;
		text-transform: uppercase;
		font: 700 32px 'Comfortaa', sans-serif;
		letter-spacing: 4px;
	}
	h2 {
		color: #999;
		line-height: 1.5;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.