@import "compass/css3";
/* VARIABLES *
* -------------------------- */
/* COLORS & BACKGROUNDS */
$white: white;
$green: #aed2cc;
$tan: #f1e0c5;
$blue: #008fbe;
$green-shadow-rgba: rgba(10,8,6,0.75); /* dark muddy grey */
$dropshadow-rgba: rgba(0,0,0,0.35);
$top-bg: $white;
$body-bg: $top-bg; /* differentiate from header: #eaeaea */
$header-bg: $green;
$main-bg: $tan;
$well-header-rgba: $green-shadow-rgba;
$link-color: $blue;
$link-color-hover: darken($link-color, 15%);
$nav-color: $link-color;
$nav-color-hover: darken($nav-color, 15%);
$nav-big-btn-bg: desaturate(lighten($nav-color, 15%), 25%);
$nav-big-btn-bg-hover: lighten($nav-color, 20%);
$nav-bg-hover: lighten($nav-color, 30%);
/* Facebook (2013) */
$facebook-bg: rgb(60, 90, 152);
/* Twitter (2013) */
$twitter-bg: rgb(44, 170, 225);
$header-bg-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/bg-map-bluegreen.jpg);
$main-bg-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/bg-wood-lighter.jpg);
/* SIZES */
/* prefer calculations here and calculated variables in CSS below */
/* Set left-column-width, derive logo size below */
$hdr-side-width: 270px;
$hdr-big-btn-width: 72px; /* SIGN UP */
/* to see the menu flow to more than 1 line, change
$min-width here to something smaller: e.g., * 1.5; */
$min-width: $hdr-side-width * 2;
$max-width: $hdr-side-width * 3;
$padding-small: 10px;
/* declared for flexibility */
$padding-to-window: $padding-small;
$padding-to-top: $padding-small;
$padding-hdr: $padding-small;
$hdr-big-btn-margin: floor(.75 * $padding-hdr); /* round down */
$border-radius: 8px; /* big-btn radius */
/* larger radius to flow around big button */
$border-radius-hdr: ceil(1.25 * $border-radius); /* round up */
$corner-border-width: $border-radius-hdr;
$corner-border-size: $border-radius-hdr * 2;
$shadow-size: 20px;
$shadow-size-deep: ceil(1.5 * $shadow-size);
$hdr-menu-item-height: 18px;
$hdr-menu-item-padding-top: $hdr-big-btn-margin;
$hdr-menu-item-padding-bottom: ceil(0.5 * $hdr-big-btn-margin);
$hdr-menu-height: $hdr-menu-item-padding-top + $hdr-menu-item-height + $hdr-menu-item-padding-bottom;
$hdr-menu-item-height: $hdr-menu-height - $padding-hdr;
$hdr-logo-width: $hdr-side-width - $hdr-big-btn-width - 2 * $hdr-big-btn-margin;
$hdr-logo-height: ceil(0.75 * $hdr-logo-width); /* 4x3 */
$hdr-logo-margin-bottom: floor(0.5 * $hdr-menu-height);
/* height of taller left side "overhang" without padding-to-top */
$hdr-side-height: $hdr-logo-height + $hdr-logo-margin-bottom;
$hdr-side-total-height: $hdr-side-height + $padding-to-top;
$hdr-total-height: $hdr-side-total-height + $shadow-size-deep;
/* extra padding-top to make room for column-1 header "overhang" */
$column-1-padding-top: $hdr-side-total-height + floor(.5 *$shadow-size);
/* shorter green bg across top */
/* can specify or calculate: e.g., half the logo height */
$hdr-topwell-height: ceil(0.5 * $hdr-logo-height);
/* height of shorter right side -
needed for .header-bg and .main padding-top */
$hdr-top-height: $padding-to-top + $hdr-topwell-height + $hdr-menu-height;
/* size and position of horizontal background "patch"
extending background into negative space by size of border-radius-hdr */
$hdr-logo-patch-height: $shadow-size + $border-radius-hdr;
$hdr-logo-patch-width: $hdr-logo-width + $border-radius-hdr;
$hdr-logo-patch-top: $padding-to-top + $hdr-topwell-height - $shadow-size;
$hdr-logo-patch-background-position: -1*($hdr-topwell-height - $shadow-size);
$hdr-big-btn-top: $hdr-topwell-height + $hdr-big-btn-margin;
$hdr-big-btn-left: $hdr-logo-width + $hdr-big-btn-margin;
$hdr-big-btn-height: $hdr-side-height - $hdr-topwell-height - $hdr-big-btn-margin - $hdr-logo-margin-bottom;
$hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;
/* MIXINS
* -------------------------- */
@mixin dropshadow-header {
-webkit-box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba;
-moz-box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba;
box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba; }
@mixin well {
-webkit-box-shadow: inset 0 0 $shadow-size $dropshadow-rgba;
-moz-box-shadow: inset 0 0 $shadow-size $dropshadow-rgba;
box-shadow: inset 0 0 $shadow-size $dropshadow-rgba; }
@mixin well-left {
-webkit-box-shadow: inset $shadow-size -1*$shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba;
-moz-box-shadow: inset $shadow-size -1*$shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba;
box-shadow: inset $shadow-size -1*$shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba; }
@mixin well-right {
-webkit-box-shadow: inset -1*$shadow-size $shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba;
-moz-box-shadow: inset -1*$shadow-size $shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba;
box-shadow: inset -1*$shadow-size $shadow-size $shadow-size -1*$shadow-size $dropshadow-rgba; }
@mixin well-header {
-webkit-box-shadow: inset 0 0 $shadow-size $well-header-rgba;
-moz-box-shadow: inset 0 0 $shadow-size $well-header-rgba;
box-shadow: inset 0 0 $shadow-size $well-header-rgba; }
/* used in "patch" to match inset box-shadow */
@mixin well-header-outset {
/* "opacify" and "transparentize" value between 0 and 1 -
.20 more opaque for outset box-shadow to match inset (webkit, by my eye anyway) */
$deepen-amount: .20;
-webkit-box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount);
-moz-box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount);
box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount); }
/* used in "patch" to add box-shadow on left side only */
@mixin well-header-left {
-webkit-box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba;
-moz-box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba;
box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba; }
/* FONT PATH
* -------------------------- */
/* icon font for Twitter & Facebook */
@font-face {
font-family: 'FontAwesome';
src: url('https://s.cdpn.io/23379/fontawesome-webfont.eot?v=3.2.1');
src: url('https://s.cdpn.io/23379/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('https://s.cdpn.io/23379/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('https://s.cdpn.io/23379/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('https://s.cdpn.io/23379/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
/* CSS
* -------------------------- */
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*:before {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
html {
overflow-y: scroll;
/* weird to scroll content horizontally with fixed header */
overflow-x: hidden;
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
/* change variable if you want to differentiate */
background: $body-bg; /* white */
}
/* can't assume only one "header" element in HTML5 */
.header-top {
/* pin to top - 0 is default */
position: fixed;
/* raise z-index to cover, higher here to allow
a range of z-indexes in the scrolling content */
z-index: 100;
/* height overflows */
width: 100%;
}
/* match these backgrounds to blend */
/* OPTIONAL, extend header bg color across top */
.header-top,
/* OPTIONAL extra div, extend taller header bg left: */
.header-bg:before,
.header-wrap,
/* padding-to-window strip on taller left side */
.header-wrap:before,
/* left-side overhang */
.header-content:before {
background: $top-bg; /* white */
}
/* match widths, margins & padding */
.page-wrap, .header-wrap {
width: 90%;
min-width: $min-width;
max-width: $max-width;
/* center content */
margin: 0 auto;
/* separate content from window edge --
padding-top and -bottom specified below.
Here (not on body) to work with fixed header */
padding: 0 $padding-to-window;
}
/* padding-left and -right added above */
.header-wrap {
/* child elements abaolute */
position: relative;
/* a "min-height" for shorter right side */
height: $hdr-top-height;
}
/* extend bg into padding-to-window gap on taller left side -
not needed if extending bg using optional .header-bg div */
.header-wrap:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
/* extra 2px width to cover tiny gap when iOS zooms */
width: $padding-to-window + 2px;
height: $hdr-side-total-height;
/* OPTIONAL, extend padding-to-window "frame" all the way down -
may want to do the same on right with an :after pseudo-element:
height: 100000px; */
}
/* OPTIONAL, if we want to differentiate header and body -
.header-bg:before extends taller bg all the way left */
.header-bg {
/* child elements absolute */
position: relative;
/* tuck behind header framing */
z-index: -1;
width: 100%;
}
/* OPTIONAL, extends bg to left on taller left side */
.header-bg:before {
content: "";
/* remove from layout */
position: absolute;
/* start from the right and extend left */
right: 100%;
/* height of shorter right side */
height: $hdr-side-total-height;
/* crazy wide - absolutely positioned
to start at left edge and go left */
width: 100000px;
}
.header-content {
/* child elements absolute */
position: relative;
height: $hdr-total-height;
width: 100%;
padding-top: $padding-to-top;
/* crop shadows at the sides and top */
overflow: hidden; }
/* add taller left-side "overhang" bg + shadow */
.header-content:before {
content: "";
/* remove from layout */
position: absolute;
/* tuck behind .header-wrap and .nav-main ul
so right-edge shadow is covered up */
z-index: -1;
height: $hdr-side-height;
width: $hdr-side-width;
padding: 0;
border-radius: 0 0 $border-radius-hdr 0;
@include dropshadow-header;
}
/* INVERTED ROUNDED CORNER under overhang L */
.header-content:after {
content: "";
display: block;
position: absolute;
/* tuck behind header bg */
z-index: -1;
height: $border-radius-hdr * 2;
width: $border-radius-hdr * 2;
border-top: $border-radius-hdr solid $top-bg;
border-left: $border-radius-hdr solid $top-bg;
top: $hdr-side-total-height - $border-radius-hdr;
left: -1*$border-radius-hdr;
/* top left */
border-radius: $border-radius-hdr * 2 0 0 0;
}
/* match backgrounds to blend */
.header-logo, .header-social {
background-color: $header-bg;
background-image: $header-bg-image;
@include well-header;
}
.header-logo {
position: absolute;
/* cover .header-content-social */
/* z-index: 1; */
height: $hdr-logo-height;
width: $hdr-logo-width;
border-radius: $border-radius-hdr 0 $border-radius-hdr $border-radius-hdr;
}
.header-logo h1, .header-logo h2 {
position: relative;
/* overlap .header-logo-patch */
z-index: 2;
text-shadow: 0 2px 1px rgba(255,255,255, 0.3),
0 0 10px rgba(204,232,229, 0.5)
}
.header-logo h1 {
padding: 10px 0 0 18px;
font-size: 36px;
}
.header-logo a {
color: inherit !important;
text-decoration: none;
}
.header-logo h2 {
margin-top: -2px;
padding: 0 0 0 18px;
font-size: 24px;
}
/* "patch" to cover shadow "seam" of overlapping shapes -
can't nest pseudo-elements, so need extra div here -
overflow:hidden to crop shadow of rounded corner overlay (below) */
.header-logo-patch {
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: $hdr-logo-patch-top;
height: $hdr-logo-patch-height;
width: $hdr-logo-patch-width;
background-color: $header-bg;
background-image: $header-bg-image;
background-position: 0 $hdr-logo-patch-background-position;
background-repeat: no-repeat;
@include well-header-left;
}
/* rounded corner overlay (with outset shadow to match "well") */
.header-logo-patch:after {
content: "";
display: block;
position: absolute;
bottom: -$border-radius-hdr;
right: -$border-radius-hdr;
height: $border-radius-hdr * 2;
width: $border-radius-hdr * 2;
background-color: $top-bg;
border-radius: $border-radius-hdr 0 0 0;
@include well-header-outset;
}
.header-social {
position: absolute;
top: $padding-to-top;
height: $hdr-topwell-height;
width: 100%;
border-radius: $border-radius-hdr $border-radius-hdr $border-radius-hdr 0;
}
/* NAV */
.horizontal-nav ul, .horizontal-nav li {
list-style: none;
margin: 0;
padding: 0;
}
.horizontal-nav li {
float: left;
}
.horizontal-nav li a {
display: block;
text-decoration: none;
}
.nav-main {
/* child elements absolute */
position: relative;
padding-left: $hdr-side-width;
padding-top: $hdr-topwell-height + $hdr-menu-item-padding-top;
padding-bottom: 0;
background: none;
}
/* INVERTED ROUNDED CORNER under menu - right */
.nav-main:after {
content: "";
display: block;
position: absolute;
/* tuck behind nav-main a:hover */
z-index: -1;
height: $border-radius-hdr * 2;
width: $border-radius-hdr * 2;
border-top: $border-radius-hdr solid $top-bg;
border-right: $border-radius-hdr solid $top-bg;
bottom: -1*$border-radius-hdr;
right: -1*$border-radius-hdr;
/* top right */
border-radius: 0 $border-radius-hdr * 2 0 0;
}
.nav-main ul {
padding: 0 0 $hdr-menu-item-padding-bottom 2px; /* nudge links right */
background: $top-bg;
/* clear floats without extra div or
using pseudo-elements needed below -
cannot use with position:relative */
overflow: auto;
overflow-x: hidden;
}
/* dropshadow tracks with menu height if links exceed 1 line */
.nav-main ul:before {
content: "";
display: block;
position: absolute;
/* stack shadow behind "overhang" */
z-index: -2;
/* same size as parent */
bottom: 0;
top: 0;
left: 0;
right: 0;
background: $top-bg;
@include dropshadow-header;
}
/* INVERTED ROUNDED CORNER under menu - left */
.nav-main ul:after {
content: "";
display: block;
position: absolute;
/* tuck behind nav-main a:hover */
z-index: -1;
height: $border-radius-hdr * 2;
width: $border-radius-hdr * 2;
border-top: $border-radius-hdr solid $top-bg;
border-left: $border-radius-hdr solid $top-bg;
bottom: -1*$border-radius-hdr;
left: $hdr-side-width - $border-radius-hdr;
/* top left */
border-radius: $border-radius-hdr * 2 0 0 0;
}
.nav-main a,
.nav-main:visited {
display: block;
height: $hdr-menu-item-height;
padding: 0 .5em;
line-height: $hdr-menu-item-height;
color: $nav-color;
font-size: 0.8125em;
text-transform: uppercase;
border-radius: $border-radius;
}
.nav-main a:active,
.nav-main a:focus,
.nav-main a:hover {
color: $nav-color-hover;
background: $nav-bg-hover;
}
/* nudge down 1px for uppercase vertical centering */
.nav-main a span {
display: block;
position: relative;
top: 1px;
}
a.big-btn, a.big-btn:visited {
position: absolute;
z-index: 1;
height: $hdr-big-btn-height;
width: $hdr-big-btn-width;
top: $hdr-big-btn-top;
left: $hdr-big-btn-left;
background: $nav-big-btn-bg;
padding: 0 6px;
color: $white !important;
text-align: center;
line-height: 1;
font-size: 1em;
font-weight: 200;
border-radius: $border-radius;
@include well;
transition: background .2s ease;
}
a.big-btn:focus,
a.big-btn:hover {
background: $nav-big-btn-bg-hover;
}
a.big-btn:active {
background: $nav-big-btn-bg;
/* color snaps back on button press */
transition: none;
}
a.big-btn span {
display: table-cell;
vertical-align: middle;
/* undo menu item nudging */
top: 0;
height: $hdr-big-btn-height;
width: $hdr-big-btn-width;
}
.nav-social {
/* overlap .header-logo-patch */
position: relative;
z-index: 1;
float: right;
padding-right: .875em;
}
.icon-twitter-sign,
.icon-twitter-sign:visited,
.icon-facebook-sign,
.icon-facebook-sign:visited {
position: relative;
opacity: 0.75;
text-shadow: 0 2px 1px rgba(255,255,255, 0.4),
0 0 10px rgba(204,232,229, 0.5);
}
.icon-twitter-sign:focus,
.icon-facebook-sign:focus,
.icon-twitter-sign:hover,
.icon-facebook-sign:hover{
top: -1px;
opacity: 1;
text-shadow: 0 2px 1px rgba(0,0,0, 0.2);
}
.icon-twitter-sign:active,
.icon-facebook-sign:active {
top: 0;
opacity: 1;
text-shadow: none;
}
.icon-twitter-sign:before, .icon-facebook-sign:before {
display: block;
padding-left: .25em;
font-family: 'FontAwesome';
font-size: 44px;
/* vertically align middle */
line-height: $hdr-topwell-height;
}
.icon-twitter-sign:before {
content: "\f081";
color: $twitter-bg;
}
.icon-facebook-sign:before {
content: "\f082";
color: $facebook-bg;
}
/* MAIN */
.main {
background-color: $tan;
background-image: $main-bg-image;
/* padding-top = height of header on right (column-2) */
padding: $hdr-top-height 2em 2em 2em;
}
/* extra padding-top for header "overhang" */
.column-1 {
padding: $hdr-side-total-height + $padding-small 2em 2em 2em;
}
/* elements that reach the edges of .main need to fall
under edge shadow to maintain "cut-out" illusion */
.well-left, well-right, .well-sides {
position: relative;
overflow: hidden;
}
/* corrected from article - left and right needed pseudos */
.well-left:before,
.well-right:after,
.well-sides:before,
.well-sides:after {
content: "";
display: block;
position: absolute;
/* higher than any z-index in .main, lower than header */
z-index: 99;
top: -1*$shadow-size;
height: 120%;
width: $shadow-size;
background: transparent;
}
.well-left:before, .well-sides:before {
left: 0;
@include well-left;
}
.well-right:after, .well-sides:after {
right: 0;
@include well-right;
}
/* UTILITY */
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden, .screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .screen-reader-text.focusable:active,
.visuallyhidden.focusable:focus, .screen-reader-text.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/* MEDIA QUERIES */
/* Mobile example - e.g., iPhone5 landscape width = 568px */
@media only screen
and (max-device-width : 599px) {
.header-top {
/* unpin header so it scrolls with content */
position: absolute;
}
/* even if you keep the header fixed, you might
change width to 100% for better mobile zooming */
.page-wrap, .header-wrap {
width: 100%;
}
}
/* A full-on responsive layout would reconfigure the
layout - this is just a gesture as an example */
/* lose countoured bottom at smaller width -
when menu items overflow 2 lines */
@media only screen
and (max-width : 512px) {
.nav-main ul {
height: $hdr-side-height - $hdr-topwell-height - $hdr-menu-item-padding-top;
background: none; }
/* taller left-side "tab" bg + shadow */
.header-content:before,
/* rounded corner under menu - left */
.nav-main ul:after {
display: none;
}
}
@media only screen
and (max-width : 320px) {
.header-top {
/* unpin header so it scrolls with content */
position: absolute; }
/* even if you keep the header fixed, you might
change width to 100% for better mobile zooming */
.page-wrap, .header-wrap {
width: 100%; }
}
/* Presentational CSS Below */
/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}
body {
line-height: 1.3125; }
/* ensure there's enough to scroll */
.main { padding-bottom: 30em; }
figure {
margin: 1.5em auto 1em;
padding: 8px;
background: #eaeaea;
text-align: center; }
figcaption {
margin: .5em 0;
color: #999;
text-align: center;
font-size: 85%;
font-style: italic; }
h1 {margin: 0; line-height: 1.0625;}
h2 {color: #777; font-weight:300;}
header h2 {margin:0; color: #666;}
a, a:visited { color: $blue; }
a:active, a:focus, a:hover { color: darken($blue, 15%); }
code {
background: lightyellow;
padding: 1px .25em;
font-family: Menlo, Monaco, monospace;
font-size: 90%;}
pre[rel]{
position: relative;
padding: .875em 0 0; }
pre[rel]:before{
content:attr(rel);
color:white;
position:absolute;
top:0;
left:0;
width:100%;
background:#e18728;
font-family: sans-serif;
padding:5px 0;
text-indent:15px; }
pre code {
display: block; padding: 1.5em; }
pre code i {
color: #bba;
font-style: italic;
font-weight: 200; }
pre code i span {
color: #2cb; }
.nowrap, nobreak, .nobr { white-space: nowrap; }
!
