diff --git a/src/App.js b/src/App.js index de62d9c..7e97117 100644 --- a/src/App.js +++ b/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 = () => ( -
+
+
) diff --git a/src/components/molecules/Footer.js b/src/components/molecules/Footer.js new file mode 100644 index 0000000..485bfd5 --- /dev/null +++ b/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 ( +
+ © {year} {meta.title} — All Rights Reserved +
+ ) +} + +export default Footer diff --git a/src/components/molecules/Footer.scss b/src/components/molecules/Footer.scss new file mode 100644 index 0000000..f9e5148 --- /dev/null +++ b/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; + } +} diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 7e48059..3d37082 100644 --- a/src/components/molecules/Header.js +++ b/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 = () => ( -
-
- ␥ -

{meta.title}

-

{meta.tagline}

-
+class Header extends React.Component { + render() { + const minimal = this.props.minimal + const classes = (minimal ? 'header header--minimal' : 'header') - -
-) + return ( +
+ + ␥ +

{meta.title}

+

{meta.tagline}

+ + + +
+ ) + } +} + +Header.propTypes = { + minimal: PropTypes.bool +} export default Header diff --git a/src/components/molecules/Header.scss b/src/components/molecules/Header.scss index 34a980b..5f6014c 100644 --- a/src/components/molecules/Header.scss +++ b/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; + } + } } diff --git a/src/components/molecules/Social.scss b/src/components/molecules/Social.scss index 7984149..1d454bb 100644 --- a/src/components/molecules/Social.scss +++ b/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); diff --git a/src/components/organisms/Project.js b/src/components/organisms/Project.js index e1acbef..84511a8 100644 --- a/src/components/organisms/Project.js +++ b/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 ( -
- -

{title}

-

{description}

+ +
+
+ +

{title}

+

{description}

- {img} + {img} -
    - {Object.keys(links).map(key => ( -
  • - {key} -
    • - ))} -
- -
+
    + {Object.keys(links).map(key => ( +
  • + {key} +
    • + ))} +
+ +
+ ) } diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index 19d5b44..3648a84 100644 --- a/src/components/pages/Home.js +++ b/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 ( -
- +
-
- {projects.map(project => ( - - - -
-

{project.title}

-
- - - - ))} -
+
-
+
+ {projects.map(project => ( + + + +
+

{project.title}

+
+ + + + ))} +
+ +
+ ) } } diff --git a/src/components/pages/Home.scss b/src/components/pages/Home.scss index 8a14a4d..d7b8e90 100644 --- a/src/components/pages/Home.scss +++ b/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 { diff --git a/src/data/projects.json b/src/data/projects.json index 005f71a..75a08f9 100644 --- a/src/data/projects.json +++ b/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", diff --git a/src/index.scss b/src/index.scss index e98ac29..b424bb8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -97,5 +97,5 @@ svg { } .screen { - padding: $spacer / 2 0; + padding: $spacer; }