A content-first, sliding sidebar theme for Jekyll.

  • By Poole
  • Last update: Jan 4, 2023
  • Comments: 15

Lanyon

Lanyon is an unassuming Jekyll theme that places content first by tucking away navigation in a hidden drawer. It's based on Poole, the Jekyll butler.

Lanyon Lanyon with open sidebar

Contents

Usage

Lanyon is a theme built on top of Poole, which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See the Poole usage guidelines for how to install and use Jekyll.

Options

Lanyon includes some customizable options, typically applied via classes on the <body> element.

Sidebar menu

Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's front-matter.

---
layout: page
title: About
---

Why require a specific layout? Jekyll will return all pages, including the atom.xml, and with an alphabetical sort order. To ensure the first link is Home, we exclude the index.html page from this list by specifying the page layout.

Themes

Lanyon ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

Lanyon with red theme Lanyon with red theme and open sidebar

There are eight themes available at this time.

Available theme classes

To use a theme, add any one of the available theme classes to the <body> element in the default.html layout, like so:

<body class="theme-base-08">
  ...
</body>

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Lanyon with reverse layout Lanyon with reverse layout and open sidebar

Reverse the page orientation with a single class.

<body class="layout-reverse">
  ...
</body>

Sidebar overlay instead of push

Make the sidebar overlap the viewport content with a single class:

<body class="sidebar-overlay">
  ...
</body>

This will keep the content stationary and slide in the sidebar over the side content. It also adds a box-shadow based outline to the toggle for contrast against backgrounds, as well as a box-shadow on the sidebar for depth.

It's also available for a reversed layout when you add both classes:

<body class="layout-reverse sidebar-overlay">
  ...
</body>

Sidebar open on page load

Show an open sidebar on page load by modifying the <input> tag within the sidebar.html layout to add the checked boolean attribute:

<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked>

Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only:

<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}>

Development

Lanyon has two branches, but only one is used for active development.

  • master for development. All pull requests should be to submitted against master.
  • gh-pages for our hosted site, which includes our analytics tracking code. Please avoid using this branch.

Author

Mark Otto

License

Open sourced under the MIT license.

<3

Github

https://github.com/poole/lanyon

Comments(15)

  • 1

    Not compatible with Jekyll 3.0

    Hi,

    I get this error message when trying Lanyon with Jekyll-3.0.0.pre.beta8:

    "Since v3.0, permalinks for pages in subfolders must be relative to the site source directory, not the parent directory. Check http://jekyllrb.com/docs/upgrading/ for more info."

    Any plans to update this great theme for 3.0?

    Thanks,

    Joacim

  • 2

    Toggle sidebar with a click on the white space

    In order to expand/hide the sidebar you need to click on the icon. How can I hide the sidebar by clicking on the white space and not necessarily on the icon?

    For example: http://benplum.com/

    Thanks.

  • 3

    Use CSS transforms instead of transitioning positional properties

    I'm aware that #15 tried to do the same thing that I'm doing here, but the difference with this pull request is that it will not break any fixed elements.

    In order for the toggle button to stay fixed, I moved it out of the .container inside of .masthead and placed it directly under the body.

    I also got rid of the perspective properties as they served no obvious purpose to me and I removed some unnecessary vendor prefixes, based on the output of ai/autoprefixer.

    A preview can be found at http://lanyon.hnrch02.me/

    I tested this on my iPhone and iPad mini (both iOS 7.0.4) and on my Desktop running OS X 10.9.1 in Chrome v33.0.1750.91 beta, Firefox 27.0.1, Opera 19.0.1326.63, Opera 12.16 and Safari 7.0.1, no problems whatsoever.

  • 4

    Sidebar not sliding correctly

    Basically, what I want to do is to have the sidebar slide like the Lanyon website, but this is what I get. (this is has been happening since I installed vanilla Lanyon) Chrome Chrome Firefox firefox Only the sidebar slides, and the site moves abruptly, unlike it is intended. In Firefox, the sidebar toggle doesn't move.

    I'm really new to web development, so any help would be appreciated. My site is here.

  • 5

    Layout mode in iPhone 6 not rendering properly

    This is an issue in layout mode on certain devices: I don't know exactly where the problem is (maybe an @media and rem issue) but the site is not rendering properly when using an iPhone 6 in layout mode (Safari and Chrome for iOS tested). Not tested in other devices except iPad 2, where it seems to render perfectly.

    The effect is that the site is switching between one size and another making it useless in Layout mode in iPhone 6.

  • 6

    Post title link on index page error

    Post title link in the index page is not working for repositories of the type username.github.io.It generates links of the form http://0.0.7.223/04/29/new-blog-post/I think the post title link in the index page only requires {{ post.url }} instead of {{ site.baseurl }}/{{ post.url }}

  • 7

    Host on GitHub pages

    I'd like to build and host lanyon on GitHub pages. Is that possible? If so how? I couldn't find any documentation on this.

    If I just fork and build the pages based on the gh-pages branch, the resulting page is plain HTML and looks horrible: https://stefanbschneider.github.io/lanyon/ Using master doesn't work at all and the build fails.

    The changes suggested here seem not to apply to the current config in gh-pages.

  • 8

    fixed comment tag

    if the space before --> is not there, it creates problem for other jekyll tools, like jekyll compress by https://github.com/penibelst/jekyll-compress-html. Tools like this depends on specifically --> and removes necessary html elements in case a --> is found.

  • 9

    Clicking anywhere closes sidebar

    This is a great theme, but I'm having a small issue. I'm using Jekyll 3.0, because I'd like to use this theme with github. When I build this repo (with the minor fixes required for 3.0 discussed here), or when I build the fork https://github.com/xHN35RQ/lanyon (no fixes required), the sidebar closes when I click anywhere in the window, instead of just when clicking on the hamburger. I don't have this issue with the site http://lanyon.getpoole.com/. Any idea how to fix this?

  • 10

    Jekyll serve creates wrong local post links after base_url change

    Hey,

    I just merged the new changes of this project into my fork. This includes the changes made to the base_url handling with the slash.

    I have base_url set to '' (empty string) in my config.yml. When I run jekyll serve to test the site locally, I can only access the index site. When I click on a post it links to http://blog/2015/09/21/homebrew-paketliste-sichern/ instead of http://localhost:4000/blog/2015/09/21/homebrew-paketliste-sichern/.

    Why does this happen? Should base_url in config.yml be '/' like before? When I do this, this does not fix the problem. I even makes it worse, because CSS does not load any more...

    This is the part in index.html which generates the links to the posts:

          <a href="{{ site.baseurl }}/{{ post.url }}">
            {{ post.title }}
          </a>
    

    Before merging it was just

          <a href="{{ post.url }}">
            {{ post.title }}
          </a>
    

    Maybe this part of config.yml is the problem:

    # Permalinks
    #
    # Use of `relative_permalinks` ensures post links from the index work properly.
    # /blog/:year/:month/:day/:title/
    permalink:           /blog/:year/:month/:day/:title/
    relative_permalinks: true
    

    However changing it to

    permalink:           blog/:year/:month/:day/:title/
    

    did not make any difference.

  • 11

    Gap between expanded sidebar and content is too wide

    While the sidebar is unexpanded, the space seems about right. One would expect the expanding sidebar to just fill the space. However, the space gets maintained even with the sidebar expanded.

    I hesitate to attempt to fix this by hacking at the CSS .. unless you suggest that's the only way.

    By the way, this is stellar work you have done here. Thanks a million for sharing it.

  • 12

    refactor/revamp-theme-for-jekyll-4.3.1

    Summary

    Changed

    • Theme (upgrade) to latest Jekyll
    • .md to .markdown
    • _config.yml and Gemfile for pagination
    • Markdown with latest way of writing
    • Permalink and pagination for navigation consistency

    Removed

    • Conflicting md vs. html
    • Dead links on sidebar
  • 13

    Layout Does Not Appear Responsive On Small Viewports

    Just looking at the Lanyon example itself, if you shrink your viewport down and use the sidebar widget, the text is pushed off the screen.

    I would presume the idea is either to not show the sidebar widget in such cases or to just have it overlay the text maybe?

    lanyon-text

    Are there ways to handle this?

    I'm thinking you can do this to try and handle when the viewport size gets too small:

    @media (max-width: 45em) {
      .sidebar-toggle {
        display: none;
      }
    }
    

    I just picked 45em by eyeballing when the primary content seems to start running up into the hamburger toggle.

    Guessing maybe the other part of this would be handled by automatically adding the .sidebar-overlay class when the size of the viewport is too small. I'm not entirely sure how to do that as it seems it would be JavaScript that executes only on a certain media query being viable (i.e., a max-width like I have above).

    It feels like this might be workable:

    (function (document) {
      var x = window.matchMedia("(max-width: 45em)");
    
      x.onchange = (e) => {
        if (e.matches) {
          document.body.classList.add("sidebar-overlay");
        } else {
          document.body.classList.remove("sidebar-overlay");
        }
      };
    })(document);
    

    So I might have answered my own question on reporting this issue. That said I'm curious if I'm missing some setting since it seems like a responsive layout would have to include this by default. Since this isn't in Lanyon, I'm presuming that perhaps there are better ways to do this.

  • 14

    SASS version

    Hi Mark. I really like this theme and have used it on my personal site clayharmonblog.com. I modified it a bit during that process, and one of the things I did was convert the CSS file to a set of SCSS files. I like using SCSS for this sort of thing, and I thought I would try to pay it forward a bit and put the SCSS version of the bare-bones Lanyon site on github. I would like to also make this a gem-based theme, but I feel I ought to check with you to make sure you are okay with this. If so, let me know and I will go ahead and do this. If not, I'll forget about it. Here is the repo as it sits right now sassy-lanyon.

  • 15

    Best way to show posts in excerpt view on index.html (Home)

    The default Lanyon settings shows the full view for posts on the index.html page. I'm attempting to edit the index.html file to show the excerpt for posts, so that only the title, date and first paragraph of each post are displayed.

    What do I need to add or modify in index.html to make this work?

    I hope someone can help me with this issue. Thanks!

    Update: After working on this some more, I found a helpful discussion on Stack Overflow

    The solution that yielded the best result was replacing {{ post.content }} in index.html with {{ post.content | markdownify | strip_html | truncatewords: 50 }}

    Using {{ post.excerpt }} did not lead to the correct formatting of each post on the Home page.

    Maybe the discussion link and my experimentation will help others using this theme.