diff --git a/README.md b/README.md
index e613db6..cca56a5 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,31 @@ Or install it yourself as:
## Usage
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+### Home Layout
+
+The `home` layout presents a list of articles ordered chronologically. All articles are presented in one page, similar to a book's table of contents.
+
+The masthead of the home page is derived from the `title` and `description` set in your site's `_config.yml` file.
+
+#### Navigation
+
+To include navigation in your site's masthead:
+
+1. Create a `_data` directory in the root of your site.
+2. Add a `menu.yml` file to the `_data` directory.
+3. Use the following format to list your menu items:
+
+```
+- title: About
+ url: /about
+```
+
+Be sure to start your `url`s with a `/`.
+
+
+### Post Layout
+
+A sparsely decorated layout designed to present long-form writing in a manner that's pleasing to read.
## Contributing
@@ -38,10 +62,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/patdry
To set up your environment to develop this theme, run `bundle install`.
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
-
-When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
-To add a custom directory to your theme-gem, please edit the regexp in `hitchens.gemspec` accordingly.
+The theme is setup just like a normal Jekyll site. To test the theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
## License
diff --git a/_data/menu.yml b/_data/menu.yml
new file mode 100644
index 0000000..e69de29
diff --git a/_layouts/home.html b/_layouts/home.html
index 04e5822..ec6ec9b 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -2,19 +2,38 @@
layout: default
---
+{% assign menu = site.data.menu %}
+
-
- Contents
+
+ Contents
diff --git a/_layouts/post.html b/_layouts/post.html
index df21050..ff3c893 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,7 +8,7 @@ layout: default
-
+
{{ page.title }}
diff --git a/_sass/_article.scss b/_sass/_article.scss
index 95b0251..eaacc67 100644
--- a/_sass/_article.scss
+++ b/_sass/_article.scss
@@ -2,6 +2,7 @@ article > * {
margin-left: auto;
margin-right: auto;
max-width: 36rem;
+ padding: 0 $spacing-unit;
}
article > h1 {
@@ -11,10 +12,6 @@ article > h1 {
text-align: center;
}
-h1.post-title:after {
- @include divider;
-}
-
article p {
text-align: justify;
text-indent: 1.5em;
@@ -26,6 +23,14 @@ article h2 + p {
text-indent: 0;
}
+article p > img {
+ margin-left: -1em;
+ display: flex;
+ max-width: 100%;
+ height: auto;
+ margin: 2em auto;
+}
+
.article-meta {
margin-bottom: 2em;
margin-top: 2em;
@@ -34,6 +39,8 @@ article h2 + p {
.back-link {
display: inline-block;
+ font-size: .75em;
padding: $spacing-unit;
text-decoration: none;
+ text-transform: uppercase;
}
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
index eb6fccd..834bea9 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -77,8 +77,12 @@ hr {
}
}
+.divided:after {
+ @include divider;
+}
+
.home {
- max-width: 30em;
+ max-width: 24em;
margin: auto;
padding: ($spacing-unit * 4) $spacing-unit;
}
@@ -86,6 +90,7 @@ hr {
.home h1 {
font-size: 2em;
padding: 2em 0;
+ margin-bottom: 0;
text-align: center;
}
diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
index 3fc3ea3..0063d60 100644
--- a/_sass/_masthead.scss
+++ b/_sass/_masthead.scss
@@ -1,14 +1,14 @@
.site-masthead {
background: $brand-color;
- min-height: 100vh;
box-sizing: border-box;
+ min-height: 100vh;
+ padding: $spacing-unit * 2;
+ position: relative;
display: flex;
flex-direction: column;
- align-items: center;
justify-content: center;
text-align: center;
- padding: $spacing-unit * 2;
}
.site-masthead h1 {
@@ -26,4 +26,31 @@
@media (min-width: $on-tablet) {
font-size: 3em;
}
+}
+
+.site-navigation {
+ position: absolute;
+ bottom: .75em;
+ left: 2em;
+ right: 2em;
+}
+
+.site-navigation ul {
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.site-navigation li {
+ list-style: none;
+ font-size: .875em;
+ font-variant: small-caps;
+ margin: 0;
+}
+
+.site-navigation a {
+ display: block;
+ padding: .25em .5em;
+ text-decoration: none;
}
\ No newline at end of file
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
index f2238c8..557d872 100644
--- a/_sass/_mixins.scss
+++ b/_sass/_mixins.scss
@@ -3,6 +3,6 @@
display: block;
width: 152px;
height: 12px;
- margin: 1em auto 0;
+ margin: .5em auto 0;
background-image: url('/assets/images/divider.svg');
}
\ No newline at end of file
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..d01c432
--- /dev/null
+++ b/about.md
@@ -0,0 +1,14 @@
+---
+layout: post
+title: About
+---
+
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+
+
+
+Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.
\ No newline at end of file