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 new file mode 100644 index 0000000..2c38faf --- /dev/null +++ b/src/_sass/_images.scss @@ -0,0 +1,21 @@ +.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; + @include background-size(cover); + 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 2967fa4..61a1087 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,4 +1,8 @@ --- +# These lines are for Jekyll --- -@import "background"; +@import + "mixins", + "images" +; diff --git a/webpack/components/pages/About.jsx b/webpack/components/pages/About.jsx index 9517fd1..e86026f 100644 --- a/webpack/components/pages/About.jsx +++ b/webpack/components/pages/About.jsx @@ -1,13 +1,25 @@ import React from 'react'; -import { PageHeader } 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 }

+
+
+ + + +
+ { 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' };