├── .gitignore ├── Gemfile ├── README.md ├── _config.yml ├── _includes ├── footer.html ├── github.html ├── head.html ├── header.html ├── page_heading.html ├── post_block.html ├── previous-next.html ├── previous-next_has-categories.html └── twitter.html ├── _layouts ├── category-post.html ├── category_index.html ├── default.html ├── home.html ├── page.html └── post.html ├── _posts ├── 2016-08-05-welcome-to-jekyll.md ├── 2016-08-07-bacoms-are-delicious.md ├── 2016-08-3-potatoes.md └── 2016-09-04-markdown-sample.md ├── _sass ├── _base.scss ├── _components.scss ├── _theme-light.scss ├── _utilities.scss └── _variables.scss ├── about.md ├── assets └── style.scss ├── index.html ├── jekyll-athena.gemspec └── writing.html /.gitignore: -------------------------------------------------------------------------------- 1 | .bundle 2 | .sass-cache 3 | _site 4 | .DS_Store 5 | Gemfile.lock 6 | *.gem 7 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gemspec 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :construction: WIP :construction: Athena Jekyll Theme 2 | 3 | A simple and elegant theme for Jekyll and GitHub Pages. 4 | 5 | screenshot 6 | 7 | ### Features: 8 | * Mobile-first design ensures this theme performs fastest on mobile while scaling elegantly to desktop-size screens. 9 | * Designed for blogs and sites heavy on written content, with bold typography styles, homepage summaries, and previous/next snippets. 10 | * Supports a wide range of HTML elements and markdown. 11 | * Flexible styles that can be reused for customization without adding additional CSS. 12 | * Dynamically generated navigation links. See docs for adding pages with specific post category for-loops. 13 | 14 | ## Installation 15 | 16 | Add this line to your Jekyll site's Gemfile: 17 | 18 | ```ruby 19 | gem "jekyll-athena" 20 | ``` 21 | 22 | And add this line to your Jekyll site: 23 | 24 | ```yaml 25 | theme: jekyll-athena 26 | ``` 27 | 28 | And then execute: 29 | 30 | $ bundle 31 | 32 | Or install it yourself as: 33 | 34 | $ gem install jekyll-athena 35 | 36 | ## Contributing 37 | 38 | Bug reports and pull requests are welcome on GitHub at https://github.com/broccolini/athena. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. 39 | 40 | ## Development 41 | 42 | To set up your environment to develop this theme, run `bundle install`. 43 | 44 | You theme is setup just like a normal Jelyll 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. 45 | 46 | When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. 47 | 48 | ## License 49 | 50 | The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). 51 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole site, values 4 | # which you are expected to set up once and rarely edit after that. If you find 5 | # yourself editing these this file very often, consider using Jekyll's data files 6 | # feature for the data you need to update frequently. 7 | # 8 | # For technical reasons, this file is *NOT* reloaded automatically when you use 9 | # 'jekyll serve'. If you change this file, please restart the server process. 10 | 11 | # Site settings 12 | # These are used to personalize your new site. If you look in the HTML files, 13 | # you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on. 14 | # You can create any custom variable you would like, and they will be accessible 15 | # in the templates via {{ site.myvariable }}. 16 | title: Athena Jekyll Theme 17 | description: A simple and elegant theme for Jekyll and GitHub Pages. 18 | # baseurl: "/athena" # the subpath of your site, e.g. /blog 19 | url: "http://broccolini.net" # the base hostname & protocol for your site 20 | github_repo: athena # the GitHub repo name for your project 21 | github_username: broccolini 22 | 23 | # Optional social link, you can choose from the following options: 24 | # twitter (default), instagram, medium, or dribbble 25 | social_link: twitter 26 | social_username: broccolini 27 | 28 | # Set theme color here 29 | # Choose from: black (default), blue, gray, magenta, orange, red, white, and yellow. 30 | theme_color: light 31 | 32 | # Build settings 33 | markdown: kramdown 34 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

This project is maintained by {{ site.github_username }}

4 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /_includes/github.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | {% assign user_url = site.url | append: site.baseurl %} 10 | {% assign full_base_url = user_url | default: site.github.url %} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 10 |
11 | 28 |
29 |
30 | -------------------------------------------------------------------------------- /_includes/page_heading.html: -------------------------------------------------------------------------------- 1 |
2 |

{{ page.title }}

3 |
4 |
5 |
6 |
7 | -------------------------------------------------------------------------------- /_includes/post_block.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | {{ post.title }} 5 |

6 | {{ post.date | date: "%b %-d, %Y" }} 7 |

{{ post.content | strip_html | truncatewords:30 }}

8 |
9 | -------------------------------------------------------------------------------- /_includes/previous-next.html: -------------------------------------------------------------------------------- 1 | 2 | {% assign user_url = site.url | append: site.baseurl %} 3 | {% assign full_base_url = user_url | default: site.github.url %} 4 | {% if page.previous.url %} 5 |
6 | 7 | Previous 8 |

{{ page.previous.title }}

9 |

{{ page.previous.content | strip_html | truncatewords:20 }}

10 | 11 |
12 | {% endif %} 13 | {% if page.next.url %} 14 |
15 | 16 | Next 17 |

{{ page.next.title }}

18 |

{{ page.next.content | strip_html | truncatewords:20 }}

19 | 20 |
21 | {% endif %} 22 | -------------------------------------------------------------------------------- /_includes/previous-next_has-categories.html: -------------------------------------------------------------------------------- 1 | 2 | {% if page.categories %} 3 | {% assign category = page.categories[0] %} 4 | {% assign posts = site.categories[category] %} 5 | {% for post in posts %} 6 | {% if post.url == page.url %} 7 | {% assign post_index0 = forloop.index0 %} 8 | {% assign post_index1 = forloop.index %} 9 | {% endif %} 10 | {% endfor %} 11 | {% for post in posts %} 12 | {% if post_index0 == forloop.index %} 13 | {% assign next_post = post %} 14 | {% endif %} 15 | {% if post_index1 == forloop.index0 %} 16 | {% assign prev_post = post %} 17 | {% endif %} 18 | {% endfor %} 19 | {% endif %} 20 | {% assign user_url = site.url | append: site.baseurl %} 21 | {% assign full_base_url = user_url | default: site.github.url %} 22 | {% if prev_post %} 23 |
24 | 25 | Previous 26 |

{{ prev_post.title }}

27 |

{{ page.previous.content | strip_html | truncatewords:20 }}

28 | 29 |
30 | {% endif %} 31 | {% if next_post %} 32 |
33 | 34 | Next 35 |

{{ next_post.title }}

36 |

{{ page.next.content | strip_html | truncatewords:20 }}

37 | 38 |
39 | {% endif %} 40 | -------------------------------------------------------------------------------- /_includes/twitter.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /_layouts/category-post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |

{{ page.title }}

8 |
9 |

10 |
11 |
12 |
13 |
14 | 15 |
16 | {{ content }} 17 |
18 |
19 | 20 | 21 |
22 | {% include previous-next_has-categories.html %} 23 |
24 | -------------------------------------------------------------------------------- /_layouts/category_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | --- 4 | 5 | {% if page.category_name %} 6 | {% assign category_name = page.category_name %} 7 | {% endif %} 8 | 9 |
10 | {% for post in site.categories[category_name] %} 11 | {% include post_block.html %} 12 | {% endfor %} 13 |
14 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | 9 | {% include header.html %} 10 | 11 |
12 | {{ content }} 13 |
14 | 15 | {% include footer.html %} 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 |
13 |
    14 | {% for my_page in site.pages %} 15 | {% if my_page.title %} 16 |
  • 17 | {{ my_page.title }} 18 |
    • 19 | {% endif %} 20 | {% endfor %} 21 |
22 |
23 | 24 |
25 |

{{ site.title }}

26 | 27 |
28 |

{{ site.description }}

29 |
30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 | {% for post in site.posts %} 38 | {% include post_block.html %} 39 | {% endfor %} 40 |
41 | 42 |
43 | 44 | {% include footer.html %} 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 | {% include page_heading.html %} 7 | 8 |
9 | {{ content }} 10 |
11 |
12 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |

{{ page.title }}

8 |
9 |

10 |
11 |
12 |
13 |
14 | 15 |
16 | {{ content }} 17 |
18 |
19 | 20 |
21 | {% include previous-next.html %} 22 |
23 | -------------------------------------------------------------------------------- /_posts/2016-08-05-welcome-to-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category-post 3 | title: "Welcome to Jekyll!" 4 | date: 2016-08-05 20:20:56 -0400 5 | categories: writing 6 | --- 7 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. 8 | 9 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. 10 | 11 | Jekyll also offers powerful support for code snippets: 12 | 13 | ``` 14 | def print_hi(name) 15 | puts "Hi, #{name}" 16 | end 17 | print_hi('Tom') 18 | #=> prints 'Hi, Tom' to STDOUT. 19 | ``` 20 | 21 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. 22 | 23 | [jekyll-docs]: http://jekyllrb.com/docs/home 24 | [jekyll-gh]: https://github.com/jekyll/jekyll 25 | [jekyll-talk]: https://talk.jekyllrb.com/ 26 | -------------------------------------------------------------------------------- /_posts/2016-08-07-bacoms-are-delicious.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Bacoms are delicious" 4 | date: 2016-08-07 5 | --- 6 | 7 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. 8 | 9 | ```html 10 |
11 | test 12 |
13 | ``` 14 | 15 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 16 | 17 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 18 | -------------------------------------------------------------------------------- /_posts/2016-08-3-potatoes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category-post 3 | title: "Potatoes" 4 | date: 2015-11-25 5 | categories: writing 6 | --- 7 | 8 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 9 | 10 | # Heading 1 11 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 12 | 13 | ## Heading 2 14 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 15 | 16 | ### Heading 3 17 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 18 | 19 | #### Heading 4 20 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 21 | 22 | ##### Heading 5 23 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 24 | 25 | ###### Heading 6 26 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 27 | 28 | ```html 29 |
30 | test 31 |
32 | ``` 33 | -------------------------------------------------------------------------------- /_posts/2016-09-04-markdown-sample.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Markdown sample" 4 | date: 2016-09-04 5 | --- 6 | 7 | ### Markdown test document 8 | 9 | Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over). 10 | 11 | There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. 12 | 13 | There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. 14 | 15 | > There should be no margin above this first sentence. 16 | > 17 | > Blockquotes should be a lighter gray with a gray border along the left side. 18 | > 19 | > There should be no margin below this final sentence. 20 | 21 | # Heading 1 22 | 23 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 24 | 25 | ## Heading 2 26 | 27 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 28 | 29 | 30 | > This is a blockquote following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 31 | 32 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 33 | 34 | 35 | ### Heading 3 36 | 37 | ``` 38 | This is a code block following a Heading. 39 | ``` 40 | 41 | #### Heading 4 42 | 43 | * This is an unordered list following a Heading. 44 | * This is an unordered list following a Heading. 45 | * This is an unordered list following a Heading. 46 | 47 | ##### Heading 5 48 | 49 | 1. This is an ordered list following a Heading. 50 | 2. This is an ordered list following a Heading. 51 | 3. This is an ordered list following a Heading. 52 | 53 | ###### Heading 6 54 | 55 | | What | Follows | 56 | |-----------|-----------------| 57 | | A table | A Heading | 58 | | A table | A Heading | 59 | | A table | A Heading | 60 | 61 | ---------------- 62 | 63 | There's a horizontal rule above and below this. 64 | 65 | ---------------- 66 | 67 | Here is an unordered list: 68 | 69 | * Salt-n-Pepa 70 | * Bel Biv DeVoe 71 | * Kid 'N Play 72 | 73 | And an ordered list: 74 | 75 | 1. Michael Jackson 76 | 2. Michael Bolton 77 | 3. Michael Bublé 78 | 79 | And a nested list: 80 | 81 | * Jackson 5 82 | * Michael 83 | * Tito 84 | * Jackie 85 | * Marlon 86 | * Jermaine 87 | * TMNT 88 | * Leonardo 89 | * Michelangelo 90 | * Donatello 91 | * Raphael 92 | 93 | Definition lists can be used with HTML syntax. Definition terms are bold and italic. 94 | 95 |
96 |
Name
97 |
Godzilla
98 |
Born
99 |
1952
100 |
Birthplace
101 |
Japan
102 |
Color
103 |
Green
104 |
105 | 106 | ---------------- 107 | 108 | Tables should have bold headings and alternating shaded rows. 109 | 110 | | Artist | Album | Year | 111 | |-------------------|-----------------|------| 112 | | Michael Jackson | Thriller | 1982 | 113 | | Prince | Purple Rain | 1984 | 114 | | Beastie Boys | License to Ill | 1986 | 115 | 116 | If a table is too wide, it should condense down and/or scroll horizontally. 117 | 118 | | Artist | Album | Year | Label | Awards | Songs | 119 | |-------------------|-----------------|------|-------------|----------|-----------| 120 | | Michael Jackson | Thriller | 1982 | Epic Records | Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical | Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life | 121 | | Prince | Purple Rain | 1984 | Warner Brothers Records | Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal | Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain | 122 | | Beastie Boys | License to Ill | 1986 | Mercury Records | noawardsbutthistablecelliswide | Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill | 123 | 124 | ---------------- 125 | 126 | Code snippets like `var foo = "bar";` can be shown inline. 127 | 128 | Also, `this should vertically align` ~~`with this`~~ ~~and this~~. 129 | 130 | Code can also be shown in a block element. 131 | ```` 132 | var foo = "bar"; 133 | ```` 134 | 135 | Code can also use syntax highlighting. 136 | ````Javascript 137 | var foo = "bar"; 138 | ```` 139 | 140 | ``` 141 | Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. 142 | ``` 143 | 144 | ```Javascript 145 | var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long."; 146 | ``` 147 | 148 | Inline code inside table cells should still be distinguishable. 149 | 150 | | Language | Code | 151 | |-------------|--------------------| 152 | | Javascript | `var foo = "bar";` | 153 | | Ruby | `foo = "bar"` | 154 | 155 | ---------------- 156 | 157 | Small images should be shown at their actual size. 158 | 159 | ![](http://placekitten.com/g/300/200/) 160 | 161 | Large images should always scale down and fit in the content container. 162 | 163 | ![](http://placekitten.com/g/1200/800/) 164 | 165 | ``` 166 | This is the final element on the page and there should be no margin below this. 167 | ``` 168 | 169 | 170 | ## License 171 | 172 | [MIT](./LICENSE) © [GitHub](https://github.com/) 173 | 174 | [primer-css]: https://github.com/primer/primer 175 | [docs]: http://primercss.io/ 176 | [npm]: https://www.npmjs.com/ 177 | [install-npm]: https://docs.npmjs.com/getting-started/installing-node 178 | [sass]: http://sass-lang.com/ 179 | -------------------------------------------------------------------------------- /_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | 5 | * { 6 | box-sizing: border-box !important; 7 | margin: 0; } 8 | 9 | input, 10 | select, 11 | textarea, 12 | button { 13 | font-family: inherit; 14 | font-size: inherit; 15 | line-height: inherit; 16 | } 17 | 18 | 19 | body, h1, h2, h3, h4, h5, h6, 20 | p, blockquote, pre, hr, 21 | dl, dd, ol, ul, figure { 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | 27 | /** 28 | * Basic styling 29 | */ 30 | body { 31 | font-family: $body-font-family; 32 | font-size: $body-font-size; 33 | line-height: 1.5; 34 | color: $color-body-text; 35 | background-color: $color-background; 36 | } 37 | 38 | p { 39 | margin-top: 0; 40 | margin-bottom: 0.5em; 41 | } 42 | 43 | h1, h2, h3, h4, h5, h6 { 44 | margin-top: 1em; 45 | margin-bottom: 0.25em; 46 | } 47 | 48 | h1, .h1 { font-size: $h1-size; } 49 | h2, .h2 { font-size: $h2-size; } 50 | h3, .h3 { font-size: $h3-size; } 51 | h4, .h4 { font-size: $h4-size; } 52 | h5, .h5 { font-size: $h5-size; } 53 | h6, .h6 { font-size: $h6-size; text-transform: uppercase; letter-spacing: 0.02em; } 54 | 55 | a { 56 | color: inherit; 57 | text-decoration: none; 58 | padding-bottom: 1px; 59 | border-bottom: 1px solid currentColor; 60 | } 61 | 62 | a:hover { 63 | color: $color-primary-link; 64 | text-decoration: none; 65 | border-bottom: 1px dotted; 66 | } 67 | -------------------------------------------------------------------------------- /_sass/_components.scss: -------------------------------------------------------------------------------- 1 | // Styling markdown output 2 | 3 | // Code formatting 4 | pre { 5 | border-left: $spacer-1 solid $color-border; 6 | margin: $spacer-3 0; 7 | padding-left: 16px; 8 | width: (9 / 12 * 100%); // matches col-9 9 | overflow-x: auto; 10 | } 11 | 12 | code { 13 | color: $color-code; 14 | font-size: $body-font-size; 15 | padding: 1px 4px; 16 | } 17 | 18 | 19 | .prose { 20 | 21 | p, ol, ul { 22 | font-size: $prose-font-size; 23 | margin-bottom: 1em; 24 | width: 100%; 25 | 26 | // @media (min-width: $breakpoint-lg) { 27 | // width: (10 / 12 * 100%); // matches col-10 28 | // } 29 | 30 | } 31 | 32 | ul, ol { 33 | padding-left: 40px; 34 | } 35 | 36 | li { 37 | margin-bottom: 0.5em; 38 | 39 | ul li, ol li { 40 | margin-bottom: 0; 41 | } 42 | } 43 | 44 | img { 45 | 46 | max-width: 100%; 47 | 48 | // @media (min-width: $breakpoint-lg) { 49 | // max-width: (12 / 10 * 100%); // make image fill width of container on desktop 50 | // } 51 | 52 | } 53 | 54 | blockquote { 55 | line-height: 1.375; 56 | padding-left: 20px; 57 | margin: 40px 0 40px -16px; 58 | border-left: $spacer-1 solid $color-border; 59 | font-style: italic; 60 | 61 | p { 62 | font-size: 24px; 63 | } 64 | 65 | @media (min-width: $breakpoint-lg) { 66 | padding-left: $spacer-3; 67 | margin: $spacer-4 0 $spacer-4 -40px; 68 | max-width: (11 / 10 * 100%); 69 | 70 | p { 71 | font-size: 32px; 72 | } 73 | 74 | } 75 | 76 | } 77 | 78 | hr { 79 | color: $color-body-text; 80 | border-style: solid; 81 | border-width: thin; 82 | margin-top: 0.5em; 83 | margin-bottom: 0.5em; 84 | } 85 | 86 | dt { 87 | font-weight: bold; 88 | font-style: italic; 89 | line-height: 1.25; 90 | } 91 | 92 | dd { 93 | font-style: italic; 94 | margin-bottom: 0.5em; 95 | } 96 | 97 | // Markdown tables 98 | table { 99 | border-collapse: collapse; 100 | display: block; 101 | width: 100%; 102 | margin-bottom: 1.5em; 103 | overflow: auto; 104 | // For Firefox to horizontally scroll wider tables. 105 | word-break: normal; 106 | word-break: keep-all; 107 | 108 | th { 109 | font-weight: bold; 110 | text-align: left; 111 | } 112 | 113 | th, 114 | td { 115 | padding: $spacer-2 $spacer-3 $spacer-2 2px; 116 | border-top: 1px solid $color-body-text; 117 | border-bottom: 1px solid $color-body-text; 118 | } 119 | 120 | tr { 121 | border-top: 1px solid $color-body-text; 122 | } 123 | 124 | tr th { 125 | border-top: 2px solid $color-body-text; 126 | border-bottom: 2px solid $color-body-text; 127 | } 128 | } 129 | 130 | } 131 | -------------------------------------------------------------------------------- /_sass/_theme-light.scss: -------------------------------------------------------------------------------- 1 | // White theme 2 | 3 | // Color variables 4 | $black: #2B2826; 5 | $gray-dark: #423F38; 6 | $gray: #A09992; 7 | $gray-light: #D7D5D1; 8 | $white: #fff; 9 | $burgundy: #B54545; 10 | // Config 11 | $color-background: $white !default; 12 | $color-foreground: $black !default; 13 | $color-title: $black !default; 14 | $color-body-text: $black !default; 15 | $color-text-accent: $gray-dark !default; 16 | $color-code: $gray-dark !default; 17 | $color-nav-link: $black !default; 18 | $color-primary-link: $black !default; 19 | $color-primary-underline: $gray !default; 20 | $color-border: $gray-light !default; 21 | 22 | 23 | // Import sass partials (used in all themes) 24 | @import 25 | "variables", 26 | "base", 27 | "components", 28 | "utilities" 29 | ; 30 | -------------------------------------------------------------------------------- /_sass/_utilities.scss: -------------------------------------------------------------------------------- 1 | /* Type utilities */ 2 | .h0 { 3 | font-size: $h0-mobile; 4 | line-height: 1.0125; 5 | margin-top: 0.85em; 6 | word-wrap: break-word; 7 | 8 | @media (min-width: $breakpoint-lg) { 9 | font-size: $h0-desktop; 10 | } 11 | } 12 | 13 | .text-right { text-align: right; } 14 | 15 | .no-underline, .no-underline-hover { 16 | text-decoration: none; 17 | border-bottom: none; 18 | } 19 | 20 | .no-underline-hover { 21 | 22 | &:hover { 23 | text-decoration: none !important; 24 | border-bottom: none !important; 25 | } 26 | } 27 | 28 | 29 | 30 | // Link styles for navigation 31 | .link-primary { 32 | font-weight: bold; 33 | text-decoration: none; 34 | border-bottom: 2px solid currentColor; 35 | padding-bottom: 1px; 36 | 37 | &:hover { 38 | color: $color-primary-link; 39 | text-decoration: none; 40 | border-bottom: 2px dotted; 41 | } 42 | } 43 | 44 | .bold { font-weight: bold; } 45 | .italic { font-style: italic; } 46 | .uppercase { text-transform: uppercase; } 47 | 48 | .lh-condensed { line-height: 1.25; } 49 | 50 | .list-reset { 51 | list-style: none; 52 | padding-left: 0; 53 | } 54 | 55 | /* Border utilities */ 56 | .border-bottom-thick { border-bottom: 2px solid; border-color: currentColor; } 57 | .border-bottom-thin { border-bottom: 1px solid; border-color: currentColor; } 58 | .border-top-thick { border-top: 2px solid; border-color: currentColor; } 59 | .border-top-thin { border-top: 1px solid; border-color: currentColor; } 60 | .border-0 { border: 0; } 61 | 62 | 63 | /* Theme color utilities */ 64 | .header-background { background-color: $color-background; } 65 | .header-border { border-color: $color-foreground; } 66 | .header-title { color: $color-title; } 67 | .header-text { color: $color-foreground; } 68 | .header-social { fill: $color-foreground; } 69 | .header-link:hover { color: $color-nav-link !important; } // used for navigation links on homepage 70 | .text-accent { color: $color-text-accent; } // used for date in post list and home link 71 | 72 | /* Layout utilities */ 73 | .container { max-width: $container-width; } 74 | 75 | .col-1 { width: (1 / 12 * 100%); } 76 | .col-2 { width: (2 / 12 * 100%); } 77 | .col-3 { width: (3 / 12 * 100%); } 78 | .col-4 { width: (4 / 12 * 100%); } 79 | .col-5 { width: (5 / 12 * 100%); } 80 | .col-6 { width: (6 / 12 * 100%); } 81 | .col-7 { width: (7 / 12 * 100%); } 82 | .col-8 { width: (8 / 12 * 100%); } 83 | .col-9 { width: (9 / 12 * 100%); } 84 | .col-10 { width: (10 / 12 * 100%); } 85 | .col-11 { width: (11 / 12 * 100%); } 86 | .col-12 { width: 100%; } 87 | 88 | @media (max-width: $breakpoint-lg) { 89 | .sm-width-full { width: 100% !important; } 90 | } 91 | 92 | .block { display: block !important; } 93 | .inline-block { display: inline-block !important; } 94 | 95 | .absolute { position: absolute; } 96 | .fixed { position: fixed; } 97 | 98 | .top-0 { top: 0; } 99 | .right-0 { right: 0; } 100 | .left-0 { left: 0; } 101 | 102 | .table { display: table !important; } 103 | 104 | .left { float: left; } 105 | .right { float: right; } 106 | 107 | 108 | // Responsive layout 109 | 110 | @media (min-width: $breakpoint-lg) { 111 | 112 | .right-lg { float: right !important; } 113 | .left-lg { float: left !important; } 114 | 115 | .absolute-lg { position: absolute; } 116 | 117 | .block-lg { display: block !important; } 118 | .inline-block-lg { display: inline-block; } 119 | 120 | } 121 | 122 | @media (max-width: $breakpoint-lg) { 123 | .hide-sm { display: none !important; } 124 | } 125 | 126 | 127 | .clearfix:before, 128 | .clearfix:after { 129 | content: " "; 130 | display: table 131 | } 132 | .clearfix:after { clear: both } 133 | 134 | .align-middle { vertical-align: middle; } 135 | 136 | /* Padding */ 137 | .px-0 { padding-left: 0; padding-right: 0 } 138 | .py-0 { padding-top: 0; padding-bottom: 0 } 139 | 140 | .px-1 { padding-left: $spacer-1; padding-right: $spacer-1 } 141 | .py-1 { padding-top: $spacer-1; padding-bottom: $spacer-1 } 142 | 143 | .px-2 { padding-left: $spacer-2; padding-right: $spacer-2; } 144 | .py-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; } 145 | 146 | .px-3 { padding-left: $spacer-3; padding-right: $spacer-3; } 147 | .py-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; } 148 | 149 | .px-4 { padding-left: $spacer-4; padding-right: $spacer-4; } 150 | .py-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; } 151 | 152 | /* Margin */ 153 | .mx-auto { margin-left: auto; margin-right: auto; } 154 | 155 | .mt-0 { margin-top: 0; } 156 | .mr-0 { margin-right: 0; } 157 | .mb-0 { margin-bottom: 0; } 158 | .ml-0 { margin-left: 0; } 159 | 160 | .mt-1 { margin-top: $spacer-1; } 161 | .mr-1 { margin-right: $spacer-1; } 162 | .mb-1 { margin-bottom: $spacer-1; } 163 | .ml-1 { margin-left: $spacer-1; } 164 | 165 | .mt-2 { margin-top: $spacer-2; } 166 | .mr-2 { margin-right: $spacer-2; } 167 | .mb-2 { margin-bottom: $spacer-2; } 168 | .ml-2 { margin-left: $spacer-2; } 169 | 170 | .mt-3 { margin-top: $spacer-3; } 171 | .mr-3 { margin-right: $spacer-3; } 172 | .mb-3 { margin-bottom: $spacer-3; } 173 | .ml-3 { margin-left: $spacer-3; } 174 | 175 | .mt-4 { margin-top: $spacer-4; } 176 | .mr-4 { margin-right: $spacer-4; } 177 | .mb-4 { margin-bottom: $spacer-4; } 178 | .ml-4 { margin-left: $spacer-4; } 179 | 180 | // Responsive margin 181 | @media (min-width: $breakpoint-lg) { 182 | .mx-lg-auto { margin-left: auto; margin-right: auto; } 183 | 184 | .mt-lg-0 { margin-top: 0; } 185 | .mr-lg-0 { margin-right: 0; } 186 | .mb-lg-0 { margin-bottom: 0; } 187 | .ml-lg-0 { margin-left: 0; } 188 | 189 | .mt-lg-1 { margin-top: $spacer-1; } 190 | .mr-lg-1 { margin-right: $spacer-1; } 191 | .mb-lg-1 { margin-bottom: $spacer-1; } 192 | .ml-lg-1 { margin-left: $spacer-1; } 193 | 194 | .mt-lg-2 { margin-top: $spacer-2; } 195 | .mr-lg-2 { margin-right: $spacer-2; } 196 | .mb-lg-2 { margin-bottom: $spacer-2; } 197 | .ml-lg-2 { margin-left: $spacer-2; } 198 | 199 | .mt-lg-3 { margin-top: $spacer-3; } 200 | .mr-lg-3 { margin-right: $spacer-3; } 201 | .mb-lg-3 { margin-bottom: $spacer-3; } 202 | .ml-lg-3 { margin-left: $spacer-3; } 203 | 204 | .mt-lg-4 { margin-top: $spacer-4; } 205 | .mr-lg-4 { margin-right: $spacer-4; } 206 | .mb-lg-4 { margin-bottom: $spacer-4; } 207 | .ml-lg-4 { margin-left: $spacer-4; } 208 | } 209 | -------------------------------------------------------------------------------- /_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Font family 3 | $body-font-family: Athelas, Palatino, Georgia, serif; 4 | $body-font-size: 16px; 5 | $prose-font-size: 24px; 6 | 7 | 8 | // Type scale 9 | $h0-mobile: 48px; 10 | $h0-desktop: 96px; 11 | 12 | $h1-size: 40px !default; 13 | $h2-size: 32px !default; 14 | $h3-size: 24px !default; 15 | $h4-size: 20px !default; 16 | $h5-size: 16px !default; 17 | $h6-size: 12px !default; 18 | 19 | // Container width 20 | $container-width: 52em; 21 | 22 | // Large breakpoint 23 | $breakpoint-lg: 52em; 24 | 25 | // Spacing unit 26 | $spacer: 8px !default; 27 | 28 | // Spacing scale 29 | $spacer-1: $spacer !default; // 8px 30 | $spacer-2: ($spacer * 2) !default; // 16px 31 | $spacer-3: ($spacer * 4) !default; // 32px 32 | $spacer-4: ($spacer * 8) !default; // 64px 33 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | A simple and elegant theme for Jekyll and GitHub Pages. 8 | 9 | ### Features: 10 | * Mobile-first design ensures this theme performs fastest on mobile while scaling elegantly to desktop-size screens. 11 | * Designed for blogs and sites heavy on written content, with bold typography styles, homepage summaries, and previous/next snippets. 12 | * Supports a wide range of HTML elements and markdown. 13 | * Flexible styles that can be reused for customization without adding additional CSS. 14 | * Dynamically generated navigation links. See docs below for adding pages with specific post category for-loops. 15 | 16 | ## Themes 17 | This theme comes in two color variations. The default is set to the `light` theme. To change the theme color, add `theme_color:` to your `config.yml` file with the color you wish to use. Example: `theme_color: dark`. 18 | 19 | 23 | 24 | 25 | ## Installation 26 | 27 | Add this line to your Jekyll site's Gemfile: 28 | 29 | ```ruby 30 | gem "jekyll-athena" 31 | ``` 32 | 33 | And add this line to your Jekyll site `config.yml`: 34 | 35 | ```yaml 36 | theme: jekyll-athena 37 | ``` 38 | 39 | And then execute: 40 | 41 | $ bundle 42 | 43 | Or install it yourself as: 44 | 45 | $ gem install jekyll-athena 46 | -------------------------------------------------------------------------------- /assets/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | // Import partials from `sass_dir` and set theme here 7 | @import 8 | "theme-{{ site.theme_color | default: "light" }}.scss" 9 | // "theme-{{ site.theme_fonts | default: "system" }}.scss" 10 | ; 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | 6 | -------------------------------------------------------------------------------- /jekyll-athena.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | Gem::Specification.new do |spec| 4 | spec.name = "jekyll-athena" 5 | spec.version = "0.0.2" 6 | spec.authors = ["broccolini"] 7 | spec.email = ["diana.mounter@gmail.com"] 8 | 9 | spec.summary = %q{A simple and elegant theme for Jekyll and GitHub Pages.} 10 | spec.homepage = "http://broccolini.net/athena" 11 | spec.license = "MIT" 12 | 13 | spec.files = `git ls-files -z`.split("\x0").select do |f| 14 | f.match(%r{^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md|markdown)|$)))}i) 15 | end 16 | 17 | spec.add_development_dependency "jekyll", "~> 3.2" 18 | spec.add_development_dependency "bundler", "~> 1.12" 19 | spec.add_development_dependency "rake", "~> 10.0" 20 | end 21 | -------------------------------------------------------------------------------- /writing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category_index 3 | title: Writing 4 | permalink: /writing/ 5 | category_name: writing 6 | --- 7 | 8 | 22 | --------------------------------------------------------------------------------