.support
  | Your browser doesn’t support 
  a(href="http://caniuse.com/#feat=css-grid") CSS Grid
  |  :(

.frame
  .info
    img(src="https://i.ibb.co/6DJZrb4/wim.jpg")
    hr
    .plaque
      strong Calendar
      br
      | Wim Crouwel
      br
      | 1964

  .art
    figure
      figcaption
        .plaque
          strong Calendar
          br
          | Wim Crouwel
          br
          | 1964
        a(href="#").toggle#toggle Show Grid

    
      .lockup
        .guide.hide#guide
          //- This is just for the purpose of the grid overlay demo.
          - for (var x = 0; x < 147; x++)
            .cell

        .calendar
          //- All I'm doing here is using Pug to spit out 'label.month' 7 times.
          - for (var x = 0; x < 7; x++)
            label.month

          .days
            //- Same deal. Using Pug to spit out 'time' 30 times.
            - for (var x = 0; x < 30; x++)
              time

          .labels
            //- Renders label.day 7 times.
            - for (var x = 0; x < 7; x++)
              label.day

View Compiled
$font: 		helvetica, sans-serif
$paper:  	#75847d
$gutter: 	lighten($paper, 6%)
$size: 		516px

@mixin letter_a
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTEzMS4yNyAxODcuMjczYzAgMTQuODcyIDMuNDMzIDIxLjE2NCA1LjQzNSAyNC4zMUg5OS44MTJjLTIuMjktMy40MzItMy40MzMtOS40MzgtMy40MzMtMTMuMTU2LTEzLjQ0MiAxMC44NjgtMjkuMTcyIDE2LjU4OC00Ny4xOSAxNi41ODhDMjEuNzM2IDIxNS4wMTUgMCAxOTcuNTcgMCAxNjkuNTRjMC0yOC4zMTIgMjIuNTk0LTQwLjg5NiA0NC4wNDMtNDUuMTg2bDE0LjU4Ni0yLjg2YzEyLjU4My0yLjU3NCAyOC44ODQtNS40MzQgMzcuNzUtOC41OHYtNC4yOWMwLTE0LjMtMTIuMjk4LTE4LjMwNC0yNy40NTYtMTguMzA0LTIwLjMwNSAwLTI2Ljg4MyA2LjAwNi0yNi44ODMgMjEuNzM2bC0zNC44OS0xLjQzYzAtMzQuMDMzIDMwLjAzLTQ3LjE5IDYxLjc3My00Ny4xOSAzMS4xNzQgMCA2Mi4zNDggNi4yOTMgNjIuMzQ4IDQ3LjQ3NnY3Ni4zNnptLTM0Ljg5LTQ4LjA0N2MtNC41NzUgMi4yODgtMTAuMjk2IDQuMDA0LTE2LjU4NyA1LjE0OGwtMTkuMTYyIDQuMDA0Yy0xMy4xNTUgMi41NzQtMjQuMDIyIDYuMjkyLTI0LjAyMiAyMC4wMiAwIDEwLjg2OCAxMC4wMSAxOC4wMTggMjIuNTk0IDE4LjAxOCAxNi4zIDAgMzcuMTgtOC4wMDggMzcuMTgtMjYuNTk4di0yMC41OTJ6Ii8+PC9zdmc+")
@mixin letter_p
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgNjMuNzVoMzQuODkydjE1LjQxN2guNTcyYzEwLjU4Mi05LjcyNCAyNC4wMjQtMTUuNzMgNDEuMTgzLTE1LjczIDM2LjYwNyAwIDYyLjM1IDM0LjAzNCA2Mi4zNSA3NS43OXMtMjUuNzQgNzcuNzktNjIuOTIgNzcuNzljLTIwLjg3NyAwLTMyLjAzLTUuMTUtNDEuMTgzLTE1LjQ0N1YyNTRIMFY2My43NXptMTAyLjM4NyA3NS40NzZDMTAyLjEgMTE4LjM1IDk0LjM4IDk1LjQ3IDY4LjA2NyA5NS40N3MtMzQuMDM0IDIyLjg4LTM0LjMyIDQzLjc1NmMuMjg2IDIwLjg3OCA4LjAwOCA0NS43NTcgMzQuMzIgNDUuNzU3czM0LjAzMy0yNC44OCAzNC4zMi00NS43NTd6Ii8+PC9zdmc+")
@mixin letter_r
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTE0MiAyMTUuMDg1aC0zNC44OTN2LTE3Ljk0aC0uNTdjLTguMjk1IDEzLjI1NC0yNC4zMSAyMC4xMTgtNDQuNjE2IDIwLjExOHYtMzEuODg4YzIzLjczOCAwIDQ1LjE4Ny0xNC43MyA0NS4xODctNDYuMTlWNjQuMTlIMTQydjE1MC44OTd6Ii8+PC9zdmc+")
@mixin letter_i
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgMTYuMjg3aDM1LjVWNDkuNUgwVjE2LjI4N3ptMCA0Ny45MTVoMzUuNXYxNTAuOTY2SDBWNjQuMjAyeiIvPjwvc3ZnPg==")
@mixin letter_l
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDIiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTQyIDUwMCI+PHBhdGggZD0iTTAgMTYuMjg3aDM1LjV2MTk4LjgxOEgwVjE2LjI4N3oiLz48L3N2Zz4=")  

body
	margin: 	0
	padding: 	0
	counter-reset: date
	box-sizing: border-box
	
*, *:before, *:after
	box-sizing: inherit

label.day
	font-size: 9px
	text-transform: lowercase

time
	font-size: 		20px
	font-weight: 	900
	text-align: 	right

label,
time
	background: 	$paper
	font-family: 	$font
	line-height: 	1.2em

time
	counter-increment: date
	&:after
		content: counter(date)

.plaque
	font-family: 	$font
	font-size: 		11px
	font-weight: 	400
	line-height: 	14px
	letter-spacing: 0.025em
	margin-top: 	0
	padding-top: 	0

hr
	height: 1px
	margin: 0
	padding: 0
	background: #666
	background: white
	border: none

figure,
figcaption
	padding: 0
	margin: 0

a.toggle
	font-size: 			9px
	font-family: 		$font
	letter-spacing: 	0.1em
	text-decoration: 	none
	text-transform: 	uppercase
	display: 			inline-block
	border-radius: 		1px
	padding: 			10px 10px 7px 10px
	color: 				black
	transition: 		100ms ease all
	background: 		rgba(0,0,0,0.08)
	margin: 			3em 0 2em 0

	&:hover
		background: rgba(65,255,255,0.35)	
	&.active
		background: rgba(65,255,255,0.95)

.support
	display: 		flex
	width: 			100vw
	height: 		100vh
	background: 	#ececec
	align-items: 	center
	justify-items: 	center
	padding: 		10vh
	a
		color: blue

.frame
	grid-template-columns: 1fr 2fr
	grid-column-gap: 20px
	align-self: stretch
	align-items: 	center

	.info
		align-self: stretch
		width: 100%
		background: #ececec
		line-height: 0
		text-align: right

		.plaque
			padding: 1em

		img
			max-width: 100%

	.art
		margin: 	auto
		padding:  0 0 3em 0
    

		.lockup
			width: 		$size
			height: 	$size
			position: 	relative
		
		figcaption
			.plaque
				padding: 1em 0 0 0
				display: none

.calendar
	position: 				absolute
	display: 				grid
	grid-template-columns: 	repeat(7, 72px)
	grid-template-rows: 	14fr 6fr 1fr
	grid-column-gap: 		2px
	margin: 				auto
	width: 					$size
	height: 				$size
	background:  			$gutter

	&:hover
		.month
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(4),
			&:nth-child(5)
				background-position: -200% 0

			&:nth-child(3)
				background-position: -103% 0

	.month
		transition: all ease-out 600ms

		&:nth-child(1)
			grid-column: 1 / span 1
			
		&:nth-child(2)
			grid-column: 2 / span 1
			
		&:nth-child(3)
			grid-column: 3 / span 1
			
		&:nth-child(4)
			grid-column: 4 / span 1
			
		&:nth-child(5)
			grid-column: 5 / span 1
			
		&:nth-child(6)
			grid-column: 6 / span 1

		&:nth-child(7)
			grid-column: 7 / span 1

		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(3),
		&:nth-child(4),
		&:nth-child(5),
		&:nth-child(6),
		&:nth-child(7)
			grid-row-start: 		1
			grid-row-end: 			span 14

		&:nth-child(1),
		&:nth-child(2),
		&:nth-child(4),
		&:nth-child(5)
			background-position: 	0 0
		&:nth-child(3)
			background-position: 	100% 0


		&:nth-child(1)
			@include letter_a
		&:nth-child(2)
			@include letter_p
		&:nth-child(3)
			@include letter_r	
		&:nth-child(4)
			@include letter_i
		&:nth-child(5)
			@include letter_l	

			
.days,
.labels
	display: 				grid
	grid-template-columns: 	repeat(7, 36px)
	grid-column-gap: 		38px

.labels
	grid-row-start: 	3
	grid-row-end: 		4
	grid-column-start: 	1
	grid-column-end: 	span 7
	
.days
	grid-row-start: 	2
	grid-row-end: 		3
	grid-column-start: 	1
	grid-column-end: 	span 7


time:nth-child(1)
	grid-column-start: 6
	grid-column-end: 7

label.day
	&:after
		display: 			block
		transform: 			rotate(-90deg)
		transform-origin: 	center center

	&:nth-child(1):after
		content: 'sun'
	&:nth-child(2):after
		content: 'mon'
	&:nth-child(3):after
		content: 'tue'
	&:nth-child(4):after
		content: 'wed'
	&:nth-child(5):after
		content: 'thu'
	&:nth-child(6):after
		content: 'fri'
	&:nth-child(7):after
		content: 'sat'

.guide
	position: 				absolute
	display: 				grid
	grid-template-columns: 	repeat(7, 72px)
	grid-template-rows: 	repeat(21, 1fr)
	grid-column-gap: 		2px
	width: 					516px
	height: 				516px
	margin: 				auto
	pointer-events: 		none
	z-index: 				999
	transition: 			100ms ease opacity
	opacity: 				0
	
	&.visible
		opacity: 1
	
	.cell
		grid-row-end: 		span 1
		grid-column-end: 	span 1
		border-top: 		1px solid rgba(65,255,255,0.2)

		&:nth-child(7n),
		&:nth-child(7n-1),
		&:nth-child(7n-2),
		&:nth-child(7n-3),
		&:nth-child(7n-4),
		&:nth-child(7n-5),
		&:nth-child(7n-6)
			border-left: 		1px solid rgba(65,255,255,0.85)
			border-right: 		1px solid rgba(65,255,255,0.85)
		
		&:nth-child(99),
		&:nth-child(100),
		&:nth-child(101),
		&:nth-child(102),
		&:nth-child(103),
		&:nth-child(104),
		&:nth-child(105)
			border-top: 		1px solid rgba(255,177,255,0.85)

		&:nth-last-child(1),
		&:nth-last-child(2),
		&:nth-last-child(3),
		&:nth-last-child(4),
		&:nth-last-child(5),
		&:nth-last-child(6),
		&:nth-last-child(7)
			border-top: 		1px solid rgba(255,177,255,0.85)
			border-bottom: 		1px solid rgba(65,255,255,0.2)
			background: 		none


.frame
	display: none

@supports (display: grid)
	.frame
		display: grid
	.support
		display: none



@media (max-width: 800px)
	.frame
		grid-template-columns: 1fr
		.info
			display: none
			position: relative

			.wrap
				position: absolute
				top: 0
				left: 0
			img
				display: none

		.art
			figcaption
				.plaque
					display: block
View Compiled
jQuery(document).ready(function($){
	$('#toggle').click(function(e){
		e.preventDefault();
		$(this).toggleClass('active');
		$('#guide').toggleClass('visible');
		console.log("click");
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js