Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/A-Pen-by-Mike-Stezycki.markdown

Created February 25, 2014 20:33
Show Gist options
  • Save mr-stezz/9217103 to your computer and use it in GitHub Desktop.
Save mr-stezz/9217103 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Mike Stezycki.
Raw
index.html
<div id="modal--menu" class="page-modal modal--menu">
<div class="wrapper">
<a href="#" data-link-action="close-menu" role="button" class="menu-trigger-close">&times;</a>
<a href="" class="page-logo page-logo--modal"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zero Culture" class="page-logo__img"></a>
<ul class="nav nav--stacked" role="menu">
<li><a href="">Stage</a>
<ul class="nav nav--stacked">
<li><a href="">Current</a></li>
<li><a href="">In Development</a></li>
<li><a href="">Post Production</a></li>
</ul>
</li>
<li><a href="">Screen</a>
<ul class="nav nav--stacked">
<li><a href="">In Development</a></li>
</ul>
</li>
<li><a href="">Sub Zero</a>
<ul class="nav nav--stacked">
<li><a href="">Salon</a></li>
<li><a href="">Magazine</a></li>
</ul>
</li>
<li><a href="">Arts Development</a>
<ul class="nav nav--stacked">
<li><a href="">ZerOclassikal</a></li>
<li><a href="">Artists/Companies</a></li>
<li><a href="">Venue</a></li>
<li><a href="">The Seefr Project</a></li>
<li><a href="">Services</a></li>
</ul>
</li>
<li><a href="">Education</a></li>
<li><a href="">Touring</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>
</div>
<div class="canvas" id="js-top-of-page">
<header class="page-header" role="header">
<div class="wrapper">
<a href="" class="page-logo page-logo--header"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Zero Culture" class="page-logo__img"></a>
<ul class="nav-menu nav">
<li class="nav-menu__item"><a href="#modal--menu" data-link-action="open-menu" class="nav-menu__link">Menu</a></li>
<li class="nav-menu__item"><a href="" class="nav-menu__link">Sign In</a></li>
</ul>
</div>
</header>
<main class="page-content" role="main">
<div class="masthead">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="masthead__hero" style="background-image:url('http://therefinedlife.com/site/wp-content/gallery/performing-arts/ballet.JPG');">
<div class="center-object">
<div class="wrapper">
<p class="t--center lede">Zeroculture works diversely across artforms, media and identities creating work to provoke and engage the total senses&hellip;</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="masonry">
<a href="" class="masonry__item double">
<figure class="post">
<img src="https://bucks.ac.uk/images/LightboxGalleries/159325/159329/Performing_Arts_dramatic_performance.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://chamberlainperformingarts.org/wp-content/uploads/2012/07/ModifiedEvents.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://news.lancs.ac.uk/Web/News/publishingimages/Imported/palatine.web400.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://www.american.edu/uploads/hero/filmstrip/adrienne2-hero.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Snowdance.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item double">
<figure class="post">
<img src="http://media-1.web.britannica.com/eb-media/71/126371-004-D108BDA9.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://capstone.unst.pdx.edu/sites/default/files/users/u341/Performance%20art.JPG" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
<a href="" class="masonry__item single">
<figure class="post">
<img src="http://www.ukgameshows.com/p/images/9/9e/E4_school_of_performing_arts_street.jpg" class="post__thumb">
<figcaption class="post__excerpt">Title of the post</figcaption>
</figure>
</a>
</div>
</div>
</main>
<section class="page-pagination">
<div class="wrapper">
<ul class="pager">
<li class="pager__item"><a href="" class="pager__link">Previous Page</a></li>
<li class="pager__item"><a href="" class="pager__link">Next Page</a></li>
</ul>
</div>
</section>
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<p class="legalese"><small>&copy; 2014 zeroculture</small></p>
<ul class="footer-links nav">
<li class="footer-links__item"><a href="#" class="footer-links__link"><i class="icon icon--instagram"></i></a></li>
<li class="footer-links__item"><a href="#" class="footer-links__link"><i class="icon icon--facebook"></i></a></li>
<li class="footer-links__item"><a href="#" class="footer-links__link"><i class="icon icon--twitter"></i></a></li>
<li class="footer-links__item"><a href="#" class="footer-links__link"><i class="icon icon--arrow-up"></i></a></li>
</ul>
</div>
</footer>
</div>
Raw
script.js
$(document).ready(function() {
$('.masonry').masonry({
columnWidth: 300,
itemSelector: '.masonry__item',
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
$('.masonry').masonry('reload');
});
});
Raw
style.css
/* debug
*{outline:1px solid rgba(255,255,255,0.05);} */
/* reset - generic */
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
/* clearfix - generic */
.cf:after,
.nav:after,
.wrapper:after,
.masonry:after{content:"";display:table;clear:both}
/* shared - generic */
h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.masthead{margin-bottom:1.5em}
/* page - base */
html{font-weight:300;font-size:1em;line-height:1.5;font-family:sans-serif;overflow-y:scroll;min-height:100%}
html{font-family:Roboto,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;color:#727272;background-color:#0a0a0a}
/* paragraphs - base */
.lede{font-size:1.125em}
/* anchors - base */
a{text-decoration:none;color:#d39278}a:visited,a:active{color:#c76e6f}
/* images - base */
img{max-width:100%;height:auto;font-style:italic}img[width],img[height]{max-width:none}
/* lists - base */
li>ul,li>ol{margin-bottom:0}
/* nav - object */
.nav{list-style:none;margin-left:0}
.nav>li,.nav>li>a{display:inline-block}
.nav--stacked>li{display:list-item}
.nav--stacked>li>a{display:block}
.nav--block{line-height:1;font-family:"zerospace";white-space:nowrap}
.nav--block>li{font-family:Roboto,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif}
.nav--block>li>a{padding:12px}
.nav--fit{display:table;width:100%}
.nav--fit>li{display:table-cell}
.nav--fit>li>a{display:block}
.nav--keywords>li:after{content:"\002C" "\00A0"}
.nav--keywords>li:last-child:after{display:none}
/* icon - object */
.icon{display:inline-block;width:1em;height:1em;vertical-align:middle;font-weight:normal;font-style:normal;font-size:16px;line-height:1;font-family:"icon-font";text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;top:-0.0625em;pointer-events:none}
.icon:before{content:"";speak:none;text-rendering:optimizeLegibility}
.icon--search:before{content:"\e600"}
.icon--arrow-up:before{content:"\e601"}
.icon--twitter:before{content:"\e602"}
.icon--facebook:before{content:"\e603"}
.icon--instagram:before{content:"\e604"}
.icon--medium{font-size:24px}
.icon--large{font-size:32px}
.icon--huge{font-size:64px}
.icon--natural{font-size:inherit}
/* icon text - object */
.icon-text>.icon-text__icon{margin-right:6px}
.icon-text--rev>.icon-text__icon{margin-left:6px}
/* structure - component */
.wrapper{max-width:65em;margin:0 auto;padding:0 24px;position:relative}
.focus{max-width:30em;margin-right:auto;margin-left:auto;padding:0 24px}
/* text truncation - component */
.trunc{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.trunc--two{display:-webkit-box;-webkit-box-orient:vertical;max-height:48px;white-space:normal;-webkit-line-clamp:2}
.trunc--three{display:-webkit-box;-webkit-box-orient:vertical;max-height:72px;white-space:normal;-webkit-line-clamp:3}
.trunc--four{display:-webkit-box;-webkit-box-orient:vertical;max-height:96px;white-space:normal;-webkit-line-clamp:4}
/* center content - component */
.center-object{position:relative;top:50%;transform:translateY(-50%)}
.center-container{display:table;width:100%;height:100%;position:relative}
.center-container>.center-object{display:table-cell;vertical-align:middle;top:0;transform:translateY(0)}
/* page content - theme */
.page-content{background-color:#242424}
/* header - theme */
.page-header{background-color:#191919}
@media screen and (min-width:401px){
.page-header{width:100%;position:absolute;top:0;left:0;z-index:2;background-color:transparent;}
}
.page-header--fixed{width:100%;position:fixed;top:0;left:0;z-index:3;border-bottom:1px solid #1c2129}
/* footer - theme */
.page-footer{text-align:center}
@media screen and (min-width:401px){
.page-footer{line-height:4;text-align:right}
}
/* logo - theme */
.page-logo,
.page-logo>img{display:block}
.page-logo{margin-top:6px;margin-right:6px;position:absolute;top:0;right:0}
@media screen and (min-width:401px){
.page-logo{position:static;float:left;}
}
.page-logo__img{width:46px;height:46px;background-color:#8f8f8f;background-image:url("../img/logo/logo-100x46.png");background-image:url("../img/logo/logo-100x46.svg");background-repeat:no-repeat}
@media screen and (min-width:401px){
.page-logo__img{width:100px;background-position:50%;background-size:cover}
}
/* nav menu - theme */
.nav-menu{list-style:none;margin-left:0;margin-bottom:0}
@media screen and (min-width:401px){
.nav-menu{text-align:right;}
}
.nav-menu>li,
.nav-menu>li>a{display:inline-block}
.nav-menu__item+.nav-menu__item{margin-left:1em}
@media screen and (min-width:401px){
.nav-menu__item:first-child{float:right}
.nav-menu__item+.nav-menu__item{margin-left:0;margin-right:1em}
}
.nav-menu__link,.pager__link{font-size:0.75em;line-height:5;font-weight:bold;font-family:"AvenirNext-Regular",Helmet,Freesans,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:0.1em}
/* legalese - theme */
@media screen and (min-width:401px){
.legalese{text-align:left;float:left;clear:left}
}
/* footer links - theme */
/* canvas - theme */
.modal-open{overflow:hidden}
.canvas{transition:background-color 0.3s ease-in-out}
.modal-open .canvas{background-color:rgba(0,0,0,0.25)}
/* modals - theme */
.page-modal{width:100%;height:100%;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:fixed;top:0;right:0;bottom:0;left:0;z-index:3;visibility:hidden;opacity:0;transition:visibility 0 0, opacity 0.6s ease-in-out, transform 0.6s ease-in-out;backface-visibility:hidden}
.modal--menu{background-color:#0e0d0c;transform:translate3d(0, -100%, 0)}#modal--menu:target,.modal--menu--is-open{visibility:visible;opacity:1;transform:translate3d(0, 0, 0)}
.menu-trigger-close{font-weight:bold;font-size:1.5em;}
@media screen and (min-width:401px){
.menu-trigger-close{float:right;}
}
/* masthead - theme */
.masthead{width:100%;height:380px;overflow:hidden;position:relative}
@media screen and (min-width: 706px){
.masthead{height:0;padding-bottom:56.65%}
}
@media screen and (min-width: 820px){
.masthead{height:447px;padding-bottom:0}
}
.masthead__hero{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-repeat: no-repeat;background-position:50%;background-size:cover;image-rendering:optimizeQuality;}
/* masonry - theme */
.masonry,
.masonry__item{transition-duration:0.6s}
.masonry{margin:0 auto;width:auto;transition-property:height, width}
.masonry__item{min-width:260px;margin:0 0.75em 1.5em 0.75em;float:left;transition-property:left, right, top}
.single{width:260px}
.single img{width:260px}
.double{width:560px}
.double img{width:560px}
@media screen and (max-width: 640px){
.double{width:260px}
.double img{width:100%;height:auto}
}
.triple{max-width:620px}
.triple img{max-width:620px}
/* post items - theme */
.post{display:block;margin:0;position:relative;overflow:hidden;text-align:center}
.post__thumb{display:block;width:100%}
.post__excerpt{width:100%;height:100%;position:absolute;top:0;left:0;visibility:hidden;opacity:0;transition:visibility 0s linear 0.3s,opacity 0.3s ease-in-out}
.masonry__item:hover .post__excerpt{transition:visibility 0s linear,opacity 0.3s ease-in-out;opacity:1;visibility:visible}
/* pagination - theme */
.pager{list-style:none;margin-left:0;margin-bottom:0;text-align:center}
.pager__item,
.pager__link{display:inline-block}
.pager__item:after{content:"\00A0" "\2022";font-size:1.3333333333333333em;position:relative;top:0.1875em;margin:0 1.5em}
.pager__item:last-child:after{content:"";margin:0}
/* widths - trumps */
/* hidden - trumps */
.accessibility,.is-hidden{position:absolute;left:-9999px;visibility:hidden}
/* type formats - trumps */
.t--block{display:block}
.t--inline{display:inline}
.t--inline-block{display:inline-block}
.t--center{text-align:center}
.t--right{text-align:right}
.t--left{text-align:left}
.t--lowercase{text-transform:lowercase}
.t--uppercase{text-transform:uppercase;letter-spacing:0.1em}
.t--smallcaps{font-variant:small-caps;text-transform:lowercase;letter-spacing:0.1em}
.w--200{font-weight:200}
.w--300{font-weight:300}
.w--400{font-weight:400}
.w--800{font-weight:800}
.w--break{word-wrap:break-word}
.w--wrap{word-wrap:normal}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment