.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");
});
});
This Pen doesn't use any external CSS resources.