poole / lanyon Goto Github PK

View Code? Open in Web Editor NEW

3.2K 62.0 2.9K 124 KB

A content-first, sliding sidebar theme for Jekyll.

Home Page: http://lanyon.getpoole.com

License: Other

HTML 19.36% CSS 79.06% JavaScript 1.58%

jekyll jekyll-theme

lanyon's Introduction

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.

Usage
Options
Development
Author
License

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 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.

lanyon's People

Contributors

Stargazers

Watchers

Forkers

thebinarypenguin weswigham kappie singuerinc paultreny hnrc ivantsepp librae abhnvkmr armno ccppbrasil stnguyen moritzheiber nullts hnrch02 tummychow nealrs glebd christopheducamp flashlib pala johnbellone philschatz acidix nakul1991 ramnathv danielebr milsyobtaf li0liq dwmclary saeed-abdullah lnsoso kowalski-rnd sangheestyle j-baker ome cures oohmeknees dhirajsingh0704 iw noscripter herbdool kevinnguy noahschmitz dutykh jwhitcraft mwzkqmuuzkflbxm hgilani b-dap jch dewhao a1ip auntieneo paven oleweidner tianhonghui thundershiviah jakesylvestre cksachdev jacksoncouse dreikanter iominh martin-brennan-fs jacobbednarz pmclanahan vg polem nharada1 bulbfreeman grodin mxstbr trap9 dotser jschnapf wiredmind iamvijaydev legallybrown poznamkymgrstatnice arnm 4711 ring-ring tybenz antidoto screwcutter smilinbrian mikesholiu wyuelin lachlandai werberson labadigergely mikebuss gorork esclapes markstoehr trongdong drreddy alevax 2020allstars punchagan tylerpriest

lanyon's Issues

Sidebar toggle renders poorly with custom font-size

I tried changing font-size in poole.css to different values, and the sidebar toggle doesn't look as good as when it is set to 20px. Here are some screenshots with font-size: 17px using different browsers:

Firefox

Chrome

Internet Explorer

Safari

Style not carried over to links

When using lanyon both locally & via my website, the main page looks great. When clicking on a link, Introducing Lanyon or Example content, it appears the style is not applied to the pages. I have made no changes to lanyon.

I'm using Jekyll 2.0.3...

Tweak sidebar toggle button?

I apologize that this isn't exactly an "issue". I'm trying to tweak the style of the sidebar toggle button and I can't figure out how to do it. I created a website for my department's seminars and a few people complained that it wasn't obvious where to find the menu. The proposed fix was to replace the triple-equals with the word "MENU" (or similar). Any help would be greatly appreciated. The site in question can be found here.

Ship list

Todos

Ideas

On mobile, keep the toggle and do some vertical expansion? Center the title, hide the tagline, and left or right align the toggle. Use absolute positioning to swap placement of masthead and sidebar?

Post title hyperlinks do not work properly when post title contains colon

Steps to replicate the issue:

create a new .md file and add the following lines in the "header" (sorry, don't know the proper term for the two lines delimited by "---")

     ---
    layout: post
    title: Some title: which has a colon
    ---

After the build has completed, clicking the post title link will take you to the raw version instead of the markdown version of the post
The html version of the page is not present in the _site directory.

Removal of site.baseurl breaks github projects pages

If I want to use lanyon to host a site on a github projects page, I need to set site.baseurl because relative doesn't seem to be supported by Github.

Links in sidebar without index.html extension

Hello!
How can I remove index.html extensions from links to pages in sidebar? Node.url tag generates something like this /about/index.html, and I simply need to use /about/ as a link. Is there a way to do so?

Reorder links in sidebar

Is there a way to reorder links in sidebar?

Handling images

What is the best way to deal with images in Poole, or Lanyon? Images seem to be responsive but they have no class to manage how they fit into the body. Does my question make any sense?

Sidebar

Hi!

You probably know this already, but the sidebar appears and then pops out of view on every page load 😃

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.

'~' selector causes sidebar to break on some older browsers

when the sidebar is toggled,

Older browsers on older models of mobile devices are missing the '~' selector (since it's a CCS3-specific selector). It could be worth looking into something that will more gracefully degrade on an older platform that lacks it - especially since the transitions still function in a lot of the older browsers.

Click/Touch Sidebar Links Not Closing Sidebar

You can view this behavior directly even at http://lanyon.getpoole.com/

So I'm wondering if this is by design? If not or so as to have the option -- what I'm finding doesn't work is...

When you hit the Back button in your browser returning you to the previous page/url, where you initially opened the sidebar and selected a sidebar nav item link....you find the sidebar remains open.
Same behavior whether the page/url you click on is a part of the same website or some external website.

What works is...

Initially Clicking/touching the hamburger icon to slide out the sidebar successfully.
Choosing a menu item by clicking/touching a sidebar nav item link takes you to the specified page/url.
If the page/url is within the same website, the page has the sidebar hidden as it should be on a new page load.
When returning to the initial page where the sidebar is still open, you can click the hamburger icon and it closes properly.

Simply seems that transition to closed isn't occurring when a link in the sidebar is clicked/touched. Any pointers to where in the CSS via the label and checkbox used for the toggle or elsewhere, how I can best cause the toggle-to-hidden state for the sidebar to begin ona nav-item link click/touch?

I'm finding this behavior in all 4 major browsers at their newest versions, but have not tried in legacy browsers. And also, happens regardless of media query being applied, size of browser window, etc.

Changing fonts

I'm new to this, so apologize for the potentially naive question.

If I were to change the font of lanyon to say, https://www.google.com/fonts/specimen/Open+Sans, how would I go about doing that?

404 not working

Dear Marc,
The custom 404.html doesn't work. For instance: http://lanyon.getpoole.com/about/dsdsd redirects to common Github Pages 404

"jekyll serve" Error

When trying to run jekyll serve in the lanyon template, I've received the following error: https://gist.github.com/psgs/9683106

I've tried running the jekyll serve command in both the unchanged lanyon template and with a modified lanyon site. Both times, i've received the same error.

I'm currently running Ruby 1.9.3 (Installed with RailsInstaller) on Windows 7. The error makes reference to certain linux commands, for example:

C:/RailsInstaller/Ruby1.9.3/lib/ruby/1.9.1/fileutils.rb:247:in `mkdir': Invalid
argument

Maybe my Ruby version is only intended to be run on Linux?

Would you be able to tell me what's causing this error?

Thanks,

psgs 🌴

Social sharing

Do we plan on adding sharing buttons or plugins to posts? Any agreed upon method?

Question: Why does using Twitter Bootstrap Grids Causes Body to Disappear

I wanted to create a page within a Lanyon site that had some elements in a grid. I added the Twitter Bootstrap CSS (grids only) and the display worked fine on display and upon opening the sidebar. However, upon closing the sidebar the body disappears along with the sidebar.

Any ideas on whats going on or where to look for troubleshooting? Im not familiar with the CSS being used to open/close the sidebar but I have have a suspicion that the elements are being affected by the normalize CSS - maybe reseting the "wrap" class? However, I don't see anything in the css that should affect elements generically. Hmmm... Any pointers would be appreciated. In the meantime maybe I can pull together a simple example to look at.

thanks,
zach cp

Weird flicker on Sidebar (Chrome/Safari)

Appears to be a weird flicker on Chrome and Safari when using the sidebar toggle. When viewed on Chrome, the white flicker appears 100% of the height of the sidebar. In Safari, the flicker appears at the bottom. There doesn't appear to be any flicker in FF.

https://cloudup.com/cl_mOwWS6rQ

To recreate, simply apply a background-color: ...; to the .masthead class.

Responsive font changes result in flickering

The demo site is set up to detect media widths in rem, and respond by changing the font size.

At the default font size (I suppose 16px, in Safari?), whenever the window is between about 600px and 760px, the layout flickers. For other browser font sizes (for instance, zooming the typeface), the exact values are slightly different... but the result is that the response triggers its own undoing.

In other words, the font size reduces (and the line length grows), and then the font size grows (and the line length reduces)... and so on, forever.

sidebar toggler is not visible when scrolling.

The sidebar-toggler button is not visible when we scroll down.

Jumping sidebar on safari

Browser: safari 7.0.1 OSX 10.9.1

When you open the page (or reload) the sidebar is on the open state, then quickly close.
At browser windows dimension: 768px to 959px the sidebar is jumping like crazy. it just keep open/close.

Safari audience is not that big, but just keep record of it

Does not happen in chrome. Didn't have a chance to look on an iPad

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.

Bug in related posts

In the related posts the href for each post includes site.baseurl in both my local environment and on github it results in the links being invalid. If you agree this is a problem I can submit a PR.

My changes revert back.

I have been trying to deploy lanyon on my github pages. But when i make changes to _site/public/index.html and _site/about/index.html like adding

class="theme-base-08" to
as soon as i start

jekyll serve

it revert by to default condition.
Can you help me with these?

hide sidebar icon when printing

it would be nice to hide the sidebar icon when printing the page. Otherwise it masks some of the text.

Adding something like this to the CSS

@media print {
    .sidebar-toggle {
    display: none;
    }
}

Downloads link does not work on lanyon.getpoole.com

Adapting theme to jekyll bootstrap

Hi @mdo, I adapted the theme for jekyll bootstrap, I think there are some people that want to install the theme using jekyll bootstrap (like me :) ) so I adapted the theme and created a public repository for it.
https://github.com/matheusrocha89/lanyon-jekyll-bootstrap.git

How to have the Header fixed?

This is not an issue but more related a question.

I don't succeed in making the header fixed. Does someone did it?

Could become an option in the future for this theme, no?

Font options

Add some basic font options—flipping between serif and sans-serif.

tags or categories on posts?

What's the best way to make it so that posts can have tags or categories? I'd love to have a layout that was a post listing based on a tag/category.

Support a search page.

I added one to my blog: http://andrew.yurisich.com/search/

Let me know if this is something you'd merge, I could get it together pretty quickly.

Favicon needs to be updated

It should be "L" to follow the "P" for Poole and "H" for Hyde theme shouldn't it?

Maybe a few lines should be added to improve IE capability?

Not heavy tricks, just a few lines in _includes/head.html:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- after RSS -->

  <!-- some fix for IE -->
  <!--[if lt IE 9]>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->

Keyboard shortcut and pin for the sidebar?

Hi, thanks for Lanyon great theme, the c & c++ brazil users group web site is being built around it.

Two things I find I bit annoying not to have and would like to suggest are:

A keyboard toogle shortcut to hide/unhide the toolbar (if possible)
A way to pin the toolbar open, in this pinned state care should be taken with the main content, so it can be seen as a whole.

Notice: I know about the Hyde theme.

That's it, regards.

All links give a 404 when using Poole in a project page

Not sure if this is pilot error, but when I use Poole in a GitHub project page, all posts and pages miss the project base url and instead link to the repo instead (if that makes sense)?

Basically, if you create a project page on GH for example:

https://github.com/Dannyholt/test/

When you click on a post title or page link via the sidebar panel, the URL is this:

http://dannyholt.github.io/2014/01/02/introducing-lanyon/

Instead of:

http://dannyholt.github.io/test/2014/01/02/introducing-lanyon/

Jumpy sidebar

There seem to be a couple issues with the sidebar but I didn't see this one reported yet.

When I click the sandwich button to toggle the sidebar, the viewing area jumps out instead of sliding. And when I click the put the sidebar away, the sandwich button jumps behind the sidebar before it closes, again instead of sliding.

Anyone have a similar experience?

GIF: First, correct sliding; second, jumpy siding.

Background color (of .wrap div?) turns black when resizing on Chrome on Windows 8.1 and Chromium on Ubuntu

Background turns black on complete webpage when re-sizing left to right or right to left. Goes from white to black then stays black for a bit and turns white if you resize more. May transition several times during the course of re-sizing from most wide to most narrow. If you resize too rapidly, however, you might not see it happen.

To fix this I added the following two lines to the first occurrence of the .wrap class in the lanyon.css file (line 63 in my lanyon.css file),
height: 100%;
background-color: white !important;

Without the height:100%; there was still black on the very bottom. Putting a default in the body/html section of background-color: white !important; didn't do it, so I made the .wrap div 100% in height as a hack and left the body and html section alone.

You can see the behavior on Lanyon demo on Windows 8.1 using the latest Chrome browser or using Ubuntu 14.04.1 using the latest Chromium browser. Doesn't occur on OSX (10.10.1) at all regardless of browser used.

The image below on the left shows the issue in Chromium on Ubuntu within a VM hosted on Windows. The right part of the image is Chrome on the actual Windows host machine. I screen grabbed from the Windows 8.1 host (this is one screen grab that shows the issue on both browsers and operating systems). To my understanding, Chromium is the open source code base of Chrome. Google then adds some tracking stuff and brands it Chrome.

Easy config option for showing sidebar by default?

I've been looking through the CSS (I'm not much of a front-end guy) and was wondering if there is an easy way to make the sidebar ("drawer") visible by default.

Is there a simple way to do this with a CSS tweak?

It seems like this would be a great thing to make an documented config option, and I'm happy to PR the README if anyone has some direction on how to go about it.

This is an excellent, beautiful theme -- thanks so much for building it!

Responsive tables in Lanyon

I am using lanyon for my blog. Its great but when I post a table, it goes beyond the screen width. Please
see the attached screenshot.

How can I make the table responsive?

Maybe `.highlight` should be add to `syntax.css`?

lanyon uses pygements for syntax highlight, which is an elegant solution.

However, the syntax.css now has some conflicts with mathjax. Mathjax is a js plugin that enables users to write math formulas in web pages, and it uses some classes such as .gi or .m that are used by pygments too.

The most simple and reasonable fix is adding .highlight prefix to the css of the highlighted code snippets, because pygements renders code blocks into a div with .highlight in default. And this way may avoid any other conflicts besides the ones caused by mathjax and pygments.

Hope I have explained my suggestion clearly and the developer(s) or lanyon can accept it.

Thank the developer(s) very much for the great job.

Here is the modified syntax.css that follows my suggestion (it seems that the last three lines are added by the developer(s) and I haven't carefully figured out the effect so I keep it unchanged):

.highlight .hll { background-color: #ffffcc } /*{ background: #f0f3f3; }*/
.highlight .c { color: #999; } /* Comment */
.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
.highlight .k { color: #006699; } /* Keyword */
.highlight .o { color: #555555 } /* Operator */
.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #009999 } /* Comment.Preproc */
.highlight .c1 { color: #999; } /* Comment.Single */
.highlight .cs { color: #999; } /* Comment.Special */
.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #003300; } /* Generic.Heading */
.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.highlight .go { color: #AAAAAA } /* Generic.Output */
.highlight .gp { color: #000099; } /* Generic.Prompt */
.highlight .gs { } /* Generic.Strong */
.highlight .gu { color: #003300; } /* Generic.Subheading */
.highlight .gt { color: #99CC66 } /* Generic.Traceback */
.highlight .kc { color: #006699; } /* Keyword.Constant */
.highlight .kd { color: #006699; } /* Keyword.Declaration */
.highlight .kn { color: #006699; } /* Keyword.Namespace */
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
.highlight .kr { color: #006699; } /* Keyword.Reserved */
.highlight .kt { color: #007788; } /* Keyword.Type */
.highlight .m { color: #FF6600 } /* Literal.Number */
.highlight .s { color: #d44950 } /* Literal.String */
.highlight .na { color: #4f9fcf } /* Name.Attribute */
.highlight .nb { color: #336666 } /* Name.Builtin */
.highlight .nc { color: #00AA88; } /* Name.Class */
.highlight .no { color: #336600 } /* Name.Constant */
.highlight .nd { color: #9999FF } /* Name.Decorator */
.highlight .ni { color: #999999; } /* Name.Entity */
.highlight .ne { color: #CC0000; } /* Name.Exception */
.highlight .nf { color: #CC00FF } /* Name.Function */
.highlight .nl { color: #9999FF } /* Name.Label */
.highlight .nn { color: #00CCFF; } /* Name.Namespace */
.highlight .nt { color: #2f6f9f; } /* Name.Tag */
.highlight .nv { color: #003333 } /* Name.Variable */
.highlight .ow { color: #000000; } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
.highlight .se { color: #CC3300; } /* Literal.String.Escape */
.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
.highlight .sx { color: #CC3300 } /* Literal.String.Other */
.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #003333 } /* Name.Variable.Class */
.highlight .vg { color: #003333 } /* Name.Variable.Global */
.highlight .vi { color: #003333 } /* Name.Variable.Instance */
.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */

.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }

Menu trigger disappearing.

Safari Version 7.0.1 (9537.73.11)

On the homepage, scroll down the page, open the menu drawer, then scroll up. The menu trigger has gone. Reappears if you hover over it.

Bad rendering when scrolling page.

Hi,

The image below is the result when I am scrolling the page running locally and also happens with the one hosted on github. After some digging only occurs using Google Chrome Canary (latest version) I am using OS X

Break out images to be wider than the text column

Hi. I love when images break out and they are wider than the text column. So, I decided to do this with Lanyon. I copied the CSS and the jQuery from the Casper theme (made for the Ghost Platform) and added it to poole.css (along with a js file).

img {
    width: 126%;
    max-width: none;
    margin: 0 -13%;
}

It looks great on the desktop but on smaller screens it looks like this:

I played with Firebug a bit but I couldn't find a solution. Any ideas on how to fix it, please?

Thanks.

How do I stop the page from jumping in landscape mode for iPhone 6?

I am using the lanyon jekyll theme and I discovered the page begins to jump up and down when viewing it with a iPhone 6 in landscape mode.

(This occurred on the site I was creating, but it also happens if you go right to the demo page).

Using the first viewport tag, causes the issue, the second one fixes it but it's zoomed in a tad.

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width">

Is there a way to make this normal?

Load homepage with sidebar open?

Is there a way to have the sidebar open by default, but only on the homepage?

Add size check for related posts section

I am recommending a change to the related posts section of the post layout that will check the size of related posts before including the section in the document. If you agree with this change I will open a PR for the improvement.

Immediate action required: custom Pages domain pointed to a legacy IP address

Hi there fellow Hubber. If you're seeing this, that means that your site's custom domain is pointed to a deprecated IP. 👎

The good news is that it's an easy fix. Simply follow these instructions for updating your site's DNS records. 👍

❤️ and automation,
— The @github/pages team

p.s. if you've already updated your site's DNS in the past 24 hours or so, feel free to close this issue, and thanks for being awesome.

//cc https://github.com/github/pages/issues/430

Accessibility of sidebar toggle

Currently, at least on the demo site, the button for toggling the sidebar in this theme cannot be seen nor interacted with by people using a screenreader to access the website the theme is currently being used on. This means the menu that is normally contained within this sidebar is not reachable by these users and therefore the site cannot be used in its entirety. I would like to ask for this to be fixed, so sites using this theme will not suffer from this rather serious accessibility problem.

Implement fancy menu icon

http://codepen.io/daneden/pen/FaiHD