benknight

#main-body {
  -webkit-filter: invert(100%) hue-rotate(180deg);
  zoom: 125%;
}

#ID-overtimePanel {
  padding-top: 10px;
}

/* remove margin intended to clear header */

benknight

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
	background: white;
	font: 120% sans-serif;
}

benknight

/*
 * Demonstating negative margin behavior on absolutely positioned elements.
 *
 * Conclusion: Browser only changes position when the margin is set on the same side as the position offset.
 * E.g. style rule has margin-top and top set, or margin-bottom and bottom.  See A & C.
 */
div {
	position: absolute;
	width: 100px;
	height: 100px;

benknight

/**
 * Look! Protocol relative URIs don't work in data URIs.
 */

iframe { width: 500px; }

benknight

#!/bin/bash
# BrowserStack SSH Tunnel Setup

# Find your key by logging into BrowserStack and finding your command line tunnel setup info
KEY=YOUR_KEY_HERE

# Add your internal hosts here
INTERNAL_HOSTS=( dev alpha beta whatever whocares )

for host in ${INTERNAL_HOSTS[@]} ; do

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.
 */

benknight

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

benknight

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

benknight

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

	table {
		background: none !important;
	}

benknight

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