Fix smaller issues, a11y

LekoArts · Nov 2, 2018 · c4cb668 · c4cb668
1 parent baac72e
commit c4cb668
Show file tree

Hide file tree

Showing 6 changed files with 394 additions and 392 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,42 +1,42 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { darken, lighten } from 'polished';
-
-const Wrapper = styled.header`
-  background: linear-gradient(
-    45deg,
-    ${props => darken(0.1, props.theme.colors.primary)},
-    ${props => lighten(0.1, props.theme.colors.primary)}
-  );
-  grid-column: 1 / -1;
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 2rem 2rem 5rem 2rem;
-  box-shadow: inset 0px -10px 30px 0px rgba(0, 0, 0, 0.1);
-`;
-
-const Content = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-
-  a {
-    color: white;
-    &:hover {
-      opacity: 0.85;
-      color: white;
-    }
-  }
-`;
-
-const Header = props => (
-  <Wrapper>
-    <Content>{props.children}</Content>
-  </Wrapper>
-);
-
-export default Header;
-
-Header.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).isRequired,
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { darken, lighten } from 'polished';
+
+const Wrapper = styled.header`
+  background: linear-gradient(
+    45deg,
+    ${props => darken(0.1, props.theme.colors.primary)},
+    ${props => lighten(0.1, props.theme.colors.primary)}
+  );
+  grid-column: 1 / -1;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding: 2rem 2rem 5rem 2rem;
+  box-shadow: inset 0px -10px 30px 0px rgba(0, 0, 0, 0.1);
+`;
+
+const Content = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+
+  a {
+    color: white;
+    &:hover {
+      opacity: 0.85;
+      color: white;
+    }
+  }
+`;
+
+const Header = ({ children }) => (
+  <Wrapper>
+    <Content>{children}</Content>
+  </Wrapper>
+);
+
+export default Header;
+
+Header.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).isRequired,
+};
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -84,7 +84,7 @@ const Layout = ({ children }) => (
           {children}
           <Footer>
             &copy; 2018 by John Doe. All rights reserved. <br />
-            <a href="https://github.com/LeKoArts/gatsby-starter-minimal-blog">GitHub Repository</a> <br />
+            <a href="https://github.com/LekoArts/gatsby-starter-minimal-blog">GitHub Repository</a> <br />
             <span>Last build: {data.site.buildTime}</span>
           </Footer>
         </React.Fragment>

diff --git a/src/pages/categories.js b/src/pages/categories.js
@@ -1,78 +1,77 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Helmet from 'react-helmet';
-import { Link, graphql } from 'gatsby';
-import styled from 'styled-components';
-import kebabCase from 'lodash/kebabCase';
-import { Layout, Wrapper, Header, SectionTitle } from 'components';
-import { media } from '../utils/media';
-
-import config from '../../config/SiteConfig';
-
-const Content = styled.div`
-  grid-column: 2;
-  box-shadow: 0 4px 120px rgba(0, 0, 0, 0.1);
-  border-radius: 1rem;
-  padding: 2rem 4rem;
-  background-color: ${props => props.theme.colors.bg};
-  z-index: 9000;
-  margin-top: -3rem;
-  @media ${media.tablet} {
-    padding: 3rem 3rem;
-  }
-  @media ${media.phone} {
-    padding: 2rem 1.5rem;
-  }
-`;
-
-const Title = styled.h3`
-  position: relative;
-  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
-  margin-bottom: 0.75rem;
-`;
-
-const Category = ({
-  data: {
-    allMarkdownRemark: { group },
-  },
-}) => (
-  <Layout>
-    <Wrapper>
-      <Helmet title={`Categories | ${config.siteTitle}`} />
-      <Header>
-        <Link to="/">{config.siteTitle}</Link>
-      </Header>
-      <Content>
-        <SectionTitle>Categories</SectionTitle>
-        {group.map(category => (
-          <Title key={category.fieldValue}>
-            <Link to={`/categories/${kebabCase(category.fieldValue)}`}>{category.fieldValue}</Link> ({
-              category.totalCount
-            })
-          </Title>
-        ))}
-      </Content>
-    </Wrapper>
-  </Layout>
-);
-
-export default Category;
-
-Category.propTypes = {
-  data: PropTypes.shape({
-    allMarkdownRemark: PropTypes.shape({
-      group: PropTypes.array.isRequired,
-    }),
-  }).isRequired,
-};
-
-export const postQuery = graphql`
-  query CategoriesPage {
-    allMarkdownRemark {
-      group(field: frontmatter___category) {
-        fieldValue
-        totalCount
-      }
-    }
-  }
-`;
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { Link, graphql } from 'gatsby';
+import styled from 'styled-components';
+import kebabCase from 'lodash/kebabCase';
+import { Layout, Wrapper, Header, SectionTitle } from 'components';
+import { media } from '../utils/media';
+
+import config from '../../config/SiteConfig';
+
+const Content = styled.div`
+  grid-column: 2;
+  box-shadow: 0 4px 120px rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+  padding: 2rem 4rem;
+  background-color: ${props => props.theme.colors.bg};
+  z-index: 9000;
+  margin-top: -3rem;
+  @media ${media.tablet} {
+    padding: 3rem 3rem;
+  }
+  @media ${media.phone} {
+    padding: 2rem 1.5rem;
+  }
+`;
+
+const Title = styled.h3`
+  position: relative;
+  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  margin-bottom: 0.75rem;
+`;
+
+const Category = ({
+  data: {
+    allMarkdownRemark: { group },
+  },
+}) => (
+  <Layout>
+    <Wrapper>
+      <Helmet title={`Categories | ${config.siteTitle}`} />
+      <Header>
+        <Link to="/">{config.siteTitle}</Link>
+      </Header>
+      <Content>
+        <SectionTitle>Categories</SectionTitle>
+        {group.map(category => (
+          <Title key={category.fieldValue}>
+            <Link to={`/categories/${kebabCase(category.fieldValue)}`}>{category.fieldValue}</Link> (
+            {category.totalCount})
+          </Title>
+        ))}
+      </Content>
+    </Wrapper>
+  </Layout>
+);
+
+export default Category;
+
+Category.propTypes = {
+  data: PropTypes.shape({
+    allMarkdownRemark: PropTypes.shape({
+      group: PropTypes.array.isRequired,
+    }),
+  }).isRequired,
+};
+
+export const postQuery = graphql`
+  query CategoriesPage {
+    allMarkdownRemark {
+      group(field: frontmatter___category) {
+        fieldValue
+        totalCount
+      }
+    }
+  }
+`;