text: import React from 'react';
  import {graphql} from 'gatsby';
  import styled from '@emotion/styled';
  import Layout from '../layout/GeneralLayout';
  
  const Content = styled.div`
  	margin: 0 auto;
  	max-width: 860px;
  	padding: 3rem 1.0875rem 1.45rem;
  	@media (max-width: 1200px) {
  		padding: 1rem 1.0875rem 1.45rem;
  	}
  `;
  
  const MarkedHeader = styled.h1`
  	display: inline;
  	border-radius: 1em 0 1em 0;
  	background-image: linear-gradient(
  		-100deg,
  		rgba(255, 250, 150, 0.15),
  		rgba(255, 250, 150, 0.8) 100%,
  		rgba(255, 250, 150, 0.25)
  	);
  `;
  
  const HeaderDate = styled.h3`
  	margin-top: 10px;
  	color: #bbb;
  `;
  
  // STYLE THE TAGS INSIDE THE MARKDOWN HERE
  const MarkdownContent = styled.div`
  	a {
  		text-decoration: none;
  		position: relative;
  	}
  
  	a::after {
  		content: '';
  		position: absolute;
  		z-index: -1;
  		top: 70%;
  		left: -0.1px;
  		right: -0.1px;
  		bottom: 0;
  		transition: top 0.1s ease-in-out;
  		background-color: rgba(255, 250, 150, 0.8);
  	}
  
  	a:hover::after {
  		top: 0;
  	}
  `;
  
  export default ({data}) => {
  	const post = data.markdownRemark;
  	return (
  		<Layout>
  			<Content>
  				<MarkedHeader>{post.frontmatter.title}</MarkedHeader>
  				<HeaderDate>
  					{post.frontmatter.date} - {post.fields.readingTime.text}
  				</HeaderDate>
  				<MarkdownContent dangerouslySetInnerHTML={{__html: post.html}} />
  			</Content>
  		</Layout>
  	);
  };
  
  export const pageQuery = graphql`
  	query($path: String!) {
  		markdownRemark(frontmatter: {path: {eq: $path}}) {
  			html
  			frontmatter {
  				date(formatString: "DD MMMM, YYYY")
  				path
  				title
  			}
  			fields {
  				readingTime {
  					text
  				}
  			}
  		}
  	}
  `;
  