Skip to content

Instantly share code, notes, and snippets.

View opattison's full-sized avatar

Oliver Pattison opattison

50 followers · 75 following
View GitHub Profile
@opattison
opattison / Preferences.sublime-settings
Last active August 29, 2015 13:56
Sublime Text 3 user config
{
"color_scheme": "Packages/Tomorrow Color Schemes/Tomorrow.tmTheme",
"enable_tab_scrolling": false,
"font_face": "Nitti Basic",
"font_options":
[
"no_italic"
],
"font_size": 19,
"ignored_packages":
@opattison
opattison / yaml-plus-liquid-loop.md
Created February 21, 2014 21:28
A test for YAML front matter loading of image attributes.

image: 1: - url: image1.jpg - caption: 'caption 1' - alt: 'alt text 1' - coordinates: [0, 52] image: 2:

@opattison
opattison / Twilight-Terrain-(MapBox-demo).markdown
Last active August 29, 2015 13:56
A Pen by Oliver Pattison.

Twilight Terrain (MapBox demo)

2014-02-22

Some of my photos on top of a custom MapBox terrain layer. This is a test for a photo gallery.

A Pen by Oliver Pattison on CodePen.

License.

@opattison
opattison / Floating-Jellyfish.markdown
Last active August 29, 2015 13:56
A Pen by Oliver Pattison.
@opattison
opattison / Content-first-responsive-nav-(footer-anchor).markdown
Last active August 29, 2015 13:56
A Pen by Oliver Pattison.

Content-first responsive nav (footer anchor)

2013-08-02

A sample pattern for responsive "footer anchor" navigation.

A Pen by Oliver Pattison on CodePen.

License.

@opattison
opattison / jekyll-archive-chron-by-year.html
Created March 1, 2014 15:00
Jekyll post archive, organized by year headings.
{% for post in site.posts %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
{% if year != nyear %}
{% if forloop.index0 != 0 %}
</ul>
{% endif %}
<h2>{{ post.date | date: '%Y' }}</h2><ul>
{% endif %}
<li><a href="{{ post.url }}">{{ post.title }}</a><br><time datetime="{{ post.date | date: "%Y-%m-%d" }}T{{ post.date | date: "%H:%M" }}">{{ post.date | date: "%B %d, %Y" }}</time></li>
@opattison
opattison / intro-to-the-web-presentation.html
Last active August 29, 2015 13:57 — forked from anonymous/index.html
“Intro to the Web” presentation made with http://killercup.github.io/biggie/ – version live at http://bl.ocks.org/anonymous/raw/9599023/#0
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type='text/css'>
body {
font-family: 'Helvetica Neue';
background:#000;
@opattison
opattison / Clean-MacBook-style-keyboard-shortcuts.markdown
Created October 27, 2014 22:12
A Pen by Oliver Pattison.

Clean MacBook-style keyboard shortcuts

Keyboard CSS design optimized for documentation project purposes, using the standard HTML kbd element. The idea is “keys” that look roughly proportional to the physical keyboard while being readable, not excessively skeuomorphic, and not obviously platform-specific.

A Pen by Oliver Pattison on CodePen.

License.

@opattison
opattison / Trying-out-resolution-and-dppx-media-query-support.markdown
Last active August 29, 2015 14:08
A Pen by Oliver Pattison.

Trying out resolution and dppx media query support

A test of dppx support with CSS media queries. A user agent that has a resolution greater than 1.5dppx (a pixel density ratio of 1.5 or higher) will display a narrower font.

A Pen by Oliver Pattison on CodePen.

License.

@opattison
opattison / _config
Last active August 29, 2015 14:08
implementation of srcset using yaml and site variables – reusable snippet
photo_sizes: '(min-width: 120em) 75vw, (min-width: 100em) 78.75vw, (min-width: 80em) 84.375vw, (min-width: 60em) 93.75vw, 100vw'
srcset:
- 480
- 640
- 720
- 900
- 1080
- 1260
- 1440