blog/_src/assets/less/scaffolding.less

html {
	-webkit-tap-highlight-color: fade(@link-color, 20%);
	tap-highlight-color: fade(@link-color, 20%);
}

body {
	background-color: @body-bg;
}

.document { position: relative }


//
// Topbar
//
.topbar {
    .clearfix;
    background: @body-bg;
    border-bottom: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%);
    
    .row { 
        margin-top: @line-height-computed/2;
        margin-bottom: @line-height-computed/2;
        position: relative;
    }
}


//
// Banner
//

.banner {
	float: left;
    
    @media @breakpoint2 {
        margin-left: -54px
    }
    
	.banner-title { 
        margin-top: .1em;
        margin-bottom: 0;
		// display toned down logo
		// by default
		.logo;
	}
	
	.banner-logo {
		.ir;
		
		// repeat logo
		// but display hover version
		.logo;
		background-position: left bottom;

		// hide by default
		opacity: 0;
		// show smooooothly on hover
		&:hover { opacity: 1 }
		&:active { top: 0 }
	}
}

// Logo
/////////////////////////////////////
.logo {
	display: block;
	background-image: data-uri('../img/logo.png');
	background-repeat: no-repeat;
	background-position: left top;
    width: 47px;
	height: 31px;
    
    @media @breakpoint2 {
        width: 183px;
    }
    
    @media @highDPI {
    	background-image: url('../img/logo@2x.png');
    	background-size: 183px 62px;
    }
    @media @highDPI_3x {
    	background-image: url('../img/logo@3x.png');
    	background-size: 183px 62px;
    }
}

//
// close button
//

a.close,
.close {
    width: 16px;
    height: 16px;
    line-height: 12px;
    font-size: 16px;
    padding: 0;
    .border-radius(16px);
    text-align: center;
    display: block;
    background: @brand-grey-light;
    color: #fff;
    
    &:hover { background: @link-color-hover }
}


// Footer
/////////////////////////////////////

.footer {
	text-align: center;
	background: fade(@brand-dark, 5%);
    border-top: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 4px fade(@brand-dark, 20%);
    
    .gravatar {
        margin-bottom: @line-height-computed/2;
    }
    
    .footer-description {
        .h5;
        a { display: block; }
    }
    
    &,
    .footer-description {
        color: @text-color-light;
        line-height: @line-height-computed;
    }
    
	.footer-copyright {
		.divider-top;
		padding-top: @line-height-computed;
		padding-bottom: @line-height-computed;
		p {
			margin-bottom: 0;
			font-size: @font-size-mini;
		}
	}
}

// Subscribe component
.subscribe {
	margin: @line-height-computed auto;
	p {
		margin: 0;
		.clearfix;
        text-align: center;
	}
    
	.btn {
        width: 48px;
        height: 40px;
        line-height: 34px;
        padding: 0;
		margin: 0;
		display: inline-block;
		color: @text-color-light;
        text-align: center;
        
		&:first-child { margin-left: 0 }
		&:last-child  { margin-right: 0 }
        
    	&:before {	
    		// Icon resets for color animations
    		.transition(color .3s ease-in-out);
			color: inherit;
			margin: 0 !important;
    	}
	}
}

.subscribe-title {
    .h5;
    color: @text-color-dimmed;
    margin-bottom: @line-height-computed/2;
}

.footer:hover .subscribe .rss:before {
	color: #e15a00;
}

.footer:hover .subscribe .twitter:before {
	color: #019ad2;
}

.footer:hover .subscribe .google:before {
	color: #c63b1e;
}

.footer:hover .subscribe .facebook:before {
	color: #3b5998;
}


//
// topbar and footer as fixed 
// site background
//
.topbar {
    height: 71px;
    
    .menu-open & {
        height: auto
    }
}
.document {
    background-color: @page-bg;
}

@media @breakpoint2 {
    body {
        position: relative
    } 
    .document {
        z-index: 2;
        margin-top: 71px;
        .transition;
        
        .menu-open & {
            margin-top: 300px;
        }
        margin-bottom: 580px;
        
        border-top: 1px solid rgba(255,255,255,.7);
        border-bottom: 1px solid rgba(255,255,255,.7);
        box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
    }
    .topbar,
    .footer {
        position: fixed;
        border: none;
    }
    .topbar {
        z-index: 1;
        top: 0;
        box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
        border: none;
    }
    
    .footer {
        z-index: 0;
        height: 580px;
        bottom: 0;
        box-shadow: none;
        
        .menu-open & { .hide; }
    }
}