cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

.frame
  .info
    img(src="http://assets.droom.io/codepen/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


            
          
!
            
              $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

            
          
!
            
              jQuery(document).ready(function($){
	$('#toggle').click(function(e){
		e.preventDefault();
		$(this).toggleClass('active');
		$('#guide').toggleClass('visible');
		console.log("click");
	});
});
            
          
!
999px
Loading ..................

Console