| /* 970px and under */ | |
| @media screen and (max-width: 970px) { ... } | |
| /* 840px and under */ | |
| @media screen and (max-width: 840px) { ... } | |
| /* 740px and under */ | |
| @media screen and (max-width: 740px) { ... } | |
| /* 600px and under */ | |
| @media screen and (max-width: 600px) { ... } | |
| /* 480px and under */ | |
| @media screen and (max-width: 480px) { ... } |
| #slideshow { | |
| width: 100%; | |
| position: relative; | |
| } | |
| img { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| max-width: 600px; |
| /** | |
| * Polyfill for the vw, vh, vm units | |
| * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/ | |
| * @author Lea Verou | |
| */ | |
| (function() { | |
| if(!window.StyleFix) { | |
| return; |
| @mixin scale($props, $sizes, $base: 16) { | |
| $values: (); | |
| $sublists: false; | |
| @each $s in $sizes { | |
| /* unwrap lists for values that have multiple list of values such as text-shadow */ | |
| @if type-of($s) == list { | |
| $sublists: true; | |
| $vv: (); | |
| @each $ss in $s { | |
| $vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| /* See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ */ | |
| /* Default font size in pixels if not overridden. */ | |
| $baseFontSize: 16; | |
| /* Convert PX units to EMs. | |
| Ex: margin-right: pem(16); | |
| */ | |
| @function pem($pxval, $base: $baseFontSize) { | |
| @return #{$pxval / $base}em; |
| jQuery(function () { | |
| var imageHeight, wrapperHeight, overlap, imageContainer = $(".center_vertically"); | |
| function centerImagesVertically() { | |
| imageHeight = imageContainer.find("img").height(); | |
| wrapperHeight = imageContainer.height(); | |
| overlap = (wrapperHeight - imageHeight) / 2; | |
| imageContainer.find("img").css("margin-top", overlap); | |
| } |
| jQuery(function () { | |
| var $scrollEl = $("body,html"), | |
| $backtoTop = $(".back_top"); | |
| $(function () { | |
| $(window).scroll(function () { | |
| if ($(this).scrollTop() > 600) { | |
| $backtoTop.fadeIn(); | |
| } else { |
| jQuery(function () { | |
| var $feed = $(".feed"), | |
| $trigger = $(".next_page"), | |
| $spinner = $(".spinner"), | |
| spinner = "<div class=\"spinner\"></div>"; | |
| var isotopeSettings = { | |
| itemSelector: ".box" | |
| } |
| jQuery(function () { | |
| var timer = 0, | |
| delay = 350; | |
| $(".dropdown").hover(function () { | |
| clearTimeout(timer); | |
| $(this).addClass("active").find("ul").show(); | |
| }, function () { | |
| timer = setTimeout(function () { |