poole / hyde Goto Github PK

View Code? Open in Web Editor NEW

3.6K 67.0 3.9K 113 KB

A brazen two-column theme for Jekyll.

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

License: Other

HTML 24.01% CSS 75.99%

jekyll jekyll-theme

hyde's Introduction

Hyde

Hyde is a brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. It's based on Poole, the Jekyll butler.

Usage
Options
Development
Author
License

Usage

Hyde 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

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

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the .sidebar-sticky class from the sidebar's .container. Sidebar content will then normally flow from top to bottom.

<!-- Default sidebar -->
<div class="sidebar">
  <div class="container sidebar-sticky">
    ...
  </div>
</div>

<!-- Modified sidebar -->
<div class="sidebar">
  <div class="container">
    ...
  </div>
</div>

Themes

Hyde 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 anyone 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

Hyde's page orientation can be reversed with a single class.

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

Development

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

master for development. All pull requests should be 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.

hyde's People

Contributors

Stargazers

Watchers

Forkers

jakebresnehan dohaivu morozd stavrossk gordonmcshane bareich bdunnette lechoo stlk desmondmorris johnnycatsf kevinthomas046 mgincking plainspace afj176 jipiboily jonamar hnrch02 axilleas kappie mdo samanpwbb b1592 thebinarypenguin loekup juthilo swang myggum aspires arunkant srizzling arunchinnachamy paultreny blakeshall eduavila sudosu librae8226 librae mlebarron moritzheiber hblock vajradog ronaldv arkadyp thegreenrobot abensrhir falmarri coreyp bryanschuetz dfeng fredhutchio amertkara philip-nunoo pilen jtleek scrambledeggsontoast yyolk lazerpanther dato vedarthk joech4n craigmccaskill hectorguo coderiot rossbeale raghavsethi leonb donik a1ip beezly joshbradshaw misterhex sinlaputa cadasil michaelkalman phani-vadrevu jacksoncouse r4dat jodaiber maiostri resilvered vg chao-xian luqipan mdarcemont thilinamb daveyb sammydigits brentonhouse octatoan ethanwhite thehappybug bchazalet awayand tiendan kyfast ferozmbasheer shivam11 sdcopeland calebhicks

hyde's Issues

gist styles

When adding a gist to a post via {% gist gist-id %} the used font is quite huge. Would look way nicer if it would be styled similar to what {% highlight foo %}bar{% endhighlight %} does.

Add classes for simple color schemes

Curious if folks would find this useful to give the theme a little more power—just a few body classes to change things up for color, orientation, and perhaps fonts.

Demo Page Download Link Is Broken

baseurl should not be set to '/'

I have been trying to use Jekyll Sitemap against my Hyde based site and have faced issues with this line of code in _config.yml:

baseurl: /

The problem is that Jekyll Sitemap creates sitemap.xml file with incorrect urls (note the double //):

<url>
<loc>
http://www.jonbartlett.org//notes/dave-yates-frame-building/
</loc>
<lastmod>2014-09-30T00:00:00+00:00</lastmod>
</url>
<url>
<loc>http://www.jonbartlett.org//404.html</loc>

Looking around at other Jekyll sites the baseurl is set to '' in most cases. The Lanyon theme is configured like this.

Also when running jekyll serve this fires up on Server address: http://127.0.0.1:4000//. Note the trailing slash.

Safari wild resizing issues

Haven't explored why yet, but when I resize the window in Safari I get a lot of wild jumping back and forth between layouts, sometimes jumping to the single column too soon. I don't see this with other responsive sites. Not sure where to look. Anyone else noticing this?

project name conflict with python hyde

I think it's better to have not conflicting names for many reasons
https://github.com/hyde/hyde

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

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

Per-page colour themes

Is it possible to specify a different colour theme on a page-by-page basis, perhaps by adding something to the front matter for the page?

How do I make the sidebar scroll

Hello CSS wizards,

I have a lot of things in my sidebar and it is now off the page.

I have tried injecting overflow: scroll into hyde.css at various points, but I don't really know what I'm doing.

@media (min-width: 48rem) {
  .sidebar-sticky {
    position: absolute;
    right:  1rem;
    bottom: 1rem;
    left:   1rem;
    overflow: scroll; <!-- -->
  }

Any suggestions to put a scrollbar there?

Site in question

Syntax CSS not restricted to code highlighting

Style definitions in syntax.css are universal, and clobber some of the classes provided by external tools like MathJax (specifically, the mi style). An easy fix is to restrict all of the styles to children of a highlight class, like so:

.highlight .hll { background-color: #ffffcc }

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

Fonts are loaded over unsecure connection

in head.html there is the following reference:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

When website is loaded over secure connection fonts gets loaded over unsecure source

This can easily be solved by:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

gh-pages branch is not up-to-date

Hyde is 2.1.0 now but the website at http://hyde.getpoole.com is still at 2.0.0.

PS: thanks for this awesome theme, I really like it.

Why use rdiscount?

Why are you using rdiscount instead of say redcarpet?

I find redcarpet to provide a better experience with regards to syntax highlighted code blocks.

(howto) customize sidebar mobile rendering further?

Is there a clever way to adjust the alignment in the sidebar divs to adjust when viewed on mobile?

see my site that uses hyde for what i mean -- on mobile the headshot is rendered nicely (centered), but on desktop it's still centered and it'd look better if it was left-aligned with the rest of the title.

I'm doing this by embedding some custom CSS into an block in /_includes/sidebar.html:

  <div class="container sidebar-sticky">
    <div class="sidebar-about">

      <img style="margin:0px auto;display:block" src="{{ site.baseurl }}headshot-2.jpg" alt="headshot"/>

      <h2>
        <a href="{{ site.baseurl }}">
          {{ site.title }}
        </a>
      </h2>
      <p class="lead">{{ site.description }}</p>
    </div>

This feels like a horrible hack. Is there a better way?

I have looked around a little to see how jekyll detects mobile devices (via user-agent?) and how I might address that with a Liquid {%if ...} , but this is mostly not my area of expertise, so i haven't found anything.

Improve list styles on mobile devices

On the current Nexus 4 (Android 4.3, Chrome 30.0.1599.82) (768x1280), list bullet points and numbers are out of the content container.

Project page "Download" link is invalid

The project page's download links to:

https://github.com/poole/hyde/archive/v2.1.0.zip

Which is not a valid URL and does not provide a zip. There appears to be no v2.1.0 released at all. It's probably a good idea to either link to the previous v2.0.0 or provide the release stated.

How do I apply Hyde to my Jekyll blog

I really like the Hyde theme and want to use it in my Jekyll blog which I have an initial version of here. There are bugs I'm working through but how I apply the Hyde theme to the blog - via a layouts file?

Your instructions are not clear in this respect.

Any help would be appreciated.

Sandeep

Icons missing/wrongly linked

http://hyde.getpoole.com doesn't currently provide a favicon and/or apple-touch-icon, unlike the old http://andhyde.com. (The linked images don't exist.)

Spacing of site title on sidebar

I want to adjust the spacing of my site's title on the sidebar. At the moment it is pushed against the top. I have attached the image

How would I adjust the CSS to give some top space above the title on the sidebar? I am not quite familiar with CSS, so I don't want to mess with things.

Also, I hope my copyright statement is OK. I have acknowledged your copyright in my License file (https://github.com/sr-murthy/sr-murthy.github.io).

Thanks.

Viewport argument value "device-width"

Safari gives the following error in the console:

Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

changing the meta tag from

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

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

resolves things.

baseurl and links to articles

Hello,

I've been experiencing some problems with hyde: whether or not I change the "baseurl" in the config file, the links (article url + related posts + sidebar links) does not seem to change. (I used the last commit of hyde and I updated all my gems (including jekyll) before)
First, note that my baseurl is : /blog

I had to add :

in sidebar.html : {{ node.title }} (aded {{ site.baseurl }})
in post.html (line 17): (added {{ site.baseurl}} )

(sidenote : I think it would be nice to have a full HTML5 page (the doctype and some metas are in HTML4)

Doesn't support baseurl

It seems to be a Jekyll convention to use baseurl to give the base URL of a site. The head.html file seems to assume that the public folder will be available at /, which is not always the case.

Atom item links are broken

Links at http://andhyde.com/atom.xml are broken. 😟

Example:

<entry>
...
<link href="http://www.markdotto.com/2012/02/08/hello-world/"/>
...
</entry>

They should be http://andhyde.com/..., not http://www.markdotto.com/....

Feedback

Hi, I like Poole. Quick feedback:

Some media query css for print view (e.g. without sidebar) would be nice.

Also the sidebar would not scroll with the version I used. I think I fixed with:

  .sidebar {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 18rem;
    text-align: left;
  }

Jekyll 2.0.0+

Does the new release of jekyll affect Hyde at all? Can I upgrade on my system if I downloaded the zip instead of cloning? Is there a need to?

How do I "install" Hyde over an existing Jekyll installation?

I cannot understand just how I install only the Hyde theme on my existing Jekyll installation.

Add page examples

It would be nice to have page examples, e.g. About, Projects, etc.

With low height windows, sidebar is poorly positioned

As you can see in the image, it seems that the sidebar content gets cut off. I'm very new to CSS, and so wasn't sure how to fix this myself. Anyone know? I had a similar problem with the sidebar's width and the title text disappearing in the window's edge, but fixed that by making the sidebar 20em instead of 18. Didn't see any similar attributes for the height though.

Paginator items not displaying properly

At the moment the paginator items on index.html does not display properly, it looks like this

I don't know why it is stacking them vertically, the paginator code is unchanged from the hyde source and so is the relevant CSS code in poole.css:

<div class="pagination">
{% if paginator.next_page %}
<a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %}
{% if paginator.previous_page %}
  {% if paginator.page == 2 %}
    <a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
  {% else %}
    <a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
  {% endif %}
{% else %}
  <span class="pagination-item newer">Newer</span>
{% endif %}
</div>

Master and gh-pages out of sync

It looks like your master branch and gh-pages branch are out of sync.

For example the site description in the sidebar is styled differently on the demo site http://hyde.getpoole.com/ as compared with what's in master.

Broken margins?

They say one picture can say a thousand words, look at screenshots then.

Exhibit A

Fullscreen text looks fine, has margins, but now a look at the mobile version.

Exhibit B

While it's still somewhat readable, I really think some whitespace between the text and the border would be nice. It looks particularly crappy on an actual iPad. To be honest, I am pretty sure this is not intended, as it only happens on particular post pages.

Exhibit C

This is how it looks on the home page, shrinked to mobile view as well - we have margins, it's all fine and that's how it should be elsewhere, imho.

RSS link

Link to the Atom feed from the opening blog post in the feature list.

Image Gallery

Hey. Thanks for this code. Working great. This is a request rather than issue.

How about a page template that can take a folder of images and get all of them and assemble into a gallery of images.

Allow columns to be set. Maybe max 3 which would then limit thumbnail size and the image is clickable to view bigger.

Can this be done?

Add 404 page

Stub out a simple template page.

can't install with rake theme:install

trying to install with this command:
rake theme:install git="https://github.com/poole/hyde.git"

results in this error:
No such file or directory - ./_theme_packages/_tmp/manifest.yml

Sidebar changes size.

In landscape on the iPad the sidebar changes size every time I scroll on your demo site.

Replace About page

Currently it's an *.html page with all my personal site's copy 😀. Oops.

Add screenshot

Add installation instructions to README.md

I'm just getting started with Jekyll, and I think installation instructions would be useful. Oh and I really like the theme.

Add some SNS share button on every post

e.g., share to Twitter, FB

Add a all posts page

It should has a all-posts page, which shows all the posts.

Sidebar items are hard to tap on mobile devices

In my opinion, the sidebar links are a little too small, which makes it difficult to tap links on mobile devices. I propose making the tap targets full width and increasing the font size and/or padding.

Sidenav Bar + Scrolling on Small Windows

I messaged you on twitter but I think this might be a better avenue (maybe?).

I am currently using and modifying your Hyde theme for Github Pages / Jekyll static sites. One problem that I keep running into is that if the window is too small the nav column on the left will not load properly: in a smaller window the menu navs will get cut off without the option to scroll down on the left (colored) column to see what is missing.

Is there any solution?

Thank you so much for a fantastic theme! - MP

Here you can see how the page is expect to show up

If someone has a smaller screen or smaller browser window then part of the text is cut off and you cant scroll. In this second image Hyde is cut off. Since I want to have my stuff pinned to the top of the column, it is usually my nav bar.

Hope that provides more context.

Order of pages in sidebar

How can I order the pages in the sidebar, using the script and not my own <p> tags?

No page style

Direct fork, with only one change: I deleted the CNAME file. Still, no styling appears when I goto the site. Here is the site, here is the repo. Thanks for your help!

404's Not Working

Hi guys,

404s seem to serve the default github pages 404 and not the custom 404.html.
I think adding a simple "permalink: 404.html" to the Jekyll front matter should sort.
Would patch this myself but I'm unsure if there are other pages that need a similar update also?

Print

It would be great to add some @media print code to the CSS...

hyde.css resets on jekyll serve

I am trying to modify the following file:

https://github.com/poole/hyde/blob/master/public/css/hyde.css

However, whenever I regenerate the static site via

bundle exec jekyll serve

the css file is regenerated/reset.

How do I stop this from happening?

How to work with related posts

How can I set related posts for every post in Hyde?