From f4464c13599a4edbc72fefce77c660bd6b442107 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 27 Feb 2017 20:16:10 -0700 Subject: [PATCH] Don't do header slide on mobile --- build/bundle.js | 4 ++-- source/components/Header/index.jsx | 21 +++++++++------------ 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/build/bundle.js b/build/bundle.js index 381926c..b413d0a 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -20,8 +20,8 @@ n._dispatchInstances=C(n._dispatchInstances,e))}}function l(e){e&&e.dispatchConf */ function i(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,i=n in document;if(!i){var r=document.createElement("div");r.setAttribute(n,"return;"),i="function"==typeof r[n]}return!i&&o&&"wheel"===e&&(i=document.implementation.hasFeature("Events.wheel","3.0")),i}var o,a=n(6);a.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=i},function(e,t,n){"use strict";function i(e,t){var n=null===e||e===!1,i=null===t||t===!1;if(n||i)return n===i;var o=typeof e,a=typeof t;return"string"===o||"number"===o?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}e.exports=i},function(e,t,n){"use strict";var i=(n(4),n(10)),o=(n(2),i);e.exports=o},function(e,t,n){"use strict";function i(e,t,n){function i(){return r=!0,s?void(c=[].concat(Array.prototype.slice.call(arguments))):void n.apply(this,arguments)}function o(){if(!r&&(l=!0,!s)){for(s=!0;!r&&a=e&&l&&(r=!0,n()))}}var a=0,r=!1,s=!1,l=!1,c=void 0;o()}function o(e,t,n){function i(e,t,i){r||(t?(r=!0,n(t)):(a[e]=i,r=++s===o,r&&n(null,a)))}var o=e.length,a=[];if(0===o)return n(null,a);var r=!1,s=0;e.forEach(function(e,n){t(e,n,function(e,t){i(n,e,t)})})}t.b=i,t.a=o},function(e,t,n){"use strict";function i(e){return"@@contextSubscriber/"+e}function o(e){var t,n,o=i(e),a=o+"/listeners",r=o+"/eventIndex",l=o+"/subscribe";return n={childContextTypes:(t={},t[o]=s.isRequired,t),getChildContext:function(){var e;return e={},e[o]={eventIndex:this[r],subscribe:this[l]},e},componentWillMount:function(){this[a]=[],this[r]=0},componentWillReceiveProps:function(){this[r]++},componentDidUpdate:function(){var e=this;this[a].forEach(function(t){return t(e[r])})}},n[l]=function(e){var t=this;return this[a].push(e),function(){t[a]=t[a].filter(function(t){return t!==e})}},n}function a(e){var t,n,o=i(e),a=o+"/lastRenderedEventIndex",r=o+"/handleContextUpdate",l=o+"/unsubscribe";return n={contextTypes:(t={},t[o]=s,t),getInitialState:function(){var e;return this.context[o]?(e={},e[a]=this.context[o].eventIndex,e):{}},componentDidMount:function(){this.context[o]&&(this[l]=this.context[o].subscribe(this[r]))},componentWillReceiveProps:function(){var e;this.context[o]&&this.setState((e={},e[a]=this.context[o].eventIndex,e))},componentWillUnmount:function(){this[l]&&(this[l](),this[l]=null)}},n[r]=function(e){if(e!==this.state[a]){var t;this.setState((t={},t[a]=e,t))}},n}var r=n(0);n.n(r);t.a=o,t.b=a;var s=r.PropTypes.shape({subscribe:r.PropTypes.func.isRequired,eventIndex:r.PropTypes.number.isRequired})},function(e,t,n){"use strict";var i=n(0);n.n(i);n.d(t,"b",function(){return l}),n.d(t,"a",function(){return c});var o=i.PropTypes.func,a=i.PropTypes.object,r=i.PropTypes.shape,s=i.PropTypes.string,l=r({push:o.isRequired,replace:o.isRequired,go:o.isRequired,goBack:o.isRequired,goForward:o.isRequired,setRouteLeaveHook:o.isRequired,isActive:o.isRequired}),c=r({pathname:s.isRequired,search:s.isRequired,state:a,action:s.isRequired,key:s})},function(e,t,n){"use strict";var i=n(7),o=n.n(i),a=n(0),r=n.n(a),s=n(247),l=n(68),c=n(17),u=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},n=e(t),i=t.basename,a=function(e){return e?(i&&null==e.basename&&(0===e.pathname.toLowerCase().indexOf(i.toLowerCase())?(e.pathname=e.pathname.substring(i.length),e.basename=i,""===e.pathname&&(e.pathname="/")):e.basename=""),e):e},l=function(e){if(!i)return e;var t="string"==typeof e?(0,s.parsePath)(e):e,n=t.pathname,a="/"===i.slice(-1)?i:i+"/",r="/"===n.charAt(0)?n.slice(1):n,l=a+r;return o({},t,{pathname:l})},c=function(){return a(n.getCurrentLocation())},u=function(e){return n.listenBefore(function(t,n){return(0,r.default)(e,a(t),n)})},d=function(e){return n.listen(function(t){return e(a(t))})},m=function(e){return n.push(l(e))},p=function(e){return n.replace(l(e))},h=function(e){return n.createPath(l(e))},C=function(e){return n.createHref(l(e))},f=function(e){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o0&&void 0!==arguments[0]?arguments[0]:{},n=e(t),i=t.stringifyQuery,a=t.parseQueryString;"function"!=typeof i&&(i=u),"function"!=typeof a&&(a=d);var r=function(e){return e?(null==e.query&&(e.query=a(e.search.substring(1))),e):e},m=function(e,t){if(null==t)return e;var n="string"==typeof e?(0,c.parsePath)(e):e,a=i(t),r=a?"?"+a:"";return o({},n,{search:r})},p=function(){return r(n.getCurrentLocation())},h=function(e){return n.listenBefore(function(t,n){return(0,s.default)(e,r(t),n)})},C=function(e){return n.listen(function(t){return e(r(t))})},f=function(e){return n.push(m(e,e.query))},g=function(e){return n.replace(m(e,e.query))},y=function(e){return n.createPath(m(e,e.query))},b=function(e){return n.createHref(m(e,e.query))},M=function(e){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o1)for(var n=1;n.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var r,s=f.createElement(q,{child:t});if(e){var l=x.get(e);r=l._processChildContext(l._context)}else r=E;var u=m(n);if(u){var d=u._currentElement,h=d.props.child;if(w(h,t)){var C=u._renderedComponent.getPublicInstance(),g=i&&function(){i.call(C)};return O._updateRootComponent(u,s,r,n,g),C}O.unmountComponentAtNode(n)}var y=o(n),b=y&&!!a(y),M=c(n),k=b&&!u&&!M,L=O._renderNewRootComponent(s,n,k,r)._renderedComponent.getPublicInstance();return i&&i.call(L),L},render:function(e,t,n){return O._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){u(e)?void 0:p("40");var t=m(e);if(!t){c(e),1===e.nodeType&&e.hasAttribute(W);return!1}return delete Z[t._instance.rootID],V.batchedUpdates(l,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,r){if(u(t)?void 0:p("41"),a){var s=o(t);if(L.canReuseMarkup(e,s))return void y.precacheNode(n,s);var l=s.getAttribute(L.CHECKSUM_ATTR_NAME);s.removeAttribute(L.CHECKSUM_ATTR_NAME);var c=s.outerHTML;s.setAttribute(L.CHECKSUM_ATTR_NAME,l);var d=e,m=i(d,c),C=" (client) "+d.substring(m-20,m+20)+"\n (server) "+c.substring(m-20,m+20);t.nodeType===Y?p("42",C):void 0}if(t.nodeType===Y?p("43"):void 0,r.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);h.insertTreeBefore(t,e,null)}else K(t,e),y.precacheNode(n,t.firstChild)}};e.exports=O},function(e,t,n){"use strict";var i=n(3),o=n(27),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:o.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void i("26",e)}});e.exports=a},function(e,t,n){"use strict";var i={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){i.currentScrollLeft=e.x,i.currentScrollTop=e.y}};e.exports=i},function(e,t,n){"use strict";function i(e,t){return null==t?o("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var o=n(3);n(1);e.exports=i},function(e,t,n){"use strict";function i(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=i},function(e,t,n){"use strict";function i(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.HOST?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(97);e.exports=i},function(e,t,n){"use strict";function i(){return!a&&o.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var o=n(6),a=null;e.exports=i},function(e,t,n){"use strict";function i(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function o(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=c.create(a);else if("object"==typeof e){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var m="";m+=i(s._owner),r("130",null==l?l:typeof l,m)}"string"==typeof s.type?n=u.createInternalComponent(s):o(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new d(s)}else"string"==typeof e||"number"==typeof e?n=u.createInstanceForText(e):r("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var r=n(3),s=n(4),l=n(185),c=n(92),u=n(94),d=(n(232),n(1),n(2),function(e){this.construct(e)});s(d.prototype,l,{_instantiateReactComponent:a}),e.exports=a},function(e,t,n){"use strict";function i(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!o[e.type]:"textarea"===t}var o={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=i},function(e,t,n){"use strict";var i=n(6),o=n(43),a=n(44),r=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};i.canUseDOM&&("textContent"in document.documentElement||(r=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void a(e,o(t))})),e.exports=r},function(e,t,n){"use strict";function i(e,t){return e&&"object"==typeof e&&null!=e.key?c.escape(e.key):t.toString(36)}function o(e,t,n,a){var m=typeof e;if("undefined"!==m&&"boolean"!==m||(e=null),null===e||"string"===m||"number"===m||"object"===m&&e.$$typeof===s)return n(a,e,""===t?u+i(e,0):t),1;var p,h,C=0,f=""===t?u:t+d;if(Array.isArray(e))for(var g=0;g=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e){return 0===e.button}function a(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function r(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))return!1;return!0}function s(e,t){return"function"==typeof e?e(t.location):e}var l=n(0),c=n.n(l),u=n(7),d=n.n(u),m=n(69),p=n(68),h=Object.assign||function(e){for(var t=1;t=0;i--){var o=e[i],a=o.path||"";if(n=a.replace(/\/*$/,"/")+n,0===a.indexOf("/"))break}return"/"+n}},propTypes:{path:d,from:d,to:d.isRequired,query:m,state:m,onEnter:c.c,children:c.c},render:function(){r()(!1)}});t.a=p},function(e,t,n){"use strict";function i(e,t,n){var i=a({},e,{setRouteLeaveHook:t.listenBeforeLeavingRoute,isActive:t.isActive});return o(i,n)}function o(e,t){var n=t.location,i=t.params,o=t.routes;return e.location=n,e.params=i,e.routes=o,e}t.a=i,t.b=o;var a=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]&&arguments[1];return e.__id__||t&&(e.__id__=x++)}function h(e){return e.map(function(e){return L[p(e)]}).filter(function(e){return e})}function C(e,i){n.i(c.a)(t,e,function(t,o){if(null==o)return void i();k=u({},o,{location:e});for(var r=h(n.i(a.a)(M,k).leaveRoutes),s=void 0,l=0,c=r.length;null==s&&ln+r}var t=document.getElementsByClassName("animate"),n=function(){Array.from(t).forEach(function(t,n,i){var o=t.classList.contains("animated");!o&&e(t)&&t.classList.add("animated")})};window.addEventListener("scroll",n),n()}},{key:"renderItems",value:function(){return d.default.map(function(e){return c.default.createElement(h.default,{item:e,key:e.shortName})})}},{key:"render",value:function(){return c.default.createElement("section",{className:"portfolio"},c.default.createElement("div",{className:"portfolio-intro"},c.default.createElement("div",{className:"section-title"},"User Experience & Interface Design"),c.default.createElement("h2",null,"Great experience design makes the user fall in love"),c.default.createElement("p",null,"It's not enough to make something pretty, and you can't just make it functional either. A great experience is making the user feel at home, showing them a better way to get things done. A great design isn't even about you.  ",c.default.createElement("mark",null,"It's about them."))),this.renderItems())}}]),t}(c.default.Component);t.default=C},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,'@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.portfolio{padding-right:0}@media (max-width:1024px){.portfolio{padding-left:0}}@media (max-width:1024px){.portfolio-intro{margin:0 auto;padding:2rem}.portfolio-intro:after{clear:both;content:"";display:table}}@media (max-width:1024px) and (min-width:1024px){.portfolio-intro{padding:4rem}}.portfolio-section{position:relative;transform:skew(0,-5deg)}@media (min-width:1024px){.portfolio-section{display:flex;flex-direction:row;justify-content:center;margin-bottom:1rem;height:600px;transform:none}}@media (max-width:1024px){.portfolio-section{margin:0 auto;padding:2rem;color:#fff;padding-bottom:4rem;padding-top:4rem}.portfolio-section:after{clear:both;content:"";display:table}}@media (max-width:1024px) and (min-width:1024px){.portfolio-section{padding:4rem}}@media (max-width:1024px){.portfolio-section.armada{background-color:#1b6c94}.portfolio-section.armada *{border-color:#fff;color:#fff}.portfolio-section.summit{background-color:#b93a32}.portfolio-section.summit *{border-color:#fff;color:#fff}.portfolio-section.ember{background-color:#e46651}.portfolio-section.ember *{border-color:#fff;color:#fff}.portfolio-section.schoolkeep{background-color:#23bd84}.portfolio-section.schoolkeep *{border-color:#fff;color:#fff}.portfolio-section.carma{background-color:#555756}.portfolio-section.carma *{border-color:#fff;color:#fff}.portfolio-section.ooo{background-color:#41434e}.portfolio-section.ooo *{border-color:#fff;color:#fff}.portfolio-section.sharespost{background-color:#332d8d}.portfolio-section.sharespost *{border-color:#fff;color:#fff}}.portfolio-section.armada .button{color:#1b6c94}.portfolio-section.summit .button{color:#b93a32}.portfolio-section.ember .button{color:#e46651}.portfolio-section.schoolkeep .button{color:#23bd84}.portfolio-section.carma .button{color:#555756}.portfolio-section.ooo .button{color:#41434e}.portfolio-section.sharespost .button{color:#332d8d}.portfolio-description{box-sizing:border-box;margin-right:1rem;padding-right:2rem;position:relative;transform:skew(0,5deg)}@media (min-width:1024px){.portfolio-description{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column;transform:none}}.portfolio-description .section-title{font-size:.66rem}.portfolio-description p{font-size:.8rem;line-height:1.5}.portfolio-title{margin-bottom:.5rem}.portfolio-preview{background-color:#4e4b48;background-size:cover;background-position:50%;background-repeat:no-repeat;box-shadow:0 1.1rem .33rem -.75rem rgba(0,0,0,.3),0 .5rem 1rem rgba(0,0,0,.1);box-sizing:border-box;margin-right:-1rem;overflow:hidden;position:relative}@media (min-width:1024px){.portfolio-preview{flex:1 1 61.8%;align-items:flex-end;display:flex;justify-content:center;flex-direction:row;overflow:hidden;margin-left:1rem;padding:2rem 2rem 0;transform:skew(0,-5deg) translateX(0);transition:transform .5s}.portfolio-preview:hover{transform:skew(0,-5deg) translateX(-2rem)}}.armada .portfolio-preview{background:#1b6c94 linear-gradient(135deg,#1b6c94 55%,#324d9f);border-radius:.25rem 0 0 .25rem}.armada .portfolio-preview .device-outer{fill:#1b6c94}.summit .portfolio-preview{background:#b93a32 linear-gradient(135deg,#b93a32 55%,#c08047);border-radius:.25rem 0 0 .25rem}.summit .portfolio-preview .device-outer{fill:#b93a32}.ember .portfolio-preview{background:#e46651 linear-gradient(135deg,#e46651 55%,#e7ac62);border-radius:.25rem 0 0 .25rem}.ember .portfolio-preview .device-outer{fill:#e46651}.schoolkeep .portfolio-preview{background:#23bd84 linear-gradient(135deg,#23bd84 55%,#39bdc4);border-radius:.25rem 0 0 .25rem}.schoolkeep .portfolio-preview .device-outer{fill:#23bd84}.carma .portfolio-preview{background:#555756 linear-gradient(135deg,#555756 55%,#666868);border-radius:.25rem 0 0 .25rem}.carma .portfolio-preview .device-outer{fill:#555756}.ooo .portfolio-preview{background:#41434e linear-gradient(135deg,#41434e 55%,#575460);border-radius:.25rem 0 0 .25rem}.ooo .portfolio-preview .device-outer{fill:#41434e}.sharespost .portfolio-preview{background:#332d8d linear-gradient(135deg,#332d8d 55%,#6b4298);border-radius:.25rem 0 0 .25rem}.sharespost .portfolio-preview .device-outer{fill:#332d8d}.portfolio-screen{border:1px solid #fff;border-radius:.5rem .5rem 0 0;display:inline-block;opacity:0;padding-top:1rem;position:relative;transform:translateY(4rem) skew(0,5deg);transition:opacity .5s,transform .5s ease-in-out}.armada .portfolio-screen{background-color:#1b6c94}.summit .portfolio-screen{background-color:#b93a32}.ember .portfolio-screen{background-color:#e46651}.schoolkeep .portfolio-screen{background-color:#23bd84}.carma .portfolio-screen{background-color:#555756}.ooo .portfolio-screen{background-color:#41434e}.sharespost .portfolio-screen{background-color:#332d8d}.portfolio-screen:before{position:absolute;top:0;left:0;background:radial-gradient(hsla(0,0%,100%,0) 32%,#fff 33%,#fff 40%,hsla(0,0%,100%,0) 41%);background-position:0 0,1rem 1rem;background-size:1rem 1rem;content:"";display:block;margin-left:.5rem;opacity:.33;height:1rem;width:3rem}.animated .portfolio-screen{opacity:1;transform:translateY(2rem) skew(0,5deg)}.portfolio-screen img{border-top:1px solid #fff}.portfolio-phone{height:308px;width:147px;align-self:center;margin:0 auto;max-width:26.5vh;max-height:55vh;opacity:0;position:relative;transform:rotate(-15deg);transition:opacity .5s,transform .5s ease-in-out}@media (min-width:1024px){.portfolio-phone{height:615px;width:295px;margin-top:-2rem}}.animated .portfolio-phone{opacity:1;transform:rotate(-30deg)}.portfolio-phone svg{background-size:cover;position:absolute;z-index:1}.portfolio-phone img{max-width:none;left:8.5%;position:absolute;top:13.5%;width:85%;z-index:2}.portfolio-float{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}',"",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/CaseStudyItem/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_clearfix.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_size.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCtGrC,WACE,eAAgB,CAEhB,0BAHF,WAII,cAAe,CAAM,CAGvB,0BADF,iBDyDE,cACA,YAvBiB,CCnCnB,uBCUI,WACA,WACA,aAAc,CACf,CF+CD,iDC5DF,iBD6DI,YAvB6B,CCpCN,CAE3B,mBACE,kBACA,uBAfmB,CAiBnB,0BAJF,mBD4DE,aACA,mBACA,uBCxDE,mBACA,aACA,cAAe,CAmBW,CAjB5B,0BAVF,mBDqDE,cACA,aC1CE,WACA,oBACA,gBDoB6B,CClCjC,yBCMI,WACA,WACA,aAAc,CACf,CF+CD,iDCxDF,mBDyDI,YAvB6B,CCPH,CAjB5B,0BAVF,0BAkBQ,wBD0BuB,CC5C/B,4BAqBU,kBACA,UDhCE,CCUZ,0BAkBQ,wBD0BwC,CC5ChD,4BAqBU,kBACA,UDhCE,CCUZ,yBAkBQ,wBD0BwD,CC5ChE,2BAqBU,kBACA,UDhCE,CCUZ,8BAkBQ,wBD0B6E,CC5CrF,gCAqBU,kBACA,UDhCE,CCUZ,yBAkBQ,wBD0B6F,CC5CrG,2BAqBU,kBACA,UDhCE,CCUZ,uBAkBQ,wBD0B2G,CC5CnH,yBAqBU,kBACA,UDhCE,CCUZ,8BAkBQ,wBD0BgI,CC5CxI,gCAqBU,kBACA,UDhCE,CCgCc,CAtB1B,kCA2BQ,aDiBuB,CC5C/B,kCA2BQ,aDiBwC,CC5ChD,iCA2BQ,aDiBwD,CC5ChE,sCA2BQ,aDiB6E,CC5CrF,iCA2BQ,aDiB6F,CC5CrG,+BA2BQ,aDiB2G,CC5CnH,sCA2BQ,aDiBgI,CCjBhH,uBAGtB,sBACA,kBACA,mBACA,kBACA,sBA9CoB,CAgDpB,0BAPF,uBDgDE,uBACA,aACA,eACA,sBC1CE,cAAe,CAOO,CAhB1B,sCAYI,gBDXwB,CCD5B,yBAeI,gBACA,eAAgB,CAAI,iBAGtB,mBDfkC,CCeC,mBAGnC,yBACA,sBACA,wBACA,4BACA,8EACA,sBACA,mBACA,gBACA,iBAAkB,CAElB,0BAXF,mBDoBE,eCPE,qBACA,aACA,uBACA,mBACA,gBACA,iBACA,oBACA,sCACA,wBDtB0B,CCC9B,yBAwBM,yCAA2C,CAAG,CAGhD,2BDmBF,+DCjBI,+BD1CsB,CCwCxB,yCAKI,YDtCuB,CCiC3B,2BDmBF,+DCjBI,+BD1CsB,CCwCxB,yCAKI,YDtCwC,CCiC5C,0BDmBF,+DCjBI,+BD1CsB,CCwCxB,wCAKI,YDtCwD,CCiC5D,+BDmBF,+DCjBI,+BD1CsB,CCwCxB,6CAKI,YDtC6E,CCiCjF,0BDmBF,+DCjBI,+BD1CsB,CCwCxB,wCAKI,YDtC6F,CCiCjG,wBDmBF,+DCjBI,+BD1CsB,CCwCxB,sCAKI,YDtC2G,CCiC/G,+BDmBF,+DCjBI,+BD1CsB,CCwCxB,6CAKI,YDtCgI,CCsCjH,kBAGrB,sBACA,8BACA,qBACA,UACA,iBACA,kBACA,wCACA,gDAAoE,CAGlE,0BACE,wBDpDyB,CCmD3B,0BACE,wBDpD0C,CCmD5C,yBACE,wBDpD0D,CCmD5D,8BACE,wBDpD+E,CCmDjF,yBACE,wBDpD+F,CCmDjG,uBACE,wBDpD6G,CCmD/G,8BACE,wBDpDkI,CCwCxI,yBExDE,kBAII,MAAA,OFoEF,0FACA,kCACA,0BACA,WACA,cACA,kBACA,YACA,YACA,UAAyB,CAAG,4BAG5B,UACA,uCA5HkB,CAgGtB,sBA+BI,yBD7HQ,CC6HuB,iBGtF/B,aAMA,YHoFF,kBACA,cACA,iBACA,gBACA,UACA,kBACA,yBACA,gDAAoE,CAEpE,0BAXF,iBGxFI,aAMA,YH+FA,gBDnGe,CCoHC,CAflB,2BACE,UACA,wBAAyB,CAjB7B,qBAoBI,sBACA,kBACA,SAAU,CAtBd,qBAyBI,eACA,UACA,kBACA,UACA,UACA,SAAU,CAAI,iBEvHhB,kBAII,QAAA,SFuHJ,+BACA,SAAU,CAAI",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n$skew: skew(0, -5deg);\n$unskew: skew(0, 5deg);\n\n.portfolio {\n padding-right: 0;\n\n @media (max-width: $break-medium) {\n padding-left: 0; } }\n\n.portfolio-intro {\n @media (max-width: $break-medium) {\n @include container; } }\n\n.portfolio-section {\n position: relative;\n transform: $skew;\n\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $small-spacing;\n height: 600px;\n transform: none; }\n\n @media (max-width: $break-medium) {\n @include container;\n color: $white;\n padding-bottom: $large-spacing;\n padding-top: $large-spacing;\n\n @each $brand, $color in $brand-colors {\n &.#{$brand} {\n background-color: $color;\n\n * {\n border-color: $white;\n color: $white; } } } }\n\n @each $brand, $color in $brand-colors {\n &.#{$brand} {\n .button {\n color: $color; } } } }\n\n.portfolio-description {\n box-sizing: border-box;\n margin-right: $small-spacing;\n padding-right: $base-spacing;\n position: relative;\n transform: $unskew;\n\n @media (min-width: $break-medium) {\n @include split-secondary;\n transform: none; }\n\n .section-title {\n font-size: $smallest-font-size; }\n\n p {\n font-size: $small-font-size;\n line-height: 1.5; } }\n\n.portfolio-title {\n margin-bottom: $smallest-spacing; }\n\n.portfolio-preview {\n background-color: $light-brown;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n box-shadow: $base-shadow;\n box-sizing: border-box;\n margin-right: -$small-spacing;\n overflow: hidden;\n position: relative;\n\n @media (min-width: $break-medium) {\n @include split-primary;\n align-items: flex-end;\n display: flex;\n justify-content: center;\n flex-direction: row;\n overflow: hidden;\n margin-left: $small-spacing;\n padding: $base-spacing $base-spacing 0;\n transform: $skew translateX(0);\n transition: transform $slow-timing;\n\n &:hover {\n transform: $skew translateX(-$base-spacing); } }\n\n @each $brand, $color in $brand-colors {\n .#{$brand} & {\n @include brand-gradient($color);\n border-radius: $base-border-radius 0 0 $base-border-radius;\n\n .device-outer {\n fill: $color; } } } }\n\n.portfolio-screen {\n border: 1px solid $white;\n border-radius: $smallest-spacing $smallest-spacing 0 0;\n display: inline-block;\n opacity: 0;\n padding-top: $small-spacing;\n position: relative;\n transform: translateY($large-spacing) $unskew;\n transition: opacity $slow-timing, transform $slow-timing ease-in-out;\n\n @each $brand, $color in $brand-colors {\n .#{$brand} & {\n background-color: $color; } }\n\n &::before {\n @include position(absolute, 0 null null 0);\n background: radial-gradient(rgba(#fff, 0) 32%, #fff 33%, #fff 40%, rgba(#fff, 0) 41%);\n background-position: 0 0, #{$small-spacing} #{$small-spacing};\n background-size: #{$small-spacing} #{$small-spacing};\n content: "";\n display: block;\n margin-left: $smallest-spacing;\n opacity: 0.33;\n height: $small-spacing;\n width: $small-spacing * 3; }\n\n .animated & {\n opacity: 1;\n transform: translateY($base-spacing) $unskew; }\n\n img {\n border-top: 1px solid $white; } }\n\n.portfolio-phone {\n @include size(147px 308px);\n align-self: center;\n margin: 0 auto;\n max-width: 26.5vh;\n max-height: 55vh;\n opacity: 0;\n position: relative;\n transform: rotate(-15deg);\n transition: opacity $slow-timing, transform $slow-timing ease-in-out;\n\n @media (min-width: $break-medium) {\n @include size(295px 615px);\n margin-top: -$base-spacing; }\n\n .animated & {\n opacity: 1;\n transform: rotate(-30deg); }\n\n svg {\n background-size: cover;\n position: absolute;\n z-index: 1; }\n\n img {\n max-width: none;\n left: 8.5%;\n position: absolute;\n top: 13.5%;\n width: 85%;\n z-index: 2; } }\n\n.portfolio-float {\n @include position(absolute, 50% null null 50%);\n transform: translate(-50%, -50%);\n z-index: 2; }\n','@charset "UTF-8";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://cssmojo.com/latest_new_clearfix_so_far/\n///\n/// @example scss - Usage\n/// .element {\n/// @include clearfix;\n/// }\n///\n/// @example css - CSS Output\n/// .element::after {\n/// clear: both;\n/// content: "";\n/// display: table;\n/// }\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: "";\n display: table;\n }\n}\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n','@charset "UTF-8";\n\n/// Sets the `width` and `height` of the element.\n///\n/// @param {List} $size\n/// A list of at most 2 size values.\n///\n/// If there is only a single value in `$size` it is used for both width and height. All units are supported.\n///\n/// @example scss - Usage\n/// .first-element {\n/// @include size(2em);\n/// }\n///\n/// .second-element {\n/// @include size(auto 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .first-element {\n/// width: 2em;\n/// height: 2em;\n/// }\n///\n/// .second-element {\n/// width: auto;\n/// height: 10em;\n/// }\n///\n/// @todo Refactor in 5.0.0 to use a comma-separated argument\n\n@mixin size($value) {\n $width: nth($value, 1);\n $height: $width;\n\n @if length($value) > 1 {\n $height: nth($value, 2);\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n\n @if is-size($height) {\n height: $height;\n } @else {\n @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";\n }\n\n @if is-size($width) {\n width: $width;\n } @else {\n @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";\n }\n\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}footer{color:#fff;position:relative;transition:transform .25s;z-index:1}.nav-active footer{transform:translateX(6rem)}footer section{padding-left:4rem}@media (min-width:1024px){footer section{max-width:66vw}}footer .section-title{color:hsla(0,0%,100%,.33)}footer h2{color:#fff}footer a{color:hsla(0,0%,100%,.33);font-weight:500}footer a,footer a:hover{text-decoration:underline}footer a:hover{color:hsla(0,0%,100%,.75)}footer .copyright{font-size:.66rem;font-weight:400;margin-bottom:0;padding-bottom:2rem;text-align:center}.link-dribbble,.link-email,.link-github,.link-linkedin,.link-twitter{white-space:nowrap}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/Footer/style.sass"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,OACE,WACA,kBACA,0BACA,SAAU,CAEV,mBACE,0BAAyC,CAP7C,eAUI,iBDqCe,CCnCf,0BAZJ,eAaM,cAAe,CAAM,CAb3B,sBAgBI,yBDdQ,CCFZ,UAmBI,UDjBQ,CCFZ,SAsBI,0BACA,eACA,CAxBJ,wBAwBI,yBAA0B,CAxB9B,eA2BM,yBACA,CA5BN,kBAgCI,iBACA,gBACA,gBACA,oBACA,iBAAkB,CAAI,qEAOxB,kBAAmB,CAAI",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\nfooter {\n color: $white;\n position: relative;\n transition: transform $base-timing;\n z-index: 1;\n\n .nav-active & {\n transform: translateX($header-width-wide); }\n\n section {\n padding-left: $header-width;\n\n @media(min-width: $break-medium) {\n max-width: 66vw; } }\n\n .section-title {\n color: $muted-color-white; }\n\n h2 {\n color: $white; }\n\n a {\n color: $muted-color-white;\n font-weight: 500;\n text-decoration: underline;\n\n &:hover {\n color: rgba($white, 0.75);\n text-decoration: underline; } }\n\n .copyright {\n color: {}\n font-size: $smallest-font-size;\n font-weight: normal;\n margin-bottom: 0;\n padding-bottom: $base-spacing;\n text-align: center; } }\n\n.link-email,\n.link-dribbble,\n.link-github,\n.link-twitter,\n.link-linkedin {\n white-space: nowrap; }\n'], +if(u){if(!t)return c.a.createElement("a",l);var d=s(t,u);l.href=u.createHref(d),(n||null!=o&&!r(o))&&u.isActive(d,a)&&(n&&(l.className?l.className+=" "+n:l.className=n),o&&(l.style=h({},l.style,o)))}return c.a.createElement("a",h({},l,{onClick:this.handleClick}))}});t.a=k},function(e,t,n){"use strict";function i(e){return e&&"function"==typeof e.then}t.a=i},function(e,t,n){"use strict";var i=n(0),o=n.n(i),a=n(7),r=n.n(a),s=n(17),l=n(25),c=n(37),u=o.a.PropTypes,d=u.string,m=u.object,p=o.a.createClass({displayName:"Redirect",statics:{createRouteFromReactElement:function(e){var t=n.i(s.c)(e);return t.from&&(t.path=t.from),t.onEnter=function(e,i){var o=e.location,a=e.params,r=void 0;if("/"===t.to.charAt(0))r=n.i(l.a)(t.to,a);else if(t.to){var s=e.routes.indexOf(t),c=p.getRoutePattern(e.routes,s-1),u=c.replace(/\/*$/,"/")+t.to;r=n.i(l.a)(u,a)}else r=o.pathname;i({pathname:r,query:t.query||o.query,state:t.state||o.state})},t},getRoutePattern:function(e,t){for(var n="",i=t;i>=0;i--){var o=e[i],a=o.path||"";if(n=a.replace(/\/*$/,"/")+n,0===a.indexOf("/"))break}return"/"+n}},propTypes:{path:d,from:d,to:d.isRequired,query:m,state:m,onEnter:c.c,children:c.c},render:function(){r()(!1)}});t.a=p},function(e,t,n){"use strict";function i(e,t,n){var i=a({},e,{setRouteLeaveHook:t.listenBeforeLeavingRoute,isActive:t.isActive});return o(i,n)}function o(e,t){var n=t.location,i=t.params,o=t.routes;return e.location=n,e.params=i,e.routes=o,e}t.a=i,t.b=o;var a=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]&&arguments[1];return e.__id__||t&&(e.__id__=x++)}function h(e){return e.map(function(e){return L[p(e)]}).filter(function(e){return e})}function C(e,i){n.i(c.a)(t,e,function(t,o){if(null==o)return void i();k=u({},o,{location:e});for(var r=h(n.i(a.a)(M,k).leaveRoutes),s=void 0,l=0,c=r.length;null==s&&ln+r}var t=document.getElementsByClassName("animate"),n=function(){Array.from(t).forEach(function(t,n,i){var o=t.classList.contains("animated");!o&&e(t)&&t.classList.add("animated")})};window.addEventListener("scroll",n),n()}},{key:"renderItems",value:function(){return d.default.map(function(e){return c.default.createElement(h.default,{item:e,key:e.shortName})})}},{key:"render",value:function(){return c.default.createElement("section",{className:"portfolio"},c.default.createElement("div",{className:"portfolio-intro"},c.default.createElement("div",{className:"section-title"},"User Experience & Interface Design"),c.default.createElement("h2",null,"Great experience design makes the user fall in love"),c.default.createElement("p",null,"It's not enough to make something pretty, and you can't just make it functional either. A great experience is making the user feel at home, showing them a better way to get things done. A great design isn't even about you.  ",c.default.createElement("mark",null,"It's about them."))),this.renderItems())}}]),t}(c.default.Component);t.default=C},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,'@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.portfolio{padding-right:0}@media (max-width:1024px){.portfolio{padding-left:0}}@media (max-width:1024px){.portfolio-intro{margin:0 auto;padding:2rem}.portfolio-intro:after{clear:both;content:"";display:table}}@media (max-width:1024px) and (min-width:1024px){.portfolio-intro{padding:4rem}}.portfolio-section{position:relative;transform:skew(0,-5deg)}@media (min-width:1024px){.portfolio-section{display:flex;flex-direction:row;justify-content:center;margin-bottom:1rem;height:600px;transform:none}}@media (max-width:1024px){.portfolio-section{margin:0 auto;padding:2rem;color:#fff;padding-bottom:4rem;padding-top:4rem}.portfolio-section:after{clear:both;content:"";display:table}}@media (max-width:1024px) and (min-width:1024px){.portfolio-section{padding:4rem}}@media (max-width:1024px){.portfolio-section.armada{background-color:#1b6c94}.portfolio-section.armada *{border-color:#fff;color:#fff}.portfolio-section.summit{background-color:#b93a32}.portfolio-section.summit *{border-color:#fff;color:#fff}.portfolio-section.ember{background-color:#e46651}.portfolio-section.ember *{border-color:#fff;color:#fff}.portfolio-section.schoolkeep{background-color:#23bd84}.portfolio-section.schoolkeep *{border-color:#fff;color:#fff}.portfolio-section.carma{background-color:#555756}.portfolio-section.carma *{border-color:#fff;color:#fff}.portfolio-section.ooo{background-color:#41434e}.portfolio-section.ooo *{border-color:#fff;color:#fff}.portfolio-section.sharespost{background-color:#332d8d}.portfolio-section.sharespost *{border-color:#fff;color:#fff}}.portfolio-section.armada .button{color:#1b6c94}.portfolio-section.summit .button{color:#b93a32}.portfolio-section.ember .button{color:#e46651}.portfolio-section.schoolkeep .button{color:#23bd84}.portfolio-section.carma .button{color:#555756}.portfolio-section.ooo .button{color:#41434e}.portfolio-section.sharespost .button{color:#332d8d}.portfolio-description{box-sizing:border-box;margin-right:1rem;padding-right:2rem;position:relative;transform:skew(0,5deg)}@media (min-width:1024px){.portfolio-description{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column;transform:none}}.portfolio-description .section-title{font-size:.66rem}.portfolio-description p{font-size:.8rem;line-height:1.5}.portfolio-title{margin-bottom:.5rem}.portfolio-preview{background-color:#4e4b48;background-size:cover;background-position:50%;background-repeat:no-repeat;box-shadow:0 1.1rem .33rem -.75rem rgba(0,0,0,.3),0 .5rem 1rem rgba(0,0,0,.1);box-sizing:border-box;margin-right:-1rem;overflow:hidden;position:relative}@media (min-width:1024px){.portfolio-preview{flex:1 1 61.8%;align-items:flex-end;display:flex;justify-content:center;flex-direction:row;overflow:hidden;margin-left:1rem;padding:2rem 2rem 0;transform:skew(0,-5deg) translateX(0);transition:transform .5s}.portfolio-preview:hover{transform:skew(0,-5deg) translateX(-2rem)}}.armada .portfolio-preview{background:#1b6c94 linear-gradient(135deg,#1b6c94 55%,#324d9f);border-radius:.25rem 0 0 .25rem}.armada .portfolio-preview .device-outer{fill:#1b6c94}.summit .portfolio-preview{background:#b93a32 linear-gradient(135deg,#b93a32 55%,#c08047);border-radius:.25rem 0 0 .25rem}.summit .portfolio-preview .device-outer{fill:#b93a32}.ember .portfolio-preview{background:#e46651 linear-gradient(135deg,#e46651 55%,#e7ac62);border-radius:.25rem 0 0 .25rem}.ember .portfolio-preview .device-outer{fill:#e46651}.schoolkeep .portfolio-preview{background:#23bd84 linear-gradient(135deg,#23bd84 55%,#39bdc4);border-radius:.25rem 0 0 .25rem}.schoolkeep .portfolio-preview .device-outer{fill:#23bd84}.carma .portfolio-preview{background:#555756 linear-gradient(135deg,#555756 55%,#666868);border-radius:.25rem 0 0 .25rem}.carma .portfolio-preview .device-outer{fill:#555756}.ooo .portfolio-preview{background:#41434e linear-gradient(135deg,#41434e 55%,#575460);border-radius:.25rem 0 0 .25rem}.ooo .portfolio-preview .device-outer{fill:#41434e}.sharespost .portfolio-preview{background:#332d8d linear-gradient(135deg,#332d8d 55%,#6b4298);border-radius:.25rem 0 0 .25rem}.sharespost .portfolio-preview .device-outer{fill:#332d8d}.portfolio-screen{border:1px solid #fff;border-radius:.5rem .5rem 0 0;display:inline-block;opacity:0;padding-top:1rem;position:relative;transform:translateY(4rem) skew(0,5deg);transition:opacity .5s,transform .5s ease-in-out}.armada .portfolio-screen{background-color:#1b6c94}.summit .portfolio-screen{background-color:#b93a32}.ember .portfolio-screen{background-color:#e46651}.schoolkeep .portfolio-screen{background-color:#23bd84}.carma .portfolio-screen{background-color:#555756}.ooo .portfolio-screen{background-color:#41434e}.sharespost .portfolio-screen{background-color:#332d8d}.portfolio-screen:before{position:absolute;top:0;left:0;background:radial-gradient(hsla(0,0%,100%,0) 32%,#fff 33%,#fff 40%,hsla(0,0%,100%,0) 41%);background-position:0 0,1rem 1rem;background-size:1rem 1rem;content:"";display:block;margin-left:.5rem;opacity:.33;height:1rem;width:3rem}.animated .portfolio-screen{opacity:1;transform:translateY(2rem) skew(0,5deg)}.portfolio-screen img{border-top:1px solid #fff}.portfolio-phone{height:308px;width:147px;align-self:center;margin:0 auto;max-width:26.5vh;max-height:55vh;opacity:0;position:relative;transform:rotate(-15deg);transition:opacity .5s,transform .5s ease-in-out}@media (min-width:1024px){.portfolio-phone{height:615px;width:295px;margin-top:-2rem}}.animated .portfolio-phone{opacity:1;transform:rotate(-30deg)}.portfolio-phone svg{background-size:cover;position:absolute;z-index:1}.portfolio-phone img{max-width:none;left:8.5%;position:absolute;top:13.5%;width:85%;z-index:2}.portfolio-float{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}',"",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/CaseStudyItem/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_clearfix.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_size.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCtGrC,WACE,eAAgB,CAEhB,0BAHF,WAII,cAAe,CAAM,CAGvB,0BADF,iBDyDE,cACA,YAvBiB,CCnCnB,uBCUI,WACA,WACA,aAAc,CACf,CF+CD,iDC5DF,iBD6DI,YAvB6B,CCpCN,CAE3B,mBACE,kBACA,uBAfmB,CAiBnB,0BAJF,mBD4DE,aACA,mBACA,uBCxDE,mBACA,aACA,cAAe,CAmBW,CAjB5B,0BAVF,mBDqDE,cACA,aC1CE,WACA,oBACA,gBDoB6B,CClCjC,yBCMI,WACA,WACA,aAAc,CACf,CF+CD,iDCxDF,mBDyDI,YAvB6B,CCPH,CAjB5B,0BAVF,0BAkBQ,wBD0BuB,CC5C/B,4BAqBU,kBACA,UDhCE,CCUZ,0BAkBQ,wBD0BwC,CC5ChD,4BAqBU,kBACA,UDhCE,CCUZ,yBAkBQ,wBD0BwD,CC5ChE,2BAqBU,kBACA,UDhCE,CCUZ,8BAkBQ,wBD0B6E,CC5CrF,gCAqBU,kBACA,UDhCE,CCUZ,yBAkBQ,wBD0B6F,CC5CrG,2BAqBU,kBACA,UDhCE,CCUZ,uBAkBQ,wBD0B2G,CC5CnH,yBAqBU,kBACA,UDhCE,CCUZ,8BAkBQ,wBD0BgI,CC5CxI,gCAqBU,kBACA,UDhCE,CCgCc,CAtB1B,kCA2BQ,aDiBuB,CC5C/B,kCA2BQ,aDiBwC,CC5ChD,iCA2BQ,aDiBwD,CC5ChE,sCA2BQ,aDiB6E,CC5CrF,iCA2BQ,aDiB6F,CC5CrG,+BA2BQ,aDiB2G,CC5CnH,sCA2BQ,aDiBgI,CCjBhH,uBAGtB,sBACA,kBACA,mBACA,kBACA,sBA9CoB,CAgDpB,0BAPF,uBDgDE,uBACA,aACA,eACA,sBC1CE,cAAe,CAOO,CAhB1B,sCAYI,gBDXwB,CCD5B,yBAeI,gBACA,eAAgB,CAAI,iBAGtB,mBDfkC,CCeC,mBAGnC,yBACA,sBACA,wBACA,4BACA,8EACA,sBACA,mBACA,gBACA,iBAAkB,CAElB,0BAXF,mBDoBE,eCPE,qBACA,aACA,uBACA,mBACA,gBACA,iBACA,oBACA,sCACA,wBDtB0B,CCC9B,yBAwBM,yCAA2C,CAAG,CAGhD,2BDmBF,+DCjBI,+BD1CsB,CCwCxB,yCAKI,YDtCuB,CCiC3B,2BDmBF,+DCjBI,+BD1CsB,CCwCxB,yCAKI,YDtCwC,CCiC5C,0BDmBF,+DCjBI,+BD1CsB,CCwCxB,wCAKI,YDtCwD,CCiC5D,+BDmBF,+DCjBI,+BD1CsB,CCwCxB,6CAKI,YDtC6E,CCiCjF,0BDmBF,+DCjBI,+BD1CsB,CCwCxB,wCAKI,YDtC6F,CCiCjG,wBDmBF,+DCjBI,+BD1CsB,CCwCxB,sCAKI,YDtC2G,CCiC/G,+BDmBF,+DCjBI,+BD1CsB,CCwCxB,6CAKI,YDtCgI,CCsCjH,kBAGrB,sBACA,8BACA,qBACA,UACA,iBACA,kBACA,wCACA,gDAAoE,CAGlE,0BACE,wBDpDyB,CCmD3B,0BACE,wBDpD0C,CCmD5C,yBACE,wBDpD0D,CCmD5D,8BACE,wBDpD+E,CCmDjF,yBACE,wBDpD+F,CCmDjG,uBACE,wBDpD6G,CCmD/G,8BACE,wBDpDkI,CCwCxI,yBExDE,kBAII,MAAA,OFoEF,0FACA,kCACA,0BACA,WACA,cACA,kBACA,YACA,YACA,UAAyB,CAAG,4BAG5B,UACA,uCA5HkB,CAgGtB,sBA+BI,yBD7HQ,CC6HuB,iBGtF/B,aAMA,YHoFF,kBACA,cACA,iBACA,gBACA,UACA,kBACA,yBACA,gDAAoE,CAEpE,0BAXF,iBGxFI,aAMA,YH+FA,gBDnGe,CCoHC,CAflB,2BACE,UACA,wBAAyB,CAjB7B,qBAoBI,sBACA,kBACA,SAAU,CAtBd,qBAyBI,eACA,UACA,kBACA,UACA,UACA,SAAU,CAAI,iBEvHhB,kBAII,QAAA,SFuHJ,+BACA,SAAU,CAAI",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n$skew: skew(0, -5deg);\n$unskew: skew(0, 5deg);\n\n.portfolio {\n padding-right: 0;\n\n @media (max-width: $break-medium) {\n padding-left: 0; } }\n\n.portfolio-intro {\n @media (max-width: $break-medium) {\n @include container; } }\n\n.portfolio-section {\n position: relative;\n transform: $skew;\n\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $small-spacing;\n height: 600px;\n transform: none; }\n\n @media (max-width: $break-medium) {\n @include container;\n color: $white;\n padding-bottom: $large-spacing;\n padding-top: $large-spacing;\n\n @each $brand, $color in $brand-colors {\n &.#{$brand} {\n background-color: $color;\n\n * {\n border-color: $white;\n color: $white; } } } }\n\n @each $brand, $color in $brand-colors {\n &.#{$brand} {\n .button {\n color: $color; } } } }\n\n.portfolio-description {\n box-sizing: border-box;\n margin-right: $small-spacing;\n padding-right: $base-spacing;\n position: relative;\n transform: $unskew;\n\n @media (min-width: $break-medium) {\n @include split-secondary;\n transform: none; }\n\n .section-title {\n font-size: $smallest-font-size; }\n\n p {\n font-size: $small-font-size;\n line-height: 1.5; } }\n\n.portfolio-title {\n margin-bottom: $smallest-spacing; }\n\n.portfolio-preview {\n background-color: $light-brown;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n box-shadow: $base-shadow;\n box-sizing: border-box;\n margin-right: -$small-spacing;\n overflow: hidden;\n position: relative;\n\n @media (min-width: $break-medium) {\n @include split-primary;\n align-items: flex-end;\n display: flex;\n justify-content: center;\n flex-direction: row;\n overflow: hidden;\n margin-left: $small-spacing;\n padding: $base-spacing $base-spacing 0;\n transform: $skew translateX(0);\n transition: transform $slow-timing;\n\n &:hover {\n transform: $skew translateX(-$base-spacing); } }\n\n @each $brand, $color in $brand-colors {\n .#{$brand} & {\n @include brand-gradient($color);\n border-radius: $base-border-radius 0 0 $base-border-radius;\n\n .device-outer {\n fill: $color; } } } }\n\n.portfolio-screen {\n border: 1px solid $white;\n border-radius: $smallest-spacing $smallest-spacing 0 0;\n display: inline-block;\n opacity: 0;\n padding-top: $small-spacing;\n position: relative;\n transform: translateY($large-spacing) $unskew;\n transition: opacity $slow-timing, transform $slow-timing ease-in-out;\n\n @each $brand, $color in $brand-colors {\n .#{$brand} & {\n background-color: $color; } }\n\n &::before {\n @include position(absolute, 0 null null 0);\n background: radial-gradient(rgba(#fff, 0) 32%, #fff 33%, #fff 40%, rgba(#fff, 0) 41%);\n background-position: 0 0, #{$small-spacing} #{$small-spacing};\n background-size: #{$small-spacing} #{$small-spacing};\n content: "";\n display: block;\n margin-left: $smallest-spacing;\n opacity: 0.33;\n height: $small-spacing;\n width: $small-spacing * 3; }\n\n .animated & {\n opacity: 1;\n transform: translateY($base-spacing) $unskew; }\n\n img {\n border-top: 1px solid $white; } }\n\n.portfolio-phone {\n @include size(147px 308px);\n align-self: center;\n margin: 0 auto;\n max-width: 26.5vh;\n max-height: 55vh;\n opacity: 0;\n position: relative;\n transform: rotate(-15deg);\n transition: opacity $slow-timing, transform $slow-timing ease-in-out;\n\n @media (min-width: $break-medium) {\n @include size(295px 615px);\n margin-top: -$base-spacing; }\n\n .animated & {\n opacity: 1;\n transform: rotate(-30deg); }\n\n svg {\n background-size: cover;\n position: absolute;\n z-index: 1; }\n\n img {\n max-width: none;\n left: 8.5%;\n position: absolute;\n top: 13.5%;\n width: 85%;\n z-index: 2; } }\n\n.portfolio-float {\n @include position(absolute, 50% null null 50%);\n transform: translate(-50%, -50%);\n z-index: 2; }\n','@charset "UTF-8";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://cssmojo.com/latest_new_clearfix_so_far/\n///\n/// @example scss - Usage\n/// .element {\n/// @include clearfix;\n/// }\n///\n/// @example css - CSS Output\n/// .element::after {\n/// clear: both;\n/// content: "";\n/// display: table;\n/// }\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: "";\n display: table;\n }\n}\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n','@charset "UTF-8";\n\n/// Sets the `width` and `height` of the element.\n///\n/// @param {List} $size\n/// A list of at most 2 size values.\n///\n/// If there is only a single value in `$size` it is used for both width and height. All units are supported.\n///\n/// @example scss - Usage\n/// .first-element {\n/// @include size(2em);\n/// }\n///\n/// .second-element {\n/// @include size(auto 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .first-element {\n/// width: 2em;\n/// height: 2em;\n/// }\n///\n/// .second-element {\n/// width: auto;\n/// height: 10em;\n/// }\n///\n/// @todo Refactor in 5.0.0 to use a comma-separated argument\n\n@mixin size($value) {\n $width: nth($value, 1);\n $height: $width;\n\n @if length($value) > 1 {\n $height: nth($value, 2);\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n\n @if is-size($height) {\n height: $height;\n } @else {\n @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";\n }\n\n @if is-size($width) {\n width: $width;\n } @else {\n @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";\n }\n\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}footer{color:#fff;position:relative;transition:transform .25s;z-index:1}.nav-active footer{transform:translateX(6rem)}footer section{padding-left:4rem}@media (min-width:1024px){footer section{max-width:66vw}}footer .section-title{color:hsla(0,0%,100%,.33)}footer h2{color:#fff}footer a{color:hsla(0,0%,100%,.33);font-weight:500}footer a,footer a:hover{text-decoration:underline}footer a:hover{color:hsla(0,0%,100%,.75)}footer .copyright{font-size:.66rem;font-weight:400;margin-bottom:0;padding-bottom:2rem;text-align:center}.link-dribbble,.link-email,.link-github,.link-linkedin,.link-twitter{white-space:nowrap}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/Footer/style.sass"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,OACE,WACA,kBACA,0BACA,SAAU,CAEV,mBACE,0BAAyC,CAP7C,eAUI,iBDqCe,CCnCf,0BAZJ,eAaM,cAAe,CAAM,CAb3B,sBAgBI,yBDdQ,CCFZ,UAmBI,UDjBQ,CCFZ,SAsBI,0BACA,eACA,CAxBJ,wBAwBI,yBAA0B,CAxB9B,eA2BM,yBACA,CA5BN,kBAgCI,iBACA,gBACA,gBACA,oBACA,iBAAkB,CAAI,qEAOxB,kBAAmB,CAAI",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\nfooter {\n color: $white;\n position: relative;\n transition: transform $base-timing;\n z-index: 1;\n\n .nav-active & {\n transform: translateX($header-width-wide); }\n\n section {\n padding-left: $header-width;\n\n @media(min-width: $break-medium) {\n max-width: 66vw; } }\n\n .section-title {\n color: $muted-color-white; }\n\n h2 {\n color: $white; }\n\n a {\n color: $muted-color-white;\n font-weight: 500;\n text-decoration: underline;\n\n &:hover {\n color: rgba($white, 0.75);\n text-decoration: underline; } }\n\n .copyright {\n color: {}\n font-size: $smallest-font-size;\n font-weight: normal;\n margin-bottom: 0;\n padding-bottom: $base-spacing;\n text-align: center; } }\n\n.link-email,\n.link-dribbble,\n.link-github,\n.link-twitter,\n.link-linkedin {\n white-space: nowrap; }\n'], sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.site-header{position:fixed;top:0;bottom:0;left:0;padding:1rem;transition:width .25s;width:4rem;z-index:5}@media (max-width:1024px){.site-header{width:3.2rem}}.nav-active .site-header{width:6rem}.logo{display:block;width:2rem}@media (max-width:1024px){.logo{width:1.5rem}}.logo svg{display:block;width:2rem}@media (max-width:1024px){.logo svg{width:1.5rem}}.logo svg ellipse,.logo svg path{fill:#fff}.site-nav{margin-top:2rem;opacity:0;pointer-events:none}.nav-active .site-nav{opacity:1;pointer-events:all;transition:opacity .5s;transition-delay:125ms}.site-nav li,.site-nav ul{margin:0;padding:0}.site-nav li{list-style:none;transform:translateX(1em);transition:transform .25s}.site-nav li:first-child{transition-delay:125ms}.site-nav li:nth-child(2){transition-delay:.1875s}.site-nav li:nth-child(3){transition-delay:.25s}.nav-active .site-nav li{transform:translateX(0)}.site-nav a{color:hsla(0,0%,100%,.33);display:block;font-size:.8rem;font-weight:700;line-height:3;text-transform:uppercase}.site-nav a:hover{color:#fff}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/Header/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,aCwCE,eAII,MAAA,SAAA,OD1CJ,aACA,sBACA,WACA,SDgDU,CC9CV,0BAPF,aAQI,YAA0B,CAGI,CADhC,yBACE,UDqCoB,CCrCQ,MAG9B,cACA,UAAW,CAEX,0BAJF,MAKI,YAAa,CAWQ,CAhBzB,UAQI,cACA,UAAW,CAEX,0BAXJ,UAYM,YAAa,CAII,CAhBvB,iCAgBM,SD3BM,CC2BS,UAGnB,gBACA,UACA,mBAAoB,CAEpB,sBACE,UACA,mBACA,uBACA,sBDoB0B,CC7B9B,0BAYI,SACA,SAAU,CAbd,aAgBI,gBACA,AAEA,0BACA,yBDQe,CC5BnB,yBAuBM,sBDMwB,CC7B9B,0BA0BM,uBAAoC,CA1B1C,0BA6BM,qBAAkC,CAdtC,yBAiBI,uBAAwB,CAhC9B,YAmCI,0BACA,cACA,gBACA,gBACA,cACA,wBAAyB,CAxC7B,kBA2CM,UDxEM,CCwEU",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.site-header {\n @include position(fixed, 0 null 0 0);\n padding: $small-spacing;\n transition: width $base-timing;\n width: $header-width;\n z-index: $z-header;\n\n @media (max-width: $break-medium) {\n width: $header-width * 0.8; }\n\n .nav-active & {\n width: $header-width-wide; } }\n\n.logo {\n display: block;\n width: 2rem;\n\n @media (max-width: $break-medium) {\n width: 1.5rem; }\n\n svg {\n display: block;\n width: 2rem;\n\n @media (max-width: $break-medium) {\n width: 1.5rem; }\n\n path,\n ellipse {\n fill: $white; } } }\n\n.site-nav {\n margin-top: $base-spacing;\n opacity: 0;\n pointer-events: none;\n\n .nav-active & {\n opacity: 1;\n pointer-events: all;\n transition: opacity $slow-timing;\n transition-delay: $fast-timing; }\n\n ul {\n margin: 0;\n padding: 0; }\n\n li {\n list-style: none;\n margin: 0;\n padding: 0;\n transform: translateX(1em);\n transition: transform $base-timing;\n\n &:nth-child(1) {\n transition-delay: $fast-timing; }\n\n &:nth-child(2) {\n transition-delay: $fast-timing * 1.5; }\n\n &:nth-child(3) {\n transition-delay: $fast-timing * 2; }\n\n .nav-active & {\n transform: translateX(0); } }\n\n a {\n color: $muted-color-white;\n display: block;\n font-size: $small-font-size;\n font-weight: 700;\n line-height: 3;\n text-transform: uppercase;\n\n &:hover {\n color: $white; } } }\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.intro{position:fixed;top:0;right:0;left:0;align-items:center;color:#f2efed;display:flex;justify-content:center;flex-direction:column;height:35vh;padding:0 2rem 0 4rem;text-align:center;transition:transform .25s;z-index:-1}@media (max-width:1024px){.intro{padding-left:3.2rem}}.nav-active .intro{transform:translate(6rem)}.intro .intro-content{animation:rise 1s ease-in-out}.intro h1{font-size:2.25rem;margin-bottom:0}.intro p{font-weight:300;margin:0}.intro .section-title{color:hsla(0,0%,100%,.33);font-weight:800;margin:.25rem 0 0}.intro .logo svg ellipse,.intro .logo svg path{fill:#fff}.intro-icon{position:absolute;left:50%;height:4rem;width:4rem;border-radius:50%;margin:-2rem 0 0 -2rem;transition:transform .25s;z-index:1000}.nav-active .intro-icon{transform:translate(6rem)}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/components/Intro/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,OCwCE,eAII,MAAA,QAAA,OD1CJ,mBACA,cACA,aACA,uBACA,sBACA,YACA,sBACA,kBACA,0BACA,UAAW,CAEX,0BAbF,OAcI,mBAAiC,CAyBR,CAvB3B,mBACE,yBAAwC,CAjB5C,sBAoBI,6BAA8B,CApBlC,UAuBI,kBACA,eAAgB,CAxBpB,SA2BI,gBACA,QAAS,CA5Bb,sBA+BI,0BACA,gBACA,iBAAmB,CAjCvB,+CAuCQ,SDrCI,CCqCW,YAGrB,kBACA,SACA,YACA,WACA,kBACA,uBACA,0BACA,YAAa,CAEb,wBACE,yBAAwC,CAAG",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.intro {\n @include position(fixed, 0 0 null 0);\n align-items: center;\n color: $offwhite;\n display: flex;\n justify-content: center;\n flex-direction: column;\n height: $intro-height;\n padding: 0 $base-spacing 0 $header-width;\n text-align: center;\n transition: transform $base-timing;\n z-index: -1;\n\n @media (max-width: $break-medium) {\n padding-left: $header-width * 0.8; }\n\n .nav-active & {\n transform: translate($header-width-wide); }\n\n .intro-content {\n animation: rise 1s ease-in-out; }\n\n h1 {\n font-size: 2.25rem;\n margin-bottom: 0; }\n\n p {\n font-weight: 300;\n margin: 0; }\n\n .section-title {\n color: $muted-color-white;\n font-weight: 800;\n margin: 0.25rem 0 0; }\n\n .logo {\n svg {\n path,\n ellipse {\n fill: $white; } } } }\n\n.intro-icon {\n position: absolute;\n left: 50%;\n height: 4rem;\n width: 4rem;\n border-radius: 50%;\n margin: -2rem 0 0 -2rem;\n transition: transform $base-timing;\n z-index: 1000;\n\n .nav-active & {\n transform: translate($header-width-wide); } }\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@font-face{font-family:Libre Baskerville;src:url("+n(347)+");font-weight:400}@font-face{font-family:Brandon;src:url("+n(344)+");font-weight:200}@font-face{font-family:Brandon;src:url("+n(346)+");font-weight:300}@font-face{font-family:Brandon;src:url("+n(345)+");font-weight:500}@font-face{font-family:Brandon;src:url("+n(343)+");font-weight:600}@font-face{font-family:Brandon;src:url("+n(342)+");font-weight:800}","",{version:3,sources:["/./source/fonts/fonts.sass"],names:[],mappings:"AAEA,WACE,8BACA,kCACA,eAAmB,CAIrB,WACE,oBACA,kCACA,eAAgB,CAElB,WACE,oBACA,kCACA,eAAgB,CAElB,WACE,oBACA,kCACA,eAAgB,CAElB,WACE,oBACA,kCACA,eAAgB,CAElB,WACE,oBACA,kCACA,eAAgB,CAAA",file:"fonts.sass",sourcesContent:['// Headings Font\n\n@font-face {\n font-family: "Libre Baskerville";\n src: url("./libre-baskerville.woff2");\n font-weight: normal; }\n\n// Base Font\n\n@font-face {\n font-family: "Brandon";\n src: url("./brandon--light.woff2");\n font-weight: 200; }\n\n@font-face {\n font-family: "Brandon";\n src: url("./brandon--regular.woff2");\n font-weight: 300; }\n\n@font-face {\n font-family: "Brandon";\n src: url("./brandon--medium.woff2");\n font-weight: 500; }\n\n@font-face {\n font-family: "Brandon";\n src: url("./brandon--bold.woff2");\n font-weight: 600; }\n\n@font-face {\n font-family: "Brandon";\n src: url("./brandon--black.woff2");\n font-weight: 800; }\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,'@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}@media (min-width:1024px){.section-about{margin:0 auto;padding:2rem;display:flex;flex-direction:row;justify-content:center;flex-direction:row-reverse}.section-about:after{clear:both;content:"";display:table}}@media (min-width:1024px) and (min-width:1024px){.section-about{padding:4rem}}@media (min-width:1024px){.about-content{flex:1 1 61.8%}}.about-portrait{margin-bottom:2rem}@media (min-width:1024px){.about-portrait{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column;justify-content:flex-start;margin-bottom:0}}.about-portrait img{border-radius:.25rem;box-shadow:0 1.1rem .33rem -.75rem rgba(0,0,0,.3),0 .5rem 1rem rgba(0,0,0,.1);max-width:300px;width:100%}',"",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/pages/About/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_clearfix.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCvGnC,0BADF,eDiEE,cACA,aAMA,aACA,mBACA,uBCtEE,0BAA2B,CAJ/B,qBCkBI,WACA,WACA,aAAc,CACf,CF+CD,iDCpEF,eDqEI,YAvB6B,CC1CI,CAGnC,0BADF,eD4EE,cAAe,CC1Ec,CAE/B,gBACE,kBDgCiB,CC9BjB,0BAHF,gBD+EE,uBACA,aACA,eACA,sBC7EE,2BACA,eAAgB,CAMC,CAZrB,oBASI,qBACA,8EACA,gBACA,UAAW,CAAI",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.section-about {\n @media(min-width: $break-medium) {\n @include container;\n @include split-layout;\n flex-direction: row-reverse; } }\n\n.about-content {\n @media(min-width: $break-medium) {\n @include split-primary; } }\n\n.about-portrait {\n margin-bottom: $base-spacing;\n\n @media(min-width: $break-medium) {\n @include split-secondary;\n justify-content: flex-start;\n margin-bottom: 0; }\n\n img {\n border-radius: $base-border-radius;\n box-shadow: $base-shadow;\n max-width: 300px;\n width: 100%; } }\n','@charset "UTF-8";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://cssmojo.com/latest_new_clearfix_so_far/\n///\n/// @example scss - Usage\n/// .element {\n/// @include clearfix;\n/// }\n///\n/// @example css - CSS Output\n/// .element::after {\n/// clear: both;\n/// content: "";\n/// display: table;\n/// }\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: "";\n display: table;\n }\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}@media (min-width:1024px){.teaching{display:flex;flex-direction:row;justify-content:center}}.teaching-portrait{margin-bottom:2rem}@media (min-width:1024px){.teaching-portrait{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}.teaching-portrait img{border-radius:.25rem;box-shadow:0 1.1rem .33rem -.75rem rgba(0,0,0,.3),0 .5rem 1rem rgba(0,0,0,.1);max-width:300px;width:100%}@media (min-width:1024px){.teaching-content{flex:1 1 61.8%;margin-left:2rem}}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/pages/About/teaching.sass"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCvGnC,0BADF,UDwEE,aACA,mBACA,sBAAuB,CCxEK,CAE9B,mBACE,kBDsCiB,CCpCjB,0BAHF,mBDqFE,uBACA,aACA,eACA,qBAAsB,CC9EH,CAVrB,uBAOI,qBACA,8EACA,gBACA,UAAW,CAAI,0BAEnB,kBDkEE,eC/DE,gBDwBe,CCxBgB,CAAA",file:"teaching.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.teaching {\n @media(min-width: $break-medium) {\n @include split-layout; } }\n\n.teaching-portrait {\n margin-bottom: $base-spacing;\n\n @media(min-width: $break-medium) {\n @include split-secondary; }\n\n img {\n border-radius: $base-border-radius;\n box-shadow: $base-shadow;\n max-width: 300px;\n width: 100%; } }\n\n.teaching-content {\n @media(min-width: $break-medium) {\n @include split-primary;\n margin-left: $base-spacing; } }\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.article-summary{display:block}.article-summary header{padding:2rem 2rem 0}.article-summary .article-title{font-size:1.25rem;line-height:1.4;margin-bottom:0}.article-summary .article-meta{color:#93908e;font-size:.66rem;margin-bottom:1rem}.article-summary .article-meta>*{display:inline-block;vertical-align:middle}.article-summary .article-source-icon{height:1.1em;width:1.1em;margin-left:.25em;vertical-align:-.25em}.article-summary .article-summary-body{color:#33312f;font-size:.8rem;padding:0 2rem 2rem}.article-summary .article-summary__image{background-blend-mode:multiply;background-color:#f2efed;background-position:50%;background-size:cover;padding-top:10rem}@media (min-width:1024px){.article-summary__featured{display:flex}.article-summary__featured__latest{align-content:stretch;display:flex;flex:0 0 calc(75% - .5rem);margin-right:1rem}.article-summary__featured__latest>*{width:100%}.article-summary__featured__latest .article-title{font-size:2.5rem}.article-summary__featured__latest .article-summary-body{font-size:1.1rem}.article-summary__featured__other{align-content:stretch;display:flex;flex:0 0 calc(25% - .5rem)}.article-summary__list{display:flex;flex-wrap:wrap}.article-summary__list>*{flex:0 0 calc(25% - .75rem)}.article-summary__list>:not(:nth-child(4n)){margin-right:1rem}}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/pages/Articles/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_size.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,iBACE,aAAc,CADhB,wBAII,mBAAsC,CAJ1C,gCAOI,kBACA,gBACA,eAAgB,CATpB,+BAYI,cACA,iBACA,kBD8B6B,CC5CjC,iCAiBM,qBACA,qBAAsB,CAlB5B,sCCyCI,aAMA,YDzBA,kBACA,qBAAuB,CAvB3B,uCA0BI,cACA,gBACA,mBDee,CC3CnB,yCA+BI,+BACA,yBACA,wBACA,sBACA,iBAAkB,CAAI,0BAItB,2BACE,YAAa,CAEb,mCACE,sBACA,aACA,2BACA,iBDFyB,CCF3B,qCAOI,UAAW,CAPf,kDAUI,gBAAiB,CAVrB,yDAaI,gBAAiB,CAAI,kCAGvB,sBACA,aACA,0BAA6C,CAAG,uBAGlD,aACA,cAAe,CAFjB,yBAKI,2BAA6C,CALjD,4CAQM,iBD1BuB,CC0BQ,CAAA",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.article-summary {\n display: block;\n\n header {\n padding: $base-spacing $base-spacing 0; }\n\n .article-title {\n font-size: 1.25rem;\n line-height: 1.4;\n margin-bottom: 0; }\n\n .article-meta {\n color: $muted-color;\n font-size: $smallest-font-size;\n margin-bottom: $small-spacing;\n\n > * {\n display: inline-block;\n vertical-align: middle; } }\n\n .article-source-icon {\n @include size(1.1em);\n margin-left: 0.25em;\n vertical-align: -0.25em; }\n\n .article-summary-body {\n color: $text-color;\n font-size: $small-font-size;\n padding: 0 $base-spacing $base-spacing; }\n\n .article-summary__image {\n background-blend-mode: multiply;\n background-color: $offwhite;\n background-position: center center;\n background-size: cover;\n padding-top: 10rem; } }\n\n@media (min-width: $break-medium) {\n .article-summary {\n &__featured {\n display: flex;\n\n &__latest {\n align-content: stretch;\n display: flex;\n flex: 0 0 calc(75% - #{$small-spacing * 1/2});\n margin-right: $small-spacing;\n\n > * {\n width: 100%; }\n\n .article-title {\n font-size: 2.5rem; }\n\n .article-summary-body {\n font-size: 1.1rem; } }\n\n &__other {\n align-content: stretch;\n display: flex;\n flex: 0 0 calc(25% - #{$small-spacing * 1/2}); } }\n\n &__list {\n display: flex;\n flex-wrap: wrap;\n\n > * {\n flex: 0 0 calc(25% - #{$small-spacing * 3/4});\n\n &:not(:nth-child(4n)) {\n margin-right: $small-spacing; } } } } }\n','@charset "UTF-8";\n\n/// Sets the `width` and `height` of the element.\n///\n/// @param {List} $size\n/// A list of at most 2 size values.\n///\n/// If there is only a single value in `$size` it is used for both width and height. All units are supported.\n///\n/// @example scss - Usage\n/// .first-element {\n/// @include size(2em);\n/// }\n///\n/// .second-element {\n/// @include size(auto 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .first-element {\n/// width: 2em;\n/// height: 2em;\n/// }\n///\n/// .second-element {\n/// width: auto;\n/// height: 10em;\n/// }\n///\n/// @todo Refactor in 5.0.0 to use a comma-separated argument\n\n@mixin size($value) {\n $width: nth($value, 1);\n $height: $width;\n\n @if length($value) > 1 {\n $height: nth($value, 2);\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n\n @if is-size($height) {\n height: $height;\n } @else {\n @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";\n }\n\n @if is-size($width) {\n width: $width;\n } @else {\n @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";\n }\n\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'], sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}@media (min-width:1024px){html[data-current=home] main{display:flex;height:100vh;flex-direction:column}}html[data-current=home] .intro{position:relative;text-align:left}@media (min-width:1024px){html[data-current=home] .intro{flex:1}}html[data-current=home] .intro p{color:#93908e;margin-top:.5rem}html[data-current=home] .content{margin-bottom:1rem;margin-top:0}@media (min-width:1024px){html[data-current=home] .content{display:flex}}html[data-current=home] .site-footer{display:none}.home-section{position:relative;padding:2rem 0}@media (min-width:1024px){.home-section{display:flex;flex:1;flex-direction:column;padding:2rem}}@media (min-width:1024px){.home-section:not(:last-child){margin-right:2rem}}.home-section .section-title{color:hsla(0,0%,100%,.33)}.home-section .card{background-color:transparent;box-shadow:none;margin:0}@media (min-width:1024px){.home-section .card{padding:0}}.home-section .card .article-summary-body{color:#fff}.home-section h2{font-size:1.25rem;margin-bottom:.5rem}.home-section p{color:#fff;font-size:.8rem;margin:0}.home-section .article-summary .article-meta,.home-section .article-summary .article-summary-body,.home-section .article-summary header{margin-bottom:.25rem;padding:0}.home-section .more{position:absolute;right:0;bottom:0}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/pages/Home/style.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCtGjC,0BAFJ,6BAGM,aACA,aACA,qBAAsB,CAAM,CALlC,+BAQI,kBACA,eAAgB,CAEhB,0BAXJ,+BAYM,MAAO,CAI4B,CAhBzC,iCAeM,cACA,gBAA8B,CAhBpC,iCAmBI,mBACA,YAAa,CAEb,0BAtBJ,iCAuBM,YAAa,CAAM,CAvBzB,qCA0BI,YAAa,CAAI,cAGnB,kBACA,cDaiB,CCXjB,0BAJF,cAKI,aACA,OACA,sBACA,YDOe,CC8BgC,CAlC/C,0BAXJ,+BAYM,iBDGa,CCHmB,CAZtC,6BAeI,yBDzCQ,CC0BZ,oBAkBI,6BACA,gBACA,QAAS,CAET,0BAtBJ,oBAuBM,SAAU,CAGQ,CA1BxB,0CA0BM,UDpDM,CC0BZ,iBA6BI,kBACA,mBAAqB,CA9BzB,gBAiCI,WACA,gBACA,QAAS,CAnCb,wIAyCM,qBACA,SAAU,CA1ChB,oBCYE,kBAII,QAAA,QD6BkC,CAAS",file:"style.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\nhtml[data-current="home"] {\n main {\n @media (min-width: $break-medium) {\n display: flex;\n height: 100vh;\n flex-direction: column; } }\n\n .intro {\n position: relative;\n text-align: left;\n\n @media (min-width: $break-medium) {\n flex: 1; }\n\n p {\n color: $muted-color;\n margin-top: $small-spacing / 2; } }\n\n .content {\n margin-bottom: $small-spacing;\n margin-top: 0;\n\n @media (min-width: $break-medium) {\n display: flex; } }\n\n .site-footer {\n display: none; } }\n\n.home-section {\n position: relative;\n padding: $base-spacing 0 $base-spacing;\n\n @media (min-width: $break-medium) {\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: $base-spacing; }\n\n &:not(:last-child) {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n .section-title {\n color: $muted-color-white; }\n\n .card {\n background-color: transparent;\n box-shadow: none;\n margin: 0;\n\n @media (min-width: $break-medium) {\n padding: 0; }\n\n .article-summary-body {\n color: $white; } }\n\n h2 {\n font-size: 1.25rem;\n margin-bottom: 0.5rem; }\n\n p {\n color: $white;\n font-size: $small-font-size;\n margin: 0; }\n\n .article-summary {\n header,\n .article-meta,\n .article-summary-body {\n margin-bottom: 0.25rem;\n padding: 0; } }\n\n .more {\n @include position(absolute, null 0 0 null); } }\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,"@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}.branding ul{display:flex;flex-wrap:wrap;list-style:none;margin-top:4rem;padding:0}.brand{align-items:center;background-color:#c9c6c4;border-radius:.25rem;justify-content:center;margin:0 0 2rem;padding:5%;position:relative;transition:background-color 125ms,transform 125ms;width:100%}@media (min-width:480px){.brand{display:flex;flex-direction:column;margin-right:2%;width:48%}.brand:nth-child(2n){margin-right:0}}@media (min-width:1024px){.brand{padding:3%;width:23%}.brand:nth-child(2n){margin-right:2%}.brand:nth-child(4n){margin-right:0}}.brand:hover{transform:scale(1.15)}.brand.gemini:hover{background-color:#59b1d2}.brand.proteus{padding-bottom:1rem;padding-top:1rem}.brand.proteus svg{height:110px}.brand.proteus #logo #P{fill:#c9c6c4;transition:fill 125ms}.brand.proteus:hover{background-color:#4abab0}.brand.proteus:hover #logo #P{fill:#4abab0}.brand.sheriff:hover{background-color:#f3c36e}.brand.wifiguru:hover{background-color:#7b7dbc}.brand.armada:hover{background-color:#206c91}.brand.brightbit:hover{background-color:#f7931e}.brand.thunderplains:hover{background-color:#524866}.brand.skyhelm:hover{background-color:#37a5dd}.brand svg{height:100%;width:100%;display:block}.brand svg path,.brand svg polygon{fill:#fff}.brand-label{position:absolute;top:100%;right:0;left:0;color:#93908e;font-size:.66rem;font-weight:700;line-height:1;margin-top:.25em;text-align:center;text-transform:uppercase}@media (min-width:480px){.brand-label{opacity:0;transition:opacity 125ms;z-index:-1}}@media (min-width:480px){.brand:hover .brand-label{opacity:1}}","",{version:3,sources:["/./source/stylesheets/variables.sass","/./source/pages/Work/branding.sass","/./node_modules/bourbon/app/assets/stylesheets/addons/_size.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_position.scss"],names:[],mappings:"AA+EE,0BADF,cAJE,aACA,mBACA,uBAKE,kBApCe,CAoCkB,CAMnC,0BADF,eAFE,cAAe,CAIc,CAS7B,0BADF,iBALE,uBACA,aACA,eACA,qBAAsB,CAYe,CALnC,0BALJ,6BAMM,iBAzDa,CAyDmB,CAGlC,0BATJ,4BAUM,gBA7Da,CA6DkB,CCxGrC,aAEI,aACA,eACA,gBACA,gBACA,SAAU,CAAI,OAGhB,mBACA,yBACA,qBACA,uBACA,gBACA,WACA,kBACA,kDACA,UAAW,CAEX,yBAXF,OAYI,aACA,sBACA,gBACA,SAAU,CAfd,qBAkBM,cAAe,CAAI,CAEvB,0BApBF,OAqBI,WACA,SAAU,CAtBd,qBAyBM,eAAgB,CAzBtB,qBA4BM,cAAe,CAAI,CA5BzB,aA+BI,qBAAsB,CA/B1B,oBAkCI,wBAAyB,CAlC7B,eAqCI,oBACA,gBDF6B,CCpCjC,mBAyCM,YAAa,CAzCnB,wBA4CM,aACA,qBDOwB,CCpD9B,qBAgDM,wBAAyB,CAhD/B,8BAmDQ,YAAa,CAnDrB,qBAsDI,wBAAyB,CAtD7B,sBAyDI,wBAAyB,CAzD7B,oBA4DI,wBAAyB,CA5D7B,uBA+DI,wBAAyB,CA/D7B,2BAkEI,wBAAyB,CAlE7B,qBAqEI,wBAAyB,CArE7B,WCiCI,YAMA,WDkCA,aAAc,CAzElB,mCA6EM,SDnFM,CCmFS,aE7CnB,kBAII,SAAA,QAAA,OF6CJ,cACA,iBACA,gBACA,cACA,iBACA,kBACA,wBAAyB,CAEzB,yBAVF,aAWI,UACA,yBACA,UAAW,CAIS,CADpB,yBADF,0BAEI,SAAU,CAAM,CAAA",file:"branding.sass",sourcesContent:['@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','@import "../../stylesheets/variables";\n\n.branding {\n ul {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin-top: $large-spacing;\n padding: 0; } }\n\n.brand {\n align-items: center;\n background-color: mix($offwhite, $light-brown, 75%);\n border-radius: $base-border-radius;\n justify-content: center;\n margin: 0 0 $base-spacing;\n padding: 5%;\n position: relative;\n transition: background-color $fast-timing, transform $fast-timing;\n width: 100%;\n\n @media (min-width: $break-small) {\n display: flex;\n flex-direction: column;\n margin-right: 2%;\n width: 48%;\n\n &:nth-child(2n) {\n margin-right: 0; } }\n\n @media (min-width: $break-medium) {\n padding: 3%;\n width: 23%;\n\n &:nth-child(2n) {\n margin-right: 2%; }\n\n &:nth-child(4n) {\n margin-right: 0; } }\n\n &:hover {\n transform: scale(1.15); }\n\n &.gemini:hover {\n background-color: #59b1d2; }\n\n &.proteus {\n padding-bottom: $small-spacing;\n padding-top: $small-spacing;\n\n svg {\n height: 110px; }\n\n #logo #P {\n fill: mix($offwhite, $light-brown, 75%);\n transition: fill $fast-timing; }\n\n &:hover {\n background-color: #4abaB0;\n\n #logo #P {\n fill: #4ABAB0; } } }\n\n &.sheriff:hover {\n background-color: #f3c36e; }\n\n &.wifiguru:hover {\n background-color: #7b7dbc; }\n\n &.armada:hover {\n background-color: #206c91; }\n\n &.brightbit:hover {\n background-color: #f7931e; }\n\n &.thunderplains:hover {\n background-color: #524866; }\n\n &.skyhelm:hover {\n background-color: #37a5dd; }\n\n svg {\n @include size(100%);\n display: block;\n\n path,\n polygon {\n fill: $white; } } }\n\n.brand-label {\n @include position(absolute, 100% 0 null);\n color: $muted-color;\n font-size: $smallest-font-size;\n font-weight: bold;\n line-height: 1;\n margin-top: 0.25em;\n text-align: center;\n text-transform: uppercase;\n\n @media (min-width: $break-small) {\n opacity: 0;\n transition: opacity $fast-timing;\n z-index: -1; }\n\n .brand:hover & {\n @media (min-width: $break-small) {\n opacity: 1; } } }\n','@charset "UTF-8";\n\n/// Sets the `width` and `height` of the element.\n///\n/// @param {List} $size\n/// A list of at most 2 size values.\n///\n/// If there is only a single value in `$size` it is used for both width and height. All units are supported.\n///\n/// @example scss - Usage\n/// .first-element {\n/// @include size(2em);\n/// }\n///\n/// .second-element {\n/// @include size(auto 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .first-element {\n/// width: 2em;\n/// height: 2em;\n/// }\n///\n/// .second-element {\n/// width: auto;\n/// height: 10em;\n/// }\n///\n/// @todo Refactor in 5.0.0 to use a comma-separated argument\n\n@mixin size($value) {\n $width: nth($value, 1);\n $height: $width;\n\n @if length($value) > 1 {\n $height: nth($value, 2);\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n\n @if is-size($height) {\n height: $height;\n } @else {\n @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";\n }\n\n @if is-size($width) {\n width: $width;\n } @else {\n @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";\n }\n\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n','@charset "UTF-8";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n/// A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n/// List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n/// .element {\n/// @include position(absolute, 0 null null 10em);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// left: 10em;\n/// position: absolute;\n/// top: 0;\n/// }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;\n $output-bourbon-deprecation-warnings: false !global;\n $coordinates: unpack($coordinates);\n\n $offsets: (\n top: nth($coordinates, 1),\n right: nth($coordinates, 2),\n bottom: nth($coordinates, 3),\n left: nth($coordinates, 4)\n );\n\n position: $position;\n\n @each $offset, $value in $offsets {\n @if is-length($value) {\n #{$offset}: $value;\n }\n }\n $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;\n}\n'],sourceRoot:"webpack://"}])},function(e,t,n){t=e.exports=n(9)(),t.push([e.i,'@media (min-width:1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width:1024px){.split-primary{flex:1 1 61.8%}}@media (min-width:1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width:1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width:1024px){.split-secondary:last-child{margin-left:2rem}}@-webkit-keyframes rise{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-moz-keyframes rise{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}.button{background-color:#f6f4f3;border:none;border-radius:.25rem;box-shadow:0 .5rem .33rem -.33rem rgba(0,0,0,.1),0 .25rem 1rem rgba(0,0,0,.1);color:#4e4b48;display:inline-block;font-weight:500;line-height:2;padding:.2em 1em .25em;text-shadow:none;transition:color 125ms,transform 125ms,box-shadow .25s}.button:hover{color:#53b1e1}.button:active{transform:translateY(.1rem);box-shadow:0 .25rem .25rem -.25rem rgba(0,0,0,.33),0 .1rem .25rem rgba(0,0,0,.1)}section{margin:0 auto;padding:2rem}section:after{clear:both;content:"";display:table}@media (min-width:1024px){section{padding:4rem}}.section-footer,.section-title{margin-bottom:.5rem}.intro .section-footer,.intro .section-title{color:#f2efed}.section-footer{text-align:right}.more:after{border:3px solid transparent;border-bottom-color:hsla(0,0%,100%,.33);border-right-color:hsla(0,0%,100%,.33);content:"";display:inline-block;margin-left:.25rem;height:.2rem;width:.2rem;transform:rotate(-45deg)}.card{background-color:#f2efed;border-radius:.25rem;box-shadow:0 1rem 1rem -.5rem #000,0 1rem 3rem rgba(0,0,0,.5);margin-bottom:1rem;position:relative}.content{margin:2rem 1rem 1rem 3.2rem;transition:box-shadow 125ms,transform .25s;z-index:2}@media (min-width:1024px){.content{margin-left:4rem;margin-right:4rem}}.intro+.content{margin-top:35vh}.nav-active .content{transform:translate(6rem)}.content.case-studies--content,.content.exercises--content{margin-top:35vh}h1,h2,h3,h4{font-family:Libre Baskerville,Brandon,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.2;margin:0 0 1rem}h2{color:#f15729;font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}ul{list-style:outside square;margin:0 0 2rem .5rem;padding:0 0 0 1rem}ul.list-inline,ul.list-simple{list-style:none;padding:0}ul.list-inline li{display:inline-block;margin:0 1rem}p{margin:0 0 2rem}a{color:#53b1e1;transition:color .25s}a,a:hover{text-decoration:none}a:hover{color:#4796bf}img,svg{display:block;margin:0 auto;max-width:100%}.section-footer,.section-title{color:#93908e;font-size:.8rem;font-weight:700;text-transform:uppercase}.year,mark{background-image:-webkit-linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);background-image:linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);padding:0 .25rem;color:#fff;font-weight:300;padding:.05em .1em}.content .year,.content mark,.year,mark{background-color:transparent;border-radius:1rem}.content .year,.content mark{background-image:-webkit-linear-gradient(transparent,transparent 35%,rgba(243,185,79,.15) 0,rgba(243,185,79,.15) 85%,transparent 0);background-image:linear-gradient(transparent,transparent 35%,rgba(243,185,79,.15) 0,rgba(243,185,79,.15) 85%,transparent 0);padding:0 .25rem;color:rgba(54,51,47,.8725)}.year{display:inline-block;color:#93908e;font-family:Brandon,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.7em;font-weight:400;line-height:1;padding:.2em .5em .15em}.intro .year{background-color:transparent;background-image:-webkit-linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);background-image:linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);border-radius:1rem;padding:0 .25rem;border-color:#f2efed;color:#f2efed}.brand-label .year,.portfolio-title .year{margin-left:.5em}@media (max-width:1024px){.portfolio-title .year{background-color:transparent;background-image:-webkit-linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);background-image:linear-gradient(transparent,transparent 35%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 85%,transparent 0);border-radius:1rem;padding:0 .25rem}}.brand-label .year{font-size:1em}blockquote{background-color:#f2efed;border-left:5px solid #e6e3e1;margin-left:2rem;margin-right:0;padding-left:1rem;position:relative}blockquote:before{position:absolute;top:-.1em;left:-.5em;color:#cecbc9;content:"\\201C";font-family:Georgia,serif;font-size:4.5em;line-height:1}blockquote .quote-author{color:#f15729;display:block;font-size:.75em;margin-top:.25em}figure{margin:4rem 0}.split-secondary figure{margin:0}figure .case-study-example{margin:0 auto}figcaption{color:#93908e;font-size:small;margin:.5rem auto 2rem;text-align:center}html[data-current=case_study--armada]{background-color:#1b6c94;background-attachment:fixed;background-size:contain}html[data-current=case_study--armada] .content{box-shadow:0 1rem 1rem -.5rem #124863,0 1rem 3rem rgba(18,72,99,.75)}html[data-current=case_study--armada] .content h2{color:#1b6c94}html[data-current=case_study--summit]{background-color:#b93a32;background-attachment:fixed;background-size:contain}html[data-current=case_study--summit] .content{box-shadow:0 1rem 1rem -.5rem #7c2722,0 1rem 3rem rgba(124,39,34,.75)}html[data-current=case_study--summit] .content h2{color:#b93a32}html[data-current=case_study--ember]{background-color:#e46651;background-attachment:fixed;background-size:contain}html[data-current=case_study--ember] .content{box-shadow:0 1rem 1rem -.5rem #994436,0 1rem 3rem rgba(153,68,54,.75)}html[data-current=case_study--ember] .content h2{color:#e46651}html[data-current=case_study--schoolkeep]{background-color:#23bd84;background-attachment:fixed;background-size:contain}html[data-current=case_study--schoolkeep] .content{box-shadow:0 1rem 1rem -.5rem #177f58,0 1rem 3rem rgba(23,127,88,.75)}html[data-current=case_study--schoolkeep] .content h2{color:#23bd84}html[data-current=case_study--carma]{background-color:#555756;background-attachment:fixed;background-size:contain}html[data-current=case_study--carma] .content{box-shadow:0 1rem 1rem -.5rem #393a3a,0 1rem 3rem rgba(57,58,58,.75)}html[data-current=case_study--carma] .content h2{color:#555756}html[data-current=case_study--ooo]{background-color:#41434e;background-attachment:fixed;background-size:contain}html[data-current=case_study--ooo] .content{box-shadow:0 1rem 1rem -.5rem #2c2d34,0 1rem 3rem rgba(44,45,52,.75)}html[data-current=case_study--ooo] .content h2{color:#41434e}html[data-current=case_study--sharespost]{background-color:#332d8d;background-attachment:fixed;background-size:contain}html[data-current=case_study--sharespost] .content{box-shadow:0 1rem 1rem -.5rem #221e5e,0 1rem 3rem rgba(34,30,94,.75)}html[data-current=case_study--sharespost] .content h2{color:#332d8d}.case-study-example{border-radius:.25rem;box-shadow:0 1rem .5rem -.75rem rgba(0,0,0,.25),0 .25rem 2rem rgba(0,0,0,.15);margin:2rem auto 4rem}*{box-sizing:border-box}body,html{font-size:calc(1rem + .2 * (100vw - 25em) / 100);line-height:1.5;min-height:100%}html{background-color:#33312f;transition:background-color .25s}body{color:#33312f;font-family:Brandon,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}',"",{version:3,sources:["/./source/stylesheets/application.sass","/./source/stylesheets/variables.sass","/./node_modules/bourbon/app/assets/stylesheets/css3/_keyframes.scss","/./source/stylesheets/animations.sass","/./source/stylesheets/buttons.sass","/./node_modules/bourbon/app/assets/stylesheets/functions/_tint.scss","/./node_modules/bourbon/app/assets/stylesheets/addons/_clearfix.scss","/./source/stylesheets/section.sass","/./source/stylesheets/typography.sass","/./node_modules/bourbon/app/assets/stylesheets/functions/_shade.scss","/./node_modules/bourbon/app/assets/stylesheets/css3/_linear-gradient.scss","/./source/stylesheets/case-studies.sass","/./source/stylesheets/application.sass"],names:[],mappings:"AAAA,0BC+EqB,cADrB,aAJW,mBACO,uBACC,kBA/BJ,CAAA,CAAA,0BA0CM,eADrB,cAFQ,CAAA,CAAA,0BAaa,iBADrB,uBALmB,aACR,eACH,qBACU,CAAA,CAAA,0BAOK,6BALP,iBAnDD,CAAA,CAAA,0BA4DQ,4BATP,gBAnDD,CAAA,CAAA,wBChCX,GCZF,UACS,0BACI,CAAA,GACb,UACS,uBACI,CAAA,CAAA,qBDeX,GCpBF,UACS,0BACI,CAAA,GACb,UACS,uBACI,CAAA,CAAA,gBD2BX,GChCF,UACS,0BACI,CAAA,GACb,UACS,uBACI,CAAA,CAAA,QCNf,yBCsBU,YDpBA,qBHiDW,8EAhDb,cAIM,qBGDH,gBACI,cACF,uBACF,iBACI,sDHmDD,CAAA,cG7DP,aHUA,CAAA,eGVA,4BAiBQ,gFHdP,CAAA,QGe2B,cHiDzB,YAtBK,CAAA,cK1Bb,WACS,WACE,aACA,CAAA,0BLgDQ,QMtErB,YNgDgB,CAAA,CAAA,+BM5ChB,mBN2CmB,CAAA,6CM3CnB,aNCW,CAAA,gBMIY,gBAGT,CAAA,YAET,6BAEO,wCNZJ,uCAAA,WMeK,qBACA,mBACI,aACL,YACD,wBACI,CAAA,MAAiB,yBNnBrB,qBA8CU,8DAxBqC,mBAmB1C,iBMfJ,CAAA,SAAY,6BAG8B,2CN2BxC,SMzBZ,CAAO,0BAEY,SALrB,iBNgBe,iBADC,CAAA,CAAA,gBMfhB,eNEe,CAAA,qBMFf,yBAae,CAAA,2DAbP,eNEO,CAAA,YO3Bf,kFP8B2D,gBO5B5C,qBACG,gBACH,ePkCC,CAAA,GOjCe,cPLzB,cOSO,CAAA,GAAQ,gBAGR,CAAA,GAAU,iBAGV,CAAA,GAAW,0BAGV,sBPqBK,kBADH,CAAA,8BOrBd,gBAMc,SACZ,CAAO,kBAKP,qBACW,aPQC,CAAA,EAAiB,eADlB,CAAA,EAAI,cAnCZ,AOoCY,qBPeL,CAAA,UAnDP,oBOoCY,CAKE,APUP,QOjBb,aCtBS,CD6BW,QAGrB,cACW,cACD,cACG,CAAA,+BDrDb,cNcc,gBAyBI,gBOmBH,wBACG,CAAA,WA9D8F,kIEoC5F,0HACA,AFpCH,iBACN,WPCH,gBOgEO,kBACJ,CAAA,wCAJX,6BAhEgH,AEqC5F,kBFpCH,CAuEN,AAJA,6BApEqG,oIEoC5F,4HACA,AFpCH,iBACN,0BAsEA,CAAA,MAA0C,qBAI1C,cP3DG,gEAoB6C,eO0C9C,gBACE,cACF,uBACF,CAAA,aARX,6BA1EgH,kIEoC5F,0HACA,mBFpCH,iBACN,qBPEA,aAAA,CAAA,0COsEX,gBAiBiB,CAAA,0BAGM,uBApBvB,6BA1EgH,kIEoC5F,0HACA,mBFpCH,gBACN,CAAA,CAAA,mBAwEX,aAwBe,CAAA,WAAO,yBP9FX,8BQiBD,iBRuBK,eO4DD,kBP3DE,iBO6DJ,CAAA,kBANF,kBASY,UAAW,WAAiB,cCxFxC,gBD0FG,0BACI,gBACF,aACX,CAAA,yBAEF,cP7GI,cO+GO,gBACE,gBACC,CAAA,OAAU,aPzEV,CAAA,wBO2EhB,QAII,CAAA,2BAEF,aACU,CAAA,WAAU,cPhHR,gBOoHD,uBPzFE,iBO2FD,CAAA,sCGvIM,yBVyDI,4BUvDG,uBACN,CAAA,+CAEjB,oEFgBM,CAAA,kDEhBN,aVoDoB,CAAA,sCUzDJ,yBVyDqB,4BUvDd,uBACN,CAAA,+CAEjB,qEFgBM,CAAA,kDEhBN,aVoDqC,CAAA,qCUzDrB,yBVyDqC,4BUvD9B,uBACN,CAAA,8CAEjB,qEFgBM,CAAA,iDEhBN,aVoDqD,CAAA,0CUzDrC,yBVyD0D,4BUvDnD,uBACN,CAAA,mDAEjB,qEFgBM,CAAA,sDEhBN,aVoD0E,CAAA,qCUzD1D,yBVyD0E,4BUvDnE,uBACN,CAAA,8CAEjB,oEFgBM,CAAA,iDEhBN,aVoD0F,CAAA,mCUzD1E,yBVyDwF,4BUvDjF,uBACN,CAAA,4CAEjB,oEFgBM,CAAA,+CEhBN,aVoDwG,CAAA,0CUzDxF,yBVyD6G,4BUvDtG,uBACN,CAAA,mDAEjB,oEFgBM,CAAA,sDEhBN,aVoD6H,CAAA,oBUhDzG,qBVyCH,8EUrCsD,qBAC/C,CViCZ,EAAA,qBWvCF,CAAA,UAER,iDX+BW,gBW7BJ,eACD,CAAE,KAAQ,yBXRd,gCAuDM,CAAA,KW3CgC,cXZtC,gEAgCmD,gBWf9C,SACX,kBACY,kCACY,CAAA",file:"application.sass",sourcesContent:['@media (min-width: 1024px){.split-layout{display:flex;flex-direction:row;justify-content:center;margin-bottom:2rem}}@media (min-width: 1024px){.split-primary{flex:1 1 61.8%}}@media (min-width: 1024px){.split-secondary{justify-content:center;display:flex;flex:1 1 28.2%;flex-direction:column}}@media (min-width: 1024px){.split-secondary:first-child{margin-right:2rem}}@media (min-width: 1024px){.split-secondary:last-child{margin-left:2rem}}@-webkit-keyframes rise{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@-moz-keyframes rise{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes rise{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}.button{background-color:#f6f4f3;border:none;border-radius:.25rem;box-shadow:0 0.5rem 0.33rem -0.33rem rgba(0,0,0,0.1),0 0.25rem 1rem rgba(0,0,0,0.1);color:#4E4B48;display:inline-block;font-weight:500;line-height:2;padding:.2em 1em .25em;text-shadow:none;transition:color 125ms,transform 125ms,box-shadow 250ms}.button:hover{color:#53B1E1}.button:active{transform:translateY(0.1rem);box-shadow:0 0.25rem 0.25rem -0.25rem rgba(0,0,0,0.33),0 0.1rem 0.25rem rgba(0,0,0,0.1)}section{margin:0 auto;padding:2rem}section::after{clear:both;content:"";display:table}@media (min-width: 1024px){section{padding:4rem}}.section-title,.section-footer{margin-bottom:.5rem}.intro .section-title,.intro .section-footer{color:#f2efed}.section-footer{text-align:right}.more::after{border:3px solid transparent;border-bottom-color:rgba(255,255,255,0.33);border-right-color:rgba(255,255,255,0.33);content:"";display:inline-block;margin-left:0.25rem;height:0.2rem;width:0.2rem;transform:rotate(-45deg)}.card{background-color:#f2efed;border-radius:.25rem;box-shadow:0 1rem 1rem -0.5rem #000,0 1rem 3rem rgba(0,0,0,0.5);margin-bottom:1rem;position:relative}.content{margin:2rem 1rem 1rem 3.2rem;transition:box-shadow 125ms,transform 250ms;z-index:2}@media (min-width: 1024px){.content{margin-left:4rem;margin-right:4rem}}.intro+.content{margin-top:35vh}.nav-active .content{transform:translate(6rem)}.content.case-studies--content,.content.exercises--content{margin-top:35vh}h1,h2,h3,h4{font-family:"Libre Baskerville","Brandon",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:normal;letter-spacing:0.02em;line-height:1.2;margin:0 0 1rem}h2{color:#f15729;font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}ul{list-style:outside square;margin:0 0 2rem .5rem;padding:0 0 0 1rem}ul.list-simple,ul.list-inline{list-style:none;padding:0}ul.list-inline li{display:inline-block;margin:0 1rem}p{margin:0 0 2rem}a{color:#53B1E1;text-decoration:none;transition:color 250ms}a:hover{color:#4796bf;text-decoration:none}img,svg{display:block;margin:0 auto;max-width:100%}.section-title,.section-footer{color:#93908e;font-size:.8rem;font-weight:700;text-transform:uppercase}mark,.year{background-color:transparent;background-image:-webkit-linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);background-image:linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);border-radius:1rem;padding:0 0.25rem;color:#fff;font-weight:300;padding:0.05em 0.1em}.content mark,.content .year{background-color:transparent;background-image:-webkit-linear-gradient(transparent 0%,transparent 35%,rgba(243,185,79,0.15) 35%,rgba(243,185,79,0.15) 85%,transparent 85%);background-image:linear-gradient(transparent 0%,transparent 35%,rgba(243,185,79,0.15) 35%,rgba(243,185,79,0.15) 85%,transparent 85%);border-radius:1rem;padding:0 0.25rem;color:rgba(54,51,47,0.8725)}.year{display:inline-block;color:#93908e;font-family:"Brandon",-apple-system,BlinkMacSystemFont,sans-serif;font-size:0.7em;font-weight:normal;line-height:1;padding:0.2em 0.5em 0.15em}.intro .year{background-color:transparent;background-image:-webkit-linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);background-image:linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);border-radius:1rem;padding:0 0.25rem;border-color:#f2efed;color:#f2efed}.portfolio-title .year,.brand-label .year{margin-left:0.5em}@media (max-width: 1024px){.portfolio-title .year{background-color:transparent;background-image:-webkit-linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);background-image:linear-gradient(transparent 0%,transparent 35%,rgba(255,255,255,0.15) 35%,rgba(255,255,255,0.15) 85%,transparent 85%);border-radius:1rem;padding:0 0.25rem}}.brand-label .year{font-size:1em}blockquote{background-color:#f2efed;border-left:5px solid #e6e3e1;margin-left:2rem;margin-right:0;padding-left:1rem;position:relative}blockquote::before{position:absolute;top:-.1em;left:-.5em;color:#cecbc9;content:"“";font-family:Georgia, serif;font-size:4.5em;line-height:1}blockquote .quote-author{color:#f15729;display:block;font-size:0.75em;margin-top:0.25em}figure{margin:4rem 0}.split-secondary figure{margin:0}figure .case-study-example{margin:0 auto}figcaption{color:#93908e;font-size:small;margin:.5rem auto 2rem;text-align:center}html[data-current="case_study--armada"]{background-color:#1b6c94;background-attachment:fixed;background-size:contain}html[data-current="case_study--armada"] .content{box-shadow:0 1rem 1rem -0.5rem #124863,0 1rem 3rem rgba(18,72,99,0.75)}html[data-current="case_study--armada"] .content h2{color:#1b6c94}html[data-current="case_study--summit"]{background-color:#B93A32;background-attachment:fixed;background-size:contain}html[data-current="case_study--summit"] .content{box-shadow:0 1rem 1rem -0.5rem #7c2722,0 1rem 3rem rgba(124,39,34,0.75)}html[data-current="case_study--summit"] .content h2{color:#B93A32}html[data-current="case_study--ember"]{background-color:#e46651;background-attachment:fixed;background-size:contain}html[data-current="case_study--ember"] .content{box-shadow:0 1rem 1rem -0.5rem #994436,0 1rem 3rem rgba(153,68,54,0.75)}html[data-current="case_study--ember"] .content h2{color:#e46651}html[data-current="case_study--schoolkeep"]{background-color:#23bd84;background-attachment:fixed;background-size:contain}html[data-current="case_study--schoolkeep"] .content{box-shadow:0 1rem 1rem -0.5rem #177f58,0 1rem 3rem rgba(23,127,88,0.75)}html[data-current="case_study--schoolkeep"] .content h2{color:#23bd84}html[data-current="case_study--carma"]{background-color:#555756;background-attachment:fixed;background-size:contain}html[data-current="case_study--carma"] .content{box-shadow:0 1rem 1rem -0.5rem #393a3a,0 1rem 3rem rgba(57,58,58,0.75)}html[data-current="case_study--carma"] .content h2{color:#555756}html[data-current="case_study--ooo"]{background-color:#41434e;background-attachment:fixed;background-size:contain}html[data-current="case_study--ooo"] .content{box-shadow:0 1rem 1rem -0.5rem #2c2d34,0 1rem 3rem rgba(44,45,52,0.75)}html[data-current="case_study--ooo"] .content h2{color:#41434e}html[data-current="case_study--sharespost"]{background-color:#332D8D;background-attachment:fixed;background-size:contain}html[data-current="case_study--sharespost"] .content{box-shadow:0 1rem 1rem -0.5rem #221e5e,0 1rem 3rem rgba(34,30,94,0.75)}html[data-current="case_study--sharespost"] .content h2{color:#332D8D}.case-study-example{border-radius:.25rem;box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.25),0 0.25rem 2rem rgba(0,0,0,0.15);margin:2rem auto 4rem}*{box-sizing:border-box}html,body{font-size:calc(1rem + 0.2 * (100vw - 25em) / 100);line-height:1.5;min-height:100%}html{background-color:#33312f;transition:background-color 250ms}body{color:#33312f;font-family:"Brandon",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}\n','@import "bourbon";\n\n// Colors\n$black: #000;\n$white: #fff;\n$offwhite: #f2efed;\n$brown: #33312f;\n$light-brown: #4E4B48;\n$red: #f15729;\n$gray: #bbb;\n$blue: #53B1E1;\n$yellow: #f4da5c;\n$green: #bfd849;\n$magenta: #c76baa;\n$cyan: #66ddd2;\n\n$background-color: $offwhite;\n$text-color: $brown;\n$muted-color: mix($text-color, $background-color, 50%);\n$muted-color-white: rgba($white, 0.33);\n$link-color: $blue;\n$link-hover: shade($blue, 15%);\n$logo-color: $offwhite;\n$highlight-color: rgba(mix($yellow, $red, 75%), 0.15);\n$intro-highlight-color: rgba($white, 0.15);\n\n$base-shadow: 0 1.1rem 0.33rem -0.75rem rgba(#000, 0.3), 0 0.5rem 1rem rgba(#000, 0.1);\n$large-shadow: 0 1rem 1rem -0.5rem #000, 0 1rem 3rem rgba(#000, 0.5);\n$small-shadow: 0 0.5rem 0.33rem -0.33rem rgba($black, 0.1), 0 0.25rem 1rem rgba($black, 0.1);\n$smallest-shadow: 0 0.25rem 0.25rem -0.25rem rgba($black, 0.33), 0 0.1rem 0.25rem rgba($black, 0.1);\n\n// Layout\n$break-small: 480px;\n$break-medium: 1024px;\n$break-large: 1600px;\n$intro-height: 35vh;\n\n// Fonts\n$sans-serif: "Brandon", -apple-system, BlinkMacSystemFont, sans-serif;\n$heading-font: "Libre Baskerville", $sans-serif;\n\n// Sizes\n$base-font-size: calc(1rem + 0.2 * (100vw - 25em) / 100);\n$small-font-size: 0.8rem;\n$smallest-font-size: 0.66rem;\n$base-spacing: 2rem;\n$small-spacing: $base-spacing / 2;\n$smallest-spacing: $base-spacing / 4;\n$large-spacing: $base-spacing * 2;\n$header-width: 4rem;\n$header-width-wide: 6rem;\n$base-border-radius: 0.25rem;\n\n// Z-indeces\n$z-base: 1;\n$z-header: 5;\n\n// Brand Colors\n$brand-colors: (armada: #1b6c94, summit: #B93A32, ember: #e46651, schoolkeep: #23bd84, carma: #555756, ooo: #41434e, sharespost: #332D8D);\n\n// Animations\n$base-timing: 250ms;\n$fast-timing: $base-timing / 2;\n$slow-timing: $base-timing * 2;\n\n@mixin container {\n @include clearfix;\n margin: 0 auto;\n padding: $base-spacing;\n\n @media (min-width: $break-medium) {\n padding: $large-spacing; } }\n\n@mixin split-layout {\n display: flex;\n flex-direction: row;\n justify-content: center; }\n\n.split-layout {\n @media (min-width: $break-medium) {\n @include split-layout;\n margin-bottom: $base-spacing; } }\n\n@mixin split-primary {\n flex: 1 1 61.8%; }\n\n.split-primary {\n @media (min-width: $break-medium) {\n @include split-primary; } }\n\n@mixin split-secondary {\n justify-content: center;\n display: flex;\n flex: 1 1 28.2%;\n flex-direction: column; }\n\n.split-secondary {\n @media (min-width: $break-medium) {\n @include split-secondary; }\n\n &:first-child {\n @media (min-width: $break-medium) {\n margin-right: $base-spacing; } }\n\n &:last-child {\n @media (min-width: $break-medium) {\n margin-left: $base-spacing; } } }\n\n@mixin brand-gradient($color) {\n $shifted-color: tint(adjust-hue($color, 25%), 10%);\n background: $color linear-gradient(135deg, $color 55%, $shifted-color); }\n','// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block\'s content\n@mixin keyframes($name) {\n @include _bourbon-deprecate-for-prefixing("keyframes");\n\n $original-prefix-for-webkit: $prefix-for-webkit;\n $original-prefix-for-mozilla: $prefix-for-mozilla;\n $original-prefix-for-microsoft: $prefix-for-microsoft;\n $original-prefix-for-opera: $prefix-for-opera;\n $original-prefix-for-spec: $prefix-for-spec;\n\n @if $original-prefix-for-webkit {\n @include disable-prefix-for-all();\n $prefix-for-webkit: true !global;\n @-webkit-keyframes #{$name} {\n @content;\n }\n }\n\n @if $original-prefix-for-mozilla {\n @include disable-prefix-for-all();\n $prefix-for-mozilla: true !global;\n @-moz-keyframes #{$name} {\n @content;\n }\n }\n\n $prefix-for-webkit: $original-prefix-for-webkit !global;\n $prefix-for-mozilla: $original-prefix-for-mozilla !global;\n $prefix-for-microsoft: $original-prefix-for-microsoft !global;\n $prefix-for-opera: $original-prefix-for-opera !global;\n $prefix-for-spec: $original-prefix-for-spec !global;\n\n @if $original-prefix-for-spec {\n @keyframes #{$name} {\n @content;\n }\n }\n}\n',"@include keyframes(rise) {\n from {\n opacity: 0;\n transform: translateY($base-spacing); }\n to {\n opacity: 1;\n transform: translateY(0); } }\n",".button {\n background-color: tint($offwhite, 33%);\n border: none;\n border-radius: $base-border-radius;\n box-shadow: $small-shadow;\n color: $light-brown;\n display: inline-block;\n font-weight: 500;\n line-height: 2;\n padding: .2em 1em .25em;\n text-shadow: none;\n transition: color $fast-timing, transform $fast-timing, box-shadow $base-timing;\n\n &:hover {\n color: $blue; }\n\n &:active {\n transform: translateY(0.1rem);\n box-shadow: $smallest-shadow; } }\n",'@charset "UTF-8";\n\n/// Mixes a color with white.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n/// The amount of white to be mixed in.\n///\n/// @example scss - Usage\n/// .element {\n/// background-color: tint(#6ecaa6, 40%);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// background-color: #a8dfc9;\n/// }\n///\n/// @return {Color}\n\n@function tint($color, $percent) {\n @return mix(#fff, $color, $percent);\n}\n','@charset "UTF-8";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://cssmojo.com/latest_new_clearfix_so_far/\n///\n/// @example scss - Usage\n/// .element {\n/// @include clearfix;\n/// }\n///\n/// @example css - CSS Output\n/// .element::after {\n/// clear: both;\n/// content: "";\n/// display: table;\n/// }\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: "";\n display: table;\n }\n}\n','section {\n @include container; }\n\n.section-title,\n.section-footer {\n @extend %small;\n margin-bottom: $smallest-spacing;\n\n .intro & {\n color: $offwhite; } }\n\n.section-footer {\n text-align: right; }\n\n.more {\n &::after {\n border: 3px solid transparent;\n border-bottom-color: $muted-color-white;\n border-right-color: $muted-color-white;\n content: "";\n display: inline-block;\n margin-left: 0.25rem;\n height: 0.2rem;\n width: 0.2rem;\n transform: rotate(-45deg); } }\n\n.card {\n background-color: $background-color;\n border-radius: $base-border-radius;\n box-shadow: $large-shadow;\n margin-bottom: $small-spacing;\n position: relative; }\n\n.content {\n margin: $base-spacing $small-spacing $small-spacing ($header-width * 0.8);\n transition: box-shadow $fast-timing, transform $base-timing;\n z-index: 2;\n\n @media (min-width: $break-medium) {\n margin-left: $header-width;\n margin-right: $large-spacing; }\n\n .intro + & {\n margin-top: $intro-height; }\n\n .nav-active & {\n transform: translate($header-width-wide); }\n\n &.case-studies--content,\n &.exercises--content {\n margin-top: $intro-height; } }\n','@mixin highlight($color) {\n @include linear-gradient(transparent 0%, transparent 35%, $color 35%, $color 85%, transparent 85%, $fallback: transparent);\n border-radius: 1rem;\n padding: 0 0.25rem; }\n\nh1,\nh2,\nh3,\nh4 {\n font-family: $heading-font;\n font-weight: normal;\n letter-spacing: 0.02em;\n line-height: 1.2;\n margin: 0 0 $small-spacing; }\n\nh2 {\n color: $red;\n font-size: 2rem; }\n\nh3 {\n font-size: 1.5rem; }\n\nh4 {\n font-size: 1.25rem; }\n\nul {\n list-style: outside square;\n margin: 0 0 $base-spacing $smallest-spacing;\n padding: 0 0 0 $small-spacing;\n\n &.list-simple {\n list-style: none;\n padding: 0; }\n\n &.list-inline {\n @extend .list-simple;\n\n li {\n display: inline-block;\n margin: 0 $small-spacing; } } }\n\np {\n margin: 0 0 $base-spacing; }\n\na {\n color: $link-color;\n text-decoration: none;\n transition: color $base-timing;\n\n &:hover {\n color: $link-hover;\n text-decoration: none; } }\n\nimg,\nsvg {\n display: block;\n margin: 0 auto;\n max-width: 100%; }\n\n%small {\n color: $muted-color;\n font-size: $small-font-size;\n font-weight: 700;\n text-transform: uppercase; }\n\nmark {\n @include highlight($intro-highlight-color);\n color: $white;\n font-weight: 300;\n padding: 0.05em 0.1em;\n\n .content & {\n @include highlight($highlight-color);\n color: mix($text-color, $highlight-color, 85%); } }\n\n.year {\n @extend mark;\n display: inline-block;\n color: $muted-color;\n font-family: $sans-serif;\n font-size: 0.7em;\n font-weight: normal;\n line-height: 1;\n padding: 0.2em 0.5em 0.15em;\n\n .intro & {\n @include highlight($intro-highlight-color);\n border-color: $offwhite;\n color: $offwhite; }\n\n .portfolio-title &,\n .brand-label & {\n margin-left: 0.5em; }\n\n .portfolio-title & {\n @media (max-width: $break-medium) {\n @include highlight($intro-highlight-color); } }\n\n .brand-label & {\n font-size: 1em; } }\n\nblockquote {\n background-color: $background-color;\n border-left: 5px solid shade($background-color, 5%);\n margin-left: $base-spacing;\n margin-right: 0;\n padding-left: $small-spacing;\n position: relative;\n\n &::before {\n @include position(absolute, -0.1em null null -0.5em);\n color: shade($background-color, 15%);\n content: "“";\n font-family: Georgia, serif;\n font-size: 4.5em;\n line-height: 1; }\n\n .quote-author {\n color: $red;\n display: block;\n font-size: 0.75em;\n margin-top: 0.25em; } }\n\nfigure {\n margin: $large-spacing 0;\n\n .split-secondary & {\n margin: 0; }\n\n .case-study-example {\n margin: 0 auto; } }\n\nfigcaption {\n color: $muted-color;\n font-size: small;\n margin: $smallest-spacing auto $base-spacing;\n text-align: center; }\n','@charset "UTF-8";\n\n/// Mixes a color with black.\n///\n/// @param {Color} $color\n///\n/// @param {Number (Percentage)} $percent\n/// The amount of black to be mixed in.\n///\n/// @example scss - Usage\n/// .element {\n/// background-color: shade(#ffbb52, 60%);\n/// }\n///\n/// @example css - CSS Output\n/// .element {\n/// background-color: #664a20;\n/// }\n///\n/// @return {Color}\n\n@function shade($color, $percent) {\n @return mix(#000, $color, $percent);\n}\n','@mixin linear-gradient($pos, $g1, $g2: null,\n $g3: null, $g4: null,\n $g5: null, $g6: null,\n $g7: null, $g8: null,\n $g9: null, $g10: null,\n $fallback: null) {\n @include _bourbon-deprecate-for-prefixing("linear-gradient");\n\n // Detect what type of value exists in $pos\n $pos-type: type-of(nth($pos, 1));\n $pos-spec: null;\n $pos-degree: null;\n\n // If $pos is missing from mixin, reassign vars and add default position\n @if ($pos-type == color) or (nth($pos, 1) == "transparent") {\n $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;\n $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;\n $pos: null;\n }\n\n @if $pos {\n $positions: _linear-positions-parser($pos);\n $pos-degree: nth($positions, 1);\n $pos-spec: nth($positions, 2);\n }\n\n $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;\n\n // Set $g1 as the default fallback color\n $fallback-color: nth($g1, 1);\n\n // If $fallback is a color use that color as the fallback color\n @if (type-of($fallback) == color) or ($fallback == "transparent") {\n $fallback-color: $fallback;\n }\n\n background-color: $fallback-color;\n background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome\n background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");\n}\n','@each $brand, $color in $brand-colors {\n html[data-current="case_study--#{$brand}"] {\n background-color: $color;\n background-attachment: fixed;\n background-size: contain;\n\n .content {\n box-shadow: 0 1rem 1rem -0.5rem shade($color, 33%), 0 1rem 3rem rgba(shade($color, 33%), 0.75);\n\n h2 {\n color: $color; } } } }\n\n.case-study-example {\n border-radius: $base-border-radius;\n box-shadow: 0 1rem 0.5rem -0.75rem rgba(#000, 0.25), 0 0.25rem 2rem rgba(#000, 0.15);\n margin: $base-spacing auto $large-spacing; }\n','@import "bourbon";\n@import "variables";\n@import "animations";\n@import "buttons";\n@import "section";\n@import "typography";\n@import "case-studies";\n\n* {\n box-sizing: border-box; }\n\nhtml, body {\n font-size: $base-font-size;\n line-height: 1.5;\n min-height: 100%; }\n\nhtml {\n background-color: $brown;\n transition: background-color $base-timing; }\n\nbody {\n color: $text-color;\n font-family: $sans-serif;\n font-weight: 300;\n margin: 0;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased; }\n'], sourceRoot:"webpack://"}])},function(e,t,n){"use strict";function i(e){return e.replace(o,function(e,t){return t.toUpperCase()})}var o=/-(.)/g;e.exports=i},function(e,t,n){"use strict";function i(e){return o(e.replace(a,"ms-"))}var o=n(148),a=/^-ms-/;e.exports=i},function(e,t,n){"use strict";function i(e,t){return!(!e||!t)&&(e===t||!o(e)&&(o(t)?i(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var o=n(158);e.exports=i},function(e,t,n){"use strict";function i(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?r(!1):void 0,"number"!=typeof t?r(!1):void 0,0===t||t-1 in e?void 0:r(!1),"function"==typeof e.callee?r(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(e){}for(var n=Array(t),i=0;i":r.innerHTML="<"+e+">",s[e]=!r.firstChild),s[e]?m[e]:null}var o=n(6),a=n(1),r=o.canUseDOM?document.createElement("div"):null,s={},l=[1,'"],c=[1,"","
"],u=[3,"","
"],d=[1,'',""],m={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:l,option:l,caption:c,colgroup:c,tbody:c,tfoot:c,thead:c,td:u,th:u},p=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];p.forEach(function(e){m[e]=d,s[e]=!0}),e.exports=i},function(e,t,n){"use strict";function i(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=i},function(e,t,n){"use strict";function i(e){return e.replace(o,"-$1").toLowerCase()}var o=/([A-Z])/g;e.exports=i},function(e,t,n){"use strict";function i(e){return o(e).replace(a,"-ms-")}var o=n(155),a=/^ms-/;e.exports=i},function(e,t,n){"use strict";function i(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}e.exports=i},function(e,t,n){"use strict";function i(e){return o(e)&&3==e.nodeType}var o=n(157);e.exports=i},function(e,t,n){"use strict";function i(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}e.exports=i},function(e,t,n){"use strict";t.__esModule=!0;t.loopAsync=function(e,t,n){var i=0,o=!1,a=!1,r=!1,s=void 0,l=function(){for(var e=arguments.length,t=Array(e),i=0;i=e&&r&&(o=!0,n()))}};c()}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.replaceLocation=t.pushLocation=t.startListener=t.getCurrentLocation=t.go=t.getUserConfirmation=void 0;var o=n(47);Object.defineProperty(t,"getUserConfirmation",{enumerable:!0,get:function(){return o.getUserConfirmation}}),Object.defineProperty(t,"go",{enumerable:!0,get:function(){return o.go}});var a=n(18),r=(i(a),n(21)),s=n(39),l=n(83),c=n(16),u="hashchange",d=function(){var e=window.location.href,t=e.indexOf("#");return t===-1?"":e.substring(t+1)},m=function(e){return window.location.hash=e},p=function(e){var t=window.location.href.indexOf("#");window.location.replace(window.location.href.slice(0,t>=0?t:0)+"#"+e)},h=t.getCurrentLocation=function(e,t){var n=e.decodePath(d()),i=(0,c.getQueryStringValueFromPath)(n,t),o=void 0;i&&(n=(0,c.stripQueryStringValueFromPath)(n,t),o=(0,l.readState)(i));var a=(0,c.parsePath)(n);return a.state=o,(0,r.createLocation)(a,void 0,i)},C=void 0,f=(t.startListener=function(e,t,n){var i=function(){var i=d(),o=t.encodePath(i);if(i!==o)p(o);else{var a=h(t,n);if(C&&a.key&&C.key===a.key)return;C=a,e(a)}},o=d(),a=t.encodePath(o);return o!==a&&p(a),(0,s.addEventListener)(window,u,i),function(){return(0,s.removeEventListener)(window,u,i)}},function(e,t,n,i){var o=e.state,a=e.key,r=t.encodePath((0,c.createPath)(e));void 0!==o&&(r=(0,c.addQueryStringValueToPath)(r,n,a),(0,l.saveState)(a,o)),C=e,i(r)});t.pushLocation=function(e,t,n){return f(e,t,n,function(e){d()!==e&&m(e)})},t.replaceLocation=function(e,t,n){return f(e,t,n,function(e){d()!==e&&p(e)})}},function(e,t,n){"use strict";t.__esModule=!0,t.replaceLocation=t.pushLocation=t.getCurrentLocation=t.go=t.getUserConfirmation=void 0;var i=n(47);Object.defineProperty(t,"getUserConfirmation",{enumerable:!0,get:function(){return i.getUserConfirmation}}),Object.defineProperty(t,"go",{enumerable:!0,get:function(){return i.go}});var o=n(21),a=n(16);t.getCurrentLocation=function(){return(0,o.createLocation)(window.location)},t.pushLocation=function(e){return window.location.href=(0,a.createPath)(e),!1},t.replaceLocation=function(e){return window.location.replace((0,a.createPath)(e)),!1}},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var a=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};l.canUseDOM?void 0:(0,s.default)(!1);var t=e.forceRefresh||!(0,p.supportsHistory)(),n=t?m:u,i=n.getUserConfirmation,o=n.getCurrentLocation,r=n.pushLocation,c=n.replaceLocation,d=n.go,h=(0,C.default)(a({getUserConfirmation:i},e,{getCurrentLocation:o,pushLocation:r,replaceLocation:c,go:d})),f=0,g=void 0,y=function(e,t){1===++f&&(g=u.startListener(h.transitionTo));var n=t?h.listenBefore(e):h.listen(e);return function(){n(),0===--f&&g()}},b=function(e){return y(e,!0)},M=function(e){return y(e,!1)};return a({},h,{listenBefore:b,listen:M})};t.default=f},function(e,t,n){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function o(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var a=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};c.canUseDOM?void 0:(0,l.default)(!1);var t=e.queryKey,n=e.hashType;"string"!=typeof t&&(t=C),null==n&&(n="slash"),n in g||(n="slash");var i=g[n],o=m.getUserConfirmation,r=function(){return m.getCurrentLocation(i,t)},s=function(e){return m.pushLocation(e,i,t)},d=function(e){return m.replaceLocation(e,i,t)},p=(0,h.default)(a({getUserConfirmation:o},e,{getCurrentLocation:r,pushLocation:s,replaceLocation:d,go:m.go})),f=0,y=void 0,b=function(e,n){1===++f&&(y=m.startListener(p.transitionTo,i,t));var o=n?p.listenBefore(e):p.listen(e);return function(){o(),0===--f&&y()}},M=function(e){return b(e,!0)},k=function(e){return b(e,!1)},x=((0,u.supportsGoWithoutReloadUsingHash)(),function(e){p.go(e)}),L=function(e){return"#"+i.encodePath(p.createHref(e))};return a({},p,{listenBefore:M,listen:k,go:x,createHref:L})};t.default=y},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};Array.isArray(e)?e={entries:e}:"string"==typeof e&&(e={entries:[e]});var t=function(){var e=C[f],t=(0,c.createPath)(e),n=void 0,i=void 0;e.key&&(n=e.key,i=b(n));var a=(0,c.parsePath)(t);return(0,l.createLocation)(o({},a,{state:i}),void 0,n)},n=function(e){var t=f+e;return t>=0&&t=0&&fA "spike" is a development term\nfor a quick exercise\nthat lets you explore solutions\nwithout the burden\nof writing good code,\nthen throwing it all away\nso you can do it the right way\nwith confidence.

\n

These are typically experiments timeboxed\nto a certain number of hours\nset aside just for exploration.\nYou might spike\nwhen you need to get a better idea\nof how long a feature will take to finish,\nto try out a new piece of technology\nto see if it would be a good fit,\nor to find out if a feature is even possible.

\n

At the end of the experiment\nyou should have an answer to your question\nand evidence of the best path forward.

\n

That sounds familiar

\n

If this weren’t code\nwe might just call it sketching.\nBut this would be sketching\nas a regular part\nof the development process,\nwith rules and best practices.\nThat’s something interface designers\ncould learn from.

\n

Let’s see how we might\nbe able to apply this\nto ideation\nand product design.

\n

Drawing is thinking

\n

Spiking lets us explore\ngood ideas and bad ones\nwithout putting any other value on them\nexcept the little time it took\nto put them on paper.\nYou’re going to end up throwing out\na lot more than you keep,\nbut that’s a good thing.\nIt’s important to explore bad ideas\nso you know specifically\nwhat doesn’t work.

\n
\nArt schools have abandoned drawing in order to make time for all the software\nthey have to teach. We get what we need for our professional life but don’t\nhave an instrument for understanding the reality of life.\n- Milton Glaser\n
\n\n

Apps like Sketch and Photoshop\nmake it tempting to jump straight in\nand start making decisions too early.\nYou start forcing yourself\ndown a single path.

\n

Paper by FiftyThree\nand other apps like it\nare a good way to keep things digital\nwhile keeping the low-fidelity feeling of sketching.

\n

Exercises

\n

We can distill some techniques from the\nProduct Design Sprint\nto efficiently spike a solution.\nYou already have\na good understanding\nof the problem to solve\nso we are going to focus\non how to get those ideas onto paper.

\n
\n\n

Mapping the Critical Path

\n

Making a sketch of the critical path\ncan help get a good picture\nof the job to be done.

\n

Critical Path

\n
\n\n

Divergent Sketching

\n
    \n
  • Keep things simple.\nUse a Sharpie or fat marker\nto keep yourself\nfrom getting too detailed too soon.\nUsing plain printer paper\ninstead of a sketchbook\ncan also help things feel ephemeral\nand you won’t feel the need\nfor the sketches to be perfect.
    • \n
  • Speed!\nYou want differentiation of ideas\nand as quickly as possible.\nDraw as many ways\nto solve the problem\nas you can think of.\nAt this point,\ndon’t worry about\nfitting a styleguide\nor if it’s easy to implement.
    • \n
  • After you are done,\nmake notes on each sketch\ndetailing which parts\nare viable solutions\nand which aren’t.
    • \n
\n

Divergent Sketching

\n
\n\n

Convergent Sketching

\n
    \n
  • Collect the rejected sketches\nfor reference.\nIf someone suggests\na similar solution\nyou can show them\nwhat it would have looked like\nand why you rejected it.
    • \n
  • Combine compatible ideas\nto take advantage\nof their strengths.
    • \n
  • You can spend more time now\nto add appropriate detail.\nYou might even keep these notes around,\nso add the information\nyou might need later.
    • \n
  • If you have competing solutions,\nask someone for their opinion.
    • \n
  • If you don’t have someone to ask,\nimagine presenting each of them to someone\nwith each of their pros and cons.\nYou may end up "rubber ducking"\nthe solution.
    • \n
\n

Convergent Sketching

\n
\n\n

Doing these exercises in a group

\n

You can also do both\nof the exercises above with a group.\nTry to keep it to two or three people.\nIf you feel the need to add more,\nit may indicate the need to\ndo a larger design sprint\nformat instead.

\n

During the Divergent Sketching exercise,\nyou will need to vote\nto make the selection of viable sketches.\nYou can use stickers, checkmarks, etc.\nto mark your favorite sketches\nor even specify parts\nthat you want to see explored more.\nTake some time to discuss\nafter you vote so you have some agreement\nbefore converging.

\n

The Convergent Sketching group exercise\nis where things get exciting.\nIf you haven’t reached a consensus\non the last step,\nyou may need to do some more voting\nto narrow down solutions\nand decide which pieces should be combined\nfor the final design.\nThis should be a safe space\nto explore even the craziest of ideas,\nso don’t be surprised\nif opinions are polarized.

\n

Get out there and kill some trees

\n

You should come out the other side\nwith a clear and logical process\nand hopefully a couple of crazy ideas left in.

\n

Design spiking absolutely\ndoes not depend on artistic ability.\nSo encourage your clients, developers,\nproject managers, information architects,\nand that designer down the hall who\n"doesn’t have time to sketch".\nThey might be surprised\nwhat design thinking can do.

\n

Have some ideas on how to make design spikes\nmore efficient, or have some sketching tips to share?\nGive us a shout @thoughtbot.

\n'}},function(e,t){e.exports={title:"Disciplines of Web Design",date:"01/31/2017",tags:["Design"],url:"https://robots.thoughtbot.com/designing-for-the-web",source:"thoughtbot",source_icon:"source-thoughtbot.svg",summary:"A map through the confusing territory of modern web design, and a history of how we got here.",__content:'

Fundamentally, the web is a content delivery system.\nIn the early days\nof dial-up modems and green-on-black monochrome monitors,\ntext was all we could deliver\nwith any kind of speed.\nWe listened to the sweet song\nof the 2400bit/s modem,\ntried to make the best pixel art that we could,\nor settled for creating art from ASCII characters.\nAnd we liked it!

\n

Nobody liked it;\nit was terrible.\nBut steadily things improved\nand now the web is filled\nwith streaming video and complex animations,\ndelivered to a variety of devices\nwith a dizzying assortment\nof screen sizes and capabilities.\nText is still the main method\nof communication on the web\nand most likely it always will be,\nso the practice of “Web Design”\ncenters largely around\nhow to present the written word\nand navigate a nested hierarchy of information.

\n

Designing websites,\nwhether they are simple pages\nor complex applications,\nrelies on a wide spectrum\nof design disciplines.

\n

\n

Visual Design

\n

Visual Design\n(usually synonymous with Graphic Design)\nfocuses on the strategic use\nof design principles\nto create attractive images.

\n

This is what most people\nthink of when they think of web design.\nThe great part about the web\nis that it touches and draws\nfrom so many kinds of design,\nbut as a primarily visual communication platform,\nvisual design remains very important.

\n

Designing products also includes things\nlike logo design, iconography,\nand even marketing materials.\nThese all fall under the visual design umbrella\nwithout even really touching the app itself.\nThis can be the hardest part\nfor a designer to feel confident about\nbecause it can seem\nlike designers manifest them out of thin air.\nIt just isn’t true.

\n

Do your customers describe your product\nas “friendly” or “powerful”?\nIs it “simple” or “useful”?\nThese are impressions\nthat are intentionally designed\nthrough a series of small choices and critiques.

\n

Visual design principles\nlike color, form, space, and rhythm,\nas well as bigger concepts like typography\nand abstraction vs. skeumorphism\nall include their own terminology\nand conventions that make it much easier\nto craft a design language\nthat gives your brand its own unique personality.

\n

User Interface Design

\n

The easiest way for developers\nto get involved in design\nis through User Interface design.\nThe user interface is everything\nthat the user can interact with.\nUI Design is often synonymous\nor at least largely overlapping\nwith interface design.\nFor the web,\nthis commonly includes design patterns for\nnavigation, forms, maps, et cetera.\nIf your workplace differentiates\nbetween “Designers”\nand “Front-End Developers”,\nthis is their common ground.\nUI Design aims to bridge the gap\nbetween what the software needs\nand what the user expects.

\n

Because designing interfaces\nis inherently tied to its medium,\nthe product of this design process\nis usually not a static design,\nbut a coded prototype.\nThis means that interaction design\nworks best if the designer\nis the one writing the code,\nor at the very least\nis intimately aware\nof how it should be coded.

\n

As an example,\nimagine that we need the user’s address\nto ship them a product from a store.\nWe have a few options for how to do that:

\n
    \n
  • Stick to simple text fields.
    • \n
  • Ask for their zip code to prefill the city and state inputs.
    • \n
  • Detect their location from their browser for part of their address
    • \n
  • After getting the shipping address, default to the same billing address
    • \n
  • Offer to save multiple addresses for future use?
    • \n
\n

\n

For each of these options,\na UI Designer needs to understand\nhow the options fit within the patterns\nalready in the application,\nand how they might be coded\nwhile keeping in mind the limitations\nof the browser and software stack.

\n

The user interface might be influenced\nby the stylistic choices\nof the visual design,\nbut its main goal is efficiency\nthrough affordances.

\n
\n“…the term affordance refers\nto the perceived and actual properties\nof the thing,\nprimarily those fundamental properties\nthat determine just how the thing\ncould possibly be used.\n[…]\nPlates are for pushing.\nKnobs are for turning.\nSlots are for inserting things into.\nBalls are for throwing or bouncing.\nWhen affordances are taken advantage of,\nthe user knows what to do just by looking:\nno picture, label, or instruction needed.”\n\n- Donald Norman, “The Design of Everyday Things”, 1988\n
\n\n

The best digital user interfaces\nbridge the gap between\nthe physical and abstract,\nusing established conventions\nwhile familiarizing the user\nwith new design patterns.

\n

\n \n User Experience Design\n \n

\n\n

User Experience design (or UX design) is the sum\nof the other disciplines,\nbut it is also a lot more.\nSomething as vague as “experience”\nmeans spanning multiple disciplines,\nand they may involve multiple designers\nwith specialized roles,\nbut the common language\nis user experience.

\n

UX Design touches a wide array\nof design disciplines\nand it is important\nfor a specialist\nto have some familiarity\nwith each of them:

\n
    \n
  • User Testing
    • \n
  • Gathering and presenting statistics
    • \n
  • Writing Documentation
    • \n
  • Visual Design
    • \n
  • Interface Design
    • \n
  • Usability
    • \n
  • Prototyping
    • \n
  • Copy writing
    • \n
\n

It isn’t important\nfor them to master each of these fields,\nand a UX Designer might even have a background\nin psychology or mathematics\nrather than one in art or design.\nBecause of this,\nsome specialists have chosen\nto start referring to themselves\nas UX Architects, Experience Strategists,\nor something similar.\nThey might even specialize\nin a subset of these disciplines,\nbut the important part\nis that they investigate user behavior\nto best deliver the experience\nthat solves what the user wants.

\n

How do you find out what the user wants?\nListen to them.

\n

User testing, research, and rapid prototyping\nare the best tools\nin the UX Designer’s utility belt.\nThey allow us\nto back up or disprove our assumptions\nand get to know our users better.\nA UX specialist spends a lot of time\ncrafting wireframes,\nvalidating design ideas,\nand talking directly to the consumers.

\n

Start with what really matters to your users\nand solve their pain points\nin order of importance.\nUnless you are a powerhouse like Google,\nyou don’t need to be testing 41 shades of blue.\nUse analytics to get some insight\non where your users are getting hung up.\nUse A/B testing to test out\nsome possible solutions.

\n

The color palette is nice,\nbut how does it make the user feel?\nShould we de-emphasize destructive actions,\nor does the user need all of their options\nwithin easy reach?

\n

A great framework for user experience design\nis the Product Design Sprint,\nwhich was originated by Google Ventures,\nand can be tweaked or scaled down\nto best fit your needs.\nThese can be done\nat the beginning of a project\nor to mentally map an individual feature.

\n

You shouldn’t feel overwhelmed\nby the breadth of this discipline,\nas long as you have the complete experience in mind\nwhile crafting your product,\nyou are practicing UX Design.\nAs you are able to test a hypothesis here\nor an assumption there,\ndo it objectively,\nand act on the results.\nThis pattern of frequent analysis, prototyping, and testing\nwill let you iteratively improve\nand keep you on the right track.

\n

Design isn’t something\nthat you can (or should!) do in a vacuum.\nAlthough putting unfinished ideas\nin front of a potential user\ncan be frightening at first,\nthe quick iteration\nand validation of your direction\nis something that you will find\nreassuring and empowering.

\n'}},function(e,t){e.exports={title:"Color",date:"02/07/2017",tags:["Design"],url:"https://robots.thoughtbot.com/color",source:"thoughtbot",source_icon:"source-thoughtbot.svg",summary:"How color works and how to use it effectively. We'll also learn how to create palettes to help your brand make an impact.",__content:'

Color is such a fundamental part\nof how humans understand the world\nthat we often overlook\nhow it is processed and\nwhy it influences us.

\n

The how

\n

Humans perceive a small part\nof the electromagnetic spectrum\nthrough our eyes as light,\non a scale of frequencies\nwhich we call color.\nLight that has a short frequency\nis perceived as blue,\nand a longer frequency\nis perceived as red.\nSome humans have a deficiency\nin the ability to distinguish some colors,\nso it is important to remember\nthat a discussion about color\nis about how most humans process light\nand is necessarily subjective.\nWe will talk about accessibility\nin relation to color blindness later.

\n

\n

The electromagnetic spectrum doesn’t distribute color\nquite the same way as a color wheel.\nThat’s because our cone cells are specialized\nand don’t give us an even sensitivity to light.\nWe are more sensitive to blue, green, and red,\nand a little less sensitive in between.\nOur brains also form a smooth continuum\nbetween the far left and far right sides\nto create violet,\na trick which works\nlargely because we are least sensitive\nto that part of the spectrum.

\n

\n

It’s hard for us to distinguish colors\nwhere we have fewer receptors.\nWe have trouble seeing the difference\nbetween very blue and very red,\nbut it’s also hard for us\nto see yellow and cyan\nin some situations.

\n

The color wheel distributes color\nin a way that emphasizes the parts\nof the spectrum that we see well\nand deemphasizes the parts\nthat we are less sensitive to.\nIt’s a truer representation\nof how our brains interpret and process color,\nand explains where our color preferences come from\nand how to think about accessibility\nfor those with color vision deficiencies.

\n

The why

\n

Everyone has a favorite color,\nbut did you know\nthat over 40%\nof the people\nin the world prefer blue?\nRed and green follow at around 10%,\nand it continues down the secondary colors around 3-4%\nand tertiary colors around 1-2%.\nIf you look back up\nto the color sensitivity chart\nyou can probably guess\nthat we prefer colors\nthat we see most clearly.

\n

We associate colors\nwith the real world objects\nthat share that color\nand with abstract ideas extended from them.\nRed, yellow, and orange are the color\nof fire and the hot sun.\nThese are the “warm” colors,\nand they tend to make us think of action and dynamism.\nBlue and green are the color\nof the cool water and grass.\nThese “cool” colors feel reserved and dependable\nand make people relaxed.

\n

Use these associations to your advantage.

\n

Choosing a color palette

\n

Does your startup offer financial services\nor do you want your airline to feel safe?\nThen you’d better use cool colors.

\n

Does your brand target kids,\npromote sports and health,\nor just need to set itself apart\nfrom the established brand?\nWarm colors are a good bet.

\n

Using only one color in your palette\nis called monochrome.\nThis will create the strongest connection\nto your chosen color,\nbut doesn’t give you a lot of options for design.\nPopular companies that use this technique successfully\nwith very different colors\ninclude Coca-Cola, Chase, and Sprint.\nIt is impossible to think of Coca-Cola\nwithout its particular shade of red.\nThese brands try to be unfortgettable\nby using bold colors and heavy repetition.

\n

You can keep the strong mental associations\nof a monochromatic color harmony\nwhile still branching out to neighboring colors.\nThis is called analagous color harmony,\nand can help give you more design options.

\n

\n

You might use yellow-orange\nas a call-to-action color\nand yellow-green to deemphasize text\nwhile adding in yellow\nas a desaturated khaki\nfor a background color.

\n

The most common color harmony technique\nis using complementary colors,\nwhich are opposite each other\non the color wheel.

\n

\n

This is commonly seen in movie posters\nand in products that try to capitalize\non the attention-grabbing nature of contrasting colors\nto differentiate their product on the shelf.\nComplementary colors are a sure way to get noticed,\nbut can be hard to work with\non pages with a lot of text\nunless you add in white space or neutral colors.

\n

The triadic color harmony\ncan be used a couple of different ways.\nYou could choose three equally spaced colors,\nsuch as the three primary colors,\nto create a vibrant set\nof equally strong hues.

\n

\n

You can also move two of the colors closer together\nto create a sort of blending between\nanalagous and triadic color harmonies.\nThis will give you both a close color relationship\nand another option\nfor a little extra punch of color.

\n

RGB CMYK HSL HEX WTF

\n

Print designers and other designers\nthat work in inks and pigments\ndeal with CMYK (Cyan/Magenta/Yellow/blacK).\nThis is called reductive color mixing\nbecause combining the colors\nwill reflect less and less light\nuntil they make black.

\n

\n

Where the primary colors overlap,\nyou will see the familiar red, green and blue\nas secondary colors.

\n

The model we deal with in light-emitting displays\nis RGB (Red/Green/Blue).\nThis is additive color mixing\nbecause combining all of the colors creates white.

\n

\n

In this case,\na combination of red and blue creates magenta.

\n

When we write CSS,\nwe use a special shorthand\nto describe RGB colors called hexadecimal.\nHexadecimal colors are prefixed with #.\nInstead of writing the colors as percentages\nor on a scale from 255,\nwe use only two numbers per color\nby using pairs of base 16 numbers,\nwhich counts from 0 to 9\nand then from A to F.

\n

\n

To describe a purely red color,\nwe would use FF (the highest value)\nfor the red,\nand then 00 (the lowest value)\nfor both the green and the blue.\nA pure black would be #000000,\na nice medium gray is #AAAAAA,\nwhite would be #FFFFFF,\nand so on.\nYou are likely to always have a color picker\nclose at hand,\nso while it is useful\nto be able to adjust a color\nsolely by adjusting the hexadecimal value,\nit is best to stick to those helpful tools for now.

\n

CSS3 added in a few more ways to describe color.\nYou can describe the RGB values directly\nby describing that red as rgb(255, 0, 0).\nAlthough it isn’t as widespread,\nin some cases it is easier\nto use HSL (Hue, Saturation, Lightness)\nto describe colors.\nThat same pure red would be described as hsl(0, 100%, 50%).\nThe first value is given in degrees\n(as in degrees around the color wheel,\nstarting and ending at red),\nthe second is that we want full saturation,\nand the third is that we do not want it to be tinted or shaded.\nBoth rgb() and hsl() have accompanying methods\nfor adding alpha transparency.\nFor instance, you can use rgba(255, 0, 0, 0.5)\nto show red at 50% transparency.

\n' diff --git a/source/components/Header/index.jsx b/source/components/Header/index.jsx index 262343c..f254465 100644 --- a/source/components/Header/index.jsx +++ b/source/components/Header/index.jsx @@ -7,20 +7,17 @@ import InlineSVG from '../InlineSVG'; class Header extends React.Component { componentDidMount() { const nav = document.getElementsByClassName("site-header")[0]; - nav.addEventListener("mouseover", function() { - document.body.classList.add("nav-active"); - }); - nav.addEventListener("mouseout", function() { - document.body.classList.remove("nav-active"); - }); + const isMobile = document.documentElement.clientWidth < 1024; + if (!isMobile) { + nav.addEventListener("mouseover", function() { + document.body.classList.add("nav-active") + }); - const links = nav.getElementsByTagName("a"); - Array.from(links).forEach(function(link, index, array) { - link.onclick = function() { - document.body.classList.remove("nav-active"); - }; - }); + nav.addEventListener("mouseout", function() { + document.body.classList.remove("nav-active") + }); + } } render() {