header & footer

src/App.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import FadeIn from './components/atoms/FadeIn'
 import Routes from './Routes'
+import Footer from './components/molecules/Footer'
 
 const App = () => (
   <FadeIn>
-    <div className="app">
+    <div>
       <Routes />
+      <Footer />
     </div>
   </FadeIn>
 )

src/components/molecules/Footer.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import meta from '../../data/meta.json'
+import './Footer.css'
+
+const Footer = () => {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="footer">
+      <small>© {year} {meta.title} &mdash; All Rights Reserved</small>
+    </footer>
+  )
+}
+
+export default Footer

src/components/molecules/Footer.scss

@@ -0,0 +1,12 @@
+@import 'variables';
+
+.footer {
+    padding: $spacer;
+    text-align: center;
+    color: $brand-grey-light;
+
+    &,
+    small {
+        font-size: $font-size-mini;
+    }
+}

src/components/molecules/Header.js

@@ -1,18 +1,31 @@
 import React from 'react'
+import Link from 'react-router-dom/Link'
+import PropTypes from 'prop-types'
 import Social from './Social'
 import './Header.css'
 import meta from '../../data/meta.json'
 
-const Header = () => (
-  <header className="header">
-    <hgroup className="name">
-      <span className="header__logo">␥</span>
-      <h1 className="header__title">{meta.title}</h1>
-      <p className="header__description">{meta.tagline}</p>
-    </hgroup>
+class Header extends React.Component {
+  render() {
+    const minimal = this.props.minimal
+    const classes = (minimal ? 'header header--minimal' : 'header')
 
-    <Social />
-  </header>
-)
+    return (
+      <header className={classes}>
+        <Link className="header__name" to="/">
+          <span className="header__logo">␥</span>
+          <h1 className="header__title">{meta.title}</h1>
+          <p className="header__description">{meta.tagline}</p>
+        </Link>
+
+        <Social />
+      </header>
+    )
+  }
+}
+
+Header.propTypes = {
+  minimal: PropTypes.bool
+}
 
 export default Header

src/components/molecules/Header.scss

@@ -1,16 +1,39 @@
 @import 'variables';
 
 .header {
-    padding: $spacer / 2;
-    min-height: calc(100vh - #{$spacer});
+    padding: $spacer;
+    min-height: calc(100vh - #{$spacer * 3});
     display: flex;
     align-content: center;
     flex-wrap: wrap;
+    text-align: center;
+}
+
+.header--minimal {
+    min-height: 0;
+    text-align: left;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    justify-content: space-between;
+    margin-bottom: $spacer;
 
-    .name,
     .social {
-        width: 100%;
-        text-align: center;
+        margin-top: 0;
+        text-align: right;
+        justify-content: flex-end;
+    }
+
+    .social__link {
+        width: 1rem;
+        height: 1rem;
+        padding: $spacer / 8;
+        margin-left: $spacer / 4;
+        margin-right: $spacer / 4;
+
+        .icon {
+            width: .75rem;
+            height: .75rem;
+        }
     }
 }
 
@@ -20,20 +43,55 @@
     font-size: 3rem;
     color: $brand-grey-light;
     margin-bottom: $spacer / 2;
+
+    .header--minimal & {
+        margin: 0;
+        display: inline-block;
+        font-size: 2rem;
+        margin-top: -2rem;
+        margin-right: $spacer / 4;
+    }
 }
 
 .header__title,
 .header__description {
     display: inline-block;
     margin-bottom: 0;
+    transition: .2s ease-out;
 }
 
 .header__title {
     font-size: $font-size-h3;
     margin-right: $spacer / 2;
     color: $brand-main;
+
+    .header--minimal & {
+        font-size: $font-size-h4;
+    }
 }
 
 .header__description {
     font-size: $font-size-large;
+    color: $brand-grey;
+
+    .header--minimal & {
+        font-size: $font-size-small;
+    }
+}
+
+.header__name {
+    width: 100%;
+    pointer-events: none;
+
+    .header--minimal & {
+        pointer-events: all;
+    }
+
+    &:hover,
+    &:focus {
+        .header__title,
+        .header__description {
+            color: $brand-cyan;
+        }
+    }
 }

src/components/molecules/Social.scss

@@ -2,6 +2,9 @@
 
 .social {
     margin-top: $spacer;
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
 
 .social__link {
@@ -10,7 +13,9 @@
     background: $brand-grey-dimmed;
     padding: $spacer / 4;
     text-align: center;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 1.35rem;
     height: 1.35rem;
     box-shadow: 0 3px 5px rgba($brand-main, .1), 0 5px 16px rgba($brand-main, .1);

src/components/organisms/Project.js

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
+import Header from '../molecules/Header'
 import Content from '../atoms/Content'
 
 const Project = ({ project }) => {
@@ -9,22 +10,25 @@ const Project = ({ project }) => {
   const links = project.links
 
   return (
-    <main className="screen screen--project">
-      <Content>
-        <h1>{title}</h1>
-        <p>{description}</p>
+    <Fragment>
+      <Header minimal />
+      <main className="screen screen--project">
+        <Content>
+          <h1>{title}</h1>
+          <p>{description}</p>
 
-        {img}
+          {img}
 
-        <ul>
-          {Object.keys(links).map(key => (
-            <li key={key}>
-              <a href={links[key]}>{key}</a>
-            </li>
-          ))}
-        </ul>
-      </Content>
-    </main>
+          <ul>
+            {Object.keys(links).map(key => (
+              <li key={key}>
+                <a href={links[key]}>{key}</a>
+              </li>
+            ))}
+          </ul>
+        </Content>
+      </main>
+    </Fragment>
   )
 }
 

src/components/pages/Home.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import Link from 'react-router-dom/Link'
 import LazyLoad from 'react-lazyload'
 import Header from '../molecules/Header'
@@ -9,28 +9,30 @@ import './Home.css'
 class Home extends Component {
   render() {
     return (
-      <main className="screen screen--home">
-
+      <Fragment>
         <Header />
 
-        <div className="projects">
-            {projects.map(project => (
-              <LazyLoad key={project.slug} height={700} offset={200} once>
-                <FadeIn>
-                  <Link
-                    key={project.slug}
-                    to={{pathname: `/${project.slug}`}}
-                  >
-                    <article className="project">
-                      <h1 className="project__title">{project.title}</h1>
-                    </article>
-                  </Link>
-                </FadeIn>
-              </LazyLoad>
-            ))}
-        </div>
+        <main className="screen screen--home">
 
-      </main>
+          <div className="projects">
+              {projects.map(project => (
+                <LazyLoad key={project.slug} height={700} offset={200} once>
+                  <FadeIn>
+                    <Link
+                      key={project.slug}
+                      to={{pathname: `/${project.slug}`}}
+                    >
+                      <article className="project">
+                        <h1 className="project__title">{project.title}</h1>
+                      </article>
+                    </Link>
+                  </FadeIn>
+                </LazyLoad>
+              ))}
+          </div>
+
+        </main>
+      </Fragment>
     )
   }
 }

src/components/pages/Home.scss

@@ -9,6 +9,8 @@
     min-height: 100vh;
     position: relative;
     background-color: $brand-grey;
+    margin-left: -$spacer;
+    margin-right: -$spacer;
 }
 
 .project__title {

src/data/projects.json

@@ -7,7 +7,7 @@
     "links": {
       "Link": "https://oceanprotocol.com"
     },
-    "description": ""
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
   },
   {
     "title": "IPDB",
@@ -18,7 +18,7 @@
       "Link": "https://ipdb.io",
       "GitHub": "https://github.com/ipdb/website"
     },
-    "description": "Bla Bla Bla"
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
   },
   {
     "title": "9984 >> Summit 2017",

src/index.scss

@@ -97,5 +97,5 @@ svg {
 }
 
 .screen {
-    padding: $spacer / 2 0;
+    padding: $spacer;
 }