Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Converting to ems and adding 7" tablet normalization and plugin.

  • Loading branch information...
commit 5ae21ea6db0cb00fe8a3d5ef8392a3b30f9b948c 1 parent 66d80c2
Scott Kellum authored
373 html/_/css/style.css
View
@@ -182,8 +182,8 @@ h1 {
line-height: 1em; }
.grid {
- margin: 21px;
- padding: 0 21px;
+ margin: 1.333em;
+ padding: 0 1.333em;
background: white; }
.viewer {
@@ -193,7 +193,7 @@ h1 {
left: 0; }
nav {
- display: block;
+ display: none;
position: absolute;
z-index: 1; }
@@ -222,376 +222,376 @@ nav {
background: black; }
.r16x9.w1, .container.w1 [ratio="16x9"] img {
- width: 67px;
- height: 38px; }
+ width: 4.214em;
+ height: 2em; }
.r16x9.w2, .container.w2 [ratio="16x9"] img {
- width: 155px;
- height: 87px; }
+ width: 9.761em;
+ height: 5em; }
.r16x9.w3, .container.w3 [ratio="16x9"] img {
- width: 243px;
- height: 137px; }
+ width: 15.309em;
+ height: 9em; }
.r16x9.w4, .container.w4 [ratio="16x9"] img {
- width: 331px;
- height: 186px; }
+ width: 20.856em;
+ height: 12em; }
.r16x9.w5, .container.w5 [ratio="16x9"] img {
- width: 419px;
- height: 236px; }
+ width: 26.403em;
+ height: 15em; }
.r16x9.w6, .container.w6 [ratio="16x9"] img {
- width: 507px;
- height: 285px; }
+ width: 31.951em;
+ height: 18em; }
.r16x9.w7, .container.w7 [ratio="16x9"] img {
- width: 595px;
- height: 335px; }
+ width: 37.498em;
+ height: 21em; }
.r16x9.w8, .container.w8 [ratio="16x9"] img {
- width: 683px;
- height: 384px; }
+ width: 43.045em;
+ height: 24em; }
.r16x9.w9, .container.w9 [ratio="16x9"] img {
- width: 771px;
- height: 434px; }
+ width: 48.593em;
+ height: 27em; }
.r16x9.w10, .container.w10 [ratio="16x9"] img {
- width: 859px;
- height: 483px; }
+ width: 54.14em;
+ height: 30em; }
.r16x9.w11, .container.w11 [ratio="16x9"] img {
- width: 947px;
- height: 533px; }
+ width: 59.687em;
+ height: 34em; }
.r16x9.w12, .container.w12 [ratio="16x9"] img {
- width: 1035px;
- height: 582px; }
+ width: 65.235em;
+ height: 37em; }
.r4x3.w1, .container.w1 [ratio="4x3"] img {
- width: 67px;
- height: 50px; }
+ width: 4.214em;
+ height: 3em; }
.r4x3.w2, .container.w2 [ratio="4x3"] img {
- width: 155px;
- height: 116px; }
+ width: 9.761em;
+ height: 7em; }
.r4x3.w3, .container.w3 [ratio="4x3"] img {
- width: 243px;
- height: 182px; }
+ width: 15.309em;
+ height: 11em; }
.r4x3.w4, .container.w4 [ratio="4x3"] img {
- width: 331px;
- height: 248px; }
+ width: 20.856em;
+ height: 16em; }
.r4x3.w5, .container.w5 [ratio="4x3"] img {
- width: 419px;
- height: 314px; }
+ width: 26.403em;
+ height: 20em; }
.r4x3.w6, .container.w6 [ratio="4x3"] img {
- width: 507px;
- height: 380px; }
+ width: 31.951em;
+ height: 24em; }
.r4x3.w7, .container.w7 [ratio="4x3"] img {
- width: 595px;
- height: 446px; }
+ width: 37.498em;
+ height: 28em; }
.r4x3.w8, .container.w8 [ratio="4x3"] img {
- width: 683px;
- height: 512px; }
+ width: 43.045em;
+ height: 32em; }
.r4x3.w9, .container.w9 [ratio="4x3"] img {
- width: 771px;
- height: 578px; }
+ width: 48.593em;
+ height: 36em; }
.r4x3.w10, .container.w10 [ratio="4x3"] img {
- width: 859px;
- height: 644px; }
+ width: 54.14em;
+ height: 41em; }
.r4x3.w11, .container.w11 [ratio="4x3"] img {
- width: 947px;
- height: 710px; }
+ width: 59.687em;
+ height: 45em; }
.r4x3.w12, .container.w12 [ratio="4x3"] img {
- width: 1035px;
- height: 776px; }
+ width: 65.235em;
+ height: 49em; }
.r5x4.w1, .container.w1 [ratio="5x4"] img {
- width: 67px;
- height: 54px; }
+ width: 4.214em;
+ height: 3em; }
.r5x4.w2, .container.w2 [ratio="5x4"] img {
- width: 155px;
- height: 124px; }
+ width: 9.761em;
+ height: 8em; }
.r5x4.w3, .container.w3 [ratio="5x4"] img {
- width: 243px;
- height: 194px; }
+ width: 15.309em;
+ height: 12em; }
.r5x4.w4, .container.w4 [ratio="5x4"] img {
- width: 331px;
- height: 265px; }
+ width: 20.856em;
+ height: 17em; }
.r5x4.w5, .container.w5 [ratio="5x4"] img {
- width: 419px;
- height: 335px; }
+ width: 26.403em;
+ height: 21em; }
.r5x4.w6, .container.w6 [ratio="5x4"] img {
- width: 507px;
- height: 406px; }
+ width: 31.951em;
+ height: 26em; }
.r5x4.w7, .container.w7 [ratio="5x4"] img {
- width: 595px;
- height: 476px; }
+ width: 37.498em;
+ height: 30em; }
.r5x4.w8, .container.w8 [ratio="5x4"] img {
- width: 683px;
- height: 546px; }
+ width: 43.045em;
+ height: 34em; }
.r5x4.w9, .container.w9 [ratio="5x4"] img {
- width: 771px;
- height: 617px; }
+ width: 48.593em;
+ height: 39em; }
.r5x4.w10, .container.w10 [ratio="5x4"] img {
- width: 859px;
- height: 687px; }
+ width: 54.14em;
+ height: 43em; }
.r5x4.w11, .container.w11 [ratio="5x4"] img {
- width: 947px;
- height: 758px; }
+ width: 59.687em;
+ height: 48em; }
.r5x4.w12, .container.w12 [ratio="5x4"] img {
- width: 1035px;
- height: 828px; }
+ width: 65.235em;
+ height: 52em; }
.r1x1.w1, .container.w1 [ratio="1x1"] img {
- width: 67px;
- height: 67px; }
+ width: 4.214em;
+ height: 4em; }
.r1x1.w2, .container.w2 [ratio="1x1"] img {
- width: 155px;
- height: 155px; }
+ width: 9.761em;
+ height: 10em; }
.r1x1.w3, .container.w3 [ratio="1x1"] img {
- width: 243px;
- height: 243px; }
+ width: 15.309em;
+ height: 15em; }
.r1x1.w4, .container.w4 [ratio="1x1"] img {
- width: 331px;
- height: 331px; }
+ width: 20.856em;
+ height: 21em; }
.r1x1.w5, .container.w5 [ratio="1x1"] img {
- width: 419px;
- height: 419px; }
+ width: 26.403em;
+ height: 26em; }
.r1x1.w6, .container.w6 [ratio="1x1"] img {
- width: 507px;
- height: 507px; }
+ width: 31.951em;
+ height: 32em; }
.r1x1.w7, .container.w7 [ratio="1x1"] img {
- width: 595px;
- height: 595px; }
+ width: 37.498em;
+ height: 37em; }
.r1x1.w8, .container.w8 [ratio="1x1"] img {
- width: 683px;
- height: 683px; }
+ width: 43.045em;
+ height: 43em; }
.r1x1.w9, .container.w9 [ratio="1x1"] img {
- width: 771px;
- height: 771px; }
+ width: 48.593em;
+ height: 49em; }
.r1x1.w10, .container.w10 [ratio="1x1"] img {
- width: 859px;
- height: 859px; }
+ width: 54.14em;
+ height: 54em; }
.r1x1.w11, .container.w11 [ratio="1x1"] img {
- width: 947px;
- height: 947px; }
+ width: 59.687em;
+ height: 60em; }
.r1x1.w12, .container.w12 [ratio="1x1"] img {
- width: 1035px;
- height: 1035px; }
+ width: 65.235em;
+ height: 65em; }
.r4x5.w1, .container.w1 [ratio="4x5"] img {
- width: 67px;
- height: 84px; }
+ width: 4.214em;
+ height: 5em; }
.r4x5.w2, .container.w2 [ratio="4x5"] img {
- width: 155px;
- height: 194px; }
+ width: 9.761em;
+ height: 12em; }
.r4x5.w3, .container.w3 [ratio="4x5"] img {
- width: 243px;
- height: 304px; }
+ width: 15.309em;
+ height: 19em; }
.r4x5.w4, .container.w4 [ratio="4x5"] img {
- width: 331px;
- height: 414px; }
+ width: 20.856em;
+ height: 26em; }
.r4x5.w5, .container.w5 [ratio="4x5"] img {
- width: 419px;
- height: 524px; }
+ width: 26.403em;
+ height: 33em; }
.r4x5.w6, .container.w6 [ratio="4x5"] img {
- width: 507px;
- height: 634px; }
+ width: 31.951em;
+ height: 40em; }
.r4x5.w7, .container.w7 [ratio="4x5"] img {
- width: 595px;
- height: 744px; }
+ width: 37.498em;
+ height: 47em; }
.r4x5.w8, .container.w8 [ratio="4x5"] img {
- width: 683px;
- height: 854px; }
+ width: 43.045em;
+ height: 54em; }
.r4x5.w9, .container.w9 [ratio="4x5"] img {
- width: 771px;
- height: 964px; }
+ width: 48.593em;
+ height: 61em; }
.r4x5.w10, .container.w10 [ratio="4x5"] img {
- width: 859px;
- height: 1074px; }
+ width: 54.14em;
+ height: 68em; }
.r4x5.w11, .container.w11 [ratio="4x5"] img {
- width: 947px;
- height: 1184px; }
+ width: 59.687em;
+ height: 75em; }
.r4x5.w12, .container.w12 [ratio="4x5"] img {
- width: 1035px;
- height: 1294px; }
+ width: 65.235em;
+ height: 82em; }
.r3x4.w1, .container.w1 [ratio="3x4"] img {
- width: 67px;
- height: 89px; }
+ width: 4.214em;
+ height: 6em; }
.r3x4.w2, .container.w2 [ratio="3x4"] img {
- width: 155px;
- height: 207px; }
+ width: 9.761em;
+ height: 13em; }
.r3x4.w3, .container.w3 [ratio="3x4"] img {
- width: 243px;
- height: 324px; }
+ width: 15.309em;
+ height: 20em; }
.r3x4.w4, .container.w4 [ratio="3x4"] img {
- width: 331px;
- height: 441px; }
+ width: 20.856em;
+ height: 28em; }
.r3x4.w5, .container.w5 [ratio="3x4"] img {
- width: 419px;
- height: 559px; }
+ width: 26.403em;
+ height: 35em; }
.r3x4.w6, .container.w6 [ratio="3x4"] img {
- width: 507px;
- height: 676px; }
+ width: 31.951em;
+ height: 43em; }
.r3x4.w7, .container.w7 [ratio="3x4"] img {
- width: 595px;
- height: 793px; }
+ width: 37.498em;
+ height: 50em; }
.r3x4.w8, .container.w8 [ratio="3x4"] img {
- width: 683px;
- height: 911px; }
+ width: 43.045em;
+ height: 57em; }
.r3x4.w9, .container.w9 [ratio="3x4"] img {
- width: 771px;
- height: 1028px; }
+ width: 48.593em;
+ height: 65em; }
.r3x4.w10, .container.w10 [ratio="3x4"] img {
- width: 859px;
- height: 1145px; }
+ width: 54.14em;
+ height: 72em; }
.r3x4.w11, .container.w11 [ratio="3x4"] img {
- width: 947px;
- height: 1263px; }
+ width: 59.687em;
+ height: 80em; }
.r3x4.w12, .container.w12 [ratio="3x4"] img {
- width: 1035px;
- height: 1380px; }
+ width: 65.235em;
+ height: 87em; }
.c1 {
- margin-left: 0px; }
+ margin-left: 0em; }
.c2 {
- margin-left: 88px; }
+ margin-left: 5.547em; }
.c3 {
- margin-left: 176px; }
+ margin-left: 11.095em; }
.c4 {
- margin-left: 264px; }
+ margin-left: 16.642em; }
.c5 {
- margin-left: 352px; }
+ margin-left: 22.189em; }
.c6 {
- margin-left: 440px; }
+ margin-left: 27.737em; }
.c7 {
- margin-left: 528px; }
+ margin-left: 33.284em; }
.c8 {
- margin-left: 616px; }
+ margin-left: 38.831em; }
.c9 {
- margin-left: 704px; }
+ margin-left: 44.379em; }
.c10 {
- margin-left: 792px; }
+ margin-left: 49.926em; }
.c11 {
- margin-left: 880px; }
+ margin-left: 55.473em; }
.c12 {
- margin-left: 968px; }
+ margin-left: 61.021em; }
.w1 {
- width: 67px; }
+ width: 4.214em; }
.w2 {
- width: 155px; }
+ width: 9.761em; }
.w3 {
- width: 243px; }
+ width: 15.309em; }
.w4 {
- width: 331px; }
+ width: 20.856em; }
.w5 {
- width: 419px; }
+ width: 26.403em; }
.w6 {
- width: 507px; }
+ width: 31.951em; }
.w7 {
- width: 595px; }
+ width: 37.498em; }
.w8 {
- width: 683px; }
+ width: 43.045em; }
.w9 {
- width: 771px; }
+ width: 48.593em; }
.w10 {
- width: 859px; }
+ width: 54.14em; }
.w11 {
- width: 947px; }
+ width: 59.687em; }
.w12 {
- width: 1035px; }
+ width: 65.235em; }
.lightbox .container[class*="single"] {
- width: 243px; }
+ width: 15.309em; }
.lightbox .container[class*="double"] {
- width: 507px; }
+ width: 31.951em; }
.lightbox .container[class*="triple"] {
- width: 771px; }
+ width: 48.593em; }
.lightbox .container[class*="quad"] {
- width: 1035px; }
+ width: 65.235em; }
.column {
- width: 243px;
+ width: 15.309em;
font-size: 1em;
line-height: 1.333em; }
@@ -658,12 +658,14 @@ html.js .hidden, html.no-js .hidden {
.touch ::-webkit-scrollbar {
width: 3px; }
-html, body {
+html {
font-size: 16px;
line-height: 1.333em;
font-family: serif;
color: #333333;
- background-color: #666666;
+ background-color: #666666; }
+
+html, body {
overflow: hidden; }
h1, h2, h3, h4, h5, h6 {
@@ -680,8 +682,8 @@ p {
.column, .container {
position: absolute;
overflow: hidden;
- top: 28px;
- bottom: 38px; }
+ top: 1.778em;
+ bottom: 2.37em; }
.column {
min-height: 4em; }
@@ -738,8 +740,8 @@ figure {
display: none; }
.fill .caption {
- padding-left: 21px;
- padding-right: 21px; }
+ padding-left: 1.333em;
+ padding-right: 1.333em; }
.caption.left {
text-align: left; }
@@ -836,3 +838,10 @@ html.no-offline [data-requires~="offline"] {
.ad.grid.w12 {
width: 1200px; }
+
+@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: 16px; } }
+@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: 10.667px; } }
2  sass/_chrome.scss
View
@@ -12,7 +12,7 @@
}
nav {
- display: block;
+ display: none;
position: absolute;
z-index: 1;
}
12 sass/_config.sass
View
@@ -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
107 sass/lib/_core.sass
View
@@ -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
@@ -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
0  sass/plugin/_ios-perfect.sass → sass/plugin/_ipad.sass
View
File renamed without changes
15 sass/plugin/_tablet-7.sass
View
@@ -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 sass/style.sass
View
@@ -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
Please sign in to comment.
Something went wrong with that request. Please try again.