Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/Zero-Culture.markdown

Created March 4, 2014 14:04
Show Gist options
  • Save mr-stezz/9347041 to your computer and use it in GitHub Desktop.
Save mr-stezz/9347041 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Mike Stezycki.
Raw
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>
Raw
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");
})
});
Raw
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}
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment