This commit is contained in:
Pat Dryburgh 2018-07-31 09:16:19 -07:00
parent f72eb69159
commit 649764eda4
9 changed files with 116 additions and 23 deletions

View File

@ -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

0
_data/menu.yml Normal file
View File

View File

@ -2,19 +2,38 @@
layout: default
---
{% assign menu = site.data.menu %}
<header class="site-masthead">
<h1>
{{ site.title }}
</h1>
<h2>
{{ site.description }}
</h2>
{% if site.title %}
<h1>
{{ site.title }}
</h1>
{% endif %}
{% if site.title %}
<h2>
{{ site.description }}
</h2>
{% endif %}
{% if menu %}
<nav class="site-navigation">
<ul>
{% for item in site.data.menu %}
<li>
<a href="{{ item.url | prepend: baseurl }}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
<main class="home">
<h1>
Contents<br><img src="{{ '/assets/images/divider.svg' | prepend: site.baseurl }}" alt="">
<h1 class="divided">
Contents
</h1>
<ul class="post-list">

View File

@ -8,7 +8,7 @@ layout: default
<article>
<h1 class="post-title">
<h1 class="post-title divided">
{{ page.title }}
</h1>

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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');
}

14
about.md Normal file
View File

@ -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.
![Christopher Hitchens](https://upload.wikimedia.org/wikipedia/commons/6/63/Christopher_Hitchens_2008-04-24_001.jpg)
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.