Skip to content

Instantly share code, notes, and snippets.

View BryanSchuetz's full-sized avatar
🎧
🎶 "Sittin plush with a royal flush: aces back to back" 🎶

Bryan Schuetz BryanSchuetz

🎧
🎶 "Sittin plush with a royal flush: aces back to back" 🎶
View GitHub Profile
@BryanSchuetz
BryanSchuetz / Sass: Responsive Mixin
Last active August 21, 2020 13:59
Sass: Media Query Mixin
$width-tiny: 15em; //4bits
$width-small: 30em; //6bits
$width-medium: 37.5em; //8bits
$width-wide: 57em; //10bits
// responsive mixin for bubbled media-querries
@mixin responsive($width){
@if $width == tiny-screens{
@media screen and (min-width: $width-tiny){
@BryanSchuetz
BryanSchuetz / gist:639af638a36eb5eaa5f2
Last active October 13, 2016 07:19
Liquid: Siteleaf Next Navigation
{% if next.pages == empty %}
<p class="next">Next: <a href="{{ next.url }}">{{ next.title }}</a></p>
{% elsif next.pages.size > 0 %}
{% for page in next.pages limit:1 %}
<p class="next">Next: <a href="{{ page.url }}">{{ page.title }}</a></p>
{% endfor %}
{% elsif parent.next.pages == empty %}
<p class="next">Next: <a href="{{ parent.next.url }}">{{ parent.next.title }}</a></p>
{% elsif parent.next.pages.size > 0 %}
{% for page in parent.next.pages limit:1 %}
@BryanSchuetz
BryanSchuetz / gist:df9d5c764c6f43366dcb
Last active October 13, 2016 07:18
Liquid: Siteleaf Related Posts
<ul>
{% for related_post in parent.posts %}
{% for tag in current.taxonomy['tags'].values %}
{% if related_post.taxonomy['tags'][tag.slug] and related_post.id != current.id %}
<li><a href="{{related_post.url}}">{{related_post.title}}</a></li>
{% break %}
{% endif %}
{% endfor %}
{% if forloop.index == 3 %}{% break %}{% endif %}
{% endfor %}
// 🎌 🎌
@BryanSchuetz
BryanSchuetz / Inline SVG
Last active August 29, 2015 14:27
Inline SVG for use with SVG definitions loaded as a separate include
<svg class="search" viewBox="0 0 0 0" preserveAspectRatio="xMinYMax meet"><use xlink:href="#SVGGroupID"></use></svg>
@BryanSchuetz
BryanSchuetz / SVG-DEFS include
Created August 17, 2015 18:59
Load all SVG data once using a partial. Then call each one as you want inline—basically, an SVG sprite.
<svg style="display: none;">
<defs>
<g></g>
</defs>
</svg>
{% comment %}
* Loop through all site tags
* For each tag, create a container with the tag title, and all posts containing that tag
* Hide the container by default and use the tag slug as an ID for the container
{% endcomment %}
{% assign sorted_tags = site.tags | sort %}
{% for tag in sorted_tags %}
<div class="tag-archive--block" id="{{ tag | first | slugify }}">
<h2>{{ tag | first }}</h2>
ul > li:not(:last-child)::after {
content: ",";
}
@BryanSchuetz
BryanSchuetz / Reading-Time.liquid
Created March 5, 2016 15:09
A liquid block for generating the reading time of a given post.
{% capture words %}
{{ content | number_of_words | minus: 180 }}
{% endcapture %}
{% unless words contains “-” %}
{{ words | plus: 180 | divided_by: 180 |
append: “ minutes to read” }}
{% endunless %}
@BryanSchuetz
BryanSchuetz / adaptive-fixed-width-grid.scss
Created March 18, 2016 15:44
Sass Adaptive Fixed Width Grid
//
// Configuration
//
$font-size: 10px; // Your base font-size in pixels
$column: 48px; // The column-width of your grid in pixels
$gutter: 24px; // The gutter-width of your grid in pixels
//
// Column-widths in variables