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.
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).
There are eight themes available at this time.
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
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 againstmaster
.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
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
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.
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 thebody
.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.
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
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.
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.
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 formhttp://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 }}
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/ Usingmaster
doesn't work at all and the build fails.The changes suggested here seem not to apply to the current config in
gh-pages
.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.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?
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 tohttp://blog/2015/09/21/homebrew-paketliste-sichern/
instead ofhttp://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:
Before merging it was just
Maybe this part of
config.yml
is the problem:However changing it to
did not make any difference.
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.
refactor/revamp-theme-for-jekyll-4.3.1
Summary
Changed
.md
to.markdown
_config.yml
andGemfile
for paginationRemoved
md
vs.html
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?
Are there ways to handle this?
I'm thinking you can do this to try and handle when the viewport size gets too small:
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:
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.
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.
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.