Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master' into jerel/layout-tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
jerelmiller committed Jun 17, 2020
2 parents 786aabc + 0d6b07c commit b75f5bc
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 24 deletions.
17 changes: 0 additions & 17 deletions src/components/BreadcrumbBar.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,3 @@
background-position: center center;
}
}

.duration {
color: var(--color-neutrals-600);

&:before {
content: '';
display: inline-block;
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5rem;
vertical-align: bottom;
background-image: url('../images/clock.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
}
6 changes: 6 additions & 0 deletions src/components/FeatherIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ const ICONS = {
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</>
),
clock: (
<>
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</>
),
github: (
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
),
Expand Down
3 changes: 3 additions & 0 deletions src/components/SideBySide.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 1rem;
p:last-child {
margin-bottom: 0;
}

@media (max-width: 760px) {
grid-template-columns: 100%;
Expand Down
18 changes: 11 additions & 7 deletions src/templates/GuideTemplate.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
import { MDXProvider } from '@mdx-js/react';

import Layout from '../components/Layout';
import BreadcrumbBar from '../components/BreadcrumbBar';
import FeatherIcon from '../components/FeatherIcon';
import PageTitle from '../components/PageTitle';
import Video from '../components/Video';
import Step from '../components/Step';
import Steps from '../components/Steps';
import Intro from '../components/Intro';
import SEO from '../components/Seo';
import { BreadcrumbContext } from '../components/BreadcrumbContext';
import styles from './GuideTemplate.module.scss';

import createBreadcrumbs from '../utils/create-breadcrumbs';
import pages from '../data/sidenav.json';
import styles from './GuideTemplate.module.scss';
import CodeSnippet from '../components/CodeSnippet';

const components = {
Expand All @@ -29,16 +29,20 @@ const components = {
const GuideTemplate = ({ data }) => {
const { mdx } = data;
const { frontmatter, body } = mdx;
const { title, description } = frontmatter;

const { title, description, duration } = frontmatter;
const crumbs = createBreadcrumbs(frontmatter.path, pages);

return (
<BreadcrumbContext.Provider value={crumbs}>
<Layout>
<SEO title={title} description={description} />
<BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
<h1>{title}</h1>
<div className={styles.header}>
<PageTitle>{title}</PageTitle>
<div className={styles.duration}>
<FeatherIcon name="clock" className={styles.clock} />
{duration}
</div>
</div>
<div className={styles.mdxContainer}>
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
Expand Down
46 changes: 46 additions & 0 deletions src/templates/GuideTemplate.module.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,52 @@
.mdxContainer {
> *:first-child {
margin-top: 0;
}

code {
padding: 0.125rem;
background: var(--color-neutrals-200);
border-radius: 2px;
}

p:last-child {
margin-bottom: 0;
}
h1,
h2 {
&:not(:first-child) {
margin-top: 2rem;
}
}

h3,
h4 {
margin-top: 1rem;
}

li {
margin-bottom: 1rem;
}

ul li ul {
margin-top: 1rem;
line-height: 1;
}
}

.header {
display: flex;
margin-bottom: 2rem;
align-items: center;
justify-content: space-between;
}

.duration {
display: flex;
align-items: center;
color: var(--color-neutrals-600);
}

.clock {
margin-right: 0.25rem;
}

0 comments on commit b75f5bc

Please sign in to comment.