.main-content
	.shelf__outer
		.shelf__box.shelf--medium
			.plant
			.cactus
				.cactus__plant
				.cactus__plant.cactus__plant--small
				.cactus__top
				.cactus__pot
			.succulent
				.succulent__leaf.succulent__leaf__left
				.succulent__leaf
				.succulent__pot
				
		.shelf__box
			.cat
				svg(width="100px" viewBox="0 0 15.59 15.59")
					path(d="M14.42,11.993c-0.104-1.334-0.709-2.336-1.57-3.153c-0.479-0.449-0.906-0.563-1.414-0.563c0,0-0.204,0.005-0.041,0.212  c0.215,0.271,1.791,2.328,1.768,4.011c-0.029,1.948-1.958,1.837-1.958,1.837c0.812-1.542,0.402-3.001,0.276-3.512  c-0.238-0.943-0.709-1.857-1.417-2.738C9.191,6.988,8.312,6.468,7.425,6.523c-0.379-0.654-0.716-1.18-1.011-1.61  C8.02,3.479,6.974,2.787,6.063,0c-0.211,0.591-0.38,1.028-0.507,1.31c-0.644-0.08-2.071-0.08-2.714,0  C2.716,1.028,2.547,0.591,2.336,0C1.423,2.794,0.374,3.467,1.999,4.909c0.173,3.278,0.849,4.149,1.942,5.732  c0.9,1.304,0.675,1.768,1.098,3.569c-3.197,2.014,2.223,1.241,3.063,1.2C10.266,15.305,14.777,16.6,14.42,11.993z")
					
		.shelf__box
			.speaker
				.speaker__circle
				.speaker__circle
			.radio
				.radio__circle
				.radio__circle--small +
				.radio__circle--small -
				.radio__switch
				.radio__antenna
				.radio__antenna.radio__antenna--right
		.shelf__box
			.photo-frame
				.photo-frame__photo 
					span 🐳
			.camera
				.camera__body
				.camera__lens
				.camera__switch
				.camera__shutter
		.shelf__box.shelf--medium
			.books
				.books__item.books__item--lined
				.books__item
				.books__item.books__item--lined
				.moleskine
					.moleskine__skin
				.books__item
				.books__item
				.books__item
				.books__item.books__item--lined
				.books__item.books__item--lined
				.books__item.books__item--lined
				.mario-box.mario-box--gold ?
				.mario-box.mario-box--brick
					.brick
					.brick
					.brick
					.brick
					.brick
					.brick
					.brick
					.brick
					.brick
					
					
		.shelf__box.storage-unit
			.storage-unit__item
				.storage-unit__handle
		.shelf__box.storage-unit
			.storage-unit__item.dark
				.storage-unit__handle
		.shelf__box.storage-unit
			.storage-unit__item
				.storage-unit__handle
		.shelf__box.shelf--tall
			.lava-lamp
				.lava-lamp__body
					.lava-lamp__bubbles
					.lava-lamp__bubbles-1
					.lava-lamp__bubbles.lava-lamp__bubbles-2
					.lava-lamp__bubbles.lava-lamp__bubbles-3
					.lava-lamp__bubbles.lava-lamp__bubbles-4
					.lava-lamp__cap
					.lava-lamp__stand--top
					.lava-lamp__stand--bottom

aside.context
	.explanation
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS 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
$orange: #66a1ee;
$orange-shade: #3080e8;
$brown: #104891;
$brown-shade: #3080e8;
$brown-shade-2: #104891;
$darkgray: rgb(62, 56, 69);
$pink: #1663c7;
$coral: #a39cf4;
$lightpurple: #8f94fb;
$purple: #104891;
$purple-shade: #4e54c8;
$lightgray: #999;
$gray: #777;
$turquoise: #1663c7;
$turqouise-shade: #1b1091;
$green: #16a9c7;
$green-shade: #107c91;
$olive: #107c91;
$darkgreen: #107c91;
$darkgreen-shade: #16a9c7;
$red: #3080e8;
$yellow: #3080e8;
$blue: #66a1ee;

$border: 3px solid #104891;
$border-width: 3px;
$border-color: #104891;

@mixin absolute-center() {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

body {
	background: #0a2e5c;
	font-family: "Comfortaa", sans-serif;
}

aside.context {
	text-align: center;
	color: #fff;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.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 #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}
.main-content {
	margin: 6em auto 2em;
	width: 100%;
	max-width: 590px;
}

.shelf__outer {
	display: grid;
	grid-gap: 15px;
	padding: 15px;
	background: #d1e3fa;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 140px);
	border: 3px solid #104891;
}

.shelf {
	&__box {
		background: #9cc2f4;
		position: relative;
		overflow: hidden;
		border: 3px solid #104891;
	}
	&--medium {
		grid-column: span 2;
	}
	&--tall {
		grid-row: 2 / span 2;
		grid-column: 4 / span 1;
		text-align: center;
	}
}

.storage-unit {
	padding: 4px;
	position: relative;
	&__item {
		background: $orange;
		height: calc(100% - 6px);
		border-radius: 3px;
		border-bottom: 0;
		border: $border;
		&.dark {
			background: $orange-shade;
		}
	}
	&__handle {
		background: $border-color;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 10px;
		width: 50px;
		height: 12px;
		border-radius: 6px 6px 20px 20px;
		border: $border;
	}
}

.lava-lamp {
	display: inline-block;
	@include absolute-center;
	bottom: -38px;
	&__body {
		height: 140px;
		width: 60px;
		background: linear-gradient(to bottom, $pink, $coral);
		border-radius: 300% 300% 280% 280%;
		@include absolute-center;
		border: $border;
	}
	&__cap {
		display: inline-block;
		border-bottom: 60px solid $border-color;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-radius: 100% 100% 8px 8px;
		width: 10px;
		height: 0;
		position: absolute;
		left: 5px;
		top: -38px;
	}
	&__stand--top {
		display: inline-block;
		border-top: 40px solid $border-color;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-radius: 3px;
		width: 24px;
		height: 26px;
		position: absolute;
		left: 3px;
		bottom: -40px;
	}
	&__stand--bottom {
		display: inline-block;
		border-bottom: 40px solid $border-color;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-radius: 20px 20px 4px 4px;
		width: 24px;
		height: 15px;
		position: absolute;
		left: -2px;
		bottom: -56px;
	}
	&__bubbles {
		width: 82%;
		height: 30px;
		bottom: 12px;
		left: 5px;
		border-radius: 100% 200% 50px 80px;
		position: absolute;
		background: linear-gradient(to bottom, transparent, $lightpurple, $purple-shade);
	}
	&__bubbles-1 {
		position: absolute;
		border-radius: 240% 150% 160% 120%;
		width: 20px;
		height: 30px;
		bottom: 30px;
		left: 20px;
		transform: rotate(-45deg);
		background: linear-gradient(to top right, transparent, $lightpurple, $purple-shade);
	}
	&__bubbles-2 {
		top: 14px;
		left: 40%;
		width: 20px;
		bottom: auto;
		height: 20px;
	}
	&__bubbles-3 {
		bottom: 50px;
		height: 30px;
		width: 20px;
		border-radius: 40% 120%;
		background: linear-gradient(to top left, transparent, $lightpurple, $purple-shade);
	}
	&__bubbles-4 {
		bottom: 70px;
		height: 25px;
		width: 22px;
		left: 30px;		
		border-radius: 100%;
		background: linear-gradient(to bottom right, transparent, $lightpurple, $purple-shade);
	}
}

.radio {
	width: 70px;
	height: 45px;
	background: $turquoise;
	bottom: -3px;
	left: 10px;
	border: $border;
	border-radius: 10px;
	position: absolute;
	&__circle {
		border-radius: 50%;
		height: 25px;
		width: 25px;
		border: 3px solid #f1f6f8;
		background: #3080e8;
		left: 10px;
		top: 7px;
		position: absolute;
	}
	&__circle--small {
		border-radius: 50%;
		height: 8px;
		width: 8px;
		background: #f1f6f8;
		padding: 2px;
		line-height: 0.5;
		text-align: center;
		position: absolute;
		right: 9px;
		color: #555;
		&:nth-child(2) {
			top: 9px;
			font-size: 12px;
			line-height: 0.8;
		}
		&:nth-child(3) {
			bottom: 9px;
			line-height: 0.4;
		}
	}
	&__antenna {
		background: $border-color;
		width: 25px;
		height: 3px;
		border-radius: 10px;
		position: absolute;
		top: -13px;
		left: 0;
		transform: rotate(55deg);
		&--right {
			width: 19px;
			top: -10px;
			left: 14px;
			transform: rotate(-45deg);
		}
	}
	&__switch {
		background: $turqouise-shade;
		border: $border;
		border-bottom: 0;
		border-radius: 5px 5px 0 0;
		width: 15px;
		height: 4px;
		position: absolute;
		top: -10px;
		right: 10px;
		z-index: 4;
	}
}

.speaker {
	width: 55px;
	height: 90px;
	background: $orange;
	border: $border;
	border-radius: 8px;
	position: absolute;
	bottom: -3px;
	right: 10px;
	&__circle {
		position: absolute;
		border-radius: 50%;
		background: #1663c7;
		border: $border;
		&:nth-child(1) {
			top: 8px;
			width: 20px;
			height: 20px;
			right: 7px;
		}
		&:nth-child(2) {
			background: #104891;
			bottom: 10px;
			width: 34px;
			height: 34px;
			left: 27px;
			margin-left: -20px;
		}
	}
}

.cactus {
	position: absolute;
	left: 65%;
	bottom: -3px;
	&__pot {
		height: 30px;
		width: 50px;
		border: $border;
		border-radius: 0 0 20px 20px;
		background: $orange;
	}
	&__top {
			position: absolute;
			width: 54px;
			height: 10px;
			background: $orange-shade;
			border-radius: 5px;
			border: $border;
			top: -12px;
			left: -2px;
			z-index: 5;
		}
	&__plant {
		position: absolute;
		border-radius: 30px 30px 0 0;
		height: 70px;
		width: 25px;
		background: $darkgreen;
		right: 5px;
		top: -80px;
		border: $border;
		border-bottom: 0;
		z-index: 2;
		&--small {
			border-radius: 60px 60px 0 0;
			top: -62px;
			width: 20px;
			height: 50px;
			right: 25px;
			background: $darkgreen-shade;
			z-index: 1;
		}
	}
}

.succulent {
	position: absolute;
	left: 40px;
	bottom: -3px;
	&__pot {
		border: $border;
		border-radius: 40px;
		background: #fff;
		width: 120px;
		height: 25px;
		z-index: 10;
		position: relative;
	}
	&__leaf {
		border-radius: 60% 60% 60% 60% / 90% 90% 30% 30%;
    background: $green;
    width: 22px;
    height: 55px;
    position: absolute;
    bottom: 10px;
    left: 50%;
		margin-left: -15px;
		z-index: 8;
		border: $border;
		&:before, &:after {
			content: '';
			position: absolute;
			background: inherit;
			height: inherit;
			width: inherit;
			border-radius: inherit;
			transform-origin: bottom center;
			bottom: 4px;
			border: $border;
		}
		&:before {
			transform: rotate(65deg);
    	right: -2px;
			background: $green-shade;
		}
		&:after {
			transform: rotate(-65deg);
    	left: -2px;
		}
		&__left {
			background: $green-shade;
			bottom: 20px;
			transform-origin: bottom center;
    	transform: rotate(-36deg);
			&:before {
				transform: rotate(65deg);
				background: $olive;
				bottom: -10px;
				left: 3px;
			}
			&:after {
				content: none;
			}
		}
	}
}

.camera {
	position: absolute;
	top: auto;
	bottom: -6px;
	left: 10px;
	text-align: center;
	&__body {
		width: 85px;
		height: 45px;
		background: linear-gradient(to bottom,
			#fff 25%, #fff 25%, $brown 25%, $brown 75%, #fff 75%);
		border-radius: 10px;
		display: inline-block;
		border: $border;
	}
	&__lens {
		@include absolute-center;
		width: 25px;
		height: 25px;
		background: #1663c7;
		border: 3px solid #111;
		box-shadow: 0 0 0 3px #f6f8f9;
		border-radius: 50%;
		&:before, &:after {
			content: '';
			position: absolute;
			width: 6px;
			height: 6px;
			border-radius: 50%;
		}
		&:before {
			left: 50%;
			top: 5px;
			background: #fff;
		}
		&:after {
			background: $red;
			left: -20px;
			top: -5px;
			border: 2px solid #fff;
		}
	}
	&__switch {
		@include absolute-center;
		width: 30px;
		height: 6px;
		background: $border-color;
		top: -9px;
		bottom: auto;
		border-radius: 6px 6px 0 0;
		z-index: 2;
		padding: 3px 3px 0;
		&:before {
			content: '';
			position: absolute;
			border-radius: 4px 4px 0 0;
			width: calc(100% - 6px);
			height: 10px;
			left: 3px;
			top: 3px;
			z-index: -1;
			background: #fff;
		}
		&:after {
			content: '';
			position: absolute;
			border-radius: 4px 4px;
			width: calc(100% - 12px);
			height: 8px;
			left: 6px;
			bottom: auto;
			top: 6px;
			z-index: -1;
			background: #555;
		}
	}
	&__shutter {
		position: absolute;
		background: $border-color;
		width: 14px;
		height: 4px;
		border-radius: 5px 5px 0 0;
		right: 50%;
		margin-right: -35px;
		top: -4px;
	}
}

.books {
	position: relative;
	width: 100%;
	height: 100%;
	&__item {
		border: $border;
		border-radius: 2px;
		width: 23px;
		height: 95px;
		background: $coral;
		position: absolute;
		bottom: -3px;
		&:nth-child(1) {
			left: -3px;
		}
		&:nth-child(2) {
			left: 23px;
			background: $turquoise;
			width: 15px;
			height: 85px;
		}
		&:nth-child(3) {
			left: 41px;
			background: $yellow;
			width: 30px;
			height: 115px;
			&:before {
				top: 75%;
			}
			&:after {
				border: 0;
				border-radius: 50%;
				background: $orange;
				width: 20px;
				height: 20px;
				top: 10px;
				left: 5px;
			}
		}
		&:nth-child(5) {
			left: 85px;
			height: 80px;
			background: $purple;
			width: 15px;
			bottom: -1px;
			transform: rotate(-15deg);
		}
		&:nth-child(6) {
			right: -3px;
			left: auto;
			width: 15px;
			height: 110px;
			background: $darkgreen;
		}
		&:nth-child(7) {
			right: 15px;
			left: auto;
			width: 20px;
			height: 95px;
			border-width: 2px 3px;
			background: linear-gradient(to right, $blue 20%, $blue 20%, #fff 15%, #fff 80%, $blue 80%);
		}
		&:nth-child(8) {
			right: 45px;
			left: auto;
			width: 15px;
			height: 80px;
			background: $pink;
			transform: rotate(9deg);
			bottom: 1px;
			&:before {
				content: none;
			}
		}
		&:nth-child(9) {
			right: 78px;
			height: 10px;
			width: 70px;
			&:before {
				top: -3px;
				width: 5px;
				left: 10px;
				height: 100%;
			}
		}
		&:nth-child(10) {
			right: 82px;
			bottom: 13px;
			height: 20px;
			width: 65px;
			border-width: 3px 3px 3px 0;
			background: linear-gradient(to bottom, $lightpurple 20%, $lightpurple 20%, #fff 15%, #fff 80%, $lightpurple 80%);
			border-radius: 2px 30px 30px 2px;
			overflow: hidden;
			&:before {
				width: 7px;
				border: 0;
				border-radius: 2px 100% 100% 2px;
				background: $lightpurple;
				height: 16px;
				top: 1px;
				right: -3px;
				left: auto;
			}
		}
	}
	&__item--lined {
		&:before, &:after {
			content: '';
			height: 8px;
			left: -3px;
			position: absolute;
			border: $border;
			width: 100%;
			top: 10px;
		}
		&:after {
			top: 70px;
		}
	}
}

.moleskine {
  height: 95px;
  width: 70px;
	left: 80px;
	bottom: -3px;
  position: absolute;
	border: $border;
  border-radius: 5px 12px 12px 5px;
  display: inline-block;
	background: $green;
	&:before {
		content: "";
    position: absolute;
    width: 8px;
    height: 100%;
    top: 0px;
    right: 8px;
    background: $border-color;
	}
	&__skin {
		height: 100%;
		width: 20px;
  background: $olive;
	}
}

.mario-box {
	width: 24px;
	height: 24px;
	border: $border;
	border-width: 2px;
	border-radius: 3px;
	position: absolute;
	right: 85px;
	bottom: 37px;
	&--gold {
		background: #9cc2f4;
		font: 700 15px/1.8 'Bevan';
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,0.4);
	}
	&--brick {
		bottom: 63px;
		margin-right: -8px;
		background: black;
		display: grid;
		grid-template-columns: 6px 8px 9px;
		grid-template-rows: repeat(3, auto);
		grid-gap: 2px;
		overflow: hidden;
	}
	.brick {
		background: #3080e8;
		&:nth-child(5),&:nth-child(6){
			margin-left: -7px;
			border: 2px solid #333;
			border-width: 0 2px;
		}
		&:nth-child(5) {
			border-left: 0;
		}
	}
}

.photo-frame {
	position: absolute;
	width: 65px;
	height: 90px;
	background: $olive;
	border: $border;
	bottom: -3px;
	right: 10px;
	padding: 9px;
	&__photo {
		width: 100%;
		height: 100%;
		margin: -2px;
		background: #d1e3fa;
		font-size: 3em;
		overflow: hidden;
		text-align: center;
		padding: 0;
		border: 2px solid $border-color;
		span {
			margin: 15px auto 0;
			display: inline-block;
			transform: rotate(90deg);
		}
	}
}

.cat {
	position: absolute;
	bottom: -5px;
	left: 18px;
	svg {
		fill: $purple;
		stroke-width: .5px;
		stroke: $border-color;
		stroke-location: outside;
	}
}


@media screen and (max-width: 768px) {
	.shelf__outer {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, 140px);
		margin: 20px;
	}
	.shelf__box {
		&:nth-child(3) {
			grid-row: 2 / span 1;
			grid-column: 1 / span 1;
		}
		&:nth-child(4) {
			grid-row: 2 / span 1;
			grid-column: 2 / span 1;
		}
		&:nth-child(6) {
			grid-row: 2 / span 1;
			grid-column: 3 / span 1;
		}
		&:nth-child(9) {
			grid-row: 3 / span 2;
			grid-column: 3 / span 1;
		}
	}
}
View Compiled
//pay no attention to the color variables, this pen started out very differently and evolved 

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.