/////////////////////////// // METRICS // /////////////////////////// // DEFAULT GRID METRICS $base-size: 16px !default $size: 1em !default $line-height: 1.2em !default $module-w: 84px !default $module-h: 84px !default $gutter: 14px !default // grid margins: $margin: 20px !default $top: 20px !default $bottom: 20px !default $columns: 12 !default $text-column-span: 3 !default $consistant-page-width: false !default $row-prefix: r !default $column-prefix: c !default $width-prefix: w !default $height-prefix: h !default $ratio-prefix: r !default $scale: 1 $blur-radius: 2px !default $blur-lightbox: true !default =ratio($width, $height, $cols: $columns) @for $i from 1 through $cols .#{$ratio-prefix+$width}x#{$height}.#{$width-prefix+$i}, .container.#{$width-prefix+$i} [ratio="#{$width}x#{$height}"] img // Grid ratio, figure ratio. width: grid($i) * $scale // Width spans all columns height: round(grid($i) * ( $height / $width )) * $scale // Height is the proportion of the width. =build-grid // IMAGE + PAGE RATIOS +ratios // Run the code above. Ratios are defined in _config.sass // GRID MEASURMENTS @for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . . .#{$column-prefix+$i} margin-left: (grid($i) - $module-w) * $scale @for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . . .#{$width-prefix+$i} width: grid($i) * $scale // Force consistant page widths @if $consistant-page-width $i: $columns - $text-column-span @while $i > 0 .#{$width-prefix+$i}.grid:not(.fixed):not(.sizetocontainer) max-width: grid($i + $text-column-span) * $scale $i: $i - $text-column-span // Vertical grid $vertical-grid: false !default $rows: 10 !default @if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary. @for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . . .#{$row-prefix+$i} position: absolute top: ((grid($i, $module-h) - $module-h) + $top) * $scale @for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . . .#{$height-prefix+$i} height: grid($i, $module-h) * $scale // COLUMN WIDTHS .column width: grid($text-column-span) * $scale @include type($size, $line-height) +build-grid // GRID+FIGURE MEASUREMENTS .grid position: absolute overflow: hidden // Helps reduce flickr when paging -webkit-backface-visibility: hidden // Sometimes Safari forgets this one -webkit-font-smoothing: subpixel-antialiased // CLEAR MIN-MAX FOR FIXED GRIDS .fixed.grid, .sizetocontainer.grid max-width: none max-height: none min-width: none min-height: none /////////////////////////// // GENERAL FUNCTIONALITY // /////////////////////////// // Hide things html.js, html.no-js // Using this to up the priority of .hidden down the cascade. .hidden display: none // Positioning of Chrome .chrome, .viewer position: absolute display: block .chrome bottom: 0 top: 0 left: 0 right: 0 // DESKTOP SCROLLING CONTAINER SUPPORT $scroll-support: true !default @if $scroll-support .container.scroll position: absolute overflow: auto overflow-x: hidden .grid .scroll-fade:after // gradient to indicate overflow content: "\0020" position: absolute bottom: 0 left: 0 right: 0 height: 40px z-index: 3 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba($page, 0)), to(rgba($page, 1))) background-image: -webkit-linear-gradient(top, rgba($page, 0), rgba($page, 1)) background-image: -moz-linear-gradient(top, rgba($page, 0), rgba($page, 1)) background-image: -ms-linear-gradient(top, rgba($page, 0), rgba($page, 1)) background-image: -o-linear-gradient(top, rgba($page, 0), rgba($page, 1)) background-image: linear-gradient(top, rgba($page, 0), rgba($page, 1)) .container .scroll // allow scrolling overflow: auto width: 100% height: 100% padding-bottom: 40px // FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar ::-webkit-scrollbar, ::-moz-scrollbar, ::scrollbar -webkit-appearance: none width: 6px ::-webkit-scrollbar-thumb, ::-moz-scrollbar-thumb, ::scrollbar-thumb border-radius: 3px background-color: rgba(0,0,0,.5) // Make The Scrollbars Smaller On Touch Devices .touch ::-webkit-scrollbar, .touch ::-moz-scrollbar, .touch ::-scrollbar width: 3px // TYPOGRAPHY RESET html +type($base-size, $line-height) font-family: $font color: $text background-color: $body html, body overflow: hidden // Make sure headlines look good and always fit h1, h2, h3, h4, h5, h6 text-rendering: optimizeLegibility word-wrap: break-word // Hyphenate paragraphs $hyphenate: true !default @if $hyphenate p +hyphens(auto) // COLUMNS .column, .container position: absolute overflow: hidden top: $top bottom: $bottom // Set min height so no one-line columns appear .column min-height: $line-height * 3 // Page Opacity $page-opacity: true !default @if $page-opacity #previousPage, #nextPage opacity: 0.5 // TRIM LEFT OR RIGHT PAGE MARGINS .grid.trimleft padding-left: 0 .grid.trimright padding-right: 0 // FIGURE PLACEMENT figure display: block .colapsed position: absolute .topfix top: 0 .rightfix right: 0 .bottomfix bottom: 0 top: auto .leftfix left: 0 .overflow overflow: visible // RESOURCES .error, .loading position: absolute &#nextPage, &#previousPage display: none .hidden, .microdata display: none .group position: absolute top: 0 bottom: 0 padding: 0 // CENTER CONTENT .center, .center * text-align: center // DISABLES CAPTIONS FOR CONTAINER .nocap .caption display: none // Caption placement $caption-placement: true !default @if $caption-placement // Add padding to captions when in a fill grid .fill .caption padding-left: $margin padding-right: $margin // INSET CAPTION ADVANCED PLACEMENT .caption &.left text-align: left &.right right: 0 text-align: right .insetcap .caption position: absolute &.ul .caption top: 0 left: 0 &.ur .caption top: 0 right: 0 &.ll .caption bottom: 0 left: 0 &.lr .caption bottom: 0 right: 0 // SUPPORT FULL-BLEED FIGURES *ABITRARY CROPS BEWARE* // !IMPORTANT FLAGS NESSISARY TO OVERRIDE TREESAVER $fullbleed: true !default @if $fullbleed .fullbleed position: absolute bottom: 0 !important top: 0 !important left: 0 !important right: 0 !important width: auto // BLUR LIGHTBOX BACKGROUND @if $blur-lightbox .chrome:first-child .grid, .chrome:first-child nav +prefix(filter, blur($blur-radius)) .chrome:last-child .grid, .chrome:last-child nav +prefix(filter, blur(0)) // MOBILE OPTIMIZATIONS // Tweaks to make things run more smoothly on mobile devices .os-ipad, .os-iphone &, .grid // iOS doesn't subpixel AA anyway, defining as normal AA speeds things up. -webkit-font-smoothing: antialiased // Online/offline elements $offline-elements: true !default @if $offline-elements html.offline .no-offline, [data-requires~="no-offline"] display: none [data-requires~="offline"] display: block html.no-offline [data-requires~="no-offline"] display: block [data-requires~="offline"] display: none // Debug tools // used to highlihgt elements for placement. $debug: true !default @if $debug .r +r .g +g .b +b .c +c .m +m .y +y