A Pen by Mike Stezycki.

index.html

<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">
    <section class="masthead  masthead--img">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="masthead__hero" style="background-image:url('http://farm4.staticflickr.com/3816/12885952924_4ce5c2c067_h.jpg');">
      <div class="center-object">
        <div class="wrapper">
          <div class="focus">
            <h1 class="heading  alpha  masthead-title  t--center  lede"><b class="t--smallcaps">Zeroculture</b> works diversely across artforms, media and identities creating work to provoke and engage the total senses&hellip;</h1>
          </div>
        </div>
      </div>
    </section>
    <section class="wrapper">
      
      <ul class="matrix  swatch-list">  
        <li class="one-fifth">
          <div class="box  swatch  swatch-one">
            <div class="center-object">
              <p class="t--center">#181b1f</p>
            </div>
          </div>
        </li>
        <li class="one-fifth">
          <div class="box  swatch  swatch-two">
            <div class="center-object">
              <p class="t--center">#272a2e</p>
            </div>
          </div>
        </li>
        <li class="one-fifth">
          <div class="box  swatch  swatch-three">
            <div class="center-object">
              <p class="t--center">#272a2e</p>
            </div>
          </div>
        </li>
        <li class="one-fifth">
          <div class="box  swatch  swatch-four">
            <div class="center-object">
              <p class="t--center">#919191</p>
            </div>
          </div>
        </li>
        <li class="one-fifth">
          <div class="box  swatch  swatch-five">
            <div class="center-object">
              <p class="t--center">#1abac1</p>
            </div>
          </div>
        </li>
      </ul>
      
      <div class="focus">
        <h1 class="heading  alpha">Heading One &ndash; Roboto 36/48</h1>
        <h2 class="heading  beta">Heading Two &ndash; Roboto 30/48</h2>
        <h3 class="heading  gamma">Heading Three &ndash; Roboto 24/24</h3>
        <h4 class="heading  delta">Heading Four &ndash; Roboto 20/24</h4>
        <h5 class="heading  epsilon">Heading Five &ndash; Avenir 16/24</h5>
        <h6 class="heading  zeta">Heading Six &ndash; Avenir 14/24</h6>
        <p class="lede">This is an introductory paragraph, otherwise known as the lede. It is typeset in 'Roboto' and is sized up to 12.5% larger than the body copy. 18/26</p>
        <p>This is a normal paragraph. Body copy is typeset in 'Roboto' and it sized up as 100% with a leading of 1.5. 16/24</p>
        <p><small>This is a small sized text</small></p>
        <blockquote class="blockquote">
          <p class="mega">This is a blockquote, and provided is the cite.</p>
          <cite class="source">Someone</cite>
        </blockquote>
        <hr class="rule  rule--ornament" data-ornament="***">
        <figure class="figure">
          <img src="https://c2.staticflickr.com/4/3696/12887740484_a1c940eea5_z.jpg">
          <figcaption>On route to Jigokudani.</fogcaption>
        </figure>
        <p>This is an example of a single figure image. You can, however, have multiple images inside a figure and turn it into a grid gallery.</p>
      </div>
      
      <div class="layout" data-masonry>
        
        <div class="layout__item  bp-three--one-quarter">
          <a href="" class="post  hovered">
            <img src="http://stezycki.com/=/zeroculture/assets/img/laal-shaari.jpg" class="post__thumb">
            <div class="post__details">
              <div class="post-title">
                <h3 class="heading  gamma  t--smallcaps  trunc">Laal Shaari</h3>
              </div>
              <div class="post-excerpt">
                <p class="trunc  trunc--three">She never wears make up. She never goes out. She never wears her hair down... and she never wears a red shaari… Walk away, walk away now.</p>
              </div>
            </div>
          </a>
        </div>
        
        <div class="layout__item  bp-three--one-quarter">
          <a href="" class="post">
            <img src="http://stezycki.com/=/zeroculture/assets/img/laal-shaari.jpg" class="post__thumb">
            <div class="post__details">
              <div class="post-title">
                <h3 class="heading  gamma  t--smallcaps  trunc">Laal Shaari</h3>
              </div>
              <div class="post-excerpt">
                <p class="trunc  trunc--three">She never wears make up. She never goes out. She never wears her hair down... and she never wears a red shaari… Walk away, walk away now.</p>
              </div>
            </div>
          </a>
        </div>
        
      </div>
      <div class="focus">
        <p>This is an example of a masonry grid. Because it is controlled via javascript, it can be manipulated heavily. All it needs to work is a parent <code>layout</code> div with data-masonry attached and a bunch of child <code>layout__item</code> divs with widths applied.</p>
      </div>
    </section>
    <article>
      <section class="masthead  masthead--img">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="masthead__hero" style="background-image:url('http://1.bp.blogspot.com/-LkI-2qI2pG4/UB_vh8cKGTI/AAAAAAAAHVU/XBfxr2E_xyA/s1600/Futurama+generic.jpg');">
        <div class="center-object">
          <div class="wrapper">
            <h1 class="heading  alpha  t--center  masthead-title">The Duh-Vinci Code</h1>
            <p class="t--center  masthead-meta">posted <em>10<sup>th</sup> November 2012</em></p>
          </div>
        </div>
      </section>
      <section class="wrapper">
        <div  class="text-cols--4">
          <p>Hey, what kinda party is this? There's no booze and only one hooker. Do a flip! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Ow, my spirit!</p>
          <h2 class="heading  beta">Anthology of Interest I</h2>
          <p>Eeeee!  Now say "nuclear wessels"! Who said that? SURE you can die! You want to die?! No argument here. Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be&hellip; Bender, hurry! This fuel's expensive! Also, we're dying!</p>
          <ul>
            <li>One hundred dollars.</li>
            <li>Too much work. Let's burn it and say we dumped it in the sewer.</li>
            <li>Ah, computer dating. It's like pimping, but you rarely have to use the phrase "upside your head."</li>
          </ul>
          <figure>
            <img src="http://graphics8.nytimes.com/images/2013/04/22/arts/futurama/futurama-blog480.png" alt="">
            <figcaption>Fry looking all perplexed</figcaption>
          </figure>
          <h3 class="heading  gamma">Teenage Mutant Leela's Hurdles</h3>
          <p>We're rescuing ya. Good news, everyone! I've taught the toaster to feel love! Ah, computer dating. It's like pimping, but you rarely have to use the phrase "upside your head." I haven't felt much of anything since my guinea pig died.</p>
          <h4 class="heading  delta">Mars University</h4>
          <p>Oh yeah, good luck with that. I could if you hadn't turned on the light and shut off my stereo. Who are those horrible orange men? Uh, is the puppy mechanical in any way? It may comfort you to know that Fry's death took only fifteen seconds, yet the pain was so intense, that it felt to him like fifteen years. And it goes without saying, it caused him to empty his bowels. Too much work. Let's burn it and say we dumped it in the sewer.</p>
          <h5 class="heading  epsilon">Less Than Hero</h5>
          <p>Bender, this is Fry's decision&hellip; and he made it wrong. So it's time for us to interfere in his life. And yet you haven't said what I told you to say! How can any of us trust you? No, I'm Santa Claus!</p>
        </div>
      </section>
    </article>
  </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>
<div id="modal--menu" class="page-modal  modal--menu">
  <div class="modal-header">
    <div class="wrapper">
      <a href="#" data-link-action="close-menu" role="button" class="menu-trigger-close">Close</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>
    </div>
  </div>
  <div class="modal-content">
    <div class="wrapper">
      <ul class="nav-block" role="menu">
        <li class="nav-block__item"><a href="/stage/index.html" class="nav-block__link  t--uppercase">Stage</a>
          <ul class="nav-block__list">
            <li><a href="">Current</a></li>
            <li><a href="">In Development</a></li>
            <li><a href="">Post Production</a></li>
          </ul>
        </li>
        <li class="nav-block__item"><a href="/screen/index.html" class="nav-block__link  t--uppercase">Screen</a>
          <ul class="nav-block__list">
            <li><a href="">In Development</a></li>
          </ul>
        </li>
        <li class="nav-block__item"><a href="/sub-zero/index.html" class="nav-block__link  t--uppercase">Sub Zero</a>
          <ul class="nav-block__list">
            <li><a href="">Salon</a></li>
            <li><a href="">Magazine</a></li>
          </ul>
        </li>
        <li class="nav-block__item"><a href="/arts-development/index.html" class="nav-block__link  t--uppercase">Arts Development</a>
          <ul class="nav-block__list">
            <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 class="nav-block__item"><a href="/education/index.html" class="nav-block__link  t--uppercase">Education</a></li>
        <li class="nav-block__item"><a href="/touring/index.html" class="nav-block__link  t--uppercase">Touring</a></li>
        <li class="nav-block__item"><a href="/about/index.html" class="nav-block__link  t--uppercase">About Us</a></li>
      </ul>
    </div>
  </div>
</div>

script.js

$(function(){
  var container = $('.layout[data-masonry]');

  container.imagesLoaded(function(){  
    container.masonry({
      itemSelector: '.layout__item',
      columnWidth: function( containerWidth ) {
        return containerWidth /2;// depends how many boxes per row
      },
      isAnimated: !Modernizr.csstransitions
    });
  });
});

$(document).ready(function() {
  $("a[data-link-action='open-menu'],a[data-link-action='close-menu']").click(function(){
    $("#modal-menu").toggleClass("modal--menu--is-open"),
    $("html").toggleClass("modal-open");
  })
});

style.scss

@import "compass";
/**
 * _settings.defaults.scss
 */
$base-font-weight:          300;
$base-font-size:            16px;
$base-line-height:          24px;
$base-font-family:          Roboto, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

$base-spacing-unit:         $base-line-height;
$half-spacing-unit:         $base-spacing-unit / 2;

$swatch-one:                #181b1f;
$swatch-two:                #272a2e;
$swatch-three:              darken($swatch-two, 12%);
$swatch-four:               #919191;
$swatch-five:               #1abac1;

$heading-font-family:       $base-font-family;
$small-heading-font-family: "AvenirNext-Regular", Helmet, Freesans, "Helvetica Neue", Helvetica, Arial, sans-serif;

$monospace-font-family:     "M+ 1m", Consolas, "Lucida Console", Courier, monospace;

$open-quote:                \201C;
$close-quote:               \201D;

/**
 * _tools.fuctions.scss
 */
@function quarter($inuit-number) {
    @return round($inuit-number / 4);
}

@function halve($inuit-number) {
    @return round($inuit-number / 2);
}

@function double($inuit-number) {
    @return round($inuit-number * 2);
}

/**
 * _tools.mixins.scss
 */
@mixin font-size($font-size, $line-height: true) {
    font-size: $font-size;
    font-size: ($font-size / $base-font-size) * 1rem;

    @if $line-height == true {
        line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    }

}

/**
 * _tools.debug.scss
* {
  outline: 1px solid rgba(255,255,255,0.05);
}*/

/**
 * _generic.reset.scss
 */
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,table,th,td,caption,hr {
  margin: 0;
  padding: 0;
}

abbr[title],dfn[title] {
  cursor: help;
}

u,ins {
  text-decoration: none;
}

ins {
  border-bottom: 1px solid;
}

img {
  font-style: italic;
}

input,textarea,button,select,option {
  cursor: pointer;
}

input[type="text"]:active,input[type="text"]:focus,textarea:active,textarea:focus {
  cursor: text;
  outline: none;
}

/**
 * _generic.global-box-sizing.scss
 */
* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

/**
 * _generic.clearfix
 */
.cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/**
 * _generic.shared
 */
h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,%margin-bottom {
  margin-bottom: $base-spacing-unit;
}

ol,ul,dt{
  margin-left: $base-spacing-unit;
}

/**
 * _base.page.scss
 */
html{
  font-weight: $base-font-weight;
  font-size: ($base-font-size / 16px) * 1em;
  line-height: $base-line-height / $base-font-size;
  font-family: $base-font-family;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
  min-height: 100%;
}

body {
  color: $swatch-four;
  background-color: $swatch-one;
}

/**
 * _base.headings.scss
 */
.heading {
  display: block;
  margin: 0;
  color: lighten($swatch-four, 30%);
}

h1,h2,h3,h4 {
  font-family: $heading-font-family;
}

h5,h6 {
  font-family: $small-heading-font-family;
}

.alpha,
.beta,
.gamma,
.delta {
  text-rendering: optimizeLegibility;
  font-feature-settings: liga, kern;
}

.tera    { font-size: 3.5em; }
.giga    { font-size: 3em; }
.mega    { font-size: 2.5em; }
.kilo    { font-size: 2em; }
.alpha   { font-size: 1.75em; }
.beta    { font-size: 1.5em; }
.gamma   { font-size: 1.3333333333333em; }
.delta   { font-size: 1.1666666666667em; }
.epsilon { font-size: 1.0833333333333em; }
.zeta    { font-size: 1em; }

.tera {
  line-height: 1.5238095238095237;
  margin-bottom: 1.1428571428571em;
}

.giga {
  line-height: 1.3333333333333333;
  margin-bottom: 0.83333333333333em;
}

.mega {
  line-height: 1.4;
  margin-bottom: 0.8em;
}

.kilo {
  line-height: 1.3333333333333333;
  margin-bottom: 0.66666666666667em;
}

.alpha {
  line-height: 1.4285714285714286;
  margin-bottom: 0.85714285714286em;
}

.beta {
  line-height: 1.3333333333333em;
  margin-bottom: 1em;
}

.gamma {
  line-height: 1.25em;
  margin-bottom: 1em;
}

.delta {
  line-height: 1.2857142857142858;
  margin-bottom: 1.2857142857143em;
}

.epsilon {
  line-height: 1.3076923076923077;
  margin-bottom: 1.4615384615385em;
}

.zeta {
  line-height: 1.5;
  margin-bottom: 1.5em;
}

h1,h2,h3,h4 {
  font-weight: 400;
}

h5,h6 {
  font-variant: small-caps;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 0.1em;
}

h6 {
  font-style: italic;
}

/**
 * _base.paragraphs.scss
 */
.lede {
  @include font-size($base-font-size * 1.125);
}

/**
 * _base.anchors.scss
 */
a {
  text-decoration: none;
  color: complement($swatch-five);
}

a:visited,
a:active {
  color: lighten(complement($swatch-five),30%);
}

/**
 * _base.quotes.scss
 */
q{
    quotes: "\2018" "\2019" "#{$open-quote}" "#{$close-quote}";

    &:before {
        content: "\2018";
        content: open-quote;
    }
    &:after {
        content: "\2019";
        content: close-quote;
    }

    q:before {
        content: "\201C";
        content: open-quote;
    }
    q:after {
        content: "\201D";
        content: close-quote;
    }
}

blockquote {
    quotes: "#{$open-quote}" "#{$close-quote}";

    p:before {
        content: "#{$open-quote}";
        content: open-quote;
    }
    p:after {
        content: "";
        content: no-close-quote;
    }
    p:last-of-type:after {
        content: "#{$close-quote}";
        content: close-quote;
    }

    q:before {
        content: "\2018";
        content: open-quote;
    }
    q:after {
        content: "\2019";
        content: close-quote;
    }
}

blockquote {
    /**
     * .4em is roughly equal to the width of the opening “ that we wish to hang.
     */
    text-indent: -0.41em;

    p:last-of-type {
        margin-bottom: 0;
    }
}

.blockquote {
  text-align: center;
}


.source {
    display: block;
    text-indent: 0;

    &:before {
        content: "\2014";
    }
}

/**
 * _base.code.scss
 */
code {
  padding-right: 0.125rem;
  padding-left: 0.125rem;
  font-size: 85%;
  font-family: $monospace-font-family;
  letter-spacing: 0.1rem;
  color: lighten($swatch-five, 30%);
}

/**
 * _base.figure.scss
 */
figure > img {
  display: block;
  margin: 0 auto;
  margin-bottom: 0.75em;
}

figcaption {
  max-width: 33rem;
  margin: 0 auto;
  padding: 0 1.5em;
  font-size: 85%;
  font-family: $small-heading-font-family;
}

/**
 * _base.images.scss
 */
img {
  max-width: 100%;
  height: auto;
  font-style: italic;
}

img[width],
img[height] {
  max-width: none;
}

/**
 * _base.lists.scss
 */
li>ul,
li>ol {
  margin-bottom: 0;
}

/**
 * _objects.nav.scss
 */
.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: normal; }
.nav--block > li > a { padding: $half-spacing-unit; }

.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; }

/**
 * _objects.matrix.scss
 */
.matrix{
  list-style: none;
  margin-left: 0;
  @extend .cf;
}

.matrix > li {
  float: left;
  padding: $half-spacing-unit;
}
.matrix__link,
.block-list__link {
  display: block;
  padding: $half-spacing-unit;
  margin: $half-spacing-unit;
}

/**
 * _objects.icons.scss
 */
@font-face {
  font-family: icon-font;
  src: url(http://stezycki.com/=/zeroculture/assets/fonts/icon/zeroculture.eot);
  src: url(http://stezycki.com/=/zeroculture/assets/fonts/icon/zeroculture.eot?#iefix) format(embedded-opentype),
       url(http://stezycki.com/=/zeroculture/assets/fonts/icon/zeroculture.woff) format(woff),
       url(.http://stezycki.com/=/test/assetsonts/icon/zeroculture.ttf) format(truetype),
       url(http://stezycki.com/=/zeroculture/assets/fonts/icon/zeroculture.svg#ios-icon-font) format(svg);
  font-weight: normal;
  font-style: normal;
}

.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;
}

/**
 * _objects.icon-text.scss
 */
.icon-text > .icon-text__icon {
  margin-right: $half-spacing-unit / 2;
}

.icon-text--rev > .icon-text__icon {
  margin-left: $half-spacing-unit / 2;
}

/**
 * _objects.buttons.scss
*/
.btn {
  display: inline-block;
  overflow: visible;
  vertical-align: middle;
  margin:  0;
  padding: $base-spacing-unit;
  font: inherit;
  text-align: center;
  background-color: $swatch-one;
  border: none;
  cursor: pointer;
  
  &,
    &:hover,
    &:active,
    &:focus,
    &:visited {
      text-decoration: none;
      color: $swatch-four;
    }
  
  &--small {
    padding: $base-spacing-unit / 2;
  }
  &--large {
    padding: $base-spacing-unit * 2;
  }
  &--full {
    width: 100%;
    padding-right: 0;
    padding-left:  0;
  }
  
  &--round {
    border-radius: 3px;
  }
  &--pill {
    border-radius: 100px;
  }
}

/**
 * _objects.layout.scss
 */
@font-face {
font-family:zerospace;
src:url(http://stezycki.com/=/zeroculture/assets/fonts/zerospace/zerospace-webfont.eot);
src:url(http://stezycki.com/=/zeroculture/assets/fonts/zerospace/zerospace-webfont.eot?#iefix) format(embedded-opentype),url(http://stezycki.com/=/zeroculture/assets/fonts/zerospace/zerospace-webfont.woff) format(woff),url(http://stezycki.com/=/zeroculture/assets/fonts/zerospace/zerospace-webfont.ttf) format(truetype);
font-weight:normal;
font-style:normal;
}

.layout {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$base-spacing-unit;
  font-family: zerospace;
  @extend .cf;
}

.layout__item {
  display: inline-block;
  padding-left: $base-spacing-unit;
  vertical-align: top;
  width: 100%;
  font-family: $base-font-family;
}

.layout--middle > .layout__item {
  vertical-align: middle;
}

.layout--bottom > .layout__item {
  vertical-align: bottom;
}

.layout--rev {
  direction: rtl;
  text-align: right;
}

.layout--rev > .layout__item {
  direction: ltr;
  text-align: left;
}

.layout--flush {
  margin-left: 0;
}

.layout--flush > .layout__item {
  padding-left: 0;
}

.layout--right {
  text-align: right;
}

.layout--right > .layout__item {
  text-align: left;
}

.layout--center {
  text-align: center;
}

.layout--center > .layout__item {
  text-align: left;
}

/**
 * _objects.rules.scss
 */
.rule {
  margin-bottom: $base-spacing-unit - 1px;
  margin-bottom: ( ($base-spacing-unit - 1px) / $base-font-size) * 1rem;
  color: $swatch-four;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.rule--ornament {
  position: relative;
}

.rule--ornament:after {
  content: "\00A7";
  position: absolute;
  top:   0;
  right: 0;
  left:  0;
  line-height: 0;
  text-align: center;
}

.rule--ornament[data-ornament] {
  border-color: transparent;
}

.rule--ornament[data-ornament]:after {
  content: attr(data-ornament);
  letter-spacing: 0.75em;
}

/**
 * _objects.text-columns.scss
 */
.text-cols--2,
.text-cols--3,
.text-cols--4 {
  column-gap: $base-spacing-unit;
}

.text-cols--2 { column-count: 2; }
.text-cols--3 { column-count: 3; }
.text-cols--4 { column-count: 4; }

/**
 * _componenets.structure.scss
 */

.canvas {
  max-width: 63em; // + ($base-spacing-unit * 2)
  margin: 0 auto;
  position: relative;
  background-color: $swatch-two;
  transition: background-color .3s ease-in-out;
}

/*.modal-open .canvas {
  background-color: rgba(0,0,0,0.25);
}*/

.wrapper {
  /* max-width: 65em;
  margin: 0 auto;*/
  padding: 0 $base-spacing-unit;
}
.page-modal .wrapper{
  max-width: 63em; // + ($base-spacing-unit * 2)
  margin: 0 auto;
}

.focus {
  max-width: 33em; // + ($base-spacing-unit * 2)
  margin-right: auto;
  margin-left: auto;
  padding: 0 $base-spacing-unit;
}

.focus > .blockquote,
.focus > .gallery,
.focus > .figure {
  margin-left:  -3em; // - ($base-spacing-unit * 2)
  margin-right: -3em; // - ($base-spacing-unit * 2)
  position: relative;
}
@media screen and (min-width: 736px){
  .focus > .blockquote,
  .focus > .gallery,
  .focus > .figure {
    margin-left:  -8em; // - ($base-spacing-unit * 4)
    margin-right: -8em; // - ($base-spacing-unit * 4)
  }
}

/**
 * _components.center-content.scss
 */
.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);
}

/**
 * _components.gallery.scss
 */
.gallery {
  margin-bottom: $base-spacing-unit;
  @extend .cf;
  
  & > img {
    display: block;
    float: left;
    padding-right: 0.125em;
    margin-bottom: 0.125em;
  }
  
  &--two-up > img                     { width: 50%; }
  
  &--three-up > img                   { width: 33.333%; }
  
  &--four-up > img:first-of-type      { width: 100%; }
  &--four-up > img                    { width: 33.333%; }
  
  &--five-up > img:nth-of-type(-n+2)  { width: 50%; }  
  &--five-up > img                    { width: 33.333%; }
  
  &--six-up > img:nth-of-type(1)      { width: 100%; }
  &--six-up > img:nth-of-type(1n+2)   { width: 50%; }
  &--six-up > img:nth-of-type(n+4)    { width: 33.3333%; }
  
  &--seven-up > img:nth-of-type(1)    { width: 100%; }
  &--seven-up > img                   { width: 33.333%; }
  
  &--eight-up > img:nth-of-type(1)    { width: 100%; }
  &--eight-up > img:nth-of-type(1n+2) { width: 50%; }
  &--eight-up > img:nth-of-type(n+6)  { width: 33.3333%; }
}

/**
 * _components.truncate-text.scss
*/
.trunc {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trunc--two {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: $base-line-height * 2;
  white-space: normal;
  -webkit-line-clamp: 2;
}

.trunc--three {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: $base-line-height * 3;
  white-space: normal;
  -webkit-line-clamp: 3;
}

.trunc--four {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: $base-line-height * 4;
  white-space: normal;
 -webkit-line-clamp: 4;
}

/**
 * _components.ampersands.scss
 */
@font-face {
  font-family: Ampersand;
  src: local(Baskerville),
       local(Palatino),
       local(Didot),
       local("Hoefler Text");
  unicode-range: U+0026;
}

@font-face {
  font-family: Ampersand;
  src: local(Palatino);
  unicode-range: U+270C;
}

.amp {
  font-weight: normal;
  font-style: italic;
  font-family: Ampersand, Georgia, serif;
  line-height: 1;
}

/**
 * _components.notice.scss
 */
.notice {
  display: block;
  overflow: hidden;
  line-height: 3;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.notice--info {
  color: #2b74ad;
  background-color: #cfebf7;
  border-bottom-color: #9fd7ef;
}

.notice--success {
  color: #388c28;
  background-color: #cff7cf;
  border-bottom-color: #9fef9f;
}

.notice--error {
  color: #992533;
  background-color: #f7d0d5;
  border-bottom-color: #efa1ab;
}

.notice--warning {
  color: #c48f39;
  background-color: #faf7d2;
  border-bottom-color: #f5efa5;
}

/**
 * _theme.page-header.scss
 */
.page-header {
  background-color: $swatch-two;
}

@media screen and (min-width: 401px){
  .page-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: transparent;
    background: linear-gradient(to bottom,rgba(0,0,0,0.4) 0,rgba(0,0,0,0) 100%);
  }
}

.page-header--fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  border-bottom: 1px solid #1c2129;
}

/**
 * _theme.page-footer.scss
 */
.page-footer {
  text-align: center;
  background-color: $swatch-three;
}
@media screen and (min-width: 401px){
  .page-footer {
    line-height: 4;
    text-align: right;
  }
}

@media screen and (min-width: 401px){
  .legalese {
    text-align: left;
    float: left;
    clear: left;
  }
}

/**
 * _theme.page-logo.scss
 */
.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-image: url(http://stezycki.com/=/zeroculture/assets/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;
  }
}

/**
 * _theme.nav-menu.scss
 */
.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,
.menu-trigger-close {
  font-size: 0.75em;
  line-height: 5;
  font-weight: bold;
  font-family: $small-heading-font-family;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

a.nav-menu__link {
  color: #fff;
}

/**
 * _theme.masthead.scss
 */
.masthead {
  width: 100%;
  height: 380px;
  overflow: hidden;
  position: relative;
  margin-bottom: $base-spacing-unit;
}

@media screen and (min-width: 706px){
  .masthead {
    height: 420px;
  }
}

@media screen and (min-width: 820px){
  .masthead {
    height: 447px;
  }
}

.masthead--img:after {
  content: "";
  height: 70%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, 0 rgba(0,0,0,0), 100% rgba(0,0,0,0.4));
}

.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;
}

.masthead--img .masthead__hero {
  opacity: 0.65;
}

.masthead-title {
  text-align: center;
  color: #fff;
  text-shadow: rgba(0,0,0,0.5) 0 0 5px;
}

.masthead-meta {
  display: block;
  text-align: center;
  color: #ddd;
  color: rgba(255,255,255,0.85);
  text-shadow: rgba(0,0,0,0.5) 0 0 5px;
}

/**
 * _theme.modals.scss
 */
.modal-open {
  overflow: hidden;
}

.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 .6s ease-in-out, transform .6s ease-in-out;
  backface-visibility: hidden;
}

.modal--menu {
  background-color: $swatch-three;
  transform: translate3d(0,-100%,0);
}

#modal--menu:target,
.modal--menu--is-open {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0,0,0);
}

.modal-header,
.page-pagination {
  border-bottom: 1px solid;
  border-bottom-color: #222120;
  border-bottom-color: rgba(255,255,255,0.085);
}

@media screen and (min-width: 401px){
  .menu-trigger-close {
    float: right;
  }
}

/**
 * _theme.nav-block.scss
 */
.nav-block,.nav-block__list {
  list-style: none;
  margin: 0;
}

.nav-block__item {
  width: 100%;
  float: left;
  padding-right: 0.125em;
  margin-bottom: 0.125em;
}

@media screen and (min-width: 753px){
  .nav-block__item {
    width: 33.333%;
  }

  .nav-block__item:nth-of-type(1) {
    width: 100%;
  }
}

.nav-block__link {
  display: block;
  padding: 1.5em;
  font-weight: bold;
  text-align: center;
}

.nav-block__list > li > a {
  display: block;
  text-align: center;
}

/**
 * _theme.masonry.scss
 */
.layout[data-masonry],
.layout[data-masonry] .layout__item {
  transition-duration: 0.6s;
}

.layout[data-masonry] {
  margin-left: -0.125em;
  margin-bottom: $base-spacing-unit;
}

.layout[data-masonry] .layout__item {
  padding-left: 0.125em;
  display: block;
  float: left;
  transition-property: width, left, right, top;
}

.layout[data-masonry] .post {
  margin-bottom: 0.125em;
}

/**
 * _theme.posts
 */
.post {
  display: block;
  margin: 0;
  margin-bottom: $base-spacing-unit;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.post__thumb {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  transition: 1s;
}

.post:hover .post__thumb,
.hovered .post__thumb {
  transform: scale(1.02);
  opacity: 0.55;
}

.post__details {
  overflow: visible;
  margin: 0;
  padding: 0;
  position: absolute;
  left:   0;
  right:  0;
  bottom: 0;
}

.post__details:after {
  content: "";
  height: 70%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left:   0;
  pointer-events: none;
  background: linear-gradient(to bottom, 0 rgba(0,0,0,0), 100% rgba(0,0,0,0.4));
}

.post-title,
.post-excerpt {
  padding-right: $half-spacing-unit;
  padding-left:  $half-spacing-unit;
}

.post-title {
  margin: 0;
  white-space: normal;
}

.post-title > .heading {
  font-weight: 400;
  color: #fff;
  text-shadow: rgba(0,0,0,0.5) 0 0 5px;
}

.post-excerpt > p {
  margin-bottom: $half-spacing-unit;
  color: rgba(255,255,255,0.75);
}
.post-excerpt {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.post:hover .post-excerpt,
.hovered .post-excerpt{
  max-height: $base-line-height * 4;
  transition: max-height 0.3s ease-in-out;
}

/**
 * _theme.page-pagination.scss
 */
.page-pagination {
  background-color: $swatch-three;
}

.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.3333333333333em;
position:relative;
top:.1875em;
margin:0 1.5em;
}

.pager__item:last-child:after {
content:"";
margin:0;
}

/**
 * _trumps.widths.scss
 */
.one-whole {
width:100%;
}

.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths {
width:50%;
}

.one-third,.two-sixths,.three-ninths,.four-twelfths {
width:33.3333333%;
}

.two-thirds,.four-sixths,.six-ninths,.eight-twelfths {
width:66.6666666%;
}

.one-quarter,.two-eighths,.three-twelfths {
width:25%;
}

.three-quarters,.six-eighths,.nine-twelfths {
width:75%;
}

.one-fifth,.two-tenths {
width:20%;
}

.two-fifths,.four-tenths {
width:40%;
}

.three-fifths,.six-tenths {
width:60%;
}

.four-fifths,.eight-tenths {
width:80%;
}

.one-sixth,.two-twelfths {
width:16.6666666%;
}

.five-sixths,.ten-twelfths {
width:83.3333333%;
}

.one-eighth {
width:12.5%;
}

.three-eighths {
width:37.5%;
}

.five-eighths {
width:62.5%;
}

.seven-eighths {
width:87.5%;
}

.one-ninth {
width:11.1111111%;
}

.two-ninths {
width:22.2222222%;
}

.four-ninths {
width:44.4444444%;
}

.five-ninths {
width:55.5555555%;
}

.seven-ninths {
width:77.7777777%;
}

.eight-ninths {
width:88.8888888%;
}

.one-tenth {
width:10%;
}

.three-tenths {
width:30%;
}

.seven-tenths {
width:70%;
}

.nine-tenths {
width:90%;
}

.one-twelfth {
width:8.3333333%;
}

.five-twelfths {
width:41.6666666%;
}

.seven-twelfths {
width:58.3333333%;
}

.eleven-twelfths {
width:91.6666666%;
}

@media screen and (min-width: 240px){
  .bp-one--one-whole {
    width:100%;
  }

  .bp-one--one-half,.bp-one--two-quarters,.bp-one--three-sixths,.bp-one--four-eighths,.bp-one--five-tenths,.bp-one--six-twelfths {
    width:50%;
  }

  .bp-one--one-third,.bp-one--two-sixths,.bp-one--three-ninths,.bp-one--four-twelfths {
    width:33.3333333%;
  }

  .bp-one--two-thirds,.bp-one--four-sixths,.bp-one--six-ninths,.bp-one--eight-twelfths {
    width:66.6666666%;
  }

  .bp-one--one-quarter,.bp-one--two-eighths,.bp-one--three-twelfths {
    width:25%;
  }

  .bp-one--three-quarters,.bp-one--six-eighths,.bp-one--nine-twelfths {
    width:75%;
  }

  .bp-one--one-fifth,.bp-one--two-tenths {
    width:20%;
  }

  .bp-one--two-fifths,.bp-one--four-tenths {
    width:40%;
  }

  .bp-one--three-fifths,.bp-one--six-tenths {
    width:60%;
  }

  .bp-one--four-fifths,.bp-one--eight-tenths {
    width:80%;
  }

  .bp-one--one-sixth,.bp-one--two-twelfths {
    width:16.6666666%;
  }

  .bp-one--five-sixths,.bp-one--ten-twelfths {
    width:83.3333333%;
  }

  .bp-one--one-eighth {
    width:12.5%;
  }

.bp-one--three-eighths {
width:37.5%;
}

.bp-one--five-eighths {
width:62.5%;
}

.bp-one--seven-eighths {
width:87.5%;
}

.bp-one--one-ninth {
width:11.1111111%;
}

.bp-one--two-ninths {
width:22.2222222%;
}

.bp-one--four-ninths {
width:44.4444444%;
}

.bp-one--five-ninths {
width:55.5555555%;
}

.bp-one--seven-ninths {
width:77.7777777%;
}

.bp-one--eight-ninths {
width:88.8888888%;
}

.bp-one--one-tenth {
width:10%;
}

.bp-one--three-tenths {
width:30%;
}

.bp-one--seven-tenths {
width:70%;
}

.bp-one--nine-tenths {
width:90%;
}

.bp-one--one-twelfth {
width:8.3333333%;
}

.bp-one--five-twelfths {
width:41.6666666%;
}

.bp-one--seven-twelfths {
width:58.3333333%;
}

.bp-one--eleven-twelfths {
width:91.6666666%;
}
}

@media screen and (min-width: 355px){
.bp-two--one-whole {
width:100%;
}

.bp-two--one-half,.bp-two--two-quarters,.bp-two--three-sixths,.bp-two--four-eighths,.bp-two--five-tenths,.bp-two--six-twelfths {
width:50%;
}

.bp-two--one-third,.bp-two--two-sixths,.bp-two--three-ninths,.bp-two--four-twelfths {
width:33.3333333%;
}

.bp-two--two-thirds,.bp-two--four-sixths,.bp-two--six-ninths,.bp-two--eight-twelfths {
width:66.6666666%;
}

.bp-two--one-quarter,.bp-two--two-eighths,.bp-two--three-twelfths {
width:25%;
}

.bp-two--three-quarters,.bp-two--six-eighths,.bp-two--nine-twelfths {
width:75%;
}

.bp-two--one-fifth,.bp-two--two-tenths {
width:20%;
}

.bp-two--two-fifths,.bp-two--four-tenths {
width:40%;
}

.bp-two--three-fifths,.bp-two--six-tenths {
width:60%;
}

.bp-two--four-fifths,.bp-two--eight-tenths {
width:80%;
}

.bp-two--one-sixth,.bp-two--two-twelfths {
width:16.6666666%;
}

.bp-two--five-sixths,.bp-two--ten-twelfths {
width:83.3333333%;
}

.bp-two--one-eighth {
width:12.5%;
}

.bp-two--three-eighths {
width:37.5%;
}

.bp-two--five-eighths {
width:62.5%;
}

.bp-two--seven-eighths {
width:87.5%;
}

.bp-two--one-ninth {
width:11.1111111%;
}

.bp-two--two-ninths {
width:22.2222222%;
}

.bp-two--four-ninths {
width:44.4444444%;
}

.bp-two--five-ninths {
width:55.5555555%;
}

.bp-two--seven-ninths {
width:77.7777777%;
}

.bp-two--eight-ninths {
width:88.8888888%;
}

.bp-two--one-tenth {
width:10%;
}

.bp-two--three-tenths {
width:30%;
}

.bp-two--seven-tenths {
width:70%;
}

.bp-two--nine-tenths {
width:90%;
}

.bp-two--one-twelfth {
width:8.3333333%;
}

.bp-two--five-twelfths {
width:41.6666666%;
}

.bp-two--seven-twelfths {
width:58.3333333%;
}

.bp-two--eleven-twelfths {
width:91.6666666%;
}
}

@media screen and (min-width: 582px){
.bp-three--one-whole {
width:100%;
}

.bp-three--one-half,.bp-three--two-quarters,.bp-three--three-sixths,.bp-three--four-eighths,.bp-three--five-tenths,.bp-three--six-twelfths {
width:50%;
}

.bp-three--one-third,.bp-three--two-sixths,.bp-three--three-ninths,.bp-three--four-twelfths {
width:33.3333333%;
}

.bp-three--two-thirds,.bp-three--four-sixths,.bp-three--six-ninths,.bp-three--eight-twelfths {
width:66.6666666%;
}

.bp-three--one-quarter,.bp-three--two-eighths,.bp-three--three-twelfths {
width:25%;
}

.bp-three--three-quarters,.bp-three--six-eighths,.bp-three--nine-twelfths {
width:75%;
}

.bp-three--one-fifth,.bp-three--two-tenths {
width:20%;
}

.bp-three--two-fifths,.bp-three--four-tenths {
width:40%;
}

.bp-three--three-fifths,.bp-three--six-tenths {
width:60%;
}

.bp-three--four-fifths,.bp-three--eight-tenths {
width:80%;
}

.bp-three--one-sixth,.bp-three--two-twelfths {
width:16.6666666%;
}

.bp-three--five-sixths,.bp-three--ten-twelfths {
width:83.3333333%;
}

.bp-three--one-eighth {
width:12.5%;
}

.bp-three--three-eighths {
width:37.5%;
}

.bp-three--five-eighths {
width:62.5%;
}

.bp-three--seven-eighths {
width:87.5%;
}

.bp-three--one-ninth {
width:11.1111111%;
}

.bp-three--two-ninths {
width:22.2222222%;
}

.bp-three--four-ninths {
width:44.4444444%;
}

.bp-three--five-ninths {
width:55.5555555%;
}

.bp-three--seven-ninths {
width:77.7777777%;
}

.bp-three--eight-ninths {
width:88.8888888%;
}

.bp-three--one-tenth {
width:10%;
}

.bp-three--three-tenths {
width:30%;
}

.bp-three--seven-tenths {
width:70%;
}

.bp-three--nine-tenths {
width:90%;
}

.bp-three--one-twelfth {
width:8.3333333%;
}

.bp-three--five-twelfths {
width:41.6666666%;
}

.bp-three--seven-twelfths {
width:58.3333333%;
}

.bp-three--eleven-twelfths {
width:91.6666666%;
}
}

.accessibility,.is-hidden {
position:absolute;
left:-9999px;
visibility:hidden;
}

.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:.1em;
}

.t--smallcaps {
font-variant:small-caps;
text-transform:lowercase;
letter-spacing:.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;
}

.swatch-list{
  margin-bottom:1.5em;
}

.swatch {
  height:0;
  padding-bottom:56.65%;
}
.swatch-one   {background-color:$swatch-one}
.swatch-two   {background-color:$swatch-two}
.swatch-three {background-color:$swatch-three}
.swatch-four  {background-color:$swatch-four}
.swatch-five  {background-color:$swatch-five}

Zero-Culture.markdown

Zero Culture

This is a pattern library of sorts for Zero Culture. Built with SASS and OOCSS in mind, to keep ultra easy to maintain.

A Pen by Mike Stezycki on CodePen.

License.