JoeNoPhoto

$font-stack:
  (group: brandon, id: light, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: normal),
  (group: brandon, id: light-italic, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: italic),
  (group: brandon, id: regular, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: normal),
  (group: brandon, id: regular-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: brandon, id: bold, font: ('Brandon Grot W01 Black', san-serif), weight: 700, style: normal),
  (group: brandon, id: bold-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: clarendon, id: regular, font: ('Clarendon LT W01', serif), weight: 200, style: normal),
  (group: code, id: regular, font: (monospace), weight: 400, style: normal);

JoeNoPhoto

$color-stack:
	(group: orange, id: normal, color: #e67835),
	(group: orange, id: pale, color: #f8a878),
	(group: orange, id: dark, color: #ad490c),
	(group: blue, id: normal, color: #426682);

// Color  Function
@function color($group, $shade:normal, $transparency:1){
  @each $color in $color-stack{
    $c-group: map-get($color, group);

JoeNoPhoto

@mixin roundedCorners($size){
    -webkit-border-radius: $size + px;
        -moz-border-radius: $size + px;
        border-radius: $size + px;  
}

// Usage:

.button{
    @include roundedCorners(10);

JoeNoPhoto

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
// Usage
.image{
    @include opacity(.8);
}

JoeNoPhoto

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width + px $height + px;
    background-size: $width / 10 + rem $height / 10 + rem;
  }

JoeNoPhoto

@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

JoeNoPhoto

@mixin rem($property, $values...) {
    $n: length($values);
    $i: 1;

    $pxlist: ();
    $remlist: ();

    @while $i <= $n {
        $itemVal: (nth($values, $i));
        @if $itemVal != "auto"{

JoeNoPhoto

const addCounter = (list) => {
  return [...list, 0];
};

const removeCounter = (list, index) => {\
  return [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ];
};

JoeNoPhoto

const toggleTodo = (todo) => {
  return {
    ...todo, // ES7
    completed: !todo.completed,
  };
  
  /* ES6
    return Object.assign({}, todo, {
    completed: !todo.completed,
  });

JoeNoPhoto

import { normalize } from 'normalizr';
import * as schema from './schema';
import * as api from '../api';
import { getIsGalleryLoading } from '../reducers';

// ignore this. I doing console.logs from within my action just to see what kind of data would come from it. 
// api.galleryDB.galleries.map(gallery => gallery.name));
// ["Music", "People", "Performers", "World", "BLK", "Design"]

export const loadGalleryData = (gallery) => (dispatch, getState) => {