[ Launch: An inlet to Tributary ] 8450869 by erinautomatic
Erin Keeffe erin-dot-io
erin-dot-io
/ swipe-hint
Created
October 21, 2013 02:43
Plugin for swipe.js that hints the previous or next slide in from the sides when hovering over a prev/next trigger element for non-touch users. Currently is still very buggy.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ -> | |
| window.homeSwipe = Swipe(document.getElementById('home-swipe')) | |
| new homeSwipeButtons() | |
| class homeSwipeButtons | |
| constructor: -> | |
| @bindElements() | |
| bindElements: -> |
erin-dot-io
/ pixel-parity-rems.scss
Created
March 27, 2013 20:38
Font-size pixel-parity REMs mixin for Sass/SCSS with legacy browser 'px' fallback. Neat!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // the mixin | |
| @mixin font-size($size: 16) { | |
| font-size: ($size) + px; | |
| font-size: ($size / 16) + rem; | |
| } | |
| // example | |
| h6 { @include font-size(11); } |
erin-dot-io
/ css-arrow.scss
Last active
December 15, 2015 10:39
A little mixin I built for easily creating css arrows in sass/scss using psuedo-classes. Demo: http://codepen.io/erinautomatic/pen/BLFqe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The mixin | |
| @mixin css-arrow($box-edge : bottom, | |
| $edge-side : center, | |
| $arrow-size : 10px, | |
| $edge-side-offset : 0, | |
| $fill-color : black, | |
| $border-color : none, | |
| $border-style : border) { |
erin-dot-io
/ background-hidpi.scss
Created
September 28, 2012 19:10
Sass/SCSS Mixin for Providing Simple HI-DPI/Retina Display Media Queries for Background Images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // SCSS: | |
| $image-path: "/assets/images"; | |
| @mixin background-hidpi($image-name, $image-extension: "png", $top: top, $left: left, $repeat: repeat, $color: #fff) { | |
| background: url("#{$image-path}/#{$image-name}.#{$image-extension}") $top $left $repeat $color; | |
| @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { | |
| background: url("#{$image-path}/#{$image-name}_2x.#{$image-extension}") $top $left $repeat $color; | |
| } | |
| } |
erin-dot-io
/ rainbow-gradient.css
Last active
October 1, 2015 09:28
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rainbow { | |
| color: rgb(206,106,255); /* Old browsers */ | |
| -moz-mask-image: -moz-linear-gradient(top, rgb(206,106,255) 0%, rgb(201,97,252) 0%, rgb(95,255,255) 34%, rgb(102,249,98) 65%, rgb(255,96,96) 100%, rgb(255,105,106) 100%); /* FF3.6+ */ | |
| -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(206,106,255)), color-stop(0%,rgb(201,97,252)), color-stop(34%,rgb(95,255,255)), color-stop(65%,rgb(102,249,98)), color-stop(100%,rgb(255,96,96)), color-stop(100%,rgb(255,105,106))); /* Chrome,Safari4+ */ | |
| -webkit-mask-image: -webkit-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Chrome10+,Safari5.1+ */ | |
| -o-mask-image: -o-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34%,rgb(102,249,98) 65%,rgb(255,96,96) 100%,rgb(255,105,106) 100%); /* Opera 11.10+ */ | |
| -ms-mask-image: -ms-linear-gradient(top, rgb(206,106,255) 0%,rgb(201,97,252) 0%,rgb(95,255,255) 34% |
NewerOlder