.main-content
	.notebook
		.notebook__inner
			.title 
				h1 Week 18
				h3 April 29 - May 6
			.days
				.days__item
					.days__day Monday
					.days__list
						p Prepare gift
						p Travel Day!
						p Check ads
						p Ad copy change
				.days__item
					.days__day Tuesday
					.days__list
						p SEO LP
						p New ad creatives
						.highlighted 
							.text 
								span 7pm: Waitress
				.days__item
					.days__day Wednesday
					.days__list
						p SEO LP
						p Weekly Meet
						.highlighted 
							.text 
								span 2pm: Anastasia
				.days__item
					.days__day Thursday
					.days__list
						p SEO LP
						.highlighted 
							.text 
								span 2pm: Come From Away
							.text 
								span 7pm: The Band's Visit
						
				.days__item
					.days__day Friday
					.days__list
						p Notion docs
						p Ad report
						.highlighted 
							.text 
								span 2pm: Dear Evan Hansen
							.text 
								span 7pm: Frozen
				.days__item
					.days__day Weekend
					.days__list
						p Meet w/ Rina
						.highlighted 
							.text 
								span 2pm: Chicago
							.text 
								span 7pm: Mean Girls
			.notes
				span notes
				.notes__list 
					| - Follow-up customer meet email
					br
					| - Flight BOS-JFK: 2pm on 29 Apr
				
			.expenses
				h4 Weekly Expenses
				.expenses__box
					span.expenses__title 🏠
					span.expenses__amount $ 400
				.expenses__box
					span.expenses__title 📝
					span.expenses__amount $ 120
				.expenses__box
					span.expenses__title 🍟
					span.expenses__amount $ 175
				.expenses__box
					span.expenses__title 🚆
					span.expenses__amount $ 42
				.expenses__box
					span.expenses__title 📽️
					span.expenses__amount $ 520
				.expenses__box
					span.expenses__title 💸
					span.expenses__amount $ 200
				.savings
					span.expenses__title Savings:
					span.expenses__amount $ 145
				
			.picture
				.picture__border
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/TSNY.jpg")
					figcaption 
						| Times Square,
						br
						| NYC ♥ 
			.goals
				span weekly
				span goals
				.goals__inner
					.goals__list 
						.goals__item
							.goals__item__checkbox 
								span ✔
							.goals__item__desc One Codepen	
						.goals__item
							.goals__item__checkbox
							.goals__item__desc One Blog Post
						.goals__item
							.goals__item__checkbox
							.goals__item__desc One Illustration
						
			.music
				.music__title Artist of the Week
				.music__artist George Ezra
				svg(viewBox="0 0 444.18 444.18")
					path(d="M400.348,294.485c-8.014-20.093-24.798-33.091-46.049-35.662c-34.474-4.172-72.55,19.051-104.452,63.713   C178.301,422.701,110.164,429.493,90.976,429.168c-16.64-0.268-27.452-5.433-30.785-10.433   c-8.769-13.154,9.513-36.94,20.978-48.972c8.255,6.058,18.181,9.334,28.613,9.334c12.955,0,25.134-5.045,34.294-14.206   l106.461-106.46c2.786,0.3,5.602,0.467,8.444,0.467c20.7,0,40.162-8.062,54.801-22.7c14.638-14.638,22.699-34.1,22.699-54.801   c0-20.701-8.062-40.163-22.699-54.801c-30.219-30.217-79.385-30.215-109.602,0c-14.638,14.638-22.699,34.1-22.699,54.801   c0,2.842,0.167,5.658,0.467,8.444L75.488,296.304c-9.161,9.16-14.206,21.339-14.206,34.294c0,10.412,3.265,20.319,9.3,28.564   c-4.132,4.317-10.097,11.035-15.416,18.867c-16.741,24.653-13.295,40.269-7.456,49.027c6.927,10.392,23.011,16.788,43.023,17.11   c0.541,0.009,1.089,0.013,1.651,0.013c17.095,0,43.821-4.224,76.704-23.5c33.207-19.465,64.485-49.552,92.964-89.424   c28.193-39.471,62.012-60.985,90.444-57.541c15.637,1.891,27.999,11.487,33.918,26.327c10.44,26.179-0.117,62.094-28.242,96.072   c-8.815,10.649-16.981,21.185-24.273,31.314c-2.42,3.362-1.656,8.049,1.705,10.469s8.049,1.657,10.469-1.705   c7.096-9.856,15.054-20.123,23.654-30.513C401.406,367.408,412.853,325.841,400.348,294.485z M86.095,354.286   c-6.327-6.327-9.812-14.74-9.812-23.688c0-6.392,1.787-12.505,5.108-17.785l46.177,46.177c-5.28,3.322-11.394,5.108-17.785,5.108   C100.835,364.098,92.422,360.613,86.095,354.286z M214.788,225.593c-11.805-11.805-18.306-27.5-18.306-44.194   c0-3.396,0.283-6.747,0.811-10.036l71.725,71.725c-3.289,0.528-6.64,0.811-10.036,0.811   C242.288,243.899,226.593,237.397,214.788,225.593z M214.788,137.204c12.185-12.184,28.189-18.276,44.194-18.276   s32.01,6.092,44.193,18.276c11.806,11.805,18.307,27.5,18.307,44.194s-6.501,32.39-18.307,44.194   c-5.276,5.276-11.333,9.484-17.905,12.534l-83.017-83.017C205.304,148.537,209.512,142.48,214.788,137.204z M204.182,236.199   c8.337,8.337,18.243,14.533,29.047,18.329l-94.455,94.455l-47.376-47.376l94.455-94.456   C189.649,217.956,195.844,227.862,204.182,236.199z")
					path(d="M71.404,156.771c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065s3.815-16.75,0.729-24.864   L74.201,40.279l60.756-23.103l17.82,46.862c-5.879-1.236-12.163-0.87-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93   c4.929,12.961,17.306,20.95,30.414,20.95c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065   s3.815-16.75,0.729-24.864l-30.211-79.45c-0.707-1.859-2.124-3.362-3.938-4.176s-3.879-0.875-5.738-0.168L61.859,28.924   c-3.872,1.472-5.817,5.804-4.345,9.676L78,92.472c-5.879-1.236-12.163-0.869-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93   C45.919,148.782,58.296,156.771,71.404,156.771z M162.109,103.004c-1.915,4.264-5.375,7.528-9.745,9.189   c-9.021,3.428-19.147-1.118-22.578-10.137c-3.429-9.02,1.118-19.148,10.137-22.578c2.041-0.776,4.137-1.144,6.201-1.144   c7.058,0,13.723,4.302,16.377,11.281C164.163,93.985,164.024,98.739,162.109,103.004z M65.148,107.912   c2.041-0.776,4.137-1.144,6.201-1.144c7.058,0,13.723,4.302,16.377,11.281c1.661,4.37,1.522,9.124-0.393,13.389   c-1.915,4.264-5.375,7.528-9.745,9.189c-9.021,3.429-19.147-1.118-22.578-10.137C51.582,121.47,56.129,111.342,65.148,107.912z")
			.tracker
				each val in ['M','T','W','T','F','S','S']
					.tracker__day= val
				.tracker__title 🏃‍♀️ Gym
				- for (var i=0; i<7; i++)
					.tracker__bubble
				.tracker__title 📖 Read
				- for (var i=0; i<7; i++)
					.tracker__bubble
				.tracker__title 🍺 No Alcohol
				- for (var i=0; i<7; i++)
					.tracker__bubble
				
			

aside.context
	.explanation
		| Continuation of this 
		a(href="https://codepen.io/oliviale/full/bLYQQE" target="_blank") Moleskine pen
		| .
		br
		| Part of the  
		a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection 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

$color-black: #111;
$color-red: #cc4b48;
$color-red2: #e4572e;
$color-vermilion: #f4442e;
$color-vermilion2: #d05b58;
$color-pink: #efb8ba;
$color-pink2: #e79598;
$color-pink3: #db6165;

@mixin text-shadow() {
	text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 coral;
}

* {
	box-sizing: border-box;
}

body {
	background: #222;
	font-family: "Gochi Hand", sans-serif;
	color: #333;
}

aside.context {
	text-align: center;
	color: #fff;
	line-height: 1.7;
	font-size: 20px;
	letter-spacing: .5px;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.explanation {
		max-width: 700px;
		margin: 4em 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: 5em auto;
}

.notebook {
	max-width: 800px;
	min-width: 550px;
	min-height: 570px;
	margin: auto;
	border-radius: 16px;
	background: $color-red;
	padding: 2px 4px 2.5px;
	&__inner {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 16px;
		background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center,
			linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
		background-size: 16px 16px;
		display: grid;
		padding: 30px 20px 25px;
		grid-template-areas:
			"title expenses picture"
			"days expenses picture"
			"days expenses picture"
			"days goals quote"
			"notes tracker tracker";
		grid-template-columns: 50% 30% 20%;
		grid-template-rows: 18% auto auto 30% 25%;
		&:after {
			content: "";
			width: 100px;
			height: 100%;
			top: 0;
			margin: auto;
			left: 0;
			right: 0;
			position: absolute;
			background: linear-gradient(
				to right,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}

.title {
	grid-area: title;
	text-align: center;
	h1 {
		font: 50px/1 "Lobster", cursive;
		@include text-shadow();
		margin: 0;
	}
	h3 {
		font: 13px/1.2 "Rock Salt", cursive;
		margin: 8px;
	}
}

.days {
	grid-area: days;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 15px;
	margin-right: 22px;
	&__item {
		border: 2px solid $color-black;
		position: relative;
		&:nth-child(1) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion2,0.4);
		}
		&:nth-child(2) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion,0.5);
		}
		&:nth-child(3) {
			box-shadow: 3px 3px 0 0 rgba($color-pink,0.6);
		}
		&:nth-child(4) {
			box-shadow: 3px 3px 0 0 rgba($color-red,0.7);
		}
		&:nth-child(5) {
			box-shadow: 3px 3px 0 0 rgba($color-pink2,0.7);
		}
		&:nth-child(6) {
			box-shadow: 3px 3px 0 0 rgba($color-red2,0.5);
		}
	}
	&__day {
		padding: 5px 5px 2px;
		font: 14px/1.5 "Special Elite", cursive;
		border-bottom: 2px solid $color-black;
	}
	&__list {
		padding: 8px;
		font-size: 14px;
		line-height: .9;
	}
	p {
		padding-left: 8px;
		position: relative;
		margin: 5px 0;
		&:after {
			content: '-';
			top: 0;
			position: absolute;
			left: 0;
		}
	}
	.highlighted {
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 8px;
		left: 0;
		text-align: center;
		.text {
			margin-top: 5px;
			position: relative;
			span {
				position: relative;
				z-index: 2;
			}
			&:after {
				content: '';
				background: rgba($color-pink,0.3);
				width: 95%;
				height: 100%;
				position: absolute;
				left: 2px;
				top: 0;
				z-index: 1;
				transform: rotate(-3deg);
			}
		}
	}
}

.notes {
	grid-area: notes;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	margin: 35px 20px 0 0;
	position: relative;
	span {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__list {
		margin-top: 24px;
		padding: 10px;
		line-height: 1.2;
	}
}

.expenses {
	grid-area: expenses;
	margin: 0 0 20px 20px;
	display: grid;
	grid-gap: 6px 10px;
	align-items: center;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	h4 {
		text-align: center;
		margin: 0 0 10px;
		font: 16px/1 "Rock Salt", cursive;
		&:first-of-type {
			grid-column: 1 / span 4;
		}
	}
	&__box {
		border: 2px solid $color-black;
		grid-column: span 2;
		padding: 7px 7px 5px;
	}
	&__title {
		font: 4px;
	}
	&__amount {
		font: 19px 'Gochi Hand', cursive;
		display: inline-block;
		margin-left: 10px;
	}
	.savings {
		position: relative;
		grid-column: 1 / span 4;
		width: 99%;
		padding: 10px 10px 5px;
		background: rgba($color-pink, 0.4);
		box-shadow: 3px 3px 0 0 rgba($color-pink2, 0.7);
		font: 16px/1 "Rock Salt", cursive;
	}
}

.picture {
	grid-area: picture;
	margin-left: 20px;
	&__border {
		width: 100%;
		background: #f9f9f9;
		padding: 20px 10px 50px;
		height: 95%;
		transform: rotate(5deg);
		position: relative;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		&:after {
			content: "";
			width: 55%;
			height: 20px;
			top: -10px;
			z-index: 5;
			left: 25%;
			transform: rotate(-2deg);
			position: absolute;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			background: rgba(220, 220, 220, 0.4);
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		figcaption {
			margin: 10px 0;
			text-align: center;
			display: block;
			font: 14px/1 "Gochi Hand", cursive;
			color: $color-vermilion;
		}
	}
}

.goals {
	grid-area: goals;
	margin: 25px 0 0 20px;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	position: relative;
	&__item {
		padding: 3px 12px;
		&__checkbox {
			border: 2px solid $color-black;
			width: 20px;
			height: 20px;
			display: inline-block;
			margin-right: 5px;
			position: relative;
			span {
				font-size: 26px;
				display: inline-block;
				position: absolute;
				top: -4px;
				color: $color-pink3;
			}
		}
		&__desc {
			display: inline-block;
			font: 18px "Gochi Hand", cursive;
			vertical-align: top;
		}
	}
	> span:nth-child(1) {
		position: absolute;
		text-transform: uppercase;
		font: 700 9px "Rock Salt", cursive;
		top: -30px;
		transform: rotate(-15deg);
	}
	> span:nth-child(2) {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__inner {
		margin-top: 40px;
	}
}

.music {
	grid-area: quote;
	margin: 25px 0 10px 20px;
	position: relative;
	&__title {
		font: 22px "Special Elite", cursive;
	}
	&__artist {
		color: $color-red2;
		margin: 15px 0;
		transform: rotate(-10deg);
		max-width: 50px;
		font: 24px/.8 'Gochi Hand', cursive;
	}
	svg {
		width: 65px;
		position: absolute;
		bottom: 0px;
		right: -10px;
	}
}

.tracker {
	grid-area: tracker;
	display: grid;
	margin: 20px 0 0 20px;
	grid-template-rows: repeat(4, 28px);
	grid-template-columns: max-content repeat(7, 1fr);
	align-items: center;
	font: 18px/1 "Gochi Hand", cursive;
	grid-auto-flow: row;
	text-align: center;
	&__title {
		grid-column: 1;
		text-align: left;
		padding-right: 15px;
	}
	&__day {
		text-align: center;
		&:nth-child(1) {
			grid-column-start: 2;
		}
	}
	&__bubble {
		border: 1.5px dashed;
		margin: auto;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		&:nth-child(10),&:nth-child(12),&:nth-child(13) {
			background: rgba($color-vermilion,0.5);
		}
		&:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(22), &:nth-child(23) {
			background: rgba($color-pink,0.5);
		}
		&:nth-child(27),&:nth-child(29),&:nth-child(30) {
			background: rgba(coral,0.5);
		}
	}
}

/* Responsive here
@media screen and (max-width: 768px) {
	.main-content {
		padding: 1em;
	}
	.notebook__inner {
		grid-template-columns: 40% 25% 35%;
		grid-template-rows: auto;
		grid-template-areas: 
			"title title title" 
			"days days days" 
			"notes notes notes" 
			"expenses expenses expenses"
			"goals quote picture"
			"tracker tracker picture";
		> div {
			margin: 30px 20px;
		}
		&:after {
			width: 100%;
			height: 100px;
			bottom: 0;
			background: linear-gradient(
				to bottom,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}
*/