squidpress 0.1.0

data/_sass/base/_layout.scss

@@ -0,0 +1,198 @@
+@use "theme";
+
+@use "minicompass/clearfix";
+@use "sass:color";
+@use 'sass:math';
+
+$max-width: 1200px !default;
+
+// Padding used for layout margins
+$pad-min: 18px !default;
+$pad-narrow: 25px !default;
+$pad-medium: 35px !default;
+$pad-wide: 55px !default;
+
+// Sidebar widths used in media queries
+$sidebar-width-medium: 240px !default;
+$sidebar-pad-medium: 15px !default;
+$sidebar-pad-wide: 20px !default;
+$sidebar-width-wide: 300px !default;
+
+$indented-lists: false !default;
+
+$header-font-size: 1em !default;
+$header-padding-top: 1.5em !default;
+$header-padding-bottom: 1.5em !default;
+
+.group { @include clearfix.pie-clearfix; }
+
+@mixin collapse-sidebar {
+  float: none;
+  width: auto;
+  clear: left;
+  margin: 0;
+  padding: 0 $pad-medium 1px;
+  background-color: color.adjust(theme.$sidebar-bg, $lightness: 2%);
+  border-top: 1px solid color.adjust(theme.$sidebar-border, $lightness: 4%);
+  section {
+    &.odd, &.even { float: left; width: 48%; }
+    &.odd { margin-left: 0; }
+    &.even { margin-left: 4%; }
+  }
+  &.thirds section {
+    width: 30%;
+    margin-left: 5%;
+    &.first {
+      margin-left: 0;
+      clear: both;
+    }
+  }
+}
+
+body {
+  -webkit-text-size-adjust: none;
+  max-width: $max-width;
+  position: relative;
+  margin: 0 auto;
+  > header, > nav, > footer, #content > article, #content > div > article, #content > div > section {
+    @extend .group;
+    padding-left: $pad-min;
+    padding-right: $pad-min;
+    @media only screen and (min-width: 480px) {
+      padding-left: $pad-narrow;
+      padding-right: $pad-narrow;
+    }
+    @media only screen and (min-width: 768px) {
+      padding-left: $pad-medium;
+      padding-right: $pad-medium;
+    }
+    @media only screen and (min-width: 992px) {
+      padding-left: $pad-wide;
+      padding-right: $pad-wide;
+    }
+  }
+  div.pagination {
+    @extend .group;
+    margin-left: $pad-min;
+    margin-right: $pad-min;
+    @media only screen and (min-width: 480px) {
+      margin-left: $pad-narrow;
+      margin-right: $pad-narrow;
+    }
+    @media only screen and (min-width: 768px) {
+      margin-left: $pad-medium;
+      margin-right: $pad-medium;
+    }
+    @media only screen and (min-width: 992px) {
+      margin-left: $pad-wide;
+      margin-right: $pad-wide;
+    }
+  }
+  > header {
+    font-size: $header-font-size;
+    padding-top: $header-padding-top;
+    padding-bottom: $header-padding-bottom;
+  }
+}
+
+#content {
+  overflow: hidden;
+  > div, > article { width: 100%; }
+}
+
+aside.sidebar {
+  float: none;
+  padding: 0 $pad-min 1px;
+  background-color: color.adjust(theme.$sidebar-bg, $lightness: 2%);
+  border-top: 1px solid theme.$sidebar-border;
+  @extend .group;
+}
+
+.flex-content { max-width: 100%; height: auto; }
+
+.basic-alignment {
+  &.left { float: left; margin-right: 1.5em; }
+  &.right { float: right; margin-left: 1.5em; }
+  &.center { display:block; margin: 0 auto 1.5em; }
+  &.left, &.right { margin-bottom: .8em; }
+}
+
+.toggle-sidebar { &, .no-sidebar & { display: none; }}
+
+body.sidebar-footer {
+  @media only screen and (min-width: 750px) {
+    aside.sidebar{ @include collapse-sidebar; }
+  }
+  #content { margin-right: 0px; }
+  .toggle-sidebar { display: none; }
+}
+
+@media only screen and (min-width: 550px) {
+  body > header { font-size: $header-font-size; }
+}
+@media only screen and (min-width: 750px) {
+  aside.sidebar { @include collapse-sidebar; }
+}
+#main, #content, .sidebar {
+  @extend .group;
+}
+@media only screen and (min-width: 768px) {
+  body { -webkit-text-size-adjust: auto; }
+  body > header { font-size: $header-font-size * 1.2; }
+  #main {
+    padding: 0;
+    margin: 0 auto;
+  }
+  #content {
+    overflow: visible;
+    margin-right: $sidebar-width-medium;
+    position: relative;
+    .no-sidebar & { margin-right: 0; border-right: 0; }
+    .collapse-sidebar & { margin-right: 20px; }
+    > div, > article {
+      padding-top: math.div($pad-medium, 2);
+      padding-bottom: math.div($pad-medium, 2);
+      float: left;
+    }
+  }
+  aside.sidebar {
+    width: $sidebar-width-medium - $sidebar-pad-medium*2;
+    padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
+    background: none;
+    clear: none;
+    float: left;
+    margin: 0 -100% 0 0;
+    section {
+      width: auto; margin-left: 0;
+      &.odd, &.even { float: none; width: auto; margin-left: 0; }
+    }
+    .collapse-sidebar & {
+      @include collapse-sidebar;
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  body > header { font-size: $header-font-size * 1.3; }
+  #content { margin-right: $sidebar-width-wide; }
+  #content {
+    > div, > article {
+      padding-top: math.div($pad-wide, 2);
+      padding-bottom: math.div($pad-wide, 2);
+    }
+  }
+  aside.sidebar {
+    width: $sidebar-width-wide - $sidebar-pad-wide*2;
+    padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
+    .collapse-sidebar & {
+      padding: { left: $pad-wide; right: $pad-wide; }
+    }
+  }
+}
+
+@if $indented-lists == false {
+  @media only screen and (min-width: 768px) {
+    ul, ol { margin-left: 0; }
+  }
+}
+

data/_sass/base/_solarized.scss

@@ -0,0 +1,47 @@
+@use "sass:color";
+$base03:          #002b36 !default; //darkest blue
+$base02:          #073642 !default; //dark blue
+$base01:          #586e75 !default; //darkest gray
+$base00:          #657b83 !default; //dark gray
+$base0:           #839496 !default; //medium gray
+$base1:           #93a1a1 !default; //medium light gray
+$base2:           #eee8d5 !default; //cream
+$base3:           #fdf6e3 !default; //white
+$solar-yellow:    #b58900 !default;
+$solar-orange:    #cb4b16 !default;
+$solar-red:       #dc322f !default;
+$solar-magenta:   #d33682 !default;
+$solar-violet:    #6c71c4 !default;
+$solar-blue:      #268bd2 !default;
+$solar-cyan:      #2aa198 !default;
+$solar-green:     #859900 !default;
+
+$solarized: dark !default;
+
+@if $solarized == light {
+
+  $_base03: $base03;
+  $_base02: $base02;
+  $_base01: $base01;
+  $_base00: $base00;
+  $_base0:  $base0;
+  $_base1:  $base1;
+  $_base2:  $base2;
+  $_base3:  $base3;
+
+  $base03:  $_base3;
+  $base02:  $_base2;
+  $base01:  $_base1;
+  $base00:  $_base0;
+  $base0:   $_base00;
+  $base1:   $_base01;
+  $base2:   $_base02;
+  $base3:   $_base03;
+}
+
+/* non highlighted code colors */
+$pre-bg: $base03 !default;
+$pre-border: color.adjust($base02, $lightness: -5%) !default;
+$pre-color: $base1 !default;
+
+

data/_sass/base/_theme.scss

@@ -0,0 +1,92 @@
+@use "minicompass/link-colors";
+
+@use "sass:color";
+@use 'sass:math';
+
+$asset-root: "/assets" !default;
+
+$noise-bg: url($asset-root + '/images/noise.png') top left !default;
+$img-border: inline-image('dotted-border.png') !default;
+
+// Main Link Colors
+$link-color: color.adjust(#165b94, $lightness: 3%) !default;
+$link-color-hover: color.adjust($link-color, $lightness: 10%, $saturation: 25%) !default;
+$link-color-visited: color.adjust($link-color, $hue: 80, $lightness: -4%) !default;
+$link-color-active: color.adjust($link-color-hover, $lightness: -15%) !default;
+
+// Main Section Colors
+$main-bg: #f8f8f8 !default;
+$page-bg: #252525 !default;
+$article-border: #eeeeee !default;
+
+$header-bg: #333 !default;
+$header-border: color.adjust($header-bg, $lightness: 15%) !default;
+$title-color: #f2f2f2 !default;
+$subtitle-color: #aaa !default;
+
+$text-color: #222 !default;
+$text-color-light: #aaa !default;
+$type-border: #ddd !default;
+
+/* Navigation */
+$nav-bg: #ccc !default;
+$nav-bg-front: url($asset-root + '/images/noise.png') !default;
+$nav-bg-back: linear-gradient(color.adjust($nav-bg, $lightness: 8%), $nav-bg, color.adjust($nav-bg, $lightness: -11%)) !default;
+$nav-color: color.adjust($nav-bg, $lightness: -38%) !default;
+$nav-color-hover: color.adjust($nav-color, $lightness: -25%) !default;
+$nav-placeholder: color.adjust(color.adjust($nav-bg, $lightness: -10%), $saturation: -15%) !default;
+$nav-border: color.adjust($nav-bg, $lightness: -10%) !default;
+$nav-border-top: color.adjust($nav-bg, $lightness: 15%) !default;
+$nav-border-bottom: color.adjust($nav-bg, $lightness: -25%) !default;
+$nav-border-left: color.adjust($nav-bg, $lightness: -11%) !default;
+$nav-border-right: color.adjust($nav-bg, $lightness: 7%) !default;
+
+/* Sidebar colors */
+$sidebar-bg: #f2f2f2 !default;
+$sidebar-link-color: $text-color !default;
+$sidebar-link-color-hover: $link-color-hover !default;
+$sidebar-link-color-active: $link-color-active !default;
+$sidebar-color: color.change(color.mix($text-color, $sidebar-bg, 80%), $hue: color.channel($sidebar-bg, "hue", $space: hsl), $saturation: math.div(color.channel($sidebar-bg, "saturation", $space: hsl), 2)) !default;
+$sidebar-border: color.adjust(color.adjust($sidebar-bg, $lightness: -7%), $saturation: -10%) !default;
+$sidebar-border-hover: color.adjust($sidebar-bg, $lightness: -7%) !default;
+$sidebar-link-color-subdued: color.adjust($sidebar-color, $lightness: 20%) !default;
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
+
+$footer-color: #888 !default;
+$footer-bg: #ccc !default;
+$footer-bg-front: url($asset-root + '/images/noise.png') !default;
+$footer-bg-back: linear-gradient(color.adjust($footer-bg, $lightness: 8%), $footer-bg, color.adjust($footer-bg, $lightness: -11%)) !default;
+$footer-color: color.adjust($footer-bg, $lightness: -38%) !default;
+$footer-color-hover: color.adjust($footer-color, $lightness: -10%) !default;
+$footer-border-top: color.adjust($footer-bg, $lightness: 15%) !default;
+$footer-border-bottom: color.adjust($footer-bg, $lightness: -15%) !default;
+$footer-link-color: color.adjust($footer-bg, $lightness: -38%) !default;
+$footer-link-color-hover: color.adjust($footer-color, $lightness: -25%) !default;
+$page-border-bottom: color.adjust($footer-bg, $lightness: -5%) !default;
+
+
+/* Core theme application */
+
+a {
+  @include link-colors.link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
+}
+aside.sidebar a {
+  @include link-colors.link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
+}
+a {
+  transition: color .3s;
+}
+
+html {
+  background: $page-bg url($asset-root + '/images/line-tile.png') top left;
+}
+body {
+  > div {
+    background: $sidebar-bg $noise-bg;
+    border-bottom: 1px solid $page-border-bottom;
+    > div {
+      background: $main-bg $noise-bg;
+      border-right: 1px solid $sidebar-border;
+    }
+  }
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,166 @@
+@use "theme";
+
+$blockquote: theme.$type-border !default;
+$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default;
+$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default;
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
+$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default;
+$header-title-font-family: $heading-font-family !default;
+$header-subtitle-font-family: $heading-font-family !default;
+
+// Fonts
+.heading {
+  font-family: $heading-font-family;
+}
+.sans { font-family: $sans; }
+.serif { font-family: $serif; }
+.mono { font-family: $mono; }
+
+body > header h1 {
+  font-size: 2.2em;
+  @extend .heading;
+  font-family: $header-title-font-family;
+  font-weight: normal;
+  line-height: 1.2em;
+  margin-bottom: 0.6667em;
+}
+body > header h2 {
+  font-family: $header-subtitle-font-family;
+}
+
+body {
+  line-height: 1.5em;
+  color: theme.$text-color;
+  @extend .serif;
+}
+h1 {
+  font-size: 2.2em;
+  line-height: 1.2em;
+}
+
+@media only screen and (min-width: 992px) {
+  body { font-size: 1.15em; }
+  h1 { font-size: 2.6em; line-height: 1.2em; }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @extend .heading;
+  text-rendering: optimizelegibility;
+  margin-bottom: 1em;
+  font-weight: bold;
+}
+h2, section h1 {
+  font-size: 1.5em;
+}
+h3, section h2, section section h1 {
+  font-size: 1.3em;
+}
+h4, section h3, section section h2, section section section h1 {
+  font-size: 1em;
+}
+h5, section h4, section section h3 {
+  font-size: .9em;
+}
+h6, section h5, section section h4, section section section h3 {
+  font-size: .8em;
+}
+
+p, article blockquote, ul, ol { margin-bottom: 1.5em; }
+
+ul { list-style-type: disc;
+  ul { list-style-type: circle; margin-bottom: 0px;
+    ul { list-style-type: square; margin-bottom: 0px; }}}
+
+ol { list-style-type: decimal;
+  ol { list-style-type: lower-alpha; margin-bottom: 0px;
+    ol { list-style-type: lower-roman; margin-bottom: 0px; }}}
+
+ul, ol { &, ul, ol { margin-left: 1.3em; }}
+ul, ol { ul, ol { margin-bottom: 0em; }}
+
+strong { font-weight: bold; }
+
+em { font-style: italic; }
+
+sup, sub { font-size: 0.75em; position: relative;  display: inline-block; padding: 0 .2em; line-height: .8em;}
+sup { top: -.5em; }
+sub { bottom: -.5em; }
+
+a[rev='footnote']{ font-size: .75em; padding: 0 .3em; line-height: 1; }
+
+q { font-style: italic;
+  &:before { content: "\201C"; }
+  &:after { content: "\201D"; }
+}
+
+em, dfn { font-style: italic; }
+
+strong, dfn { font-weight: bold; }
+
+del, s { text-decoration: line-through; }
+
+abbr, acronym { border-bottom: 1px dotted; cursor: help; }
+
+pre, code, tt { @extend .mono; }
+
+hr { margin-bottom: 0.2em; }
+
+small { font-size: .8em; }
+
+big { font-size: 1.2em; }
+
+article blockquote {
+  $bq-margin: 1.2em;
+  font-style: italic;
+  position: relative;
+  font-size: 1.2em;
+  line-height: 1.5em;
+  padding-left: 1em;
+  border-left: 4px solid rgba(theme.$text-color-light, .5);
+  cite {
+    font-style: italic;
+    a { color: theme.$text-color-light !important; word-wrap: break-word; }
+    &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: theme.$text-color-light; }
+  }
+  @media only screen and (min-width: 992px) {
+    padding-left: 1.5em;
+    border-left-width: 4px;
+  }
+}
+
+.pullquote-right:before,
+.pullquote-left:before {
+  /* Reset metrics. */
+  padding: 0;
+  border: none;
+
+  /* Content */
+  content: attr(data-pullquote);
+
+  /* Pull out to the right, modular scale based margins. */
+  float: right;
+  width: 45%;
+  margin: .5em 0 1em 1.5em;
+
+  /* Baseline correction */
+  position: relative;
+  top: 7px;
+  font-size: 1.4em;
+  line-height: 1.45em;
+}
+
+.pullquote-left:before {
+  /* Make left pullquotes align properly. */
+  float: left;
+  margin: .5em 1.5em 1em 0;
+}
+
+/* @extend this to force long lines of continuous text to wrap */
+.force-wrap {
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+

data/_sass/base/_utilities.scss

@@ -0,0 +1,32 @@
+@use "sass:color";
+
+$asset-root: "/assets" !default;
+
+@mixin mask-image($img, $width, $height, $repeat: no-repeat){
+  mask-image: url($asset-root + "/images/" + $img);
+  mask-repeat: $repeat;
+  width: $width;
+  height: $height;
+}
+
+@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
+  border-radius: $border-radius;
+  box-shadow: $shadow;
+  box-sizing: border-box;
+  border: $border;
+}
+
+@mixin selection($bg, $color: inherit, $text-shadow: none){
+  * {
+    &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+    &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+    &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+  }
+}
+
+@function text-color($color, $dark: dark, $light: light){
+  $text-color: ( (color.red($color)*299) + (color.green($color)*587) + (color.blue($color)*114) ) / 1000;
+  $text-color: if(sass($text-color >= 150): $dark; else: $light);
+  @return $text-color;
+}
+

data/_sass/custom/_colors.scss

@@ -0,0 +1,43 @@
+// Here you can easily change your sites's color scheme.
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
+// If you need a handy color picker try http://hslpicker.com
+
+//$header-bg: #263347;
+//$subtitle-color: lighten($header-bg, 58);
+//$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
+//$nav-bg-front: url('/assets/images/noise.png');
+//$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
+//$sidebar-bg: desaturate(#eceff5, 8);
+//$sidebar-link-color: saturate(#526f9a, 10);
+//$sidebar-link-color-hover: darken(#7ab662, 9);
+//$footer-bg: #ccc !default;
+//$footer-bg-front: url('/assets/images/noise.png');
+//$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11));
+
+
+/* To use the light Solarized highlighting theme uncomment the following line */
+//$solarized: light;
+
+/* If you want to tweak the Solarized colors you can do that here */
+//$base03:          #002b36; //darkest blue
+//$base02:          #073642; //dark blue
+//$base01:          #586e75; //darkest gray
+//$base00:          #657b83; //dark gray
+//$base0:           #839496; //medium gray
+//$base1:           #93a1a1; //medium light gray
+//$base2:           #eee8d5; //cream
+//$base3:           #fdf6e3; //white
+//$solar-yellow:    #b58900;
+//$solar-orange:    #cb4b16;
+//$solar-red:       #dc322f;
+//$solar-magenta:   #d33682;
+//$solar-violet:    #6c71c4;
+//$solar-blue:      #268bd2;
+//$solar-cyan:      #2aa198;
+//$solar-green:     #859900;
+
+
+/* Non highlighted code colors */
+//$pre-bg: $base03;
+//$pre-border: darken($base02, 5);
+//$pre-color: $base1;

data/_sass/custom/_fonts.scss

@@ -0,0 +1,10 @@
+// Here you can easily change font faces which are used in your site.
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
+// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html
+
+//$sans: "Optima", sans-serif;
+//$serif: "Baskerville", serif;
+//$mono: "Courier", monospace;
+//$heading-font-family: "Verdana", sans-serif;
+//$header-title-font-family: "Futura", sans-serif;
+//$header-subtitle-font-family: "Futura", sans-serif;

data/_sass/custom/_layout.scss

@@ -0,0 +1,21 @@
+// Here you can easily change your sites's layout.
+// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
+
+//$header-font-size: 1em;
+//$header-padding-top: 1.5em;
+//$header-padding-bottom: 1.5em;
+
+//$max-width: 1350px;
+//$indented-lists: true;
+
+// Padding used for layout margins
+//$pad-min: 18px;
+//$pad-narrow: 25px;
+//$pad-medium: 35px;
+//$pad-wide: 55px;
+
+// Sidebar widths used in media queries
+//$sidebar-width-medium: 240px;
+//$sidebar-pad-medium: 15px;
+//$sidebar-pad-wide: 20px;
+//$sidebar-width-wide: 300px;

data/_sass/custom/_styles.scss

@@ -0,0 +1,2 @@
+// This File is imported last, and will override other styles in the cascade
+// Add styles here to make changes without digging in too much

data/_sass/minicompass/border-radius.scss

@@ -0,0 +1,14 @@
+// Border Radius
+
+// The length of a border-radius to be used by default.
+$default-border-radius: 5px !default;
+
+// Round both top corners by amount
+@mixin border-top-radius($radius: $default-border-radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius; }
+
+// Round both bottom corners by amount
+@mixin border-bottom-radius($radius: $default-border-radius) {
+  border-bottom-left-radius: $radius;
+  border-bottom-right-radius: $radius; }

data/_sass/minicompass/bullets.scss

@@ -0,0 +1,36 @@
+$asset-root: "/assets" !default;
+
+// Turn off the bullet for an element of a list
+@mixin no-bullet {
+  list-style-image : none;
+  list-style-type  : none;
+  margin-left      : 0;
+}
+
+// turns off the bullets for an entire list
+@mixin no-bullets {
+  list-style: none;
+  li { @include no-bullet; }
+}
+
+// Make a list(ul/ol) have an image bullet.
+//
+// The mixin should be used like this for an icon that is 5x7:
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png", 5px, 7px)
+//
+// Additionally, if the image dimensions are not provided,
+// The image dimensions will be extracted from the image itself.
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png")
+//
+@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
+  margin-left: 0;
+  li {
+    padding-left: $padding;
+    background: url($asset-root + "/images/" + $bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
+    list-style-type: none;
+  }
+}

data/_sass/minicompass/clearfix.scss

@@ -0,0 +1,20 @@
+// This basic method is preferred for the usual case, when positioned
+// content will not show outside the bounds of the container.
+//
+// Recommendations include using this in conjunction with a width.
+// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
+@mixin clearfix {
+  overflow: hidden;
+}
+
+// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
+// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
+//
+// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
+@mixin pie-clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}