text: webpackJsonp([0x96aa5addccd1],{386:function(e,l){},560:function(e,l,t){e.exports=t.p+"static/boston-budget.597e7438.jpg"},561:function(e,l,t){e.exports=t.p+"static/carrot.002552de.jpg"},574:function(e,l,t){e.exports=t.p+"static/cita.6933be9b.png"},575:function(e,l,t){e.exports=t.p+"static/digital-continuum.06a50377.jpg"},576:function(e,l,t){e.exports=t.p+"static/dusk.671a1cb3.jpg"},577:function(e,l,t){e.exports=t.p+"static/hyperstatic.6b65b3c0.png"},579:function(e,l,t){e.exports=t.p+"static/julian.13b0b7b9.jpg"},580:function(e,l,t){e.exports=t.p+"static/lodash.3238dd0c.jpg"},582:function(e,l,t){e.exports=t.p+"static/marvel-search.37b6a9bb.png"},583:function(e,l,t){e.exports=t.p+"static/sequoia.d2fbc0b0.jpg"},584:function(e,l,t){e.exports=t.p+"static/serverless.f3b848bc.jpg"},585:function(e,l,t){e.exports=t.p+"static/silvestarbistrovic.0f1e7b1c.png"},586:function(e,l,t){e.exports=t.p+"static/skcript.6971a8c1.jpg"},587:function(e,l,t){e.exports=t.p+"static/sphero.a3ffd7cc.jpg"},588:function(e,l,t){e.exports=t.p+"static/universalmind.b97ee433.jpg"},299:function(e,l,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e,l){if(!(e instanceof l))throw new TypeError("Cannot call a class as a function")}function c(e,l){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!l||"object"!=typeof l&&"function"!=typeof l?e:l}function r(e,l){if("function"!=typeof l&&null!==l)throw new TypeError("Super expression must either be null or a function, not "+typeof l);e.prototype=Object.create(l&&l.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),l&&(Object.setPrototypeOf?Object.setPrototypeOf(e,l):e.__proto__=l)}function u(e,l){return e.raw=l,e}l.__esModule=!0;var i=u(["\n  padding-top: 144px;\n  background-image: linear-gradient(0deg,#f7f8f8 0,#fff 100%);\n  text-align: left;\n  .contained {\n    margin: 0 auto;\n    max-width: 1200px;\n    padding: 0 40px;\n    box-sizing: content-box;\n   .grid {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n\n      .example:hover img {\n        box-shadow: 0 8px 24px rgba(0,0,0,.2);\n      }\n\n      .example {\n        width: 30%;\n        color: #313d3e;\n        text-decoration: none;\n        font-weight: 700;\n        .browser {\n          background: #f7f8f8;\n          border: 1px solid #bcbcbc;\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n          color: #bcbcbc;\n          line-height: 0;\n          overflow: hidden;\n          .controls {\n            background: #fff;\n            box-shadow: calc(8px / 2) 0 0 #bcbcbc;\n            clip-path: polygon(0 0,80% 0,100% 100%,0 100%);\n            padding: calc(8px / 2) calc(8px / 4) 7px calc(8px / 4);\n            width: 24px;\n            color: #bcbcbc;\n            line-height: 0;\n          }\n        }\n\n        img {\n          box-sizing: border-box;\n          border: 1px solid #bcbcbc;\n          border-radius: 0 0 4px 4px;\n          box-shadow: 0 0 8px transparent;\n          height: auto;\n          margin-bottom: 26px;\n          transition: box-shadow .2s ease;\n          width: 100%;\n        }\n\n        h1 {\n          font-size: 22px;\n          font-weight: 700;\n          line-height: 34px;\n          margin: 0 0 6px 0;\n        }\n\n        .tools {\n          margin-bottom: 58px;\n          list-style-type: none;\n          margin: 8px 0 34px 0;\n          padding: 0;\n          column-count: 2;\n          column-gap: 16px;\n          li {\n            font-size: 16px;\n            font-weight: 400;\n          }\n          li:before {\n            content: '• ';\n          }\n        }\n      }\n    }\n   .cta {\n      margin-bottom: 54px;\n      h1 {\n        font-size: 17px;\n        font-style: italic;\n        line-height: 26px;\n        margin-bottom: 24px;\n        margin: 0 4% 40px 0;\n        width: 48%;\n      }\n      a {\n        color: #00c7b7;\n        text-decoration: none;\n        font-weight: 700;\n      }\n      strong {\n        display: block;\n        font-weight: 900;\n      }\n      p:not(.cta) {\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 28px;\n        margin: 0 0 26px 0;\n        width: 48%;\n      }\n    }\n  }\n"],["\n  padding-top: 144px;\n  background-image: linear-gradient(0deg,#f7f8f8 0,#fff 100%);\n  text-align: left;\n  .contained {\n    margin: 0 auto;\n    max-width: 1200px;\n    padding: 0 40px;\n    box-sizing: content-box;\n   .grid {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n\n      .example:hover img {\n        box-shadow: 0 8px 24px rgba(0,0,0,.2);\n      }\n\n      .example {\n        width: 30%;\n        color: #313d3e;\n        text-decoration: none;\n        font-weight: 700;\n        .browser {\n          background: #f7f8f8;\n          border: 1px solid #bcbcbc;\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n          color: #bcbcbc;\n          line-height: 0;\n          overflow: hidden;\n          .controls {\n            background: #fff;\n            box-shadow: calc(8px / 2) 0 0 #bcbcbc;\n            clip-path: polygon(0 0,80% 0,100% 100%,0 100%);\n            padding: calc(8px / 2) calc(8px / 4) 7px calc(8px / 4);\n            width: 24px;\n            color: #bcbcbc;\n            line-height: 0;\n          }\n        }\n\n        img {\n          box-sizing: border-box;\n          border: 1px solid #bcbcbc;\n          border-radius: 0 0 4px 4px;\n          box-shadow: 0 0 8px transparent;\n          height: auto;\n          margin-bottom: 26px;\n          transition: box-shadow .2s ease;\n          width: 100%;\n        }\n\n        h1 {\n          font-size: 22px;\n          font-weight: 700;\n          line-height: 34px;\n          margin: 0 0 6px 0;\n        }\n\n        .tools {\n          margin-bottom: 58px;\n          list-style-type: none;\n          margin: 8px 0 34px 0;\n          padding: 0;\n          column-count: 2;\n          column-gap: 16px;\n          li {\n            font-size: 16px;\n            font-weight: 400;\n          }\n          li:before {\n            content: '• ';\n          }\n        }\n      }\n    }\n   .cta {\n      margin-bottom: 54px;\n      h1 {\n        font-size: 17px;\n        font-style: italic;\n        line-height: 26px;\n        margin-bottom: 24px;\n        margin: 0 4% 40px 0;\n        width: 48%;\n      }\n      a {\n        color: #00c7b7;\n        text-decoration: none;\n        font-weight: 700;\n      }\n      strong {\n        display: block;\n        font-weight: 900;\n      }\n      p:not(.cta) {\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 28px;\n        margin: 0 0 26px 0;\n        width: 48%;\n      }\n    }\n  }\n"]),s=t(2),o=n(s),m=t(37),d=n(m);t(386);var f=d.default.div(i),p=function(e){function l(){return a(this,l),c(this,e.apply(this,arguments))}return r(l,e),l.prototype.render=function(){return o.default.createElement(f,{className:"box"},o.default.createElement("div",{className:"contained"},o.default.createElement("div",{className:"cta grid"},o.default.createElement("h1",null,"凡是网站上能实现的效果，使用 JAMstack 架构也一样能实现。下面是一些例子："),o.default.createElement("p",null,o.default.createElement("strong",null,"想要把你的网站也添加进来？"),"请发 Pull Request ",o.default.createElement("a",{href:"https://github.com/jamstack/jamstack.org",className:"text-link"},"Click"),".")),o.default.createElement("div",{className:"grid"},o.default.createElement("a",{className:"example",href:"https://budget.boston.gov"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(560)}),o.default.createElement("h1",null,"City of Boston - Budget Site"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Jekyll"),o.default.createElement("li",null,"Gulp"),o.default.createElement("li",null,"Chart.js"))),o.default.createElement("a",{className:"example",href:"https://www.skcript.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(586)}),o.default.createElement("h1",null,"Skcript"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Middleman"),o.default.createElement("li",null,"Gulp"),o.default.createElement("li",null,"Github"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"Service Workers"),o.default.createElement("li",null,"S3"),o.default.createElement("li",null,"Progressive Web App"),o.default.createElement("li",null,"Google Analytics"))),o.default.createElement("a",{className:"example",href:"https://www.justdusk.com"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(576)}),o.default.createElement("h1",null,"DUSK"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Jekyll"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"npm"),o.default.createElement("li",null,"Google Analytics"))),o.default.createElement("a",{className:"example",href:"https://www.sequoiacap.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(583)}),o.default.createElement("h1",null,"Sequoia Capital"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Middleman"),o.default.createElement("li",null,"jQuery"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"Contentful"),o.default.createElement("li",null,"fuse.js"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"),o.default.createElement("li",null,"Google Analytics"))),o.default.createElement("a",{className:"example",href:"https://carrot.is/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(561)}),o.default.createElement("h1",null,"Carrot Creative"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Roots"),o.default.createElement("li",null,"Vue"),o.default.createElement("li",null,"Stylus"),o.default.createElement("li",null,"Coffeescript"),o.default.createElement("li",null,"Jade (Pug)"),o.default.createElement("li",null,"Contentful"),o.default.createElement("li",null,"Internal APIs"),o.default.createElement("li",null,"Spike"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"),o.default.createElement("li",null,"Google Analytics"))),o.default.createElement("a",{className:"example",href:"http://www.sphero.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(587)}),o.default.createElement("h1",null,"Sphero"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Angular"),o.default.createElement("li",null,"Jekyll"),o.default.createElement("li",null,"Grunt"),o.default.createElement("li",null,"Contentful"),o.default.createElement("li",null,"Vero API"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"https://lodash.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(580)}),o.default.createElement("h1",null,"Lodash"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Grunt"),o.default.createElement("li",null,"Babel"),o.default.createElement("li",null,"Jekyll"),o.default.createElement("li",null,"React"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"http://www.serverless.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(584)}),o.default.createElement("h1",null,"Serverless"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Webpack"),o.default.createElement("li",null,"Babel"),o.default.createElement("li",null,"Phenomic"),o.default.createElement("li",null,"React"),o.default.createElement("li",null,"CSS modules"),o.default.createElement("li",null,"PostCSS"),o.default.createElement("li",null,"Disqus"),o.default.createElement("li",null,"Auth0"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"https://community.algolia.com/marvel-search/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(582)}),">",o.default.createElement("h1",null,"MarvelSearch"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Brunch"),o.default.createElement("li",null,"Babel"),o.default.createElement("li",null,"GitHub Pages"),o.default.createElement("li",null,"Algolia"),o.default.createElement("li",null,"Cloudinary"),o.default.createElement("li",null,"instantsearch.js"),o.default.createElement("li",null,"Sass (SCSS)"))),o.default.createElement("a",{className:"example",href:"https://julian.is"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(579)}),o.default.createElement("h1",null,"Julian Gaviria"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Jekyll"),o.default.createElement("li",null,"Grunt"),o.default.createElement("li",null,"CloudFlare"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"Critical CSS"),o.default.createElement("li",null,"GitHub"),o.default.createElement("li",null,"Service Workers"),o.default.createElement("li",null,"Web App Manifest"))),o.default.createElement("a",{className:"example",href:"https://www.digitalcontinuum.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(575)}),o.default.createElement("h1",null,"Digital Continuum"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Hexo"),o.default.createElement("li",null,"Contentful"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"Google Analytics"),o.default.createElement("li",null,"Algolia"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"http://www.universalmind.com/"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(588)}),o.default.createElement("h1",null,"Universal Mind"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Hexo"),o.default.createElement("li",null,"Contentful"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"S3"),o.default.createElement("li",null,"Google Analytics"),o.default.createElement("li",null,"Algolia"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"https://www.gohyperstatic.com"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(577)}),o.default.createElement("h1",null,"Hyper Static"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Hugo"),o.default.createElement("li",null,"WebPack 2"),o.default.createElement("li",null,"CloudFlare"),o.default.createElement("li",null,"Babel"),o.default.createElement("li",null,"Critical CSS"),o.default.createElement("li",null,"Gitlab"),o.default.createElement("li",null,"PostCSS"),o.default.createElement("li",null,"Disqus"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"https://www.cita.hr"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(574)}),o.default.createElement("h1",null,"CiTA"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"WebPack 2"),o.default.createElement("li",null,"Gulp"),o.default.createElement("li",null,"Critical CSS"),o.default.createElement("li",null,"Bitbucket"),o.default.createElement("li",null,"Netlify"))),o.default.createElement("a",{className:"example",href:"https://www.silvestarbistrovic.from.hr"},o.default.createElement("div",{className:"browser"},o.default.createElement("div",{className:"controls"},"•••")),o.default.createElement("img",{src:t(585)}),o.default.createElement("h1",null,"Silvestar Bistrović"),o.default.createElement("ul",{className:"tools"},o.default.createElement("li",null,"Hexo"),o.default.createElement("li",null,"Sass"),o.default.createElement("li",null,"Gulp"),o.default.createElement("li",null,"Critical CSS"),o.default.createElement("li",null,"Bitbucket"),o.default.createElement("li",null,"Netlify"),o.default.createElement("li",null,"Cloudinary"))))))},l}(o.default.Component);l.default=p,e.exports=l.default}});
  //# sourceMappingURL=component---src-pages-examples-js-5440e91e9b939e1385f4.js.map