dream-theme 0.1.0

data/_sass/main.scss

@@ -0,0 +1,73 @@
+@import "neat/neat";
+@import "bourbon/bourbon";
+@import "base/base";
+
+
+$primary-font: 'Merriweather', serif;
+$primary-color: #FF5600;
+$primary-font-color: #333;
+
+$neat-grid: (
+  columns: 12,
+  gutter: 20px,
+);
+
+$tablet-grid: (
+  columns: 12,
+  gutter: 20px,
+  media: "(max-width: 1200px)",
+);
+
+$phone-grid: (
+  columns: 12,
+  gutter: 20px,
+  media: 600,
+);
+
+.grid-container{
+  @include grid-container;
+  max-width: 1500;
+  margin: 0 auto;
+}
+
+.full-width {
+  @include grid-column(12);
+}
+
+
+.half-width {
+  @include grid-column(6);
+
+
+  @include grid-media($tablet-grid){
+      @include grid-column(12);
+    }
+
+  @include grid-media($phone-grid){
+      @include grid-column(12);
+    }
+}
+
+
+
+.quarter-width {
+  @include grid-column(3);
+
+  @include grid-media($tablet-grid){
+    @include grid-column(6);
+  }
+
+  @include grid-media($phone-grid){
+    @include grid-column(12);
+  }
+}
+
+
+body {
+  font-family: $primary-font;
+}
+
+
+@import "navigation";
+@import "home";
+@import "post";

data/_sass/navigation.scss

@@ -0,0 +1,45 @@
+
+
+.navigation {
+  @include grid-container;
+  @include grid-column(12);
+  height: 50px;
+
+  border-bottom: solid 1px #eee;
+  padding-top: 15px;
+
+
+  .name {
+    @include grid-column(3);
+
+    @include grid-media($phone-grid){
+      @include grid-column(12);
+    }
+
+    float: left;
+
+    .first {
+        color: $primary-color;
+        font-weight: 600;
+    }
+    .last {
+      color: #333;
+    }
+
+  }
+
+  .site-links{
+    float: right;
+    .site-link{
+      @include grid-column(5);
+      text-align:center;
+
+      a {
+        color: #333;
+        text-decoration: none;
+      }
+    }
+  }
+
+
+}

data/_sass/neat/_neat.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+// Neat 2.1.0
+// http://neat.bourbon.io
+// Copyright 2012 thoughtbot, inc.
+// MIT License
+
+@import "neat/settings/settings";
+
+@import "neat/functions/retrieve-neat-settings";
+@import "neat/functions/neat-column-default";
+@import "neat/functions/neat-column-width";
+@import "neat/functions/neat-column-ratio";
+@import "neat/functions/neat-float-direction";
+@import "neat/functions/neat-merge-defaults";
+@import "neat/functions/neat-opposite-direction";
+@import "neat/functions/neat-parse-columns";
+@import "neat/functions/neat-parse-media";
+@import "neat/functions/neat-append-grid-visual";
+
+@import "neat/mixins/grid-collapse";
+@import "neat/mixins/grid-column";
+@import "neat/mixins/grid-container";
+@import "neat/mixins/grid-media";
+@import "neat/mixins/grid-push";
+@import "neat/mixins/grid-shift";
+@import "neat/mixins/grid-visual";

data/_sass/neat/neat/functions/_neat-append-grid-visual.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/// Append attributes to a the `$_grid-visual` variable in `grid-visual` mixin
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-append-grid-visual($grid-visual-list, $attributes) {
+  @each $attribute in $attributes {
+    $grid-visual-list: append($grid-visual-list, $attribute, comma);
+  }
+
+  @return $grid-visual-list;
+}

data/_sass/neat/neat/functions/_neat-column-default.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Determine if a column count has been given.
+/// If no columns have been given return the grid's total column count.
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-default($grid, $columns) {
+  @if $columns == null {
+    $_grid-columns: _retrieve-neat-setting($grid, columns);
+    @return $_grid-columns;
+  } @else {
+    @return $columns;
+  }
+}

data/_sass/neat/neat/functions/_neat-column-ratio.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+/// Determine the ratio of `$columns` to the total column count.
+/// If `$columns` is more than one value, they are handed to
+/// `_neat-parse-columns()` which will determine the total columns and use this
+/// value instead of `total-columns`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number | list} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-ratio($grid, 3)
+///
+/// @access private
+
+@function _neat-column-ratio($grid, $columns) {
+  @if length($columns) > 1 {
+    @return nth($columns, 1) / _neat-parse-columns($columns);
+  } @else if $columns {
+    @return $columns / _retrieve-neat-setting($grid, columns);
+  }
+}

data/_sass/neat/neat/functions/_neat-column-width.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+/// Return a calulated column width that can then be passed in to a `calc()`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number} $columns
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-column-width($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-width($grid, $columns) {
+  $_column-ratio: _neat-column-ratio($grid, $columns);
+  $_gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $_gutter == 0 {
+    @return unquote("#{percentage($_column-ratio)}");
+  } @else {
+    $_gutter-affordance: $_gutter + ($_gutter * $_column-ratio);
+    @return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}");
+  }
+}

data/_sass/neat/neat/functions/_neat-float-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-float-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-float-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: left;
+  } @else if $_direction == "rtl" {
+    $_float-direction: right;
+  }
+  @return $_float-direction;
+}

data/_sass/neat/neat/functions/_neat-merge-defaults.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Apply Neat's default properties to undefined values within a map.
+///
+/// @argument {map} $grid
+///
+/// @return {map}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid)
+///
+/// @access private
+
+@function _neat-merge-defaults($grid) {
+  $_merged-grid: map-merge((
+    columns: 12,
+    gutter: 20px,
+    media: null,
+    color: rgba(#00d4ff, 0.25),
+    direction: ltr,
+  ), $grid);
+
+  @return $_merged-grid;
+}

data/_sass/neat/neat/functions/_neat-opposite-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the oppoite of the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-opposite-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-opposite-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: right;
+  } @else if $_direction == "rtl" {
+    $_float-direction: left;
+  }
+  @return $_float-direction;
+}

data/_sass/neat/neat/functions/_neat-parse-columns.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Parse a column count like `3 of 5` and retur the total coloumn count.
+/// This is to allow a shorthand for custom grids without using a settings map.
+///
+///
+/// @argument {list} $span
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-columns(3 of 5)
+///
+/// @access private
+
+@function _neat-parse-columns($span) {
+  @if length($span) == 3 {
+    $_total-columns: nth($span, 3);
+    @return $_total-columns;
+  } @else if length($span) == 2 or if length($span) >= 3 {
+    @error "`$column` should contain 2 values, seperated by an `of`";
+  }
+}

data/_sass/neat/neat/functions/_neat-parse-media.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/// Parse media types. If the property is a string then return it, otherwise
+/// assume screen and min-width.
+///
+/// @argument {string | number (with unit)} $media
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-media($grid, 1000px)
+///
+/// @access private
+
+@function _neat-parse-media($media) {
+  @if type-of($media) == number {
+    @return "only screen and (min-width: #{$media})";
+  } @else if type-of($media) == string {
+    @return "#{$media}";
+  }
+}

data/_sass/neat/neat/functions/_retrieve-neat-settings.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+/// This function recives a grid map and merges it with Neat's defauls.
+/// It then returns the value of the property that has been passed to it.
+///
+/// @argument {map} $grid
+///
+/// @argument {string} $setting
+///
+/// @return {boolean | color | list | number | string}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid, columns)
+///
+/// @access private
+
+@function _retrieve-neat-setting($grid, $setting) {
+  $_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid);
+  @return map-get($_grid-settings, $setting);
+}

data/_sass/neat/neat/mixins/_grid-collapse.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+/// Creates collapsed grid object that consumes the gutters of its container,
+/// for use in nested layouts.
+///
+/// @group features
+///
+/// @name Grid collapse
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the collapsed container.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-collapse;
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: -20px;
+///     margin-right: -20px;
+///     width: calc(100% + 40px);
+///   }
+
+@mixin grid-collapse($grid: $neat-grid) {
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if unit($_grid-gutter) == "%" {
+    @warn "`grid-collapse` is not compatible with percentage based gutters.";
+  }
+
+  margin-#{_neat-float-direction($grid)}: -($_grid-gutter);
+  margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter);
+  width: calc(100% + #{($_grid-gutter * 2)});
+}

data/_sass/neat/neat/mixins/_grid-column.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+/// Creates a grid column of requested size.
+///
+/// @group features
+///
+/// @name Grid column
+///
+/// @argument {number (unitless)} $columns [null]
+///   Specifies the number of columns an element should span based on the total
+///   columns of the grid.
+///
+///   This can also be defined in a shorthand syntaxt which also contains the
+///   total column count such as `3 of 5`.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-column(3);
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+
+@mixin grid-column($columns: null, $grid: $neat-grid) {
+  $columns: _neat-column-default($grid, $columns);
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  width: calc(#{_neat-column-width($grid, $columns)});
+  float: _neat-float-direction($grid);
+  margin-#{_neat-float-direction($grid)}: $_grid-gutter;
+}