| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @mixin theme($name, $color) { | |
| $primary: $color; | |
| $secondary: lighten(adjust-hue($color, 20), 10%); | |
| .#{$name} { |
| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @mixin theme($name, $color) { | |
| $primary: $color; | |
| $secondary: lightness(adjust-hue($color, 20)); | |
| .#{$name} { |
| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @mixin theme($name, $color) { | |
| $primary: $color; | |
| $secondary: lighten(adjust-hue($color, 20), 10%); | |
| .#{$name} { |
| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| .step__item { | |
| counter-increment: steps; /* 1 */ | |
| background: $step-background-color; | |
| float: left; | |
| padding: $step-baseline 0; |
| // ---- | |
| // Sass (v3.3.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| %example { | |
| color: blue; | |
| font-weight: bold; | |
| font-size: 2em; | |
| } |
| // ---- | |
| // Sass (v3.3.4) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| $cache-size: ( | |
| 'width' : (), | |
| 'height' : () | |
| ); |
| window.onload = function () { | |
| if($('#header-ad').height() === 0) { | |
| $('.content-left').prepend("<div class='update-box'><p class='xtra'><b>Hey, ad blocker user!</b> Do you mind white listing my site? You can also <a href='http://www.impressivewebs.com/384-pages-of-css/'>buy one of my e-books</a> to show your support. Thanks!</p></div>"); | |
| } | |
| }; |
| // A script to quickly select everything outside the strike zone in BaseballSavant.com's pitchFX search tool. | |
| (function(d) { | |
| for (var i = 1; i <= 9; i++) { | |
| if (d.getElementById('chk_z_' + i)) { | |
| d.getElementById('chk_z_' + i).checked=false; | |
| } | |
| } | |
| for (var i = 11; i <= 14; i++) { | |
| if (d.getElementById('chk_z_' + i)) { |
| // A script to quickly select the entire strike zone in BaseballSavant.com's pitchFX search tool. | |
| (function(d) { | |
| for (var i = 1; i <= 9; i++) { | |
| if (d.getElementById('chk_z_' + i)) { | |
| d.getElementById('chk_z_' + i).checked=true; | |
| } | |
| } | |
| for (var i = 11; i <= 14; i++) { | |
| if (d.getElementById('chk_z_' + i)) { |
For an extensive guide to get started with media queries, go to this previous article.
If you have worked with responsive design, you have probably used media queries. Media queries are a clean and simple way to create responsive websites using CSS. They work by allowing you to change the style of the page when the user's screen is a certain size. Here is a simple example:
@media (max-width: 700px) {
p {
color: red;
}
}