ruemic’s gists

ruemic / dabblet.css

Created February 26, 2013 21:22

The first commented line is your dabblet’s title

	/**
	* The first commented line is your dabblet’s title
	*/

	background: #f06;
	background: linear-gradient(15deg, hsl(10, 20%, 30%), red);
	min-height: 100%;

ruemic / dabblet.css

Created February 26, 2013 21:31

New Dabbles

	/**
	* New Dabbles
	**/

	background: hsl(140,50%,50%);
	background: linear-gradient(357deg, hsl(140,50%,50%), hsl(240,50%,50%));
	min-height: 100%;

ruemic / index.tpl

Last active December 16, 2015 09:19

Responsive Image Gallery Using Picture Fill

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset=utf-8 />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Picturefill</title>

	<pop:stylesheet name="/screen.css"/>

ruemic / index.tpl

Last active December 16, 2015 09:59

A simple picture fill extension for Webpop

	<pop:content>
	<pop:picture:responsive field="image" resize="fit" width="300"/>
	</pop:content>

ruemic / index.tpl

Last active December 16, 2015 15:49

A simple picture fill extension for Webpop

	<pop:content>
	<div class="hero">
	<h1>Responsive Image Gallery</h1>
	<p>Using <a href="https://github.com/scottjehl/picturefill">picture fill</a> and <a href="http://www.webpop.com">Webpop</a></p>
	<pop:picture:responsive field="image" resize="fit" width="600"/>
	</div>

	<ul>
	<pop:picture:responsive field="image_gallery" resize="fit" width="150" break="li"/>
	</ul>

ruemic / index.tpl

Last active December 16, 2015 15:49

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset=utf-8 />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Picturefill</title>
	<pop:stylesheet name="/screen.css"/>
	</head>

ruemic / calendar.js

Last active December 16, 2015 20:39

Some comments to describe the inner workings of a Webpop calendar extension

	// This searches the entries of a section to generates a simple
	// timeline object that represents all the years which entries
	// with a date in the future belong to.
	exports.years= function() {
	if (!section) return null;

	var result = site.search({
	all: true,
	filters: {section: section, date: "future"},
	timeline: {date: "year"},

ruemic / index.html

Last active December 16, 2015 21:00

The Pop Tags template for rendering our a tour date calendar, which organizes tour dates into years and months with a server side extension.

	<!-- Pull in a collection of tour date entries -->
	<pop:content from="tour-dates">

	<!-- Iterate through a collection of years, each with a 'start' and 'end' attribute -->
	<pop:years>

	<!-- Render the Year -->
	<li>
	<pop:start format="yyyy" wrap="h2" class="year"/>
	</li>

ruemic / picture.coffee

Last active December 17, 2015 01:49

A simple responsive image extension for Webpop that abstracts picture markup into a single tag and serves dynamically resized and cached images via CDN.

	# This generates markup for https://github.com/scottjehl/picturefill
	# Customize this to suit your responsive image needs
	markupForImage = (image, options) ->
	resize = options.resize
	width = options.width
	height = options.height

	output =
	'<div data-picture data-alt="' + image.alt + '">' +

ruemic / picture-fill-hairball

Last active December 17, 2015 01:49

Standard oupput for a picture fill markup with four breakpoints,

	<div data-picture="" data-alt="Eagle Perch">
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/150/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg"> </div>
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/300/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-device-pixel-ratio: 2.0)"> </div>
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/300/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 768px)"> </div>
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/600/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 768px) and (min-device-pixel-ratio: 2.0)"> </div>
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/450/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 1280px)"> </div>
	<div data-src="http://c1940652.r52.cf0.rackcdn.com/fit/900/0/516fc9c9896ad857e2001578/2012-08-24-18.31.24.jpg" data-media="(min-width: 1280px) and (min-device-pixel-ratio: 2.0)"> </div>
	<div data-src="http://c1

ruemic ruemic