charliepark’s gists

charliepark / Embossed_Text.css

Created April 19, 2010 00:15

	/* Embossed Text Effect Using CSS */

	/* Light Text on a Dark Background */
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);

	/* Dark Text on a Light Background */
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);

charliepark / contrasting_text_color.rb

Created July 18, 2010 12:03

calculate contrast color in Ruby

	def convert_to_brightness_value(background_hex_color)
	(background_hex_color.scan(/../).map {\|color\| color.hex}).sum
	end

	def contrasting_text_color(background_hex_color)
	convert_to_brightness_value(background_hex_color) > 382.5 ? '#000' : '#fff'
	end

charliepark / Eric Meyer's Reset, Cleaned Up .css

Created August 13, 2010 04:59

A cleaned up version of Eric Meyer's CSS reset file.

	/* Eric Meyer's Reset (http://meyerweb.com/eric/tools/css/reset/) */
	/* v1.0 \| 20080212 */

	/* minified and alphabetized by Charlie Park (http://charliepark.org) */

	a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, font, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
	body{line-height:1}
	ol, ul{list-style:none}
	blockquote, q {quotes:none}
	blockquote:before, blockquote:after, q:before, q:after{content: '';content: none}

charliepark / curved_speech_bubble_tails.css

Created January 8, 2011 12:50

Curved Speech Bubble Tails, Using Pure CSS

	/* the "dif" and "dif0" and "dif2" are just alternately-shaped examples, using translucent colors so you can see what's going on */

	div.qanda p{background:#e3e3e3;border-radius:10px;-moz-border-radius:10px;font-size:13px;line-height:17px;margin-left:240px;padding:10px;position:relative}
	div.qanda p:before{border-top:25px solid #e3e3e3;border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
	div.qanda p:after{background:#bbb;border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-5px;width:25px;z-index:2}
	div.qanda p.dif:before{border-top:25px solid rgba(255,0,255,0.5);border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
	div.qanda p.dif:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:a

charliepark / gist:949606

Created April 30, 2011 11:20

html for making pngs for background grids

	<html>
	<body>
	<div style="position:absolute;background:red;padding:40px;top:0;left:0;display:none">
	<div style="background:#fff;width:1px;height:20px;position:relative">
	<div style="background:#000;height:1px;width:1px;position:absolute;bottom:0;"></div>
	</div>
	</div>
	</body>
	</html>

charliepark / Benchmarking Date.today vs. Time.now

Last active September 25, 2015 17:08

	# NOTE: This is from an older version of Rails / Ruby. The code should still work, but you'll probably find that Date is much faster than Time now.

	require 'benchmark'

	def bmd
	Benchmark.ms { 1000.times { puts Date.today } }
	end

	def bmt
	Benchmark.ms { 1000.times { puts Time.now } }

charliepark / baseline.html

Created May 7, 2011 23:49

An experiment with different font sizes and relative positioning, in order to get good baselines. Key takeaway: line-height + margin-bottom of each headline should equal the line-height + margin-bottom of the h1; also, each headline's position:relative;to

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Page Title</title>
	<style type="text/css" media="screen">
	/* from Eric Meyer: v2.0b1 \| 201101 */
	a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{border:0;font:inherit;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,

charliepark / tag_index.rb

Created June 8, 2011 00:05

	---
	layout: default
	---
	<h2 class="post_title">{{page.title}}</h2>
	<ul>
	{% for post in site.posts %}
	{% for tag in post.tags %}
	{% if tag == page.tag %}
	<li class="archive_list">
	<time style="color:#666;font-size:11px;" datetime='{{post.date \| date: "%Y-%m-%d"}}'>{{post.date \| date: "%m/%d/%y"}}</time> <a class="archive_list_article_link" href='{{post.url}}'>{{post.title}}</a>

charliepark / tag_gen.rb

Created June 8, 2011 00:05

	module Jekyll

	class TagIndex < Page
	def initialize(site, base, dir, tag)
	@site = site
	@base = base
	@dir = dir
	@name = 'index.html'

	self.process(@name)

charliepark / scrollToBottom.js

Created July 13, 2011 18:01

Javascript to include in jQuery in order to scroll to the bottom of the webpage.

	// include this in your application.js file:

	jQuery.fn.scrollToBottom = function(){
	var bottom = $(document.body).height();
	window.scrollTo(0, bottom);
	};



	// and invoke it whenever you want, with this:

Charlie Park charliepark