Skip to content

Instantly share code, notes, and snippets.

@koycarraway
koycarraway / _vars-social-colors.scss
Last active April 7, 2020 05:34
Sass color variables for popular brands and social media.
// Social Colors
// ====================================================================
$facebook_color : hsla(222, 47%, 40%, 1); // #365397
$twitter_color : hsla(198, 100%, 47%, 1); // #00a9f1
$linkedin_color : hsla(203, 100%, 35%, 1); // #006db3
$apple_color : hsla(0, 0%, 45%, 1); // #737373
$google_color : hsla(217, 89%, 61%, 1); // #4285f4
$google_plus_color : hsla(8, 74%, 53%, 1); // #e0452c
@koycarraway
koycarraway / bg-cover-mixin.scss
Created July 12, 2013 02:57
Sass Mixin for background-size: cover property. Includes IE support.
// $bg-img-path: '../path/to/image.jpg'
// $bg-options: options are css background properties (ex. no-repeat center center)
@mixin bg-cover($bg-img-path, $bg-options) {
background: url($bg-img-path) $bg-options;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$bg-img-path}', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$bg-img-path}', sizingMethod='scale')";
@koycarraway
koycarraway / gist:4634067
Last active December 11, 2015 17:19
Favicons
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/touch_icons/touchicon.png">
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/images/touch_icons/tileicon.png">
@koycarraway
koycarraway / bg_animate_element.css
Created January 11, 2013 14:52
Background Animate Element
.foo {
background: url('../path/to/image.jpg');
background-color: #e6eff2;
@include animate(animate-bg, 18s, 0, linear, both);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@koycarraway
koycarraway / Asset.js
Created January 11, 2013 14:46
Center Google Map (v3) during browser resize
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
@koycarraway
koycarraway / SassMeister-input.scss
Created November 10, 2015 20:32
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
//---------------------------
//
// Color variables
//
// Inspired by/based on Erskine's color palette structure:
// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
@koycarraway
koycarraway / SassMeister-input.scss
Created November 10, 2015 20:31
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
//---------------------------
//
// Color variables
//
// Inspired by/based on Erskine's color palette structure:
// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
@koycarraway
koycarraway / gist:2583836
Created May 3, 2012 06:43 — forked from boucher/gist:1750368
Stripe sample checkout form
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Sample Form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript">
@koycarraway
koycarraway / dabblet.css
Created March 26, 2012 22:21
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@koycarraway
koycarraway / SassMeister-input.scss
Created August 27, 2014 15:37
Generated by SassMeister.com.
// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----
$currentDate: current-date('%A, %b %e %Y');
$currentTime: current-time('%T %p %Z');
/*
Date: #{$currentDate}