Couture Uomo Draft

Another interface done in JSFiddle. What... I have a thing for the four-pane setup. It's kind of rad.

by Imperative

HTML

<script src="http://imperativeideas.com/fiddle/modernizr.foundation.js"></script>
<link rel="stylesheet" href="http://imperativeideas.com/fiddle/yui-reset.min.css">
<script src="http://imperativeideas.com/js/jquery.mousewheel.js"></script>
<script src="http://imperativeideas.com/fiddle/bigvideo.js"></script>
<script src="http://imperativeideas.com/fiddle/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://imperativeideas.com/fiddle/foundation.js"></script>
<script src="http://imperativeideas.com/fiddle/foundation.reveal.js"></script>
<div id="wrap">
    <nav class="row fixedmenu">
        <section class="four mobile-four columns company">
             <h2><a href="#">Studio Oss</a></h2>

        </section>
        <section id="navigation" class="eight mobile-four columns navigation">
            <ul>
                <li><a href="#">About</a>

                </li>
                <li><a href="#">Gallery</a>

                </li>
                <li><a href="#">Press</a>

                </li>
                
                <li><a href="#" data-reveal-id="contactme">Contact</a>

                </li>
            </ul>
        </section>
    </nav>
    <section id="main">
        <div class="landing cursor">
            <!-- Content Area for Landing Page -->
        </div>
        <div class="below">
            <div id="goabove" class="uparrow"></div>
            <div class="row">
                <header class="welcome twelve columns">
                     <h2 class="title">Welcome to Studio Oss</h2>

                </header>
                <article class="introduction row">
                    <div class="three columns hide-for-small">
                        <img src="http://clients.imperativeideas.com/TJ/workphoto.jpg" />
                    </div>
                    <div class="nine columns">
                        <p>Hey TJ, ignore this text &amp; image, I'll replace it with something of...

CSS

@import url("http://imperativeideas.com/fiddle/yui-reset.min.css");
 @import url("http://imperativeideas.com/fiddle/foundation.min.css");
 @import url("http://imperativeideas.com/fiddle/app.css");
 @import url("http://imperativeideas.com/fiddle/meanmenu.css");
 @import url("http://imperativeideas.com/fiddle/video/bigvideo.css");

/* Top Level Declarations */
 html, body {
    height: 100%;
}
/* Font Declarations */
 @font-face {
    font-family:'NeutraText';
    src: url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.eot');
    src: local('☺'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.woff') format('woff'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.ttf') format('truetype'), url('http://imperativeideas.com/fiddle/fonts/neutra/NeutraTextTF-Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'Scriptina';
    src: url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.eot');
    src: url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.eot?#iefix') format('embedded-opentype'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.woff') format('woff'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.ttf') format('truetype'), url('http://imperativeideas.com/fiddle/fonts/scriptina/scriptina_pro-webfont.svg#scriptina_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Fixed Top Bar */
 .fixedmenu {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgb(9, 9, 9);
    color: rgb(235, 235, 235);
    overflow: hidden;
    border-bottom: 1px solid rgb(222, 222, 222);
    z-index: 10;
}
section.company, #section.company {
    float:left;
}
.company h2 {
    font-family: NeutraText, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    color: rgb(235, 235, 235);
 ...

JavaScript

// ======= Document Ready Binds

// Init Responsive Menu


$(function () {
    getvertical(); // Get the height of the window, minus the header
    setvertical(); // Set vertical heights and apply styles
    checkscreen(); // Set data flag to mobile or standard resolution (we will use this later)


    // If hovered over the landing area, mousewheel skips to .below
    $('.landing').mousewheel(function (event, delta) {
        if (delta > 0) {

            //do nothing
        } else if (delta < 0) {
            gobelow();
        }
    });

    // Likewise, if landing is clicked, let's scroll down
    $('.landing').click(function () {
        gobelow();
    });


    // Interaction Binds
    $('#gobelow').click(gobelow);
    $('#goabove').click(goabove);
    
    // Set up video with an image fallback for mobile

    var BV = new $.BigVideo();
    BV.init();
    if (Modernizr.touch) {
        BV.show('http://imperativeideas.com/fiddle/video/gloryhole.jpg');
    } else {
        BV.show('http://imperativeideas.com/fiddle/video/gloryhole.mp4', {
            ambient: true
        });
    }

});

// ======= Run on resize events

$(window).resize(function () {
    waitForFinalEvent(function () {
        getvertical(); // Recalculate document sizes
        setvertical(); // Resize main content areas
        checkscreen(); // Set data flag to mobile or standard resolution
    }, 800, "resize"); // Resize timout is 800ms, UID is resize
});

// ======= Reusable Functions

// We need a resize timer function (http://bit.ly/fDW5rg)
var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

// Get the height of the landing area
function getvertical() {
    landingHeight =...