Find file
Fetching contributors…
Cannot retrieve contributors at this time
261 lines (218 sloc) 4.5 KB
// =============================================================================
// Layouts
// =============================================================================
.site-content,
.site-footer {
position: relative;
padding: @gutter-width @gutter-width @gutter-width;
background-color: #fff;
border-top: @orange-line;
box-shadow: 1px 1px 10px fade(#000, 10%);
}
.site-main {
position: relative;
width: @width-main;
float: left;
}
.sidebar-primary,
.sidebar-secondary {
width: @width-secondary;
float: right;
}
.sidebar-secondary {
clear: right;
}
/* =============================================================================
Layout: Header
========================================================================== */
.site-header {
padding: (@gutter-width + 20px) 0 (@gutter-width + 10px);
}
.site-title {
float: left;
margin: 0 0 0 @gutter-width;
#font > .shorthand(46, normal);
text-shadow: 0 1px 0 #fff;
letter-spacing: -2px;
img {
max-width: 100%;
width: auto\9; // IE7-8 need help adjusting responsive images
height: auto; // Scale the height according to the width, otherwise you get stretching
vertical-align: middle;
}
a {
color: @link-color;
&:hover { color: @link-color-hover; }
}
}
.site-description {
float: right;
margin: @gutter-width-small @gutter-width 0 0;
padding: 2px 8px;
.font-size(@headings-size-small);
font-weight: normal;
background-color: #fff;
background-color: fade(#fff, 53%);
border-radius: 3px;
color: @gray;
&:empty {
background: none;
}
}
/**
* Use Flexbox to vertical center the site title and description
*/
.flexbox {
.site-header .home-link {
.flex-display();
}
.site-title {
float: none;
margin: auto auto auto @gutter-width;
}
.site-description {
float: none;
margin: auto @gutter-width auto auto;
}
}
/* =============================================================================
Layout: Footer
========================================================================== */
.site-footer {
position: relative;
margin: @gutter-width 0;
background-color: #fff;
text-shadow: 1px 1px 0 #fff;
.copyright,
.credit {
width: 50%;
margin: 0;
}
.copyright {
float: left;
}
.credit,
.column-last {
float: right;
text-align: right;
}
}
/**
* Footer Widget Area
*/
.sidebar-subsidiary {
clear: both;
margin-top: @gutter-width-small;
/* Two columns */
&.two-col .widget-area {
float: left;
width: 48%;
margin-right: 4%;
}
&.two-col .widget-area + .widget-area {
margin-right: 0;
}
/* Three columns */
&.three-col .widget-area {
float: left;
width: 31%;
margin-right: 3.5%;
}
&.three-col .widget-area + .widget-area + .widget-area {
margin-right: 0;
}
}
/* =============================================================================
Layout: Theme Layouts
========================================================================== */
/**
* One column layout
*/
.layout-1c .site-main {
float: none;
width: 100%;
}
/* Make sure that the layout on the front page doesn't get overwritten in the Theme Customizer preview */
body.page-template-template-front-page .site-main {
&:extend(.layout-1c .site-main);
margin: 0;
}
/**
* Two columns
*/
.layout-2c-r {
.site-main {
float: right;
}
.sidebar-primary,
.sidebar-secondary {
float: left;
clear: left;
margin-left: ( -(@gutter-width-small - 10px) );
}
}
/**
* Three columns
*/
.layout-3c-c,
.layout-3c-r,
.layout-3c-l {
.sidebar-primary,
.sidebar-secondary {
clear: none;
width: @three-col-sidebar-width;
}
}
.layout-3c-l,
.layout-3c-r {
.site-main {
width: @three-col-main-width;
}
}
/* Three columns, center */
.layout-3c-c {
.site-main {
float: left;
width: @three-col-main-width;
margin-left: ( @three-col-main-width / 2 );
}
.sidebar-primary {
float: left;
margin-left: ( -(@three-col-main-width + @three-col-sidebar-width + @gutter-width) ); // -765px
}
.sidebar-secondary {
float: right;
margin-right: ( -(@gutter-width-small - 10px) );
}
}
/* Three columns, left */
.layout-3c-l {
.site-main {
float: left;
}
.sidebar-primary,
.sidebar-secondary {
float: left;
margin-left: @gutter-width-small;
}
.sidebar-primary {
margin-left: @gutter-width;
}
.sidebar-secondary {
margin-right: ( -(@gutter-width-small - 10px) );
}
}
/* Three columns, right */
.layout-3c-r {
.site-main {
float: right;
}
.sidebar-primary,
.sidebar-secondary {
float: left;
margin-right: @gutter-width-small;
}
.sidebar-primary {
margin-left: ( -(@gutter-width-small - 10px) );
}
}