mirror of
https://github.com/metagov/govarch-website.git
synced 2025-06-26 03:42:43 +00:00
add menu
This commit is contained in:
Pat Dryburgh
31
README.md
31
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
|
||||
|
||||
|
||||
0
_data/menu.yml
Normal file
0
_data/menu.yml
Normal 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">
|
||||
|
||||
@ -8,7 +8,7 @@ layout: default
|
||||
|
||||
<article>
|
||||
|
||||
<h1 class="post-title">
|
||||
<h1 class="post-title divided">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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
14
about.md
Normal 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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
Reference in New Issue
Block a user