Skip to content

Instantly share code, notes, and snippets.

@pdewouters
Created August 6, 2012 19:36
Show Gist options
  • Save pdewouters/3277854 to your computer and use it in GitHub Desktop.
Save pdewouters/3277854 to your computer and use it in GitHub Desktop.
susy layout with ie8 fallback
* { outline: 1px solid red; }
@include border-box-sizing();
body {
//@include baseline-grid-background($base-line-height);
}
#page {
//@include susy-grid-background;
@include container;
@include at-breakpoint(48em 12 ie8) {
@include set-container-width;
// @include susy-grid-background;
max-width: 1140px;
}
@include at-breakpoint(16 ie8) {
@include set-container-width;
// @include susy-grid-background;
#header-top, #masthead, nav.nav-wrap, #main, #footer-extras, #colophon {
@include squish(2,2);
position: relative;
}
}
}
#subForm {
display: none;
@include at-breakpoint(48em 12 ie8) {
display: block;
@include span-columns(9, 12);
@include trailer; @include leader;
}
}
#subForm-mobile {
display: block;
@include at-breakpoint(48em 12 ie8) {
display: none;
}
}
.social-icons{
display: none;
@include at-breakpoint(48em 12 ie8) {
display: block;
@include span-columns(3 omega, 12);
@include trailer; @include leader;
ul{
@include inline-block-list;
float: right;
}
}
}
#site-title{margin:0;}
#page{
@include at-breakpoint(48em 12 ie8) {
[role="banner"]{
.site-title{
@include span-columns(8,12);
}
#head-contact-box{
@include span-columns(4 omega,12);
@include trailer; @include leader;
}
}
#primary {
@include span-columns(9, 12);
.page-template-page_full-php &,
.page-template-page_front-php &,
.single-portfolio_item & {
@include reset-columns;
}
}
#secondary{
@include span-columns(3 omega, 12);
}
#footer-extras{
.footer-extra aside:first-child {
@include span-columns(8,12);
}
.footer-extra aside:last-child {
@include span-columns(4 omega,12);
}
}
}
}
.fade-section{
position: relative;
.tooltip{
@include adjust-font-size-to(18px);
font-family: 'Nothing You Could Do', cursive;
color: #7f7f7f;
position: absolute;
width: 156px;
@include opacity(0);
@include transition(opacity .25s linear);
&.right {
text-align: left;
right: -195px;
p {background: transparent url(../images/tooltip-right.png) no-repeat top left;padding-top: 50px;}
}
&.left{
text-align: right;
left: -195px;
p {background: transparent url(../images/tooltip-left.png) no-repeat top right;padding-top: 50px;}
}
}
@include at-breakpoint(16 ie8){
&:hover .tooltip{
@include opacity(1);
}
}
}
.site-title.fade-section {
font-size: 100%;
.tooltip {@include adjust-font-size-to(18px);}
}
.contact-box{
.email {
@extend .sans;
color: #808080;
display:none;
text-transform: lowercase;
@include at-breakpoint(48em 12 ie8){
display: block;
@include trailer;
@include adjust-font-size-to(18px);
}
}
}
.hcard-Jon-Haslett div.tel{
color: $red;
@extend .sans;
@include adjust-font-size-to(38px);
text-align: center;
display: inline-block;
width: 100%;
@include text-shadow(-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff);
@include at-breakpoint(48em 12 ie8){
@include adjust-font-size-to(55px);
text-align:left;
}
}
.btn.msg {
margin-left: 108px;
@include at-breakpoint(48em 12 ie8){
margin:0;
width: 98%;
padding: 3px 0;
text-align:center;
}
}
#colophon {
@include container;
.site-info p{
text-align: right;
text-transform: uppercase;
@extend .sans;
}
}
#main{
@include pie-clearfix;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment