diff --git a/sass/_700.scss b/sass/_700.scss index 205dfef..046d289 100644 --- a/sass/_700.scss +++ b/sass/_700.scss @@ -17,4 +17,11 @@ .swatches { padding-left: 20em + $padding * 2; + + .lt-ie9 & { + padding-left: 26em + $padding * 2; + } + .lt-ie8 & { + width: 64%; + } } diff --git a/sass/_smallest.scss b/sass/_smallest.scss index d85ab1b..97cddda 100644 --- a/sass/_smallest.scss +++ b/sass/_smallest.scss @@ -8,6 +8,10 @@ body { font: 100%/1.5 $helvetica; background: #e4e4e4; + + .lt-ie9 & { + min-width: $page-width-fallback; + } } .wrapper { @@ -15,6 +19,10 @@ body { margin: 0 auto; max-width: $page-width; + .lt-ie9 & { + width: $page-width-fallback; + } + .main & { } } @@ -126,6 +134,11 @@ button { text-align: center; width: 80px; + .lt-ie8 & { + display: block; + float: left; + } + opacity: 0.5; &:hover { @@ -151,7 +164,6 @@ button { width: 100%; ul { - padding: 0; margin: 0; } @@ -163,6 +175,11 @@ button { float: left; width: ( 100% - ( $swatch-margin * ($num-colors - 1) ) ) / $num-colors; + + .lt-ie9 & { + width: (( 100% - ( $swatch-margin * ($num-colors - 1) ) ) / $num-colors) - 1; + } + padding-bottom: 18%; margin: 0 $swatch-margin 0 0; @@ -257,6 +274,8 @@ button { /* dimensions: 638 x 405 */ max-width: 638px; width: 90%; + .lt-ie9 & { + } } } } diff --git a/sass/_variables.scss b/sass/_variables.scss index 6ed701d..47cbdb1 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -10,6 +10,7 @@ $georgia: Georgia, Times, serif; // LENGTHS $page-width: 100%; +$page-width-fallback: 960px; $padding: 2em; $swatch-margin: 2%; diff --git a/sass/base.scss b/sass/base.scss index 122fb23..188fc4a 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -17,7 +17,7 @@ @media (min-width: 940px){ - @import "940"; + @import "940"; } diff --git a/sass/fallback.scss b/sass/fallback.scss index 33dd73a..19a1b16 100644 --- a/sass/fallback.scss +++ b/sass/fallback.scss @@ -8,4 +8,3 @@ @import "400"; @import "450"; @import "700"; -@import "940";