Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View ruemic's full-sized avatar

ruemic ruemic

16 followers · 42 following
View GitHub Profile
@ruemic
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
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
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
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
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
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
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
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
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%;