jordangray

/* Twitter hackweek */

body {
	background-color: lightblue;
	background-position:
		50px 50px,
		0 0;
	font: 17px/1.4 "Helvetica Neue", Arial, sans-serif;
}

jordangray

/* Thither mockup */


/* Basic typography and spacing */

h1 {
	font-weight: normal;
	font-size: 34px;
}

jordangray

/**
 * Messing about with keyframe animation
 */

@keyframes logo {
	from {
		height: auto;
		width: auto;
		position: fixed;
		top: 0;

jordangray

/* Star Wars opening crawl effect */

.fade {
	margin: -40px auto 0;
	max-width: 540px;
    position: relative;
    width: 50%;
    transform: perspective(20px) rotateX(7deg) translateZ(-6px);
}

jordangray

/*
 * SO #20126262: make last inline child fill available space.
 */

div {
	display: flex;
	flex-wrap: wrap;
}

span:last-child {

jordangray

/* SO #19125580: smiley face animation. */

fieldset {
	color: #666;
	font: 14px Segoe UI, sans-serif;
	border: 2px solid #ccc;
	width: 400px;
	margin: auto;
}

jordangray

/**
 * Alternative datepicker interface
 */

body {
	background: #f06;
	background: linear-gradient(135deg, #f00, orange);
	min-height: 100%;
}

jordangray

/**
 * Splay circles from top along a circular path
 * http://stackoverflow.com/questions/18735723/spherical-motion-around-object-using-javascript
 */

@keyframes rotate {
	0%, 50% {
		transform: rotate(0deg) translateY(-150px) rotate(0deg);
	}
}

jordangray

/**
 * Splay circles from top along a circular path
 * http://stackoverflow.com/questions/18735723/spherical-motion-around-object-using-javascript
 */

@keyframes rotate {
	0% {
		top: -30px;
		left: -30px;
		transform: rotate(0deg) translateY(-150px) rotate(0deg);

jordangray

/**
 * Glowing circle patches
 */

body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	height: 500px;
}