Add guide header

xorob0 · Nov 1, 2019 · acec5d6 · acec5d6
1 parent 72f155d
commit acec5d6
Show file tree

Hide file tree

Showing 9 changed files with 437 additions and 20 deletions.
diff --git a/components/guide-header/index.js b/components/guide-header/index.js
@@ -0,0 +1,18 @@
+import { AuthorImage, GuideAuthor, GuideDate, GuideMeta, GuideSubtitle, GuideTitle, HeaderWrap } from './style';
+
+const GuideHeader = (props) => (
+  <HeaderWrap className="border-bottom">
+    <GuideMeta>
+      <GuideAuthor href="https://github.com/kamranahmedse" target="_blank">
+        <AuthorImage src="/static/authors/kamranahmedse.jpeg" />
+        Kamran Ahmed
+      </GuideAuthor>
+      &middot;
+      <GuideDate>Wednesday, October 9th 2019</GuideDate>
+    </GuideMeta>
+    <GuideTitle>Design Patterns for Humans</GuideTitle>
+    <GuideSubtitle>An ultra-simplified explanation to design patterns</GuideSubtitle>
+  </HeaderWrap>
+);
+
+export default GuideHeader;
diff --git a/components/guide-header/style.js b/components/guide-header/style.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
+  padding: 80px 15px 45px;
+  text-align: center;
+`;
+
+export const GuideTitle = styled.h1`
+  font-weight: 700;
+  font-size: 46px;
+  margin: 12px 0;
+`;
+
+export const GuideSubtitle = styled.p`
+  margin-bottom: 0;
+  font-size: 16px;
+  color: #444;
+`;
+
+export const GuideMeta = styled.p`
+  margin-bottom: 0;
+  color: #757575;
+  font-size: 13px;
+  font-weight: 400;
+`;
+
+export const GuideDate = styled.span`
+  margin-left: 7px;
+`;
+export const GuideAuthor = styled.a`
+  margin-right: 7px;
+  font-weight: 500;
+  color: #101010;
+  
+  &:hover {
+    color: #101010;
+  }
+`;
+export const AuthorImage = styled.img`
+  width: 22px;
+  height: 22px;
+  border-radius: 100%;
+  margin-right: 10px;
+`;
diff --git a/components/mdx-components/index.js b/components/mdx-components/index.js
@@ -0,0 +1,3 @@
+const MdxComponents = {};
+
+export default MdxComponents;
diff --git a/components/page-footer/index.js b/components/page-footer/index.js
@@ -10,9 +10,7 @@ const PageFooter = () => (
             <div className="brand-detail">
               <Link href="/"><a className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a></Link>
               <span className="preposition">by</span>
-              <Link href="https://twitter.com/kamranahmedse">
-                <a target="_blank" className='follow-author'>@kamranahmedse</a>
-              </Link>
+              <a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a>
             </div>
             <div className="brand-explanation">
               <p>Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const MdxComponents = {};

		export default MdxComponents;