matthewcopeland’s gists

matthewcopeland / _modal_partial.scss

Created July 4, 2012 08:43

simple sample _partial.scss file. this partial only needs to apply positional styles because all visual styles are driven by @Mixins from a controlled source.

	// simple sample _partial.scss file.
	// this partial only needs to apply positional style
	// because all visual styles are driven by @mixins from a controlled source.
	.modal.form {

	form {
	p {
	display: inline-block;
	width: 50%;
	margin: 10px 0;

matthewcopeland / github.js

Created July 9, 2012 16:19

corrected github.js for v3 api

	var github = (function(){
	function render(target, repos){
	var i = 0, fragment = '', t = $(target)[0];

	for(i = 0; i < repos.length; i++) {
	fragment += '<li><a href="'+repos[i].html_url+'">'+repos[i].name+'</a><p>'+repos[i].description+'</p></li>';
	}
	t.innerHTML = fragment;
	}
	return {

matthewcopeland / schab-blue-bird.html

Created July 10, 2012 04:30

just for you, schab. This will center your image on a single page.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body, div { margin: 0; padding: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; }
	div { display: table; text-align: center; }
	img { display: table-cell; vertical-align: middle; position: relative; }
	</style>
	</head>
	<body>

matthewcopeland / beveled_list.css

Created August 2, 2012 23:38

Beveled list

	ul.beveled {
	background-color: #efefef; /* any color darker than white */
	list-style-type: none;
	margin: 0;
	}
	ul.beveled li:not(:first-of-type) {
	border-top: 1px solid rgba(255,255,255, 0.2;
	}

	ul.beveled li:not(:last-of-type) {

matthewcopeland / beveled_list.haml

Created August 2, 2012 23:56

beveled list w haml and sass

	ul.beveled
	- 4.times do
	li List item

matthewcopeland / repeatable-background-checker-thingy.html

Created August 17, 2012 23:39

A quick reference for checking repeatable background patterns.

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	/* Replace your image in this spot. */
	background-image: url("yourimage.png");

	/* set a color here */
	background-color: #efefef;

matthewcopeland / image_tag.rb

Created August 18, 2012 23:24

Octobox Lightbox for Octopress - MVP

	# line 42 of image_tag.rb
	+++ "<span class=\"image-wrapper #{@img['class']}\"><img #{@img.collect {\|k,v\| "#{k}=\"#{v}\"" if v}.join(" ")}></span>"
	--- "<img #{@img.collect {\|k,v\| "#{k}=\"#{v}\"" if v}.join(" ")}>"

matthewcopeland / display.css

Created August 19, 2012 00:56

Display vs Visibility: Avoid bg-image load delays for mobile users.

	/*
	* image loads on hover.
	* users (think mobile) may experience a delay loading the image.
	*/

	.class {
	background-image: url('some-image');
	display: none;
	}
	.class:hover { display: block; }

matthewcopeland / Mediables.scss

Created August 27, 2012 08:31

Using global and local variables in sass for media queries.

	$page-padding: 20px;
	$mobile-page-padding: 10px;


	#content { padding: $page-padding; }


	@media only screen and (max-width: 599px) {
	$page-padding: $mobile-page-padding;
	#content { padding: $page-padding; }

matthewcopeland / _category_style.scss

Created August 29, 2012 00:36

Adding a category class to your octopress blog so you can attached an icon/color to the cat. two methods

	// Or use this method...
	//
	// E[foo$="bar"]
	// an E element whose "foo" attribute value ends exactly with the string "bar"
	//
	// http://www.w3.org/TR/css3-selectors/#attribute-selectors

	a.category[href$="css/"] {
	padding-left: 20px;
	background: url('your-icon.png') left center no-repeat;

matt copeland matthewcopeland