Adam-Collier

{
  "version": 2,
  "name": "my-blog",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "public"
      }

Adam-Collier

.gatsby-highlight-code-line {
  background-color: #2b2f36;
  display: block;
  margin-right: -1em;
  margin-left: -1em;
  padding-right: 1em;
  padding-left: 0.75em;
  border-left: 0.25em solid #f99;
}

Adam-Collier

{post.frontmatter.featuredImage && (
  <Image
    sizes={post.frontmatter.featuredImage.childImageSharp.sizes}
    style={{
      marginBottom: rhythm(1),
      borderRadius: "1%",
    }}
  />
)}

Adam-Collier

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id

Adam-Collier

import styled, { createGlobalStyle } from "styled-components"
import PublicSansMedium from "../fonts/PublicSans-Medium.woff2"
import PublicSansSemiBold from "../fonts/PublicSans-SemiBold.woff2"

const GlobalStyle = createGlobalStyle`
  @font-face {
  font-family: "Public-sans";
  font-style: normal;
  font-weight: normal;
  src: local("Public Sans"), local("Public Sans"),

Adam-Collier

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Public-sans"],
  bodyFontFamily: ["Public-sans"],
  overrideThemeStyles: ({ rhythm }, options, styles) => ({
    code: {
      fontSize: rhythm(1 / 2),

Adam-Collier

const grid = document.querySelector('.grid')
const gridItems = document.querySelectorAll('.grid-item')
const rowSize = 5

const setColumns = value => grid.style.setProperty('--template-columns', value)

gridItems.length <= 2 ? setColumns(`0.333fr`) : setColumns(`1fr`)

const positionGridItems = () => {
    gridItems.forEach((x, i) => {

Adam-Collier

.grid {
    display: grid;
    grid-row-gap: 0px;
    grid-column-gap: 40px;
    grid-template-columns: repeat(
        auto-fit,
        minmax(300px, var(--template-columns, 1fr))
    );
    grid-auto-rows: 5px;
    width: 80%;

Adam-Collier

<div class="grid">
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-1" alt="" src="/image-1" />
    </div>
  </article>
  <article class="grid-item">
    <div class="thumbnail" style="padding-top: 100%">
      <img class="lazyloaded" data-src="/image-2" alt="" src="/image-2" />
    </div>

Adam-Collier

<template>
  <div class="posts" v-if="posts.length">
    <div class="post" v-for="post in posts">
      <router-link :to="post.path">
        <div>
          <img v-if="post.frontmatter.image" :src="$withBase(post.frontmatter.image)" alt="">
        </div>
        <h2>{{post.frontmatter.title}}</h2>
        <p>{{post.frontmatter.description}}</p>
      </router-link>