Hydeout

Hydeout updates the original Hyde theme for Jekyll 3.x and 4.x and adds new functionality.

<img alt=“Mobile home page” src=“/_screenshots/2.png?raw=true” width=“300px” /> <img alt=“Mobile post page” src=“/_screenshots/3.png?raw=true” width=“300px” />

Usage

Hydeout is available as the jekyll-theme-hydeout Ruby Gem. Add gem "jekyll-theme-hydeout", "~> 4.1" to your Gemfile and run bundle install.

If you're installing on Github pages, you may also have to add remote_theme: fongandrew/hydeout to your _config.yml. See the Github instructions for more details.

Hydeout uses pagination, so if you have an index.md, you'll need to swap it with an index.html that uses the index layout:

---
layout: index
title: Home
---

You'll also need to add a setting to _config.yml telling Jekyll how many posts to include per page (e.g. paginate: 5).

Keep It Simple

In keeping with the original Hyde theme, Hydeout aims to keep the overall design lightweight and plugin-free. JavaScript is currently limited only to Disqus and Google Analytics (and is only loaded if you provide configuration variables).

Hydeout makes heavy use of Flexbox in its CSS. If Flexbox is not available, the CSS degrades into a single column layout.

Customization

Hydeout replaces Hyde's class-based theming with the use of the following SASS variables:

$sidebar-bg-color: #202020 !default;
$sidebar-fg-color: white !default;
$sidebar-sticky: true !default;
$layout-reverse: false !default;
$link-color: #268bd2 !default;

To override these variables, create your own assets/css/main.scss file. Define your own variables, then import in Hydeout's SCSS, like so:

---
# Jekyll needs front matter for SCSS files
---

$sidebar-bg-color: #ac4142;
$link-color: #ac4142;
$sidebar-sticky: false;
@import "hydeout";

See the [variables](sass/hydeout/_variables.scss) file for other variables you can override.

You can see the full set of partials you can replace in the {_includes} folder, but there are a few worth noting:

Pro-tip: The navs in the sidebar are flexboxes. Use the order property to order your links.

New Features

--- layout: tags title: Tags ---

“` — layout: category title: My Category —

Description of “My Category” “`

“` — layout: page title: My page sidebar_sort_order: 123 —

Some content. “`

--- layout: search title: Google Search ---

yaml disqus: shortname: my-disqus-shortname

If you don't want Disqus or want to use something else, override comments.html.

There's also a bunch of minor tweaks and adjustments throughout the theme. Hope this works for you!