Oliver Pattison opattison

## atom-git-color-override.less
// include in user `styles.less` “your stylesheet”

 @color-status-modified: hsl(22, 50%, 44%);
 @color-status-added: hsl(144, 50%, 35%);
 @color-status-ignored: hsl(200, 3%, 55%);

// Custom git override styles for Atom tree view
.tree-view {
  .status-modified,
  .list-tree li.list-nested-item.status-modified > .list-item {

## key_with_multiple_lines_preserved.yaml
# How to preserve multiple YAML lines with newlines (for example, to pass through a Markdown filter in Jekyll)
# via: http://stackoverflow.com/questions/3790454/in-yaml-how-do-i-break-a-string-over-multiple-lines
key: |+
  Hello.

  World.

# Output if processed with Markdown:
# '<p>hello</p><p>world</p>'

## 2016-03-17-hosting-cost.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                opattison
                / 2016-03-17-hosting-cost.md
            
            
              Last active
              March 18, 2016 02:05
            
          
    Chatting with Michael Lee about my [previous post on what Jekyll is and why I use it]({% post_url 2016-03-16-consider-jekyll %}), I realized more should be said about how affordable static sites can be. From my own experience, here are some cost estimates for hosting a small site (in US dollars):

GitHub Pages: completely free (fewer Jekyll Ruby plugins allowed than a normal Jekyll deployment, but enables automatic deploying).
Amazon S3: starting at $0.03 to a few dollars per month for higher traffic (rate depends on usage). [^1]
S3 with Route53 for DNS routing: starting at $0.53 to a few dollars per month.
S3, Route53 and CloudFront: starting at $0.70 to a few dollars per month. My own site costs around $1.50 per month with this setup in early 2016.
[Shared hosting](https://en.wikipe


## 2016-02-13-example.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                opattison
                / 2016-02-13-example.md
            
            
              Last active
              April 25, 2016 20:34
            
              
                Jekyll srcset imgix implementation with include file, srcset/sizes in config, YAML-provided images, and temporarily assigned variables
              
          
  title
  image
  
  
  example srcset implementation
  
  
  src
  alt
  
  
  /images/example.jpg
  Don’t forget alt text.
  
  
{% assign image = page.image[0] %}
{% include srcset.html %}

  
## loop-within-loop.liquid
{% for image in page.image %}
  <img src="{{ site.image-url }}/{{ page.image[forloop.index0].src }}"
    sizes="{{ site.wide-sizes }}"
    srcset="{% assign parentloop = forloop %}
    {% for srcset1440 in site.srcset1440 %}
    {{ site.image-url }}/{{ site.srcset1440[forloop.index0] }}/{{ page.image[parentloop.index0].src }} {{ site.srcset1440[forloop.index0] }}w{% if forloop.last == false %},
    {% endif %}{% endfor %}"
    >
{% endfor %}

## _config
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

## Trying-out-resolution-and-dppx-media-query-support.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                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.

  
## Clean-MacBook-style-keyboard-shortcuts.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                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.

  
## intro-to-the-web-presentation.html
<!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;

## jekyll-archive-chron-by-year.html
{% 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>
	// include in user `styles.less` “your stylesheet”

	@color-status-modified: hsl(22, 50%, 44%);
	@color-status-added: hsl(144, 50%, 35%);
	@color-status-ignored: hsl(200, 3%, 55%);

	// Custom git override styles for Atom tree view
	.tree-view {
	.status-modified,
	.list-tree li.list-nested-item.status-modified > .list-item {
	# How to preserve multiple YAML lines with newlines (for example, to pass through a Markdown filter in Jekyll)
	# via: http://stackoverflow.com/questions/3790454/in-yaml-how-do-i-break-a-string-over-multiple-lines
	key: \|+
	Hello.

	World.

	# Output if processed with Markdown:
	# '<p>hello</p><p>world</p>'
	{% for image in page.image %}
	<img src="{{ site.image-url }}/{{ page.image[forloop.index0].src }}"
	sizes="{{ site.wide-sizes }}"
	srcset="{% assign parentloop = forloop %}
	{% for srcset1440 in site.srcset1440 %}
	{{ site.image-url }}/{{ site.srcset1440[forloop.index0] }}/{{ page.image[parentloop.index0].src }} {{ site.srcset1440[forloop.index0] }}w{% if forloop.last == false %},
	{% endif %}{% endfor %}"
	>
	{% endfor %}
	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
	<!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;
	{% 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>