diff --git a/README.md b/README.md index a65f72b597..d7f52579aa 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here ![Tale screenshot](http://i.imgur.com/pXZrtmo.png) ## Features + - Easy installation - Compatible with GitHub Pages - Responsive design (looks just as good on mobile) @@ -16,6 +17,7 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here - [Disqus comments (can be enabled if needed)](#enabling-comments) ## Installation + There are 3 ways to install this theme 1. Install it as a Ruby Gem (for self-hosted sites) @@ -23,75 +25,81 @@ There are 3 ways to install this theme 3. Fork the project directly ### Ruby Gem method + + + 1. Add this line to your `Gemfile`: -```ruby -gem "tale" -``` + ```ruby + gem "tale" + ``` 2. Install the theme's gems and dependencies: -```bash -$ bundle -``` + ```bash + $ bundle + ``` 3. In `_config.yml` add these lines: -```yaml -theme: tale + ```yaml + theme: tale -permalink: /:year-:month-:day/:title -paginate: 5 -``` + permalink: /:year-:month-:day/:title + paginate: 5 + ``` -Remove any other `theme:` lines. + Remove any other `theme:` lines. 4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work. 5. In `about.md`, change the `layout:` field to `post`: -```Markdown -layout: post -``` + ```Markdown + layout: post + ``` ### GitHub Pages method + 1. Add these 2 lines in to your `Gemfile`: -```ruby -gem "jekyll-remote-theme" -gem "jekyll-paginate" -``` + ```ruby + gem "jekyll-remote-theme" + gem "jekyll-paginate" + ``` 2. Install the newly added gems: -```bash -$ bundle -``` + ```bash + $ bundle + ... + ``` 3. In `_config.yml` add these lines: -```yaml -remote_theme: chesterhow/tale + ```yaml + remote_theme: chesterhow/tale -permalink: /:year-:month-:day/:title -paginate: 5 + permalink: /:year-:month-:day/:title + paginate: 5 -plugins: - - jekyll-paginate - - jekyll-remote-theme -``` + plugins: + - jekyll-paginate + - jekyll-remote-theme + ``` -Remove any other `theme:` or `remote_theme:` lines. + Remove any other `theme:` or `remote_theme:` lines. 4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work. 5. In `about.md`, change the `layout:` field to `post`: -```Markdown -layout: post -``` + ```Markdown + layout: post + ``` ### Fork method + 1. Fork this repository 2. Delete the unnecessary files/folders: `CODE_OF_CONDUCT.md`, `LICENSE`, `README.md`, `tale.gemspec` @@ -103,17 +111,22 @@ baseurl: "/tale" # delete this line ``` ## Usage + Once you've installed the theme, you're ready to work on your Jekyll site. To start off, I would recommend updating `_config.yml` with your site's details. To build and serve your site, run: ```bash $ bundle exec jekyll serve +... + Server address: http://127.0.0.1:4000/ + Server running... press ctrl-c to stop. ``` -And you're all set! Head over to http://127.0.0.1:4000/ to see your site in action. +And you're all set! Head over to to see your site in action. ### Enabling Comments + Comments are disabled by default. To enable them, look for the following line in `_config.yml` and change `jekyll-tale` to your site's Disqus id. ```yml @@ -122,8 +135,16 @@ disqus: jekyll-tale Next, add `comments: true` to the YAML front matter of the posts which you would like to enable comments for. +To enable globally, add `comments: true` to `_config.yml` + +### Enabling RTL + +To enable RTL support, add `RTL: true` to `_config.yml` + ## Contributing + Found a bug or have a suggestion? Feel free to create an issue or make a pull request! ## License + See [LICENSE](https://github.com/chesterhow/tale/blob/master/LICENSE) diff --git a/_config.yml b/_config.yml index 7c01e9625b..3d37199086 100644 --- a/_config.yml +++ b/_config.yml @@ -3,6 +3,7 @@ title: Tale description: "Minimal Jekyll theme for storytellers" baseurl: "/tale" url: "https://chesterhow.github.io" +rtl: true # Google Analytics google_analytics: UA—XXXXXXXX-X @@ -38,4 +39,5 @@ paginate: 5 exclude: [ Gemfile, Gemfile.lock, tale.gemspec ] # Disqus (Set to your disqus id) -disqus: jekyll-tale \ No newline at end of file +disqus: jekyll-tale +comments: true \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 6e7d61d927..8adf2b8003 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -6,6 +6,7 @@ + {% if site.rtl %}{% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 82d90793c0..b5c040db41 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -17,13 +17,20 @@ {% endif %} + {% if page.tags %} +
+ {% for tag in page.tags %} + {{ tag }} + {% endfor %} +
+ {% endif %}

{{ page.title }}

{{ content }} -{% if page.comments %} +{% if page.comments or site.comments %} {% include disqus_comments.html %} {% endif %} diff --git a/_sass/tale/_post.scss b/_sass/tale/_post.scss index 3680d80b93..e82cb1f5f8 100644 --- a/_sass/tale/_post.scss +++ b/_sass/tale/_post.scss @@ -12,6 +12,10 @@ } } + &-tags { + margin: 15px; + } + &-title { color: $default-shade; font-family: $sans-serif; diff --git a/assets/rtl.scss b/assets/rtl.scss new file mode 100644 index 0000000000..48da5e730e --- /dev/null +++ b/assets/rtl.scss @@ -0,0 +1,49 @@ +--- +--- + +//RTL overrides +body, html { + direction: rtl; +} + +h1, h2, h3, h4, h5, h6, p, li, ul, time, blockquote { + text-align: right; +} + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +footer .blockquote-footer,a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, +q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, pre, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, +aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, +section, summary, time, mark, audio, video, .post-title { + font-family: "Droid Arabic Kufi", inherit; +} + +blockquote { + border-right: 0.25rem solid; + border-left: 0; + margin: 0.8rem 0; + padding: 0.5rem 1rem; +} + +.nav li { + padding: 0 0 0 2rem; +} + +.nav li:last-child { + padding-left: 0; +} + +@media (min-width: 600px) { + blockquote { + padding: 0 1.25rem 0 5rem; + } + .nav-container { + text-align: right; + } + + .nav ul { + right: auto; + left: 0; + } +} \ No newline at end of file