Styles of breadcrumb (#95)

* chore: update version to 1.5.0

* style: add breadcrumb theme

* feat: export breadcrumb and import on post

* style: adjusts margin on title n description post

* refactor: add classname and symbols on html

* style: all styles of breadcrumb
- import themes
- add colors and margins
- add typography and sizes

* refactor: change text and color of home

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bruno-dulcetti-site",
   "description": "Bruno Dulcetti - web standards, css, xhtml e tecnologia em geral.",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Bruno Dulcetti <[email protected]>",
   "scripts": {
     "build": "yarn clean && gatsby build",

src/components/breadcrumb/index.js

@@ -2,14 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import * as S from './styles';
-import { PropTypes } from 'prop-types';
 
 export default function Breadcrumb({ category, title }) {
   return (
     <S.BreadcrumbWrapper>
-      <S.HomeLink to="/">Home</S.HomeLink> &raquo;
-      <S.CategoryLink>{category}</S.CategoryLink> &rsaquo;
-      <S.Title>{title}</S.Title>
+      /{' '}
+      <S.HomeLink className="link-animated" to="/">
+        home
+      </S.HomeLink>{' '}
+      / <S.CategoryLink>{category}</S.CategoryLink> / <S.Title>{title}</S.Title>
     </S.BreadcrumbWrapper>
   );
 }

src/components/breadcrumb/styles.js

@@ -1,10 +1,27 @@
 import styled from 'styled-components';
 import AniLink from 'gatsby-plugin-transition-link/AniLink';
+import { themes } from '../../styles/themes';
 
-export const BreadcrumbWrapper = styled.p``;
+export const BreadcrumbWrapper = styled.p`
+  color: ${themes.palette.breadcrumb.color};
+  margin-bottom: 10px;
+`;
 
-export const HomeLink = styled(AniLink)``;
+export const HomeLink = styled(AniLink)`
+  color: ${themes.palette.breadcrumb.homeColor};
+  font-weight: bold;
+  text-decoration: underline;
 
-export const CategoryLink = styled.span``;
+  &:hover {
+    text-decoration: none;
+  }
+`;
 
-export const Title = styled.strong``;
+export const CategoryLink = styled.span`
+  text-transform: lowercase;
+`;
+
+export const Title = styled.strong`
+  font-family: ${themes.fonts.others};
+  font-size: 1.1rem;
+`;

src/components/index.js

@@ -1,3 +1,4 @@
+import Breadcrumb from './breadcrumb/index';
 import Comments from './comments';
 import CreditsImage from './credits-image';
 import Icons from './icons';
@@ -16,6 +17,7 @@ import SocialMedias from './social-medias';
 import Svgs from './svgs';
 
 export {
+  Breadcrumb,
   Comments,
   CreditsImage,
   Icons,

src/styles/themes.js

@@ -39,6 +39,10 @@ export const themes = {
     maxWidth: '68em',
   },
   palette: {
+    breadcrumb: {
+      color: _colors.gray,
+      homeColor: _colors.gray,
+    },
     categories: {
       'Back-End': _colors.xanadu,
       'CSS': _colors.blueLight,

src/templates/blog-post/index.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 
-import { Layout, Comments, SEO, Share, PreviousNext, CreditsImage } from '../../components';
+import {
+  Breadcrumb,
+  Comments,
+  CreditsImage,
+  Layout,
+  PreviousNext,
+  SEO,
+  Share,
+} from '../../components';
 
 import * as S from './styles';
 
@@ -18,6 +26,7 @@ export default function BlogPost({ data, pageContext }) {
         image={frontmatter.featuredImage.childImageSharp.fluid.src}
       />
       <S.PostWrap>
+        <Breadcrumb category={frontmatter.category} title={frontmatter.title} />
         <S.PostTitle>{frontmatter.title}</S.PostTitle>
         {frontmatter.description && (
           <S.PostDescription>{frontmatter.description}</S.PostDescription>

src/templates/blog-post/styles.js

@@ -14,23 +14,16 @@ export const PostWrap = styled.div`
 
 export const PostTitle = styled.h1`
   font-size: min(56px, 10vw);
-  line-height: min(62px, 11vw);
-
-  ${media.lessThan('large')`
-    margin-bottom: .5rem;
-  `}
-
-  ${media.greaterThan('large')`
-    margin-bottom: 1rem;
-  `}
+  line-height: min(60px, 10vw);
+  margin-bottom: 0.5rem;
 `;
 
 export const PostDescription = styled.h2`
   color: ${themes.palette.posts.description};
   font-style: italic;
   font-weight: normal;
   line-height: 1.2;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 
   ${media.lessThan('large')`
     font-size: 1.5rem;