personally-developed 2.0.0

data/_sass/personally-developed/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/personally-developed/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/personally-developed/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/personally-developed/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/personally-developed/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/personally-developed/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/personally-developed/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/personally-developed/neat/mixins/_grid-collapse.scss

@@ -0,0 +1,36 @@
+@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 {
+///     float: left;
+///     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/personally-developed/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;
+}

data/_sass/personally-developed/neat/mixins/_grid-container.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+/// Creates a grid container with clearfix.
+///
+/// @group features
+///
+/// @name Grid container
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the container.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-container;
+///   }
+///
+/// @example css
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+
+@mixin grid-container($grid: $neat-grid) {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

data/_sass/personally-developed/neat/mixins/_grid-media.scss

@@ -0,0 +1,67 @@
+@charset "UTF-8";
+/// `grid-media` allows you to change your layout based on a media query.
+/// For example, an object can span 3 columns on small screens and 6 columns
+/// on large screens.
+///
+/// You can take this a step further and set different grid attributes like
+/// gutter size and total column count for each media query. So, for example,
+/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
+/// screens.
+///
+/// @group features
+///
+/// @name Grid media
+///
+/// @argument {map} $grid
+///   The grid to be used within the scope of the block.
+///   This grid should include the `media` property to determine the expression
+///   for the media query.
+///
+/// @content
+///   Grid media will temporarily the override the default grid with the
+///   attributes of the custom grid. This change is scoped to within the mixin
+///   block, and once the mixin has ended the default grid will revert to its
+///   original state as defined by `$neat-grid`. This allows for different
+///   gutter width and column count based on screen size or other properties.
+///
+/// @example scss
+///   $custom-neat-grid: (
+///     columns: 12,
+///     gutter: 50px,
+///     media: 1000px,
+///   );
+///
+///   .element {
+///     @include grid-column(3);
+///
+///     @include grid-media($custom-neat-grid){
+///       @include grid-column(6);
+///     }
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+///
+///   @media only screen and (min-width: 1000px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 50px;
+///     }
+///   }
+
+@mixin grid-media($grid) {
+  $_media: _retrieve-neat-setting($grid, media);
+  $_query: _neat-parse-media($_media);
+
+  @media #{$_query} {
+    $_default-neat-grid: $neat-grid;
+    $neat-grid: map-merge($neat-grid, $grid) !global;
+    @content;
+    $neat-grid: $_default-neat-grid !global;
+  }
+}

data/_sass/personally-developed/neat/mixins/_grid-push.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+/// Push or pull a grid column by manipulating its left margin.
+///
+/// @group features
+///
+/// @name Grid push
+///
+/// @argument {number (unitless)} $push [false]
+///   The number of columns to push the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to detirmine how far to push the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-push(3);
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: calc(25% - 25px + 40px);
+///   }
+
+@mixin grid-push($push: false, $grid: $neat-grid) {
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $push {
+    $_gutter-affordance: $_grid-gutter * 2;
+    $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  } @else {
+    $_margin-value: _retrieve-neat-setting($grid, gutter);
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  }
+}

data/_sass/personally-developed/neat/mixins/_grid-shift.scss

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+/// Shift columns and reorder them within their container using relative
+/// positioning.
+///
+/// @group features
+///
+/// @name Grid shift
+///
+/// @argument {number (unitless)} $shift [false]
+///   The number of columns to shift the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to detirmine how far to shift the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-shift(3);
+///   }
+///
+/// @example css
+///   .element {
+///     left: calc(25% - 25px + 20px);
+///     position: relative;
+///   }
+
+@mixin grid-shift($shift: false, $grid: $neat-grid) {
+  @if $shift {
+    $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
+    #{_neat-float-direction($grid)}: $_shift-value;
+  } @else {
+    #{_neat-float-direction($grid)}: auto;
+  }
+
+  position: relative;
+}

data/_sass/personally-developed/neat/mixins/_grid-visual.scss

@@ -0,0 +1,67 @@
+@charset "UTF-8";
+/// Creates a series of guide lines using the `background-image` property on a
+/// grid container to visualise the columns and gutters of the grid.
+///
+/// @group features
+///
+/// @name Grid visual
+///
+/// @argument {color} $color
+///   The color of the guide lines created.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid used to determine the guides
+///
+/// @example scss
+///   .element {
+///     @include grid-visual;
+///   }
+///
+/// @example css
+///   .element {
+///     background-image: linear-gradient( … ) ;
+///   }
+
+@mixin grid-visual($color: null, $grid: $neat-grid) {
+  @if not $color {
+    $color: _retrieve-neat-setting($grid, color);
+  }
+
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+  $_grid-visual-object: () !default;
+  $_grid-visual:
+    $color,
+    $color $_grid-gutter,
+    transparent $_grid-gutter,
+  ;
+
+  @for $i from 1 to $_grid-columns {
+    $_grid-visual-local: (
+      #{$i}: "#{_neat-column-width($grid, $i)} + #{$_grid-gutter}",
+    );
+
+    $_grid-visual-object: map-merge($_grid-visual-object, $_grid-visual-local);
+  }
+
+  @each $stop, $location in $_grid-visual-object {
+    $_grid-visual-loop-list:
+      transparent calc(#{$location}),
+      $color calc(#{$location}),
+      $color calc(#{$location} + #{$_grid-gutter}),
+      transparent calc(#{$location} + #{$_grid-gutter}),
+    ;
+
+    $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
+  }
+
+  $_grid-visual-loop-list:
+      transparent calc(100% - #{$_grid-gutter}),
+      $color calc(100% - #{$_grid-gutter}),
+      $color calc(100%),
+  ;
+
+  $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
+
+  background-image: linear-gradient(to right, $_grid-visual);
+}

data/_sass/personally-developed/neat/settings/_settings.scss

@@ -0,0 +1,74 @@
+@charset "UTF-8";
+/// This variable is a sass map that overrides Neat's default grid settings.
+/// Use this to define your project's grid properties incluting gutters and
+/// total column count.
+///
+/// @type map
+///
+/// @group settings
+///
+/// @name Neat grid
+///
+/// @property {number (unitless)} columns [12]
+///   Default number of the total grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Default grid gutter width between columns.
+///
+/// @example scss
+///   $neat-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///   );
+
+$neat-grid: () !default;
+
+/// If you need multiple grids in a single project, you can do
+/// this by defining a new map stored within a variable of your choosing. This
+/// variable can then be passed directly in to any of Neat's mixins like
+/// [`grid-column(12, $my-custom-grid)`](#grid-column).
+///
+/// Custom grids are especially useful with [`grid-media`](#grid-media). By
+/// defining a `media` attribute within your custom grid, you are able to easily
+/// define gutter width and total column count as well the breakpoint at which
+/// they should activate.
+///
+/// @type map
+///
+/// @group settings
+///
+/// @name Custom grids
+///
+/// @property {number (unitless)} columns [12]
+///   Number of the total grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Grid gutter width between columns.
+///
+/// @property {number (with unit) | string | null} media [null]
+///   The `@media` definition that is used by the [`grid-media`](#grid-media)
+///   mixin to detirmine the media properties.
+///
+/// @property {color} color [null]
+///   The color used by [`grid-visual`](#grid-visual) to create the guides.
+///
+/// @property {string} direction [ltr]
+///   The float direction used throughout the grid.
+///
+/// @example scss
+///   $my-custom-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///     media: 1200px,
+///     color: rgba(#00d4ff, 0.25),
+///     direction: ltr,
+///   );
+///
+///   $other-custom-grid-for-print: (
+///     columns: 14,
+///     gutter: 1.5rem,
+///     media: print,
+///   );
+///
+
+$neat-custom-grid: () !default;

data/_sass/personally-developed.scss

@@ -0,0 +1,15 @@
+@import 
+  "personally-developed/variables",
+  "personally-developed/reboot",
+  "personally-developed/fonts",
+  "personally-developed/neat",
+  url(https://fonts.googleapis.com/css?family=Inconsolata:400,700),
+  "personally-developed/animate",
+  "personally-developed/syntax",
+  "personally-developed/layout",
+  "personally-developed/header",
+  "personally-developed/posts",
+  "personally-developed/archive",
+  "personally-developed/footer",
+  "personally-developed/utilities"
+;

data/assets/js/main.min.js

@@ -0,0 +1 @@
+function dayOfWeek(){var e=new Date,n=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];return n[e.getDay()]}window.onload=function(){function e(){function e(){if("undefined"!=typeof window.scrollY)return window.scrollY;var e=document.documentElement;return e.clientHeight?e.scrollTop:document.body.scrollTop}if(window.innerWidth>=1e3)window.onscroll=function(){var n=document.getElementById("box"),o=e();28>=o?n.style.top="0px":n.style.top=o+2+"px"};else{window.onscroll=null;var n=document.getElementById("box");n.style.top="0px"}}e(),window.addEventListener("resize",e,!1),document.getElementById("day").innerHTML=dayOfWeek()};

data/assets/main.scss

@@ -0,0 +1,4 @@
+---
+---
+// Import the partials
+@import "personally-developed";