Trove

by Kyle Hand

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<article class="wrap content">
    <section class="clearfix relative head">
        <header>	<a class="left" href="http://www.trovegame.com" title="Trove"><img src="//webcdn.triongames.com/trove/img/logo/logo.png" height="96" width="305" alt="Trove" /></a>

            <ul class="right main-nav">
                <li><a href="/">Game</a>
                </li>
                <li><a href="/blog/">Blog</a>
                </li>
                <li><a href="/support-trove/">Support Trove</a>
                </li>
            </ul>
        </header>
    </section>
    <section class="reg-form-left half left first">
        <p>Welcome to Trove<sup>&trade;</sup>, an open-ended voxel adventure through countless realms filled with quests, chests, and enemies great and small.</p>
        <p class="no-320">Explore and create your way through fully buildable/destructible worlds where your next discovery is always around the corner, under the surface, or over the crafting table.</p>
        <p class="no-320">We&rsquo;re launching Trove in alpha so we can develop openly and collaboratively with you earlier than ever before.</p>
        <p class="no-320">Your adventure begins with one click. Sign up for alpha. We can&#8217;t wait to see what you'll create!</p>
        <p class="latest-news-link"><a href="/blog/">Read the Latest News</a>

        </p><a class="support-btn desktop" href="/support-trove/">Support Trove</a>

        <div id="mobile-vid-cont" class="mobile">	<a class="fancybox fancybox.iframe relative" href="http://www.youtube.com/embed/bB0utUwgweI?wmode=opaque" target="_blank">
				<span class="video-play absolute"></span>
				<img src="//webcdn.triongames.com/trove/img/media/trove-vid-01.jpg" width="410" height="231" alt="" />
			</a>
        </div>
        <div id="slider-container" class="relative desktop">
       ...

CSS

/*
Theme Name: Trove
Author: Trion Worlds Web Dev
Author URI: http://trionworlds.com/
Description: The Trove theme
Version: 1.0

Version 1.0 - Based on eon_2013 created by Kyle Hand, Joshua Morris, Jeff Sawyer.
Version 1.1 - Added support the game template
Version 2.0 - Added support the blog posts
*/

/*
 * HTML5 Boilerplate
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 * Detailed information about this CSS: h5bp.com/css
 *
 Normalize */
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display:block
}
audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}
audio:not([controls]) {
    display: none
}
[hidden] {
    display: none
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
html, button, input, select, textarea {
    font-family: sans-serif;
    color: #222
}
body {
    margin: 0;
    font-size: 1em;
    line-height: 1.4
}
::-moz-selection {
    background: #3DB7B9;
    color: #FFF;
    text-shadow:none
}
::selection {
    background: #3DB7B9;
    color: #FFF;
    text-shadow:none
}
a {
    color:#ffff10;
    text-decoration:none;
}
a:hover, a:visited {
    text-decoration: underline
}
a:focus {
    outline:thin dotted
}
a:hover, a:active {
    outline: 0
}
abbr[title] {
    border-bottom: 1px dotted
}
b, strong {
    font-weight:bold
}
blockquote {
    margin:1em 40px
}
dfn {
    font-style:italic
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin:1em 0;
    padding:0
}
ins {
    background: #ff9;
    color: #000;
    text-decoration: none
}
mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold
}
pre, code, kbd, samp {
    font-family: monospace, serif;
    _font-family:'courier new', monospace;
   ...

JavaScript

// Registration slide show
jQuery('.cycle-slideshow').cycle({
    timeout: 3000,
    speed: 600,
    manualSpeed: 100,
    slides: '> a',
    pager: ".cycle-pager",
    next: ".cycle-next",
    prev: ".cycle-previous",
    pagerTemplate: "",
    pauseOnHover: true
}).cycle('pause');

// Ligthbox
jQuery(".fancybox").fancybox({
    maxWidth: 960,
    maxHeight: 600,
    width: '70%',
    height: '49%',
    closeBtn: 'true',
    padding: 0,
    openEffect: 'none',
    closeEffect: 'none'
});