| /* ========================================================================== |
| Page layout |
| ========================================================================== */ |
| |
| /* |
| Masthead |
| ========================================================================== */ |
| |
| #masthead { |
| padding: $gutter; |
| z-index: 5; |
| @include transform(translate(0,0)); |
| @include transition(500ms cubic-bezier(.645,.045,.355,1.000)); |
| &.slide { |
| @include transform(translate(-1600px,0)); |
| } |
| .inner-wrap { |
| @include outer-container; |
| } |
| } |
| .site-title { |
| @include row; |
| @include media($large) { |
| @include span-columns(4); |
| } |
| padding: (.25 * $masthead-height) 0; // fourth the height to center vertically |
| height: $masthead-height; |
| text-decoration: none; |
| color: $black; |
| font-family: $alt-font; |
| font-weight: 700; |
| @include font-size(20,no); |
| line-height: .5 * $masthead-height; // half the height to center vertically |
| text-transform: uppercase; |
| } |
| |
| |
| /* |
| Menus |
| ========================================================================== */ |
| |
| .menu { |
| li { |
| float: left; |
| &:last-child a { |
| @include media($medium) { |
| margin-right: 0; // remove spacing from last menu link |
| } |
| } |
| a { |
| // line hover effect |
| position: relative; |
| display: block; |
| margin-right: $gutter; |
| padding: (.25 * $masthead-height) 0 (.25 * $masthead-height) ; |
| height: $masthead-height; |
| font-family: $alt-font; |
| &:before, |
| &:after { |
| content: ''; |
| display: block; |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 2px; |
| @include transition(width 0.3s); |
| } |
| &:before { |
| width: 100%; |
| background: transparent; |
| } |
| &:after { |
| width: 0; |
| background: $black; |
| } |
| &:active:after, |
| &:hover:after { |
| width: 100%; |
| } |
| } |
| } |
| } |
| |
| /* Top menu navigation */ |
| |
| .top-menu { |
| display: none; |
| position: relative; |
| @include media($medium) { |
| @include span-columns(12); |
| } |
| @include media($large) { |
| @include span-columns(7); |
| ul { |
| position: absolute; |
| right: 0; |
| } |
| } |
| .home, |
| .sub-menu-item { |
| display: none; |
| } |
| li { |
| a { |
| font-weight: 700; |
| @include font-size(16,no); |
| line-height: .5 * $masthead-height; // half the height to center vertically |
| color: $black; |
| text-transform: uppercase; |
| } |
| } |
| } |
| |
| /* Bottom menu navigation */ |
| |
| .bottom-menu { |
| @include clearfix; |
| font-weight: 700; |
| a { |
| color: lighten($black,60); |
| } |
| } |
| |
| |
| /* |
| Page wrapper |
| ========================================================================== */ |
| |
| #page-wrapper { |
| padding: 0 $gutter; // add white space for smaller screens |
| @include size(100% 100%); |
| -webkit-overflow-scrolling: touch; |
| z-index: 2; |
| @include transform(translate(0,0)); |
| @include transition(500ms cubic-bezier(.645,.045,.355,1.000)); |
| &.slide { |
| @include transform(translate(-60rem,0)); |
| } |
| } |
| |
| /* |
| Main content |
| ========================================================================== */ |
| |
| #main { |
| .inner-wrap { |
| @include media($medium) { |
| @include span-columns(9); |
| } |
| } |
| .page-title { |
| @include fill-parent; |
| } |
| @at-root { |
| .page-content { |
| @include fill-parent; |
| // larger font for intro paragraph |
| > p { |
| &:first-child { |
| @include font-size(20,yes,30); |
| } |
| } |
| // cleaner underlines for links |
| a { text-decoration: none; } |
| p a, |
| li a { |
| border-bottom: 1px dotted lighten($link-color, 50); |
| &:hover { |
| border-bottom-style: solid; |
| } |
| } |
| p > a.reversefootnote { |
| border-bottom-width: 0; |
| } |
| .toc li > a { |
| border-bottom-width: 0; |
| } |
| .page-footer, |
| .pagination { |
| @include fill-parent; |
| } |
| .page-meta { |
| p{ |
| @include font-size(14,no); |
| font-family: $alt-font; |
| color: lighten($black,60); |
| } |
| } |
| } |
| } |
| @at-root { |
| .archive-wrap { |
| @include fill-parent; |
| .page-content { |
| @include reset-all; |
| @include fill-parent; |
| } |
| } |
| } |
| /* advertisements */ |
| .ads { |
| position: relative; |
| text-align: center; |
| margin-top: $gutter; |
| margin-left: -$gutter; |
| margin-right: -$gutter; |
| padding: 10px 0 20px; |
| background: lighten($border-color,5); |
| @include media($medium) { |
| @include span-columns(3); |
| margin-left: 0; |
| margin-right: 0; |
| } |
| &:after { |
| content: 'Advertisement'; |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| text-align: center; |
| display: block; |
| @include font-size(9,no); |
| font-family: $alt-font; |
| } |
| ins { |
| border-width: 0; |
| } |
| } |
| } |
| // page lead |
| .page-lead { |
| background-position: center top; |
| background-repeat: no-repeat; |
| background-attachment: fixed; |
| text-align: center; |
| color: $white; |
| @include media($large) { |
| background-size: cover; |
| } |
| } |
| .page-lead-content { |
| padding: 1em; |
| @include media($medium) { |
| padding: 2em; |
| } |
| @include media($large) { |
| padding: 3em; |
| } |
| h1 { |
| @include font-size(48); |
| @include media($medium) { |
| @include font-size(60); |
| } |
| @include media($large) { |
| @include font-size(72); |
| } |
| } |
| h2 { |
| @include font-size(20); |
| @include media($medium) { |
| @include font-size(24); |
| } |
| @include media($large) { |
| @include font-size(32); |
| } |
| } |
| } |
| // page header |
| .page-feature { |
| @include fill-parent; |
| // expand image to cover full width of header |
| img { |
| width: 100%; |
| } |
| } |
| // make image flush with edges on small screens |
| .page-image { |
| position: relative; |
| margin-left: -1 * $gutter; |
| margin-right: -1 * $gutter; |
| // feature image caption |
| .image-credit { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| margin: 0 auto; |
| padding: 10px 15px; |
| background-color: rgba($black,.5); |
| color: $white; |
| font-family: $alt-font; |
| @include font-size(12,no); |
| text-align: right; |
| z-index: 10; |
| a { |
| color: $white; |
| text-decoration: none; |
| } |
| } |
| } |
| |
| /* |
| Page footer |
| ========================================================================== */ |
| |
| .page-footer { |
| position: relative; |
| } |
| |
| /* Author block */ |
| |
| .author-image { |
| position: absolute; |
| left: 0; |
| img { |
| width: 80px; |
| height: 80px; |
| border-radius: $border-radius; |
| } |
| } |
| .author-content { |
| word-wrap: break-word; |
| padding-left: 100px; //avatar width + 20px padding |
| min-height: 80px; //mirrors avatar height |
| } |
| .author-name { |
| @include font-size(20,no); |
| } |
| .author-bio { |
| margin-top: 0; |
| @include font-size(16); |
| } |
| |
| /* |
| Site footer |
| ========================================================================== */ |
| |
| #site-footer { |
| @include outer-container; |
| margin-top: (3 * (0px + $doc-line-height)); |
| margin-top: (3 * (0rem + ($doc-line-height / $doc-font-size))); |
| padding-bottom: $gutter; |
| font-family: $alt-font; |
| /* Copyright text */ |
| .copyright { |
| @include font-size(12); |
| color: lighten($black,60); |
| a { |
| color: lighten($black,60); |
| text-decoration: none; |
| } |
| } |
| } |