373 changes: 191 additions & 182 deletions html/_/css/style.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion sass/_chrome.scss
View file
Expand Up @@ -12,7 +12,7 @@
}

nav {
display: block;
display: none;
position: absolute;
z-index: 1;
}
Expand Down
12 changes: 6 additions & 6 deletions sass/_config.sass
View file
Expand Up @@ -17,13 +17,13 @@ $line-height: ms(1, 1em)

// GRID MEASUREMENTS
// Grid module measurements. See Mark Boulton’s write up on grids http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
$module-w: ms(5) // module width
$module-h: ms(4) // module height
$gutter: ms(1) // gutters
$module-w: ms(5, 1em) // module width
$module-h: ms(4, 1em) // module height
$gutter: ms(1, 1em) // gutters
// grid margins:
$margin: ms(1) // side margins
$top: ms(2) // default top margin (for text and containers)
$bottom: ms(3) // default bottom margin (for text and containers)
$margin: ms(1, 1em) // side margins
$top: ms(2, 1em) // default top margin (for text and containers)
$bottom: ms(3, 1em) // default bottom margin (for text and containers)
// number of modules across to calculate:
$columns: 12 // # of columns you want to calculate for

Expand Down
107 changes: 57 additions & 50 deletions sass/lib/_core.sass
View file
Expand Up @@ -24,59 +24,64 @@ $column-prefix: c !default
$width-prefix: w !default
$height-prefix: h !default
$ratio-prefix: r !default
$scale: 1

// IMAGE + PAGE RATIOS
=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) // Width spans all columns
height: round(grid($i) * ( $height / $width )) // Height is the proportion of the width.

+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
@for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
.#{$width-prefix+$i}
width: grid($i)

// 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)
$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
@for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
.#{$height-prefix+$i}
height: grid($i, $module-h)

// Lightbox sizes
.lightbox .container
&[class*="single"]
width: grid($text-column-span)
&[class*="double"]
width: grid($text-column-span * 2)
&[class*="triple"]
width: grid($text-column-span * 3)
&[class*="quad"]
width: grid($text-column-span * 4)

// COLUMN WIDTHS
.column
width: grid($text-column-span)
@include type($size, $line-height)
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

// Lightbox sizes
.lightbox .container
&[class*="single"]
width: grid($text-column-span) * $scale
&[class*="double"]
width: grid($text-column-span * 2) * $scale
&[class*="triple"]
width: grid($text-column-span * 3) * $scale
&[class*="quad"]
width: grid($text-column-span * 4) * $scale

// COLUMN WIDTHS
.column
width: grid($text-column-span) * $scale
@include type($size, $line-height)

+build-grid

// GRID+FIGURE MEASUREMENTS
.grid
Expand Down Expand Up @@ -156,11 +161,13 @@ $scroll-support: true !default
width: 3px

// TYPOGRAPHY RESET
html, body
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
Expand Down
0 sass/plugin/_ios-perfect.sass → sass/plugin/_ipad.sass
View file
File renamed without changes.
15 changes: 15 additions & 0 deletions sass/plugin/_tablet-7.sass
View file
@@ -0,0 +1,15 @@
// Normalize 7" tablets.
$tab7-vertual-resolution: 1 !default

@if unit($module-w) != "em"
@warn "Your grid MUST be based on ems to scale for smaller tablets properly."
@else
// Standard 7" 1024x600 tablet
@media all and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), all and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait)
html.touch
font-size: $base-size * $tab7-vertual-resolution
// 1024x600 tablet with virtual resolution (Original Galaxy Tab)
@media all and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), all and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait)
html.touch
font-size: $base-size * (2/3) * $tab7-vertual-resolution
5 changes: 3 additions & 2 deletions sass/style.sass
View file
Expand Up @@ -34,6 +34,7 @@ $reset: true // set to false if you don’t want the bundled reset

// PLUGINS:
@import plugin/ad
//@import plugin/ios-perfect
//@import plugin/mobile
//@import plugin/no-treesaver
//@import plugin/ipad
@import plugin/tablet-7
//@import plugin/no-treesaver