yatil

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;

yatil

body {font-size:30px; font-family: "Comic Sans MS", Arial, "Helvetica Neue", sans-serif; }

@keyframes wobble {
	0% {
		left: 0;
	}
	25% {
		left: -20%;
	}
	50% {

yatil

/**
 * The first commented line is your dabblet’s title
 */

div {
	background: linear-gradient(#f3f3f3, #eee);
	width: 250px;
	height: 250px;
	color: #999;
	font-family: 'Helvetica Neue', Arial, sans-serif;

yatil

@mixin filter($function) {
  -webkit-filter: $function;
     -moz-filter: $function;
      -ms-filter: $function;
       -o-filter: $function;
          filter: $function;
}

yatil

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

yatil

@mixin respond-to($media) {
  @if $media == small {
    @media only screen and (max-width: 599px) { @content; }
  }
  @else if $media == medium {
    @media only screen and (min-width: 600px) { @content; }
    .oldie & { @content; }
  }
  @else if $media == large {
    @media only screen and (min-width: 800px) { @content; }

yatil

# Require any additional compass plugins here.


# IMPORTANT
#
# THIS config.rb uses the following versions of SASS/COMPASS
#
# Sass 3.2.0.alpha.35 (Bleeding Edge)
# Compass 0.12.0 (Alnilam)

yatil

There are no CSS3 filters. CSS Filters are a proprietary extension to CSS by Webkit browsers, it isn’t supported anywhere and is not in any CSS specification, neither in Level 3 nor in Level 4.

There is a separate Editor’s Draft called “Filter Effects 1.0” here: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html but that means nothing. Implementation as well as syntax may – and probably will – change, so using -moz- -o- and -ms- prefixes will likely do harm instead of being future proof.

I’d rather wait until there are at least two implementations of that stuff in browsers

yatil

@mixin respond-to($media) {
  @if $media == small {
    @media only screen and (max-width: 699px) { @content; }
  }
  @else if $media == medium {
    @if $oldIE {
      @content;
    } @else {
      @media only screen and (min-width: 600px) { @content; }
    }

yatil

<div class="container list-item story stretched" xid="list-item-9" id="element-337" style="-webkit-transform: translate3d(0px, 4500px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); min-height: 110px; width: 1280px;">
    <div class="inner container-inner list-item-inner" id="element-338">
        <div class="container unsized frame list-item-item" xid="container-11" id="element-339">
            <div class="inner container-inner" id="element-340">
                <div class="image buffered-image story-profile-picture sized" xid="buffered-image-13" id="element-341" style="width: 35px; height: 35px; background-image: url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/261057_631604675_297058556_q.jpg);"></div>
                <div class="container inlines unsized story-title" xid="inlines-4" id="element-342">
                    <div class="inner container-inner inlines-inner" id="element-343">
                        <div class="text unsized story-t