Skip to content

Instantly share code, notes, and snippets.

@stevetrask
stevetrask / elipse-shadow.scss
Last active August 29, 2015 14:25
Drop shadow in the shape of an elipse
.cont{
position: relative;
}
.image{
width: 100px;
height: 100px;
background: #000;
border-radius: 100px;
}
.image::after{
@stevetrask
stevetrask / shadow-mixin.scss
Last active August 29, 2015 14:25
Drop shadow mixin
@mixin drop-shadow ($x: 1px, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
-webkit-box-shadow: $x $y $blur $spread rgba(204, 204, 204, $alpha);
-moz-box-shadow: $x $y $blur $spread rgba(204, 204, 204, $alpha);
box-shadow: $x $y $blur $spread rgba(204, 204, 204, $alpha);
}
@stevetrask
stevetrask / expand-div.html
Last active August 29, 2015 14:25
show and hide other elements
<a href="#" data-collapse-target="search-bar" data-collapse-expand-text="expand">collapse</a>
@stevetrask
stevetrask / aspect-ratio-col.js
Created July 20, 2015 18:13
Fixed aspect ratio for columns
$(function(){
$('.row[data-column-aspect-ratio]').each(function(){
var row = $(this);
var aspectRatio = row.attr('data-column-aspect-ratio');
function resizeColumns(){
row.find('> .column').each(function(){
var column = $(this);
var inner = column.find('> .inner');
@mixin linear-gradient($fromColor, $toColor) {
background-color: $toColor; /* Fallback Color */
background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */
background-image: -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */
background-image: -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */
background-image: linear-gradient(top, $fromColor, $toColor);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}');
}
# pass the default character set
AddDefaultCharset utf-8
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html|svg)$">
Header append Vary: Accept-Encoding
Header set Connection keep-alive
</FilesMatch>
</IfModule>
@mixin rounded-corners($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
@mixin complex-corners( $top-left, $top-right, $bottom-left, $bottom-right ) {
/*Top left */
@stevetrask
stevetrask / sourcetree-reverse
Created July 20, 2015 18:28
Return the file to a previous state in sourcetree
If you want to return the file to a previous state, there are a number of ways to do this.
Option 1:
Right-click the file (in any view) and pick 'Log Selected'. This gives you a history just of that file.
Pick the commit in the list which represents the state at which you want the file to be returned to. So this would be the commit before the changes you wanted to reverse
Right-click this commit and select "Reset To Commit"
Note, you can also do this in the main log view (right-click the file in a commit and pick "Reset To Commit", but it's easier to find the commit you want when you use the file-specific log.
// custom menu styles
$menu-bkg: #666;
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
$(function(){
$('#scrollNav li a').on('click', function(event) {
var target = $(this).attr("data-target");
console.log(target);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $('#'+target).offset().top - 55
}, 1000);
}