benknight

/**
 * Square avatars with CSS
 */
 	
.img.square {
	width: 54px;
	height: 54px;
	overflow: hidden;
	display: inline-block;

benknight

/**
 * Arrow tip button
 */

body { z-index: 0; text-align: center; padding-top: 100px; }
button {
	position: relative;
	font: 700 20px/1 'Helvetica Neue';
	color: white;
	border: none;

benknight

/**
 * Infinite crawl effect using CSS animations
 */
@keyframes crawl {
  0% { background-position: 0 0; }
  100% { background-position: -1500px 0; /* 1500px = width of image */ }
}
#crawl {
  background: url(http://f.cl.ly/items/2i3q0a123z3w17241Q3F/page-subheader.jpg);
  height: 100px;

benknight

// imports
@import 'normalize.less';
@import 'grid.less';
@import 'helpers.less';
@import 'mixins.less';

// brand colors
@red: hsl(6, 89%, 59%);
@light_gray: hsl(0, 0%, 93%);

benknight

/**
 * HTML Email buttons that work in Outlook 2007+
 *
 * This is a really weird hacked up piece of crap but basically the technique is the containing element has some solid color background, 
 * and the inner <a> has a solid border which acts like padding which is the same color as the background color
 */

benknight

/**
 * Scroped CSS
 * Just checking this out since I enabled it in chrome://flags
 */

benknight

/* mobile-specific CSS styles... yee-haw */
@media only screen and (max-device-width: 480px) {
	body {
		margin: 10px 0;
	}

	table {
		background: none !important;
	}

benknight

/* iframe content via data urls */ 
p { color: blue !important }

benknight

/* REM demo */
html { font-size: 19px; }
div { font-size: .5rem }
p { font-size: 2em; }

benknight

/**
 * Chrome inline-block with floated element page zoom bug
 * 
 * Problem: Zooming the page causes text to break to next line with black square above at certain zoom levels.
 * This behavior isn't reproduced in other Webkit browsers, namely Safari.
 *
 * Temporary solutions:
 * 1) Setting white-space: no-wrap on the outer <div>
 * 2) Using display: inline-block on <i> instead of float: left.
 */