update style

src/components/Bio.js

@@ -1,8 +1,4 @@
 import React from 'react'
-
-import 'typeface-montserrat'
-import 'typeface-merriweather'
-
 import Projects from "./Projects"
 import profileImage from '../images/profile.png'
 import { rhythm } from '../utils/typography'

src/components/Projects.js

@@ -10,16 +10,20 @@ class Projects extends React.Component {
 
  return (
  <ul style={{
+ margin: 0,
  display: 'flex',
  visibility: hidden ? 'hidden' : 'visible',
  opacity: hidden ? 0 : 1,
  maxHeight: hidden ? 0 : 1000,
  listStyle: 'none',
  flexWrap: 'wrap',
  transition: 'all 0.5s ease',
+ textAlign: 'center',
+ fontSize: '0.8rem',
+ lineHeight: '2rem',
  }}>
  {projects.map((project, index) => 
- <li key={project} style={{ flex: '0 1 120px' }}>
+ <li key={project} style={{ flex: '0 1 100px' }}>
  <a target="blank" href={`https://silentmaker.github.io/${project}`}>
  <div style={{
  width: 64,
@@ -30,7 +34,7 @@ class Projects extends React.Component {
  backgroundSize: `auto 125px`,
  backgroundPosition: `${-64 * index}px 0`,
  }}></div>
- <div style={{ color: '#999', textAlign: 'center' }}>
+ <div style={{ color: '#999' }}>
  {project.charAt(0).toUpperCase() + project.slice(1)}
  </div>
  </a>

src/layouts/index.js

@@ -15,55 +15,36 @@ class Template extends React.Component {
 
  if (location.pathname === rootPath) {
  header = (
- <h1
- style={{
+ <h1 style={{
  ...scale(1.5),
  marginBottom: rhythm(1.5),
  marginTop: 0,
- }}
- >
- <Link
- style={{
+ }}>
+ <Link to={'/'} style={{
  boxShadow: 'none',
  textDecoration: 'none',
  color: 'inherit',
- }}
- to={'/'}
- >
- Elvin's Blog
- </Link>
+ }}>Elvin's Blog</Link>
  </h1>
  )
  } else {
  header = (
- <h3
- style={{
- fontFamily: 'Montserrat, sans-serif',
- marginTop: 0,
- }}
- >
- <Link
- style={{
+ <h3 style={{ marginTop: 0 }}>
+ <Link to={'/'} style={{
  boxShadow: 'none',
  textDecoration: 'none',
  color: '#007acc',
- }}
- to={'/'}
- >
- Elvin's Blog
- </Link>
+ }}>← Elvin's Blog</Link>
  </h3>
  )
  }
  return (
- <div
- style={{
+ <div style={{
  marginLeft: 'auto',
  marginRight: 'auto',
  maxWidth: rhythm(32),
  padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
- }}
- >
+ }}>
  {header}
  {children()}
  </div>

src/templates/blog-post.js

@@ -11,48 +11,45 @@ class BlogPostTemplate extends React.Component {
  const post = this.props.data.markdownRemark
  const siteTitle = get(this.props, 'data.site.siteMetadata.title')
  const tags = (post.frontmatter.tags || []).map(tag => 
- <Link key={tag} to={`/tags/${tag}`}>{tag}</Link>)
+ <Link style={{ marginLeft: rhythm(1/4) }} key={tag} to={`/tags/${tag}`}>{tag}</Link>)
  const categories = (post.frontmatter.categories || []).map(category => 
- <Link key={category} to={`/categories/${category}`}>{category}</Link>)
+ <Link style={{ marginLeft: rhythm(1/4) }} key={category} to={`/categories/${category}`}>{category}</Link>)
  const { previous, next } = this.props.pathContext
 
  return (
  <div>
  <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
+
  <h1>{post.frontmatter.title}</h1>
- <div style={{ ...scale(-1) }}>
- {post.frontmatter.date}
+
+ <div style={{ ...scale(-1/10) }}>
+ {post.frontmatter.date && <span style={{ marginRight: rhythm(1) }}>{post.frontmatter.date}</span>}
+ {post.frontmatter.tags && <span style={{ marginRight: rhythm(1) }}>Tags:{tags}</span>}
+ {post.frontmatter.categories && <span>Categories:{categories}</span>}
  </div>
- {post.frontmatter.tags && <div>tags: {tags}</div>}
- {post.frontmatter.categories && <div>categories: {categories}</div>}
+
  <div dangerouslySetInnerHTML={{ __html: post.html }} />
- <hr
- style={{
- marginBottom: rhythm(1),
- }}
- />
+
+ <hr style={{ marginBottom: rhythm(1) }} />
+
  <Bio />
 
- <ul
- style={{
+ <ul style={{
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  listStyle: 'none',
  padding: 0,
- }}
- >
+ }}>
  <li>
- {
- previous &&
+ {previous &&
  <Link to={previous.fields.slug} rel="prev">
  ← {previous.frontmatter.title}
  </Link>
  }
  </li>
  <li>
- {
- next &&
+ {next &&
  <Link to={next.fields.slug} rel="next">
  {next.frontmatter.title} →
  </Link>

src/templates/categories.js

@@ -8,10 +8,12 @@ import { rhythm } from '../utils/typography'
 class Categories extends React.Component {
  render() {
  const posts = get(this, 'props.data.allMarkdownRemark.edges')
+ const category = get(this, 'props.pathContext.category')
 
  return (
  <div>
  <Bio />
+ <h3>Category: {category.toUpperCase()}</h3>
  {posts.map(({ node }) => {
  const title = get(node, 'frontmatter.title') || node.fields.slug
  return (

src/templates/tags.js

@@ -8,10 +8,12 @@ import { rhythm } from '../utils/typography'
 class Tags extends React.Component {
  render() {
  const posts = get(this, 'props.data.allMarkdownRemark.edges')
+ const tag = get(this, 'props.pathContext.tag')
 
  return (
  <div>
  <Bio />
+ <h3>Tag: {tag.toUpperCase()}</h3>
  {posts.map(({ node }) => {
  const title = get(node, 'frontmatter.title') || node.fields.slug
  return (