mturnwall

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

$hoverOffset: -36px;
$socialIconsSprite: (
    email: (blur: 0 0, focus: 0 $hoverOffset),
    facebook: (blur: -36px 0, focus: -36px $hoverOffset),
    twitter: (blur: -72px 0, focus: -72px $hoverOffset),

mturnwall

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

// When compiling with Compass (v0.12.6) I get the following error
// error workspace/submoduled-assets/styles/styleguide.scss 
// (Line 2 of workspace/submoduled-assets/styles/modules/_node-homepage-rotator.scss: 
// Invalid CSS after "    template1": expected ")", was ": (svg: "vertic...")
$homepageShapes: (

mturnwall

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

.firstClass {
  border: 1px solid red;
}
.secondClass {
  @extend .firstClass;

mturnwall

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$zIndex: (
	scroller: 100,
	dropdown: 200,
	absolute: 300,
	fixed: 4000,

mturnwall

header .heroImage {
  background: url("/images/hero.jpg") no-repeat 0 0;
  position: absolute;
  z-index: 3000;
}

header .siteLogo {
  position: absolute;
  z-index: 3100;
}

mturnwall

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$social-icons: 
  (facebook, \e600, #fff, b, c),
  (twitter, \e601),
  (pinterest, \e602),
  (instagram, \e603),

mturnwall

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

@import "compass";
@mixin dots($total) {
	@for $i from 1 through $total {
		.s#{$i} {
			@include fadeDots($total, $i);

mturnwall

<div id="wrapper">
  <a href="#" class="thirtyDay"><strong><em>30 Day</em>Money Back Guarantee</strong></a>
  <a href="#" class="cta">Get a Number &amp; Sign Up &raquo;</a>
</div>

mturnwall

Dot Navigation

Using some advanced SASS to calculate styles so that the transparency of the dots increases as the number of dots gets further away from the "active" dot.

A Pen by Michael Turnwall on CodePen.

License.

mturnwall

var deviceIs = (function () {
    var userAgent = navigator.userAgent,
        device = {
            type: (userAgent.match(/iphone|android|ipad/i)) ? userAgent.match(/iphone|android|ipad/i)[0] : false,
            fullVersion: false,
            majorVersion: false
        };
    if (device.type) {
        device.fullVersion = userAgent.match(/(OS|android)\s+([\d(\_|\.)]+)/i)[0].replace(/_/g,'.');
        device.majorVersion = device.fullVersion.match(/[0-9]/)[0];