matt copeland matthewcopeland

matthewcopeland / _colors.scss

Created July 4, 2012 07:24

sample brand color palette partial

matthewcopeland / _typefaces.scss

Created July 4, 2012 07:12

sample with pictos

	// import a sans and serif from google apis
	@import url('http://fonts.googleapis.com/css?family=Crimson+Text:400italic,600,700,700italic,600italic');
	@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
	// icon font - i prefer pictos - well worth the license.
	@font-face { font-family: 'Pictos'; src: url('pictos-web.eot'); src: local('☺'), url('/fonts/pictos-web.woff') format('woff'), url('/fonts/pictos-web.ttf') format('truetype'), url('/fonts/pictos-web.svg#webfontIyfZbseF') format('svg'); font-weight: normal; font-style: normal; }
	// declare your mixins for typeface-styles
	@mixin font-sans-serif { font-family: "PT Sans", "Myriad Pro", Arial, Helvetica, Sans-Serif; }
	@mixin font-serif { font-family: "Crimson Text", "Fjord One", Georgia, "Times New Roman", serif; }
	@mixin font-icon { font-family: Pictos; }
	@mixin light-text {

matthewcopeland / _z-indexes.scss

Created July 4, 2012 06:51

sampel of a simple z-index.scss file.

matthewcopeland / center rotate unknown

Created June 26, 2012 16:59

rotate an unknown element and center

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Renaud rotates</title>
	<!-- always start with a css reset because browsers are evil -->
	<link rel="stylesheet" type="text/css" href="https://raw.github.com/matthewcopeland/css/master/reset.css" />
	<style>

	html, body {

matthewcopeland / known-size-rotate

Created June 26, 2012 16:27

rotate the text of a known-sized element.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Renaud rotates</title>
	<!-- always start with a css reset because browsers are evil -->
	<link rel="stylesheet" type="text/css" href="https://raw.github.com/matthewcopeland/css/master/reset.css" />
	<style>
	.container {
	position: absolute;