GitHunt
PR

pravusid/pravusid.github.io

A jekyll blog of PRAVUSID

Hydeout

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

Desktop
Mobile home page
Mobile post page

Usage

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

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

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

  • _includes/copyright.html - Insert your own copyright here.

  • _includes/custom-head.html - Insert custom head tags (e.g. to load your
    own stylesheets)

  • _includes/custom-foot.html - Insert custom elements at the end of the
    body (e.g. for custom JS)

  • _includes/custom-nav-links.html - Additional nav links to insert at the
    end of the list of links in the sidebar.

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

  • _includes/custom-icon-links.html- Additional icon links to insert at the
    end of the icon links at the bottom of the sidebar. You can use the order
    property to re-order.

  • _includes/favicons.html - Replace references to favicon.ico and
    favicon.png with your own favicons references.

  • _includes/font-includes.html - The Abril Fatface font used for the site
    title is loaded here. If you're overriding that font in the CSS, be sure
    to also remove the font load reference here.

New Features

  • Hydeout adds a new tags page (accessible in the sidebar). Just create a
    new page with the tags layout:

    ---
    layout: tags
    title: Tags
    ---
    
  • Hydeout and a new "category" layout for dedicated category pages.
    Category pages are automatically added to the sidebar. All other pages
    must have sidebar_link: true in their front matter to show up in
    the sidebar. To create a category page, use the category layout"

    ---
    layout: category
    title: My Category
    ---
    
    Description of "My Category"
    
  • A simple redirect-to-Google search is available. Just create a page with
    the search layout.

    ---
    layout: search
    title: Google Search
    ---
    
  • Disqus integration is ready out of the box. Just add the following to
    your config file:

    disqus:
      shortname: my-disqus-shortname

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

  • For Google Analytics support, define a google_analytics variable with
    your property ID in your config file.

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

Languages

SCSS59.9%HTML37.2%Ruby2.9%

Contributors

Other
Created November 6, 2017
Updated June 10, 2023
pravusid/pravusid.github.io | GitHunt