Skip to content

Instantly share code, notes, and snippets.

@leonp
leonp / exclude-category.html
Created August 13, 2018 08:38
Exclude posts from a category in Jekyll
{% assign posts = site.posts | where_exp: "post",
"post.category != 'web'" %}
{% for post in posts %}
// Some HTML using the post object
{% endfor %}
@leonp
leonp / local-fonts.txt
Created August 24, 2017 06:55
Defer loading of local fonts, cancel after 2 second wait
# HTML
<body class="font-class-name">
## CSS
.[font-class-name] {
font-family: [fallback stack]
}
<ul>
{% for book in site.data.contentful.spaces.books.book %}
<li>{{ book.title }}, by {{ book.authorSurname }}<br>{{ book.summary | markdownify }}{% if book.picture %}<img src="{{ book.picture.url }}">{% endif %}</li>
{% endfor %}
</ul>
@leonp
leonp / book-json
Created December 10, 2016 15:39
An example json file retrieved from Contentful
---
book:
- sys:
id: 6bAHfY4LlYA2uoqGSOGuGm
title: Pale Fire
authorSurname: Nabokov
summary: A curate's egg, a mystery, a beautiful examination of madness, creativity
and fantasy.
- sys:
id: 7lLBrsiBmEUUiUEwEoGAyK
@leonp
leonp / dynamic-liquid-for
Created December 4, 2016 17:02
Generating an advent calendar
{% assign advent_posts = (site.posts | where: "tag", "advent" | reverse ) %}
{% for post in advent_posts limit:24 %}
<article class="custom-flex-row pb2">
<p class="custom-icon-xmas-{{ forloop.index }} f4 ttu tracked dark-green ma0 mb2 pr2">{{ post.date | date: "%B %e" }}</p>
<a class="white" href="{{ post.url }}"><img class="custom-constrain-img" src="{{ post.featured-image }}" alt="{{ post.featured-alt }}"></a>
@leonp
leonp / Equal-height-columns.markdown
Last active August 29, 2015 14:08
A Pen by Leon Paternoster.

Equal height columns

A standard equal column layout using display: table.

Keeps column size, padding and colouring spearate through a .content div nested within the grid markup.

A Pen by Leon Paternoster on CodePen.

License.

@leonp
leonp / Equal-height-columns-with-display:table.markdown
Last active August 29, 2015 14:08
A Pen by Leon Paternoster.

Equal height columns with display:table

Properly separated column layout, so width, padding and colouring can be separated from table cells.

Key is to apply colour classes to .g-col-x rather than .g-content

Need .g-row (or any other block element) to force a new row, although you don't need any CSS here. Could apply display: table-row to maintain table style semantics.

A Pen by Leon Paternoster on CodePen.