text: (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{242:function(t,e,n){__NEXT_REGISTER_PAGE("/",function(){return t.exports=n(243),{page:t.exports.default}})},243:function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return b});var i=n(0),r=n.n(i),o=n(53),a=n(54),c=n(14),l=n(1);function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function h(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function p(t){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function u(t,e){return(u=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function v(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var f={transition:"height .5s cubic-bezier(0.075, 0.82, 0.165, 1)"},b=function(t){function e(){var t,n,i;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),n=this,(t=!(i=p(e).call(this))||"object"!==s(i)&&"function"!=typeof i?v(n):i).state={view:"split"},t.getFrameHeight=t.getFrameHeight.bind(v(v(t))),t}var n,i,b;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)}(e,r.a.Component),n=e,(i=[{key:"getFrameHeight",value:function(t){return"split"==this.state.view?["33vh","40vh"]:this.state.view==t?["66vh","80vh"]:0}},{key:"render",value:function(){var t=this;return r.a.createElement("div",null,r.a.createElement(o.a,null),r.a.createElement(a.a,null,r.a.createElement(l.Div,null,r.a.createElement(l.Div,{css:f,width:1,height:this.getFrameHeight("in"),position:"relative"},r.a.createElement("iframe",{src:"./in/",height:"100%",width:"100%"}),r.a.createElement(c.a,{position:"absolute",bottom:"0",right:"0",id:"buttonIn",onClick:function(e){e.currentTarget.blur(),t.setState({view:"in"==t.state.view?"split":"in"})},mb:-1,mr:4,pr:4},r.a.createElement(l.Span,{pr:1,display:"inline-block"},"view ","in"==this.state.view?"less":"more"),r.a.createElement(l.Img,{width:19,src:"./static/"+("in"==this.state.view?"up":"down")+"-arrow.svg",position:"absolute",css:{top:"6px",right:"8px"},opacity:".33"}))),r.a.createElement(l.Div,{css:f,width:1,height:["34vh","20vh"],textAlign:"center",position:"relative",zIndex:"999",bg:"white"},r.a.createElement(l.H1,{px:3,pt:["4vh","2.5vh","2.5vh","4vh"],fontSize:["6vh","6vh","7vh","8vh"],color:"blue",lineHeight:"1"},r.a.createElement(l.Span,{display:["block","inline"]},"CSS-in-JS"),r.a.createElement(l.Span,{display:["block","inline-block"],px:[0,2,3],fontSize:["4vh","3vh","4vh"],position:"relative",top:[0,"-1.2vh","-1.5vh"]}," or "),r.a.createElement(l.Span,{display:["block","inline"]},"CSS-and-JS")),r.a.createElement(l.H2,{pt:["1vh",0],fontSize:["2.5vh","2.5vh","2.5vh","3vh"],fontWeight:[400,400,400,200],color:"gray9"},"( Can we all just get along? )"),r.a.createElement(c.a,{fontSize:0,is:"a",bg:"rgba(0,0,0,.33)",color:"white",href:"https://github.com/johnpolacek/css-in-js-or-css-and-js/",target:"_blank",position:["static","static","static","absolute"],top:"0",right:"0",mt:[3,2,2,"50px"],mr:[0,4]},"View on Github")),r.a.createElement(l.Div,{css:f,width:1,height:this.getFrameHeight("and"),position:"relative"},r.a.createElement(c.a,{position:"absolute",top:"0",right:"0",id:"buttonAnd",onClick:function(e){e.currentTarget.blur(),t.setState({view:"and"==t.state.view?"split":"and"})},mt:-1,mr:4,pr:4},r.a.createElement(l.Span,{pr:1,display:"inline-block"},"view ","and"==this.state.view?"less":"more"),r.a.createElement(l.Img,{width:19,src:"./static/"+("and"==this.state.view?"down":"up")+"-arrow.svg",position:"absolute",css:{top:"6px",right:"8px"},opacity:".33"})),r.a.createElement("iframe",{src:"./static/and/index.html",height:"100%",width:"100%"})))))}}])&&h(n.prototype,i),b&&h(n,b),e}()}},[[242,1,0]]]);