Chris@2: // ====================================================================
Chris@2: // Media queries
Chris@2: // Responsive styles not for layout.
Chris@2: // ====================================================================
Chris@2: 
Chris@2: @include MQ(iphone-port) {    // Max   320px.
Chris@2: 
Chris@2:   #content,
Chris@2:   #sidebar-first,
Chris@2:   #sidebar-second {
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   #site-name a, #site-name a:link, #site-name a:visited {
Chris@2:     margin: 0 0;
Chris@2:     font-size: .85em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:   }
Chris@2:   #header h1 a, #header h1 a:link, #header h1 a:visited {
Chris@2:     font-size: .85em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:     text-decoration: none;
Chris@2:   }
Chris@2:   #site-slogan {
Chris@2:     font-size: 12px;
Chris@2:   }
Chris@2: }
Chris@2: 
Chris@2: 
Chris@2: @include MQ(iphone-land) {     // 321px to 480px.
Chris@2: 
Chris@2:   #content,
Chris@2:   #sidebar-first,
Chris@2:   #sidebar-second {
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   input.form-text {
Chris@2:     width: 95%;
Chris@2:   }
Chris@2:   #site-name a, #site-name a:link, #site-name a:visited {
Chris@2:     margin: 0 0;
Chris@2:     font-size: 1.2em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:   }
Chris@2:   #header h1 a, #header h1 a:link, #header h1 a:visited {
Chris@2:     font-size: .85em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:     text-decoration: none;
Chris@2:   }
Chris@2:   #site-slogan {
Chris@2:     font-size: 12px;
Chris@2:   }
Chris@2: }
Chris@2: 
Chris@2: 
Chris@2: @include MQ(ipad-port) {    // 481px to 768px.
Chris@2: 
Chris@2:   #content,
Chris@2:   #sidebar-first,
Chris@2:   #sidebar-second {
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   input.form-text {
Chris@2:     width: 75%;
Chris@2:   }
Chris@2: 
Chris@2:   #top-columns .column-block-wrapper {
Chris@2:     width: 100% !important;
Chris@2:     margin-top: 1em;
Chris@2:   }
Chris@2: 
Chris@2:   #top-columns .column-block-wrapper .column-block {
Chris@2:     height: auto !important;
Chris@2:     margin:0 !important;
Chris@2:   }
Chris@2: 
Chris@2:   #sidebar-first.sb-one,
Chris@2:   #sidebar-second.sb-one {
Chris@2:     margin: 0;
Chris@2:     width: 50% !important;
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   #site-name a, #site-name a:link, #site-name a:visited {
Chris@2:     margin: 0 0;
Chris@2:     font-size: 1.8em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:   }
Chris@2:   #header h1 a, #header h1 a:link, #header h1 a:visited {
Chris@2:     font-size: 1.3em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:     text-decoration: none;
Chris@2:   }
Chris@2: }
Chris@2: 
Chris@2: 
Chris@2: @include MQ(ipad-land) {   // 769px to 1024px.
Chris@2:   #content,
Chris@2:   #sidebar-first,
Chris@2:   #sidebar-second {
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   input.form-text {
Chris@2:     width: 75%;
Chris@2:     font-size: 90%;
Chris@2:   }
Chris@2: 
Chris@2:   #top-columns .column-block-wrapper {
Chris@2:     width: 100% !important;
Chris@2:     margin-top: 1em;
Chris@2:   }
Chris@2: 
Chris@2:   #top-columns .column-block-wrapper .column-block {
Chris@2:     height: auto !important;
Chris@2:     margin:0 !important;
Chris@2:   }
Chris@2: 
Chris@2:   #sidebar-first.sb-one,
Chris@2:   #sidebar-second.sb-one {
Chris@2:     margin: 0;
Chris@2:     width: 50% !important;
Chris@2:     img {
Chris@2:       max-width: 100%; // Make sure all images fit within viewport
Chris@2:       height: auto; // Correct width from max-width rule above.
Chris@2:     }
Chris@2:   }
Chris@2: 
Chris@2:   #site-name a, #site-name a:link, #site-name a:visited {
Chris@2:     margin: 0 0;
Chris@2:     font-size: 2.2em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:   }
Chris@2:   #header h1 a, #header h1 a:link, #header h1 a:visited {
Chris@2:     font-size: 1.6em;
Chris@2:     font-weight: 800;
Chris@2:     line-height: 1em;
Chris@2:     text-decoration: none;
Chris@2:   }
Chris@2: }