squidpress 0.1.0

data/_sass/minicompass/horizontal-list.scss

@@ -0,0 +1,58 @@
+// Horizontal list layout module.
+//
+// Easy mode using simple descendant li selectors:
+//
+//   ul.nav
+//     +horizontal-list
+//
+// Advanced mode:
+// If you need to target the list items using a different selector then use
+// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
+// This may help when working on layouts involving nested lists. For example:
+//
+//   ul.nav
+//     +horizontal-list-container
+//     > li
+//       +horizontal-list-item
+
+@use "minicompass/bullets";
+@use "minicompass/clearfix";
+@use "minicompass/reset";
+
+// Can be mixed into any selector that target a ul or ol that is meant
+// to have a horizontal layout. Used to implement +horizontal-list.
+@mixin horizontal-list-container {
+  @include reset.reset-box-model;
+  @include clearfix.clearfix; }
+
+// Can be mixed into any li selector that is meant to participate in a horizontal layout.
+// Used to implement +horizontal-list.
+//
+// :last-child is not fully supported
+// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
+//
+// IE8 ignores rules that are included on the same line as :last-child
+// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list-item($padding: 4px, $direction: left) {
+  @include bullets.no-bullet;
+  white-space: nowrap;
+  float: $direction;
+  @if $padding {
+    padding: {
+      left: $padding;
+      right: $padding;
+    }
+    &:last-child { padding-#{opposite-position($direction)}: 0; }
+  }
+}
+
+// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
+// This is not an inline list.
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list($padding: 4px, $direction: left) {
+  @include horizontal-list-container;
+  li {
+    @include horizontal-list-item($padding, $direction); } }

data/_sass/minicompass/hover-link.scss

@@ -0,0 +1,5 @@
+// a link that only has an underline when you hover over it
+@mixin hover-link {
+  text-decoration: none;
+  &:hover, &:focus {
+    text-decoration: underline; } }

data/_sass/minicompass/link-colors.scss

@@ -0,0 +1,28 @@
+// Set all the colors for a link with one mixin call.
+// Order of arguments is:
+//
+// 1. normal
+// 2. hover
+// 3. active
+// 4. visited
+// 5. focus
+//
+// Those states not specified will inherit.
+// Mixin to an anchor link like so:
+//     a
+//       +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
+
+@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
+  color: $normal;
+  @if $visited {
+    &:visited {
+      color: $visited; } }
+  @if $focus {
+    &:focus {
+      color: $focus; } }
+  @if $hover {
+    &:hover {
+      color: $hover; } }
+  @if $active {
+    &:active {
+      color: $active; } } }

data/_sass/minicompass/reset.scss

@@ -0,0 +1,117 @@
+// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  // Unlike Eric's original reset, we reset the html element to be compatible
+  // with the vertical rhythm mixins.
+  html {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; }
+  @include reset-html5; }
+
+// Reset all elements within some selector scope. To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+@mixin nested-reset {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: none;
+  &:before, &:after {
+    content: ""; 
+    content: none; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for block html5 elements
+// so they are rendered correctly in browsers that don't recognize them
+// and reset in browsers that have default styles for them.
+@mixin reset-html5 {
+  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+    display: block; } }

data/_sass/partials/_archive.scss

@@ -0,0 +1,75 @@
+@use "minicompass/hover-link";
+@use "minicompass/link-colors";
+
+#archive {
+  #content > div { &, > article { padding-top: 0; } }
+}
+#blog-archives {
+  article {
+    padding: 1em 0 1em;
+    position: relative;
+    background: $img-border bottom left repeat-x;
+    &:last-child {
+      background: none;
+    }
+    footer { padding: 0; margin: 0;}
+  }
+  h1 { color: $text-color; margin-bottom: .3em; }
+  h2 { display: none; }
+  h1 {
+    font-size: 1.5em;
+    a {
+      @include hover-link.hover-link;
+      color: inherit;
+      &:hover { color: $link-color-hover; }
+      font-weight: normal;
+      display: inline-block;
+    }
+  }
+  a.category, time {
+    @extend .sans;
+    color: $text-color-light;
+  }
+  color: $text-color-light;
+  .entry-content { display: none; }
+  time {
+    font-size: .9em;
+    line-height: 1.2em;
+    .month, .day { display: inline-block; }
+    .month { text-transform: uppercase; }
+  }
+  p { margin-bottom: 1em; }
+  &, .entry-content { a { @include link-colors.link-colors(inherit, $link-color-hover); }}
+  a:hover { color: $link-color-hover; }
+  @media only screen and (min-width: 550px) {
+    article { margin-left: 5em; }
+    h2 {
+      margin-bottom: .3em;
+      font-weight: normal;
+      display: inline-block;
+      position: relative; top: -1px;
+      float: left;
+      &:first-child { padding-top: .75em; }
+    }
+    time {
+      position: absolute;
+      text-align: right;
+      left: 0em;
+      top: 1.8em;
+    }
+    .year { display: none; }
+    article {
+      padding:{left: 4.5em; bottom: .7em;}
+    }
+  a.category {
+    line-height: 1.1em;
+    }
+  }
+}
+#content > .category {
+  article {
+    margin-left: 0;
+    padding-left: 6.8em;
+  }
+  .year { display: inline; }
+}

data/_sass/partials/_blog.scss

@@ -0,0 +1,141 @@
+@use "sass:color";
+article {
+  padding-top: 1em;
+  a { @extend .force-wrap; }
+  header {
+    position: relative;
+    padding-top: 2em;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    background: $img-border bottom left repeat-x;
+    h1 {
+      margin: 0;
+      a { text-decoration: none;
+        &:hover { text-decoration: underline; } }
+    }
+    p {
+      font-size: .9em;
+      color: $text-color-light;
+      margin: 0;
+      &.meta {
+        @extend .sans;
+        text-transform: uppercase;
+        position: absolute; top: 0;
+      }
+    }
+    @media only screen and (min-width: 768px) {
+      margin-bottom: 1.5em;
+      padding-bottom: 1em;
+      background: $img-border bottom left repeat-x;
+    }
+  }
+  h2 {
+    padding-top: 0.8em;
+    background: $img-border top left repeat-x;
+  }
+  .entry-content & h2:first-child, header + h2 { padding-top: 0; }
+  h2:first-child, header + h2 { background: none; }
+  .feature {
+    padding-top: .5em;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+    background: $img-border bottom left repeat-x;
+    font-size: 2.0em; font-style: italic;
+    line-height: 1.3em;
+  }
+  img, video, .flash-video {
+    @extend .flex-content;
+    @extend .basic-alignment;
+  }
+  video, .flash-video { margin: 0 auto 1.5em; }
+  video { display: block; width: 100%; }
+  .flash-video {
+    > div {
+      position: relative;
+      display: block;
+      padding-bottom: 56.25%;
+      padding-top: 1px;
+      height: 0;
+      overflow: hidden;
+      iframe, object, embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  > footer {
+    padding-bottom: 2.5em;
+    margin-top: 2em;
+    @extend .sans;
+    p.meta {
+      margin-bottom: .8em;
+      font-size: .85em;
+      clear: both;
+      overflow: hidden;
+    }
+    .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
+      @extend .separator;
+    }
+  }
+
+}
+article + article {
+  .blog-index & {
+    background: $img-border top left repeat-x;
+  }
+}
+#content .blog-index {
+  padding: { top: 0; bottom: 0; }
+  article { padding-top: 2em; }
+  article header { background: none; padding-bottom: 0; }
+  article h1 {
+    font-size: 2.2em;
+    a { color: inherit; &:hover { color: $link-color-hover; } }
+  }
+  a[rel=full-article] {
+    background: color.adjust($main-bg, $lightness: -5%);
+    display: inline-block;
+    padding: .4em .8em;
+    margin-right: .5em;
+    text-decoration: none;
+    color: color.mix($text-color, $text-color-light);
+    @extend .serif;
+    transition: background-color .5s;
+    &:hover {
+      background: $link-color-hover;
+      text-shadow: none;
+      color: $main-bg;
+    }
+  }
+  footer {
+    @extend .sans;
+    margin-top: 1em;
+  }
+}
+
+.separator {
+  content: "\2022 ";
+  padding: 0 .4em 0 .2em;
+  display: inline-block;
+}
+
+#content div.pagination {
+  text-align: center;
+  font-size: .95em;
+  position: relative;
+  background: $img-border top left repeat-x;
+  padding: {top: 1.5em; bottom: 1.5em;}
+  a {
+    text-decoration: none;
+    color: $text-color-light;
+    &.prev { position: absolute; left: 0; }
+    &.next { position: absolute; right: 0; }
+    &:hover { color: $link-color-hover; }
+    &[href*=archive] {
+      &:before, &:after { content: '\2014'; padding: 0 .3em; }
+    }
+  }
+}

data/_sass/partials/_footer.scss

@@ -0,0 +1,23 @@
+@use "minicompass/border-radius";
+@use "minicompass/link-colors";
+
+@use "sass:color";
+body > footer {
+  @extend .sans;
+  font-size: .8em;
+  color: $footer-color;
+  text-shadow: color.adjust($footer-bg, $lightness: 5%) 0 1px;
+  background-color: $footer-bg;
+  background: $footer-bg-front, $footer-bg-back;
+  border-top: 1px solid $footer-border-top;
+  position: relative;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-bottom: 3em;
+  @include border-radius.border-bottom-radius(.4em);
+  z-index: 1;
+  a {
+    @include link-colors.link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color);
+  }
+  p:last-child { margin-bottom: 0; }
+}

data/_sass/partials/_header.scss

@@ -0,0 +1,18 @@
+body > header {
+  background: $header-bg;
+  h1 {
+    display: inline-block;
+    margin: 0;
+    a, a:visited, a:hover {
+      color: $title_color;
+      text-decoration: none;
+    }
+  }
+  h2 {
+    margin: .2em 0 0;
+    @extend .sans;
+    font-size: 1em;
+    color: $subtitle-color;
+    font-weight: normal;
+  }
+}

data/_sass/partials/_navigation.scss

@@ -0,0 +1,141 @@
+@use "minicompass/horizontal-list";
+@use "minicompass/link-colors";
+
+@use "sass:color";
+body > nav {
+  position: relative;
+  background-color: $nav-bg;
+  background: $nav-bg-front, $nav-bg-back;
+  border: {
+    top: 1px solid $nav-border-top;
+    bottom: 1px solid $nav-border-bottom; }
+  padding-top: .35em;
+  padding-bottom: .35em;
+  form {
+    background-clip: padding-box;
+    margin: 0; padding: 0;
+    .search {
+      padding: .3em .5em 0;
+      font-size: .85em;
+      font-family: $sans;
+      line-height: 1.1em;
+      width: 95%;
+      border-radius: .5em;
+      background-clip: padding-box;
+      box-shadow: color.adjust($nav-bg, $lightness: 2%) 0 1px;
+      background-color: color.adjust($nav-bg, $lightness: 15%);
+      border: 1px solid $nav-border;
+      color: #888;
+      &:focus {
+        color: #444;
+        border-color: #80b1df;
+        box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
+        background-color: #fff;
+        outline: none;
+      }
+    }
+  }
+  fieldset[role=search]{ float: right; width: 48%; }
+  fieldset.mobile-nav{ float: left; width: 48%;
+    select{ width: 100%; font-size: .8em; border: 1px solid #888;}
+  }
+  ul { display: none; }
+  @media only screen and (min-width: 550px) {
+    font-size: .9em;
+    ul {
+      @include horizontal-list.horizontal-list(0);
+      float: left;
+      display: block;
+      padding-top: .15em;
+    }
+    ul.subscription {
+      margin-left: .8em;
+      float: right;
+      li:last-child a { padding-right: 0; }
+    }
+    ul li {
+      margin: 0;
+    }
+    a {
+      @include link-colors.link-colors($nav-color, $nav-color-hover, $visited: $nav-color);
+      font-family: $sans;
+      text-shadow: color.adjust($nav-bg, $lightness: 12%) 0 1px;
+      float: left;
+      text-decoration: none;
+      font-size: 1.1em;
+      padding: .1em 0;
+      line-height: 1.5em;
+    }
+    li + li {
+      border-left: 1px solid $nav-border-left;
+      margin-left: .8em;
+      a {
+        padding-left: .8em;
+        border-left: 1px solid $nav-border-right;
+      }
+    }
+    form {
+      float: right;
+      text-align: left;
+      padding-left: .8em;
+      width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 20px;
+      .search {
+        width: 93%;
+        font-size: .95em;
+        line-height: 1.2em;
+      }
+    }
+    ul[data-subscription$=email] + form {
+      width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px;
+      .search { width: 91%; }
+    }
+    fieldset.mobile-nav { display: none; }
+    fieldset[role=search]{ width: 99%; }
+  }
+  @media only screen and (min-width: 992px) {
+    form {
+      width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;
+    }
+    ul[data-subscription$=email] + form {
+      width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px;
+    }
+  }
+}
+.no-placeholder {
+  body > nav .search {
+    background: color.adjust($nav-bg, $lightness: 15%) url('/assets/images/search.png') .3em .25em no-repeat;
+    text-indent: 1.3em;
+  }
+}
+@mixin mask-subscription-nav($feed: 'rss.png', $width: 22px, $height: 22px){
+  position: relative; top: 0px;
+  text-indent: -999999em;
+  background-color: $nav-border-right;
+  border: 0;
+  padding: 0;
+  &,&:after { @include mask-image($feed, $width, $height); }
+  &:after {
+    content: "";
+    position: absolute; top: -1px; left: 0;
+    background-color: color.adjust($nav-color, $lightness: 25%);
+  }
+  &:hover:after { background-color: color.adjust($nav-color, $lightness: 20%); }
+}
+.maskImage {
+  body > nav {
+    @media only screen and (min-width: 550px) {
+      ul[data-subscription$=email] + form {
+        width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px;
+      }
+    }
+    @media only screen and (min-width: 992px) {
+      ul[data-subscription$=email] + form {
+        width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px;
+      }
+    }
+  }
+  ul.subscription { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
+  a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png', 22px, 22px); }
+  a[rel=subscribe-email]{ @include mask-subscription-nav('email.png', 28px, 22px); }
+}
+

data/_sass/partials/_sharing.scss

@@ -0,0 +1,8 @@
+.sharing {
+  p.meta + & {
+    padding: { top: 1em; left: 0; }
+    background: $img-border top left repeat-x;
+  }
+}
+
+#fb-root { display: none; }

data/_sass/partials/_sidebar.scss

@@ -0,0 +1,4 @@
+@import "sidebar/base";
+@import "sidebar/googleplus";
+@import "sidebar/pinboard";
+@import "sidebar/delicious";