BryanSchuetz

$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

{% 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

<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

<svg class="search" viewBox="0 0 0 0" preserveAspectRatio="xMinYMax meet"><use xlink:href="#SVGGroupID"></use></svg>

BryanSchuetz

<svg style="display: none;">
  <defs>
    <g></g>
  </defs>
</svg>

BryanSchuetz

{% 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>

BryanSchuetz

ul > li:not(:last-child)::after {
  content: ",";
}

BryanSchuetz

{% capture words %}
  {{ content | number_of_words | minus: 180 }}
{% endcapture %}
{% unless words contains “-” %}
  {{ words | plus: 180 | divided_by: 180 | 
     append: “ minutes to read” }}
{% endunless %}

BryanSchuetz

//
// 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