Skip to content

Instantly share code, notes, and snippets.

@jhafner
jhafner / textcolumns.css
Created May 30, 2013 15:43
CSS Text Columns
#columns-3 {
text-align: justify;
-ms-column-count: 3;
-ms-column-gap: 12px;
-ms-column-rule: 1px solid #c4c8cc;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
@jhafner
jhafner / gradients.css
Created May 30, 2013 15:37
CSS3 Gradients Template.
#colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
@jhafner
jhafner / vCenter.css
Created May 30, 2013 15:36
Vertically center inline content.
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
@jhafner
jhafner / fontStacks.css
Created May 30, 2013 15:34
List of modern font stacks.
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/*The Helvetica/Arial-based sans serif */
@jhafner
jhafner / mediaQueries.css
Created May 30, 2013 15:33
General list of media queries.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
@jhafner
jhafner / git-open.sh
Created May 16, 2013 15:55
Open the current repo on Github. Script by Brian Edgerton.
#!/bin/bash
git_host='git@github.com:'
git_url='https://github.com/'
remote=`git config --get remote.origin.url`
host=${remote:0:15}
if [ $host = $git_host ]
then
url=${remote/$git_host/$git_url}
@jhafner
jhafner / gist:5109371
Created March 7, 2013 16:32
Pretty, Minimal Trello Styles. Credit to http://userstyles.org/styles/80264/trello-theme-minimal-orange for a majority of this code.
html, body, input, select, textarea {font-size: 13px !important;}
#header {background: #2B2B2B !important;}
.header-btn.header-notifications, .header-btn.header-boards,
.header-btn.header-search, .header-btn.header-login,
.header-btn.header-signup {
background: #6B6B6B !important;
}
.header-btn:hover {background: #868686 !important;}
@jhafner
jhafner / cinn_rolls.md
Created December 24, 2012 16:46
The best cinnamon roll recipe ever, by Amy Hafner.

Cinnamon Rolls

This is a super-simple cinnamon roll recipe by Amy Hafner that even programmers can follow.

Ingredients

  • 1 package/box of yellow cake mix
  • 2 packages of yeast
  • 5 cups of flour
  • 2 1/2 cups of hot water
@jhafner
jhafner / application_helper.rb
Created November 27, 2012 21:59
Conditional HTML Classes in Haml Helper
module ApplicationHelper
def conditional_html( lang = "en", &block )
haml_concat Haml::Util::html_safe <<-"HTML".gsub( /^\s+/, '' )
<!--[if lt IE 7 ]> <html lang="#{lang}" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="#{lang}" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="#{lang}" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="#{lang}" class="no-js ie9"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="#{lang}" class="no-js"> <!--<![endif]-->
HTML
@jhafner
jhafner / screen-height-width.js
Created November 20, 2012 16:55
Cross-browser screen width/height polling
var x; // Screen Width
var y; // Screen Height
function screenSize(){
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
console.log('x: ' + x + 'px | y: ' + y + 'px');
}
screenSize();