poole / lanyon Goto Github PK
View Code? Open in Web Editor NEWA content-first, sliding sidebar theme for Jekyll.
Home Page: http://lanyon.getpoole.com
License: Other
A content-first, sliding sidebar theme for Jekyll.
Home Page: http://lanyon.getpoole.com
License: Other
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?
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.
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
The sidebar-toggler button is not visible when we scroll down.
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.
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?
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; }
Do we plan on adding sharing buttons or plugins to posts? Any agreed upon method?
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.
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?
Is there a way to have the sidebar open by default, but only on the homepage?
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/
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.
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.
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]-->
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.
Dear Marc,
The custom 404.html doesn't work. For instance: http://lanyon.getpoole.com/about/dsdsd redirects to common Github Pages 404
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.
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
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?
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:
Notice: I know about the Hyde theme.
That's it, regards.
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?
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!
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.
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...
What works is...
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.
Is there a way to reorder links in sidebar?
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.
Browser: safari 7.0.1 OSX 10.9.1
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
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.
Add some basic font options—flipping between serif and sans-serif.
if/else
?_config.yml
: sort unchanging globals from site customizationsPT Sans
font-size
s in the readmeit 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;
}
}
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.
Hi!
You probably know this already, but the sidebar appears and then pops out of view on every page load 😃
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.
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 🌴
Steps to replicate the issue:
---
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.
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.
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?
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.
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...
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.