Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
213 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| [ignore] | ||
| ./node_modules/styled-components/.* | ||
|
|
||
| [include] | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,4 +51,7 @@ node_modules/ | |
|
|
||
| .serverless/ | ||
| yarn.lock | ||
| package-lock.json | ||
| package-lock.json | ||
|
|
||
| # Flow | ||
| flow-typed | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,59 @@ | ||
| import React from 'react' | ||
| import React, { Component } from 'react' | ||
| import { Link, graphql } from 'gatsby' | ||
| import { Box } from 'grommet' | ||
| import { Box, Image, Text, Heading } from 'grommet' | ||
|
|
||
| export default props => { | ||
| return ( | ||
| <Box border={{ color: 'brand', size: 'medium' }} pad="small" round="small"> | ||
| <h3> | ||
| <Link style={{ boxShadow: 'none' }} to={props.link}> | ||
| {props.title} | ||
| </Link> | ||
| </h3> | ||
| <small>{props.date}</small> | ||
| <p dangerouslySetInnerHTML={props.htmlExcerpt} /> | ||
| </Box> | ||
| ) | ||
| import styled from 'styled-components' | ||
|
|
||
| // Target another styled component on hover | ||
| // https://www.styled-components.com/docs/advanced#referring-to-other-components | ||
| // Psuedoelements, psuedoselectors, and nesting | ||
| // https://www.styled-components.com/docs/basics#psuedoelements-psuedoselectors-and-nesting | ||
|
|
||
| // https://www.gatsbyjs.org/docs/gatsby-link/ | ||
| // https://reactjs.org/docs/events.html#mouse-events | ||
|
|
||
| export default class extends Component { | ||
| // const CardLink = styled.Link` | ||
| // color: blue; | ||
|
|
||
| // :hover { | ||
| // color: red; | ||
| // } | ||
| // ` | ||
|
|
||
| render() { | ||
| return ( | ||
| <Link | ||
| to={this.props.link} | ||
| style={{ | ||
| boxShadow: 'none', | ||
| textDecoration: 'none', | ||
| textColor: 'none', | ||
| }} | ||
| > | ||
| <Box | ||
| round="small" | ||
| margin="small" | ||
| elevation="small" | ||
| background="light-2" | ||
| > | ||
| <Box | ||
| basis="medium" | ||
| fill="true" | ||
| round="small" | ||
| background={{ image: 'url(' + this.props.cover + ')' }} | ||
| /> | ||
| <Box pad="medium"> | ||
| <Heading margin="xsmall" level="3"> | ||
| {this.props.title} | ||
| </Heading> | ||
| <Text dangerouslySetInnerHTML={this.props.htmlExcerpt} /> | ||
| <Text margin={{ top: 'small' }} size="small"> | ||
| {this.props.date} | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| </Link> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,25 @@ | ||
| import React from 'react' | ||
| import { Box } from 'grommet' | ||
| import { Box, Text } from 'grommet' | ||
|
|
||
| import profilePic from './profile-pic.jpg' | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <Box border={{ color: 'brand', size: 'medium' }} pad="small" round="small"> | ||
| <Box | ||
| round="small" | ||
| pad="small" | ||
| margin="small" | ||
| background="light-2" | ||
| // border={{ size: 'small', color: 'brand' }} | ||
| > | ||
| <img src={profilePic} alt={`Kyle Mathews`} /> | ||
| <p> | ||
| <Text size="small"> | ||
| Written by <strong>Kyle Mathews</strong> who lives and works in San | ||
| Francisco building useful things.{' '} | ||
| <a href="https://twitter.com/kylemathews"> | ||
| You should follow him on Twitter | ||
| </a> | ||
| </p> | ||
| </Text> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react' | ||
| import { Box, Text } from 'grommet' | ||
| import siteConfig from '../../site-config' | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <Box background="light-2" pad="large"> | ||
| <Text>{siteConfig.footerText}</Text> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,50 @@ | ||
| import React, { Component } from 'react' | ||
| import { Grommet, Box, Grid } from 'grommet' | ||
|
|
||
| import { injectGlobal } from 'styled-components' | ||
|
|
||
| import { siteTheme } from '../site-theme' | ||
| import siteConfig from '../../site-config' | ||
|
|
||
| import Navbar from './Navbar' | ||
| import CardProfile from './CardProfile' | ||
| import Footer from './Footer' | ||
|
|
||
| injectGlobal` | ||
| img { | ||
| border-radius: 12px; | ||
| } | ||
| body { | ||
| margin: 0 | ||
| } | ||
| a:hover { | ||
| opacity: 0.8; | ||
| } | ||
| ` | ||
|
|
||
| export default class Template extends Component { | ||
| render() { | ||
| return ( | ||
| <Grommet theme={siteTheme}> | ||
| <Box | ||
| background={siteConfig.backgroundColor} | ||
| style={{ minHeight: '100vh' }} | ||
| responsive | ||
| > | ||
| <Navbar /> | ||
| <Box direction="row-responsive" responsive> | ||
| <Box> | ||
| <CardProfile /> | ||
| <div> | ||
| <Grommet theme={siteTheme}> | ||
| <Box | ||
| background={siteConfig.backgroundColor} | ||
| style={{ minHeight: '100vh' }} | ||
| responsive | ||
| margin="small" | ||
| align="center" | ||
| > | ||
| <Navbar /> | ||
| <Box direction="row-responsive"> | ||
| <Box width="medium"> | ||
| <CardProfile /> | ||
| </Box> | ||
| <Box width="large">{this.props.children}</Box> | ||
| </Box> | ||
| <Box>{this.props.children}</Box> | ||
| </Box> | ||
| </Box> | ||
| </Grommet> | ||
| <Footer /> | ||
| </Grommet> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| --- | ||
| title: Hello World TEST | ||
| date: '2018-03-01T22:12:03.284Z' | ||
| cover: './salty_egg.jpg' | ||
| --- | ||
|
|
||
| This is my first post on my new fake blog! How exciting! | ||
|
|
||
| I'm sure I'll write a lot more interesting things in the future. | ||
|
|
||
| Oh, and here's a great quote from this Wikipedia on | ||
| [salted duck eggs](http://en.wikipedia.org/wiki/Salted_duck_egg). | ||
|
|
||
| > A salted duck egg is a Chinese preserved food product made by soaking duck | ||
| > eggs in brine, or packing each egg in damp, salted charcoal. In Asian | ||
| > supermarkets, these eggs are sometimes sold covered in a thick layer of salted | ||
| > charcoal paste. The eggs may also be sold with the salted paste removed, | ||
| > wrapped in plastic, and vacuum packed. From the salt curing process, the | ||
| > salted duck eggs have a briny aroma, a gelatin-like egg white and a | ||
| > firm-textured, round yolk that is bright orange-red in color. | ||
|  |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,7 @@ export const siteTheme = { | |
| }, | ||
| }, | ||
| colors: { | ||
| brand: siteConfig.mainColor, | ||
| brand: siteConfig.brandColor, | ||
| }, | ||
| }, | ||
| } | ||
Oops, something went wrong.