├── browserslist ├── .gitignore ├── config.toml ├── pages ├── pages │ ├── articles-list │ │ └── index.md │ └── philosophy │ │ └── index.md ├── _template.jsx ├── articles │ ├── 2017-03-22-zombie-ipsum │ │ └── index.md │ ├── 2017-03-26-cupcake-ipsum │ │ └── index.md │ ├── 2017-03-29-batman-ipsum │ │ └── index.md │ ├── 2017-03-19-coffee-ipsum │ │ └── index.md │ └── 2017-03-17-cat-ipsum │ │ └── index.md └── index.jsx ├── styles ├── base │ ├── _mq.css │ ├── _variables.css │ ├── _defaults.css │ ├── _logo.css │ └── _normalize.css ├── main.css ├── components │ ├── _post.css │ ├── _page.css │ ├── _articles-list.css │ └── _article.css └── markdown-styles.css ├── .eslintrc ├── gatsby-node.js ├── components ├── Article.jsx ├── Page.jsx ├── Post.jsx └── ArticlesList.jsx ├── wrappers └── md.jsx ├── license ├── utils └── typography.js ├── html.jsx ├── package.json └── readme.md /browserslist: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | > 1% 4 | Last 2 versions 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | public/ 4 | *.log 5 | .gatsby-context.js 6 | -------------------------------------------------------------------------------- /config.toml: -------------------------------------------------------------------------------- 1 | siteTitle="Alchemy" 2 | siteDescription="A Gatsby starter with PostCSS powers" 3 | 4 | linkPrefix = "/gatsby-starter-alchemy" 5 | -------------------------------------------------------------------------------- /pages/pages/articles-list/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Articles" 3 | layout: articles 4 | path: "/articles" 5 | --- 6 | 7 | Our fine selection of readings, grab a coffee and enjoy! 8 | -------------------------------------------------------------------------------- /styles/base/_mq.css: -------------------------------------------------------------------------------- 1 | @custom-media --mobile (min-width: 500px); 2 | @custom-media --tablet (min-width: 650px); 3 | @custom-media --desktop (min-width: 800px); 4 | @custom-media --retina (-webkit-min-device-pixel-ratio: 2); 5 | -------------------------------------------------------------------------------- /styles/base/_variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bgColor: #2b4496; 3 | --logoOuter: #a0740a; 4 | --logoTriangle: var(--logoOuter); 5 | --logoSquareInner: #886309; 6 | --logoSquareBorder: #b8850c; 7 | --logoCircle: #b8850c; 8 | } 9 | -------------------------------------------------------------------------------- /pages/_template.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import '../styles/main.css'; 4 | 5 | class Template extends React.Component { 6 | render() { 7 | const { children } = this.props; 8 | 9 | return ( 10 |
11 | {children} 12 |
13 | ); 14 | } 15 | } 16 | 17 | export default Template; 18 | -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | /* base */ 2 | @import './base/_normalize.css'; 3 | @import './base/_variables.css'; 4 | @import './base/_mq.css'; 5 | @import './base/_defaults.css'; 6 | @import './base/_logo.css'; 7 | 8 | /* components */ 9 | @import './components/_page.css'; 10 | @import './components/_post.css'; 11 | @import './components/_articles-list.css'; 12 | @import './components/_article.css'; 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "ecmaFeatures": { 7 | "jsx": true 8 | }, 9 | "env": { 10 | "es6": true, 11 | "browser": true, 12 | "node": true 13 | }, 14 | "rules": { 15 | "quotes": ["error", "single"], 16 | "jsx-quotes": ["error", "prefer-double"], 17 | "newline-before-return": "error", 18 | "object-curly-spacing": ["error", "always"], 19 | "no-unused-vars": "error", 20 | "react/jsx-uses-vars": 1 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const rucksack = require('rucksack-css'); 2 | const lost = require('lost'); 3 | const cssnext = require('postcss-cssnext'); 4 | const cssnested = require('postcss-nested'); 5 | const atImport = require('postcss-import'); 6 | 7 | exports.modifyWebpackConfig = function (config) { 8 | config.merge({ 9 | postcss: [ 10 | atImport(), 11 | cssnested, 12 | lost(), 13 | rucksack(), 14 | cssnext({ 15 | browsers: ['>1%', 'last 2 versions'] 16 | }), 17 | ], 18 | }); 19 | 20 | return config; 21 | }; 22 | -------------------------------------------------------------------------------- /styles/components/_post.css: -------------------------------------------------------------------------------- 1 | .post { 2 | lost-column: 1/1 0 0; 3 | padding-left: 50px; 4 | padding-right: 50px; 5 | 6 | @media (--tablet) { 7 | padding-left: 35px; 8 | padding-right: 35px; 9 | } 10 | 11 | @media (--desktop) { 12 | padding-left: 20px; 13 | padding-right: 20px; 14 | } 15 | 16 | &-container { 17 | lost-center: 980px; 18 | lost-align: center; 19 | text-align: center; 20 | margin-top: 30px; 21 | 22 | &-title {} 23 | 24 | &-body { 25 | font-size: responsive 15px 20px; 26 | line-height: 1.5; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /styles/components/_page.css: -------------------------------------------------------------------------------- 1 | .page { 2 | lost-column: 1/1 0 0; 3 | padding-left: 50px; 4 | padding-right: 50px; 5 | 6 | @media (--tablet) { 7 | padding-left: 35px; 8 | padding-right: 35px; 9 | } 10 | 11 | @media (--desktop) { 12 | padding-left: 20px; 13 | padding-right: 20px; 14 | } 15 | 16 | &-container { 17 | lost-center: 980px; 18 | lost-align: center; 19 | text-align: center; 20 | margin-top: 30px; 21 | 22 | &-title {} 23 | 24 | &-body { 25 | font-size: responsive 15px 20px; 26 | line-height: 1.5; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /pages/pages/philosophy/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Philosophy" 3 | layout: page 4 | path: "/philosophy" 5 | --- 6 | 7 | Alchemy was designed to provide easy and quick customization, this starter is not a theme, is a boilerplate. 8 | 9 | Use this boilerplate to design your own site from the ground up. 10 | 11 | Just watch the structure, navigate through files and get to know how everything fits together, then make the appropriate changes. 12 | 13 | This starter focuses on working with PostCSS, it contains some useful plugins out of the box, read more on the [Github readme](https://github.com/bntzio/gatsby-starter-alchemy#postcss-plugins). 14 | -------------------------------------------------------------------------------- /pages/articles/2017-03-22-zombie-ipsum/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Zombie Ipsum" 3 | date: "2017-03-22" 4 | layout: post 5 | path: "/zombie-ipsum/" 6 | category: "Welcome" 7 | description: "Zombies reversus ab inferno, nam malum cerebro." 8 | --- 9 | 10 | Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit​​, morbo vel maleficia? De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella viventium. Qui offenderit rapto, terribilem incessu. The voodoo sacerdos suscitat mortuos comedere carnem. Search for solum oculi eorum defunctis cerebro. Nescio an Undead zombies. Sicut malus movie horror. 11 | -------------------------------------------------------------------------------- /styles/components/_articles-list.css: -------------------------------------------------------------------------------- 1 | .articles-list { 2 | lost-column: 1/1 0 0; 3 | padding-left: 50px; 4 | padding-right: 50px; 5 | 6 | @media (--tablet) { 7 | padding-left: 35px; 8 | padding-right: 35px; 9 | } 10 | 11 | @media (--desktop) { 12 | padding-left: 20px; 13 | padding-right: 20px; 14 | } 15 | 16 | &-container { 17 | lost-center: 980px; 18 | lost-align: center; 19 | text-align: center; 20 | margin-top: 30px; 21 | 22 | &-title {} 23 | 24 | &-body { 25 | font-size: responsive 15px 20px; 26 | line-height: 1.5; 27 | } 28 | 29 | &-posts { 30 | lost-center: 90%; 31 | lost-align: center; 32 | margin-bottom: 30px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/Article.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import { prefixLink } from 'gatsby-helpers'; 4 | 5 | class Article extends React.Component { 6 | render() { 7 | const { title, path, description } = this.props.data; 8 | 9 | return ( 10 |
11 |
12 |

{title}

13 |
14 |
15 |

{description}

16 |
17 |
18 | Read 19 |
20 |
21 | ); 22 | } 23 | } 24 | 25 | export default Article; 26 | -------------------------------------------------------------------------------- /wrappers/md.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Helmet from 'react-helmet'; 3 | 4 | import Post from '../components/Post'; 5 | import Page from '../components/Page'; 6 | import ArticlesList from '../components/ArticlesList'; 7 | 8 | import { config } from 'config'; 9 | import '../styles/markdown-styles.css'; 10 | 11 | class MarkdownWrapper extends React.Component { 12 | render() { 13 | const { route } = this.props; 14 | const post = route.page.data; 15 | const layout = post.layout; 16 | let template; 17 | 18 | if (layout === 'post') { 19 | template = ; 20 | } else if (layout === 'page') { 21 | template = ; 22 | } else { 23 | template = ; 24 | } 25 | 26 | return ( 27 |
28 | 29 | {template} 30 |
31 | ); 32 | } 33 | } 34 | 35 | export default MarkdownWrapper; 36 | -------------------------------------------------------------------------------- /pages/articles/2017-03-26-cupcake-ipsum/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Cupcake Ipsum" 3 | date: "2017-03-26" 4 | layout: post 5 | path: "/cupcake-ipsum/" 6 | category: "Welcome" 7 | description: "Cupcake ipsum dolor sit amet powder. Brownie cupcake jelly carrot cake." 8 | --- 9 | 10 | Cupcake ipsum dolor sit amet powder. Brownie cupcake jelly carrot cake. Pudding carrot cake topping. Jelly cake gummi bears I love tiramisu muffin powder tart. 11 | 12 | Cupcake chupa chups lemon drops muffin pastry. Brownie lemon drops danish. Cotton candy sweet roll marshmallow jujubes gingerbread oat cake toffee chupa chups topping. Candy canes lollipop soufflé. 13 | Cake soufflé carrot cake powder lemon drops icing cheesecake lollipop. I love candy canes soufflé soufflé candy icing. I love fruitcake bonbon jelly sugar plum. Carrot cake cookie bonbon dessert icing apple pie pastry bear claw. 14 | 15 | Carrot cake chocolate dragée. Tart sugar plum carrot cake muffin I love cake biscuit pudding. Candy canes sugar plum halvah I love chocolate cake icing carrot cake. 16 | -------------------------------------------------------------------------------- /styles/components/_article.css: -------------------------------------------------------------------------------- 1 | .article { 2 | lost-column: 1/1 1 20px; 3 | lost-align: center; 4 | display: flex; 5 | flex-direction: column; 6 | height: 320px; 7 | text-align: center; 8 | background: white; 9 | color: black; 10 | border-radius: 2.7px; 11 | margin-bottom: 20px; 12 | padding: 0 25px; 13 | 14 | @media (--tablet) { 15 | lost-column: 1/2 2 20px; 16 | } 17 | 18 | @media (--desktop) { 19 | lost-column: 1/3 3 20px; 20 | } 21 | 22 | &-title { 23 | margin-bottom: 15px; 24 | 25 | h3 { 26 | margin: 0; 27 | 28 | a { 29 | font-size: responsive 20px 23px; 30 | color: #262626; 31 | text-decoration: none; 32 | } 33 | } 34 | } 35 | 36 | &-description { 37 | margin-bottom: 15px; 38 | 39 | p { 40 | margin: 0; 41 | font-size: responsive 13px 16px; 42 | color: #333333; 43 | } 44 | } 45 | 46 | &-read { 47 | a { 48 | font-size: responsive 13px 16px; 49 | color: #262626; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Enrique Benitez (bntz.io) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/Page.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import { prefixLink } from 'gatsby-helpers'; 4 | 5 | class Page extends React.Component { 6 | render() { 7 | const { route } = this.props; 8 | const post = route.page.data; 9 | 10 | return ( 11 |
12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |

{post.title}

27 |
28 |
29 |
30 |
31 |
32 |
33 | ); 34 | } 35 | } 36 | 37 | export default Page; 38 | -------------------------------------------------------------------------------- /pages/articles/2017-03-29-batman-ipsum/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Batman Ipsum" 3 | date: "2017-03-29" 4 | layout: post 5 | path: "/batman-ipsum/" 6 | category: "Welcome" 7 | description: "Never underestimate Gotham City." 8 | --- 9 | 10 | Never underestimate Gotham City. People get mugged coming home from work every day of the week. Sometimes things just go bad. 11 | 12 | Ooh, you think darkness is your ally? You merely adopted the dark, I was born in it. Molded by it. I didn't see the light until I was already a man. By then there was nothing to be but blinded. 13 | 14 | Theatricality and deception, powerful agents to the uninitiated. But we are initiated aren't we, Bruce? Members of the League of Shadows. And you betrayed us. 15 | 16 | Your anger gives you great power. But if you Iet it, it will destroy you as it almost did me. 17 | 18 | The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them. 19 | 20 | I'm not sure you made it loud enough, sir. 21 | 22 | Bane was a member of the League of Shadows. And then he was excommunicated. And any man who is too extreme for Ra's Al Ghul, is not to be trifled with. 23 | -------------------------------------------------------------------------------- /utils/typography.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/server'; 2 | import React from 'react'; 3 | import Typography from 'typography'; 4 | import { GoogleFont } from 'react-typography'; 5 | import CodePlugin from 'typography-plugin-code'; 6 | 7 | const options = { 8 | googleFonts: [ 9 | { 10 | name: 'Roboto Slab', 11 | styles: [ 12 | '700', 13 | ], 14 | }, 15 | { 16 | name: 'Arvo', 17 | styles: [ 18 | '400', 19 | '400i', 20 | '700', 21 | ], 22 | }, 23 | ], 24 | headerFontFamily: ['Roboto Slab', 'serif'], 25 | bodyFontFamily: ['Arvo', 'sans-serif'], 26 | baseFontSize: '18px', 27 | baseLineHeight: 1.65, 28 | scaleRatio: 2.25, 29 | plugins: [ 30 | new CodePlugin(), 31 | ], 32 | }; 33 | 34 | const typography = new Typography(options); 35 | 36 | // Hot reload typography in development. 37 | if (process.env.NODE_ENV !== 'production') { 38 | typography.injectStyles(); 39 | if (typeof document !== 'undefined') { 40 | const googleFonts = ReactDOM.renderToStaticMarkup( 41 | React.createFactory(GoogleFont)({ typography }) 42 | ); 43 | const head = document.getElementsByTagName('head')[0]; 44 | head.insertAdjacentHTML('beforeend', googleFonts); 45 | } 46 | } 47 | 48 | export default typography; 49 | -------------------------------------------------------------------------------- /styles/base/_defaults.css: -------------------------------------------------------------------------------- 1 | @lost flexbox flex; 2 | 3 | body { 4 | background-color: var(--bgColor); 5 | color: white; 6 | font-size: responsive 14px 18px; 7 | } 8 | 9 | a { 10 | color: white; 11 | 12 | &:hover { 13 | color: white; 14 | } 15 | &:visited { 16 | color: white; 17 | } 18 | &:focus { 19 | color: white; 20 | } 21 | } 22 | 23 | .main { 24 | display: table; 25 | width: 100%; 26 | height: 100vh; 27 | font-size: responsive 14px 21px; 28 | 29 | &-container { 30 | display: table-cell; 31 | text-align: center; 32 | vertical-align: middle; 33 | 34 | &-title {} 35 | 36 | &-subtitle { 37 | h3 { 38 | font-size: responsive 14px 21px; 39 | } 40 | } 41 | 42 | &-links { 43 | & > ul { 44 | list-style-type: none; 45 | padding-left: 0; 46 | margin-left: 0; 47 | 48 | & li { 49 | padding: 6px 0; 50 | 51 | & > a { 52 | color: white; 53 | } 54 | } 55 | } 56 | } 57 | } 58 | 59 | &-footer { 60 | lost-column: 1/1; 61 | lost-align: right; 62 | position: absolute; 63 | bottom: 5px; 64 | right: 35px; 65 | 66 | & > p { 67 | font-size: 12px; 68 | color: whitesmoke; 69 | 70 | & > a { 71 | color: whitesmoke; 72 | text-decoration: none; 73 | } 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /html.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Helmet from 'react-helmet'; 3 | import { prefixLink } from 'gatsby-helpers'; 4 | import { TypographyStyle, GoogleFont } from 'react-typography'; 5 | import typography from './utils/typography'; 6 | 7 | const BUILD_TIME = new Date().getTime(); 8 | 9 | module.exports = React.createClass({ 10 | propTypes () { 11 | return { 12 | body: React.PropTypes.string 13 | } 14 | }, 15 | render () { 16 | const head = Helmet.rewind() 17 | 18 | let css 19 | if (process.env.NODE_ENV === 'production') { 20 | css =