| 1 |
- .clearfix:after,.meta:after{clear:both}.dropdown,a{color:#81c483}a,button:focus{outline:0}.codrops-icon,a{text-decoration:none}.content,.grid::after,.placeholder{pointer-events:none}.close-button,.menu-toggle span{-webkit-touch-callout:none;-khtml-user-select:none}@font-face{font-family:'Martel Sans';font-style:normal;font-weight:400;src:local('Martel Sans Regular'),local('MartelSans-Regular'),url(http://fonts.gstatic.com/s/martelsans/v4/h0GsssGi7VdzDgKjM-4d8hjYx-s.ttf) format('truetype')}@font-face{font-family:'Martel Sans';font-style:normal;font-weight:700;src:local('Martel Sans Bold'),local('MartelSans-Bold'),url(http://fonts.gstatic.com/s/martelsans/v4/h0GxssGi7VdzDgKjM-4d8hBj4vuAH00.ttf) format('truetype')}@font-face{font-family:'Playfair Display SC';font-style:italic;font-weight:400;src:local('Playfair Display SC Italic'),local('PlayfairDisplaySC-Italic'),url(http://fonts.gstatic.com/s/playfairdisplaysc/v7/ke87OhoaMkR6-hSn7kbHVoFf7ZfgMPr_lbw8Eus3.ttf) format('truetype')}@font-face{font-family:'Playfair Display SC';font-style:normal;font-weight:700;src:local('Playfair Display SC Bold'),local('PlayfairDisplaySC-Bold'),url(http://fonts.gstatic.com/s/playfairdisplaysc/v7/ke80OhoaMkR6-hSn7kbHVoFf7ZfgMPr_nQIpBcwXKw.ttf) format('truetype')}@font-face{font-family:'Playfair Display SC';font-style:normal;font-weight:900;src:local('Playfair Display SC Black'),local('PlayfairDisplaySC-Black'),url(http://fonts.gstatic.com/s/playfairdisplaysc/v7/ke80OhoaMkR6-hSn7kbHVoFf7ZfgMPr_nTorBcwXKw.ttf) format('truetype')}@font-face{font-family:Raleway;font-style:normal;font-weight:500;src:local('Raleway Medium'),local('Raleway-Medium'),url(http://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwN4rWqZPBQ.ttf) format('truetype')}@font-face{font-weight:400;font-style:normal;font-family:codropsicons;src:url(../fonts/codropsicons/codropsicons.eot);src:url(../fonts/codropsicons/codropsicons.eot?#iefix) format("embedded-opentype"),url(../fonts/codropsicons/codropsicons.woff) format("woff"),url(../fonts/codropsicons/codropsicons.ttf) format("truetype"),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format("svg")}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}.clearfix:after,.clearfix:before{display:table;content:''}body{color:#7b7b7b;font-weight:400;font-size:16px;font-family:"Martel Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;overflow-y:scroll}.content,.noscroll{overflow:hidden}a:focus,a:hover{color:#333;outline:0}.sidebar{text-align:center;background:#f5f5f5;z-index:1000;position:fixed;width:300px;max-width:100%;height:100%;height:100vh;top:0;left:0;padding:2em 1em}.sidebar h1{margin:.75em 0 0;font-size:2em;line-height:1;font-family:"Playfair Display",serif}.sidebar h1 span{display:block}.codrops-links{position:relative;display:inline-block;text-align:center;white-space:nowrap;min-height:45px}.codrops-links::after{position:absolute;top:0;left:50%;width:1px;height:100%;background:#ddd;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg)}.grid,.main{position:relative}.codrops-icon{display:inline-block;margin:.5em;padding:0;width:1.5em}.codrops-icon span{display:none}.codrops-icon:before{margin:0 5px;text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:codropsicons;line-height:1;speak:none}.category,.meta--full .meta__category,.title{font-family:"Playfair Display",serif}.codrops-icon--drop:before{content:"\e001"}.codrops-icon--prev:before{content:"\e004"}.codrops-demos{margin:2em 0 0;font-size:.75em}.codrops-demos a{display:inline-block;margin:0 .5em}.codrops-demos a.current-demo{color:#333;font-weight:700}.codrops-demos a.current-demo:focus{color:#aaa}.related{font-size:.85em;padding-bottom:1em}.related h3{margin:3em 0 .5em;font-size:.95em}.related a{display:block;color:inherit}.grid__item,.top-bar{display:-webkit-flex}.related a:focus,.related a:hover{color:#414741}.main{z-index:50}.grid::after{content:'';background:rgba(202,202,202,.4);opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:opacity .5s;transition:opacity .5s}.view-single .grid::after{opacity:1}.content__item,.grid__item--animate .category,.grid__item--animate .loader,.grid__item--animate .title--preview{opacity:0}.top-bar{background:#fff;width:100%;line-height:1;padding:15px 15px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-align-items:center;align-items:center}.top-bar__headline{margin:0;font-size:.75em}.menu-toggle{position:fixed;z-index:100;width:25px;height:25px;top:14px;left:14px;cursor:pointer;background:0 0;border:none;display:none;margin:-2px 15px 0 0}.menu-toggle span{position:absolute;top:50%;left:0;display:block;width:100%;height:2px;background-color:#81c483;font-size:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-toggle span:after,.menu-toggle span:before{position:absolute;left:0;width:100%;height:100%;background:#81c483;content:''}.menu-toggle span:before{-webkit-transform:translateY(-7px);transform:translateY(-7px)}.menu-toggle span:after{-webkit-transform:translateY(7px);transform:translateY(7px)}.filter{text-align:right;font-size:.75em;margin-left:auto}.category,.grid__item,.title{text-align:center}.dropdown{font-weight:700;margin-left:5px;cursor:pointer}.dropdown::after{content:'\25BC';margin-left:2px;font-size:80%}.grid__item::before,.loader::before,.meta:after,.meta:before{content:''}.grid__item{padding:45px 55px 30px;position:relative;color:inherit;background:#fff;min-height:300px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.grid__item::before{position:absolute;top:0;right:55px;bottom:0;left:55px;border-bottom:1px solid rgba(74,74,74,.075)}.grid__item *{z-index:10}.title{margin:0;font-size:1.875em}.title--preview{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:100%}.loader{height:1px;width:40%;margin:1em auto;position:relative;background:rgba(0,0,0,.1)}.loader::before{position:absolute;width:100%;height:3px;background:#a4e7ad;left:0;top:-1px;-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1);-webkit-transform-origin:0 50%;transform-origin:0 50%}.grid__item--loading .loader::before{-webkit-transition:-webkit-transform 1s;transition:transform 1s;-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.category{margin:0;position:relative;font-size:.95em;font-style:italic;display:block}.category,.loader,.title--preview{-webkit-transition:-webkit-transform .2s,opacity .2s;transition:transform .2s,opacity .2s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}.meta{font-size:.765em;text-align:left}.meta .fa{margin-right:4px}.meta:after,.meta:before{display:table}.meta__avatar{display:block;border-radius:50%;margin:2em auto}.meta--preview .meta__avatar{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grid__item:focus .meta--preview .meta__avatar,.grid__item:hover .meta--preview .meta__avatar{-webkit-filter:none;filter:none}.meta__date,.meta__reading-time{display:block;float:left;color:#aaa}.meta__reading-time{text-align:right;float:right}.meta__misc{display:block;clear:both;text-align:left;padding:5px 0}.meta__misc--seperator{padding:20px 0 0;margin:65px 0 0;border-top:1px solid #f5f5f5}.article-nav{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}.article-nav button{border:none;color:#81c483;background:0 0}.article-nav button:hover{color:#333}.meta--preview .meta__avatar,.meta--preview .meta__date,.meta--preview .meta__reading-time{-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1)}.grid__item--loading .meta__avatar{-webkit-transition-delay:.1s;transition-delay:.1s}.grid__item--loading .meta__date{-webkit-transition-delay:.17s;transition-delay:.17s}.grid__item--loading .meta__reading-time{-webkit-transition-delay:.24s;transition-delay:.24s}.grid__item--loading .meta__avatar,.grid__item--loading .meta__date,.grid__item--loading .meta__reading-time{-webkit-transform:scale3d(.5,.5,1);transform:scale3d(.5,.5,1);opacity:0}.page-meta{background:#fff;width:100%;padding:15px 15px 10px;text-align:center;font-size:.75em;font-weight:700;cursor:default}.placeholder{position:absolute;width:calc(100% + 5px);height:calc(100vh + 5px);z-index:100;top:0;left:0;background:#fff;-webkit-transform-origin:0 0;transform-origin:0 0}.content__item,.scroll-wrap{width:100%;position:absolute;top:0}.placeholder.placeholder--trans-in{-webkit-transition:-webkit-transform .5s;transition:transform .5s;-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1)}.placeholder.placeholder--trans-out{-webkit-transition:-webkit-transform .5s;transition:transform .5s}.content{position:absolute;top:0;height:0;visibility:hidden;z-index:400}.content.content--show{height:100vh;pointer-events:auto;visibility:visible}.scroll-wrap{height:100%;left:0;z-index:1;overflow-y:scroll;-webkit-overflow-scrolling:touch}.content__item{overflow:hidden;height:0;padding:60px 60px 80px;pointer-events:none;font-size:.85em}.content__item p{max-width:1200px;margin:1em auto;text-align:justify}.content__item.content__item--show{height:auto;min-height:100vh;opacity:1;pointer-events:auto;-webkit-transition:opacity .6s;transition:opacity .6s}.category--full{font-size:1.25em;margin-bottom:20px;color:#81c483}.title--full{font-size:3.25em}.meta--full{font-size:1em;margin:0 auto 2em;max-width:1200px}.meta--full .meta__author{display:block;text-align:center;font-weight:700;margin-bottom:20px}.meta--full .meta__author::before{content:'by ';font-weight:400}.meta--full .meta__category{font-style:italic;float:left;margin:0 5px}.meta--full .meta__category::before{content:"in "}.meta--full .meta__avatar{margin:1em auto}.category--full,.content__item p,.meta--full .meta__author,.meta--full .meta__avatar,.meta--full .meta__date,.meta--full .meta__reading-time,.title--full{opacity:0}.meta--full .meta__author,.meta--full .meta__avatar,.meta--full .meta__date,.meta--full .meta__reading-time{-webkit-transform:scale3d(.5,.5,1);transform:scale3d(.5,.5,1)}.content__item--show .category--full,.content__item--show .meta--full .meta__author,.content__item--show .meta--full .meta__avatar,.content__item--show .meta--full .meta__date,.content__item--show .meta--full .meta__reading-time,.content__item--show .title--full{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1)}.content__item--show .category--full,.content__item--show .title--full{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.content__item--show .meta--full .meta__avatar{-webkit-transition-delay:.2s;transition-delay:.2s}.content__item--show .meta--full .meta__date{-webkit-transition-delay:.27s;transition-delay:.27s}.content__item--show .meta--full .meta__reading-time{-webkit-transition-delay:.34s;transition-delay:.34s}.content__item--show.content__item p{opacity:1;-webkit-transition:opacity .5s .25s;transition:opacity .5s .25s}.close-button{position:absolute;border:none;background:0 0;margin:0;z-index:100;top:0;right:0;font-size:18px;color:#ddd;cursor:pointer;pointer-events:none;padding:20px 30px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .3s;transition:opacity .3s}.close-button span{display:none}.close-button:hover{color:#7b7b7b}.close-button--show{opacity:1;pointer-events:auto}@media screen and (min-width:600px){.container,.main,body,html{height:100vh}.main{height:100%;margin-left:300px}.content__item{font-size:1em}.grid__item{padding:45px 45px 30px}body #cdawrap{right:auto;left:30px;top:auto;bottom:0;border:none;width:240px;background:#f5f5f5}body #cdawrap .carbon-text{color:#7b7b7b}body #cdawrap a.carbon-poweredby{color:#7883C4}body #cdawrap a:hover.carbon-poweredby{color:#333}body #cdawrap #cda-remove{display:none}}@media screen and (min-width:900px){.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid__item{width:50%;border:none}.grid__item::before{top:5px;right:5px;bottom:5px;left:5px;border:1px solid rgba(74,74,74,.075);-webkit-transition:opacity .3s;transition:opacity .3s}.grid__item:focus::before,.grid__item:hover::before{border:3px solid rgba(129,196,131,.5)}.grid__item--loading.grid__item::before{opacity:0}}@media screen and (min-width:1200px){.grid__item{width:33.333%}}@media screen and (min-width:1500px){.grid__item{width:25%}}@media screen and (min-width:1800px){.grid__item{width:20%}}@media screen and (min-width:2100px){.grid__item{width:16.66%}}@media screen and (max-width:599px){.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s}.sidebar.sidebar--open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.sidebar.sidebar--open~.main{pointer-events:none}.top-bar{padding:22px 15px 10px 60px}.menu-toggle{display:inline-block}.sidebar .close-button{opacity:1;pointer-events:auto}.title--full{font-size:2em}.content__item{padding:80px 20px 40px}.content .close-button{padding:10px 20px}.content .close-button::before{content:'';position:absolute;top:0;right:0;background:#fff;border-bottom:1px solid #f5f5f5;width:100vw;height:50px;pointer-events:none;z-index:-1}.article-nav,.meta__misc{display:none}}@media screen and (max-height:580px){body #cdawrap{display:none}}body{background:#f5f5f5}.content{left:auto;right:0;width:100vw}.content__item p{font-size:1.15em}.content__item p:first-of-type{margin-top:3em;font-size:1.15em;font-weight:700}.fa-heart{color:#c84252}.title--preview{-webkit-transition-delay:.15s;transition-delay:.15s}.loader{-webkit-transition-delay:.1s;transition-delay:.1s}.grid__item .category{-webkit-transition-delay:0s;transition-delay:0s}.grid__item--animate .title--preview{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}.grid__item--animate .loader{-webkit-transition-delay:.15s;transition-delay:.15s;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}.grid__item--animate .category{-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}.category--full,.title--full{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}.content__item--show .title--full{-webkit-transition-delay:.15s;transition-delay:.15s}@media screen and (min-width:600px){.grid,.sidebar{-webkit-transition:-webkit-transform .5s;transition:transform .5s}.view-single .grid,.view-single .sidebar{-webkit-transform:translate3d(calc(280px - 100vw),0,0);transform:translate3d(calc(280px - 100vw),0,0)}.content__item{right:0;padding-left:340px}.meta--full{position:fixed;width:280px;height:100%;background:#fff;top:0;left:0;font-size:.85em;padding:15px 30px}.article-nav{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #f5f5f5}.article-nav button{width:50%;padding:25px}.article-nav button:hover{color:#fff;background:#81c483}.article-nav button:first-child{border-right:1px solid #f5f5f5}}@media screen and (max-width:899px){.meta--full .meta__date,.meta--full .meta__reading-time{float:none;text-align:center}.meta__misc--seperator{margin-top:20px}.article-nav button span{display:none}}
|
