From 776869494ee6f2c699357deeaea8f846e0f5bf9f Mon Sep 17 00:00:00 2001 From: EChesters Date: Mon, 17 Apr 2017 13:04:32 +0100 Subject: [PATCH 1/4] Issue #18 - Added dummy text for About page - Needs actual text --- webpack/components/pages/About.jsx | 15 ++++++++++++--- webpack/copy/about.js | 5 +++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/webpack/components/pages/About.jsx b/webpack/components/pages/About.jsx index 9517fd1..636aa62 100644 --- a/webpack/components/pages/About.jsx +++ b/webpack/components/pages/About.jsx @@ -1,13 +1,22 @@ import React from 'react'; -import { PageHeader } from 'react-bootstrap-4'; +import { PageHeader, Grid, Row, Col } from 'react-bootstrap-4'; import { about } from '../../copy/about.js'; export default class About extends React.Component { render() { return (
- { about.title } -

{ about.lorem }

+ + + + { about.title } +

{ about.lorem }

+ +

{ about.subtitle }

+

{ about.lorem }

+ + +
); } diff --git a/webpack/copy/about.js b/webpack/copy/about.js index 59e83c8..38be520 100644 --- a/webpack/copy/about.js +++ b/webpack/copy/about.js @@ -1,4 +1,5 @@ export const about = { - title: 'About Draw My Life', - lorem: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum' + title: 'About Draw My Life', + lorem: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum', + subtitle: 'Our mission' }; From bd4d857a0f6c9509f4ad0a4c43417da6b8790f82 Mon Sep 17 00:00:00 2001 From: EChesters Date: Mon, 17 Apr 2017 16:46:15 +0100 Subject: [PATCH 2/4] Issue #18 - Added image to background [x] Removed unused background sass file --- src/_sass/_images.scss | 14 ++++++++++++++ src/_sass/background.scss | 2 -- src/css/main.scss | 5 ++++- webpack/components/pages/About.jsx | 28 ++++++++++++++++------------ 4 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 src/_sass/_images.scss delete mode 100644 src/_sass/background.scss diff --git a/src/_sass/_images.scss b/src/_sass/_images.scss new file mode 100644 index 0000000..2004910 --- /dev/null +++ b/src/_sass/_images.scss @@ -0,0 +1,14 @@ +img { + &.full-screen { + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } +} diff --git a/src/_sass/background.scss b/src/_sass/background.scss deleted file mode 100644 index 25fa51c..0000000 --- a/src/_sass/background.scss +++ /dev/null @@ -1,2 +0,0 @@ -body { -} diff --git a/src/css/main.scss b/src/css/main.scss index 2967fa4..36b9abd 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,4 +1,7 @@ --- +# These lines are for Jekyll --- -@import "background"; +@import + "images" +; diff --git a/webpack/components/pages/About.jsx b/webpack/components/pages/About.jsx index 636aa62..c1fcd91 100644 --- a/webpack/components/pages/About.jsx +++ b/webpack/components/pages/About.jsx @@ -1,22 +1,26 @@ import React from 'react'; -import { PageHeader, Grid, Row, Col } from 'react-bootstrap-4'; +import { PageHeader, Grid, Row, Col, Image } from 'react-bootstrap-4'; import { about } from '../../copy/about.js'; export default class About extends React.Component { render() { return ( -
- - - - { about.title } -

{ about.lorem }

+
+ Draw My Life team photo +
+ + + + { about.title } +

{ about.lorem }

-

{ about.subtitle }

-

{ about.lorem }

- - - +

{ about.subtitle }

+

{ about.lorem }

+ + + +
); } From d31002d51c74fb0fb77800e7c0ecfc5c8884f833 Mon Sep 17 00:00:00 2001 From: EChesters Date: Mon, 17 Apr 2017 18:27:49 +0100 Subject: [PATCH 3/4] Issue #18 - Added background image responsive to About page [x] Moved nav inside container --- src/_includes/head.html | 2 +- src/_layouts/default.html | 4 +++- src/_sass/_images.scss | 34 ++++++++++++++++++------------ src/_sass/_layout.scss | 3 +++ src/_sass/_mixins.scss | 6 ++++++ src/css/main.scss | 1 + webpack/components/Layout.jsx | 7 +++--- webpack/components/Nav.jsx | 2 +- webpack/components/pages/About.jsx | 18 ++++++++-------- 9 files changed, 49 insertions(+), 28 deletions(-) create mode 100644 src/_sass/_layout.scss create mode 100644 src/_sass/_mixins.scss diff --git a/src/_includes/head.html b/src/_includes/head.html index a15eac6..1b3c70a 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -7,7 +7,7 @@ {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - + diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 1a1b9e6..dcaa64e 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -7,7 +7,9 @@ {{ content }} - + + + diff --git a/src/_sass/_images.scss b/src/_sass/_images.scss index 2004910..9d539ed 100644 --- a/src/_sass/_images.scss +++ b/src/_sass/_images.scss @@ -1,14 +1,22 @@ -img { - &.full-screen { - min-height: 100%; - min-width: 100%; - height: auto; - width: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - } +.full-screen { + min-height: 100vh; + min-width: 100vw; + height: auto; + width: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 0; + background-position: top center; + background-repeat: no-repeat; + background-size: cover; + background-color: #fff; + z-index: -100; + overflow: auto; +} + +#about-page { + background-image: url('http://lorempixel.com/output/cats-q-c-1600-1000-9.jpg'); } diff --git a/src/_sass/_layout.scss b/src/_sass/_layout.scss new file mode 100644 index 0000000..d07c217 --- /dev/null +++ b/src/_sass/_layout.scss @@ -0,0 +1,3 @@ +html, body { + height: 100%; +} diff --git a/src/_sass/_mixins.scss b/src/_sass/_mixins.scss new file mode 100644 index 0000000..1032027 --- /dev/null +++ b/src/_sass/_mixins.scss @@ -0,0 +1,6 @@ +@mixin background-size($size) { + -webkit-background-size: $size; + -moz-background-size: $size; + -o-background-size: $size; + background-size: $size; +} diff --git a/src/css/main.scss b/src/css/main.scss index 36b9abd..61a1087 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -3,5 +3,6 @@ --- @import + "mixins", "images" ; diff --git a/webpack/components/Layout.jsx b/webpack/components/Layout.jsx index 0e12013..458151b 100644 --- a/webpack/components/Layout.jsx +++ b/webpack/components/Layout.jsx @@ -13,14 +13,15 @@ export default class Layout extends React.Component { render() { return (
-