adam
/
hugo-theme-hyde
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Fork of hugo theme "hyde" -- https://github.com/spf13/hyde -- for personal customizations.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 Commits
1 Branch
0 Tags
1.3 MiB
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
Adam Piontek 3e2ac792d4
including microblog support, still needs generalization for config support. 		3 years ago
archetypes adding archetypes to the existing themes 7 years ago
images removing old screenshot 7 years ago
layouts including microblog support, still needs generalization for config support. 3 years ago
static updates 3 years ago
static_dev/css updates 3 years ago
.gitignore now using brunch to minify css 3 years ago
CHANGELOG.md Add CHANGELOG 4 years ago
LICENSE.md Adding the hyde theme 7 years ago
README.md updated readme, cleaned social icon options 3 years ago
brunch-config.js updated readme, cleaned social icon options 3 years ago
brunch-config.js.save updates 3 years ago
package-lock.json fixing css 3 years ago
package.json cleaned package.json file 3 years ago
theme.toml Bump required Hugo version to v0.21 4 years ago

README.md

Hyde

Sorry, I haven't renamed this theme, but I forked it from spf13/hyde. Major changes:

  • removed non-hugo syntax highlighting; using chroma with 'tomorrow-night-eighties' CSS colors
  • added ability to have sidebar background image
  • added ability to have sidebar shaded overlay between background image & content
  • added ability to have drop shadow on sidebar content
  • added ability to have social icon links on sidebar
  • added css minification to the dev process
  • chose different fonts
  • copyright text changed to image for Creative Commons BY-NC-ND 4.0 license --- you'll want to change that at the bottom of layouts/partials/sidebar.html if you want a different license.

Contents

Installation

To install Hyde as your default theme, first install this repository in the themes/ directory:

$ cd themes/
$ git clone https://github.com/apiontek/hyde

Second, specify hyde as your default theme in the config.toml file. Just add the line

theme = "hyde"

at the top of the file.

Options

Hyde includes some customizable options, typically applied via classes on the <body> element.

Syntax highlighting

With the following options, by default this theme will result in syntax highlighting done by hugo's built-in chroma, with a tomorrow-night-eighties theme:

pygmentsUseClasses = true
pygmentsCodefences = true
pygmentsCodefencesGuessSyntax = true

I converted all the tomorrow* themes from pygments, following parsiya's instructions (also here).

To use a different tomorrow* theme, they're all in static_dev/css. Move tomorrow-night-eighties.css out of the 'screen' folder, and move in the one you want. Then update brunch-config.js and do a new brunch build -p

To use a built-in chroma style, remove pygmentsUseClasses and set pygmentsStyle to one of the built-in styles.

Sidebar background

Specify a path (relative to static/) to an image to use as a sidebar background:

[params]
  sidebarbg = "img/bg.jpg"

The above would load an image placed at static/img/bg.jpg

Sidebar shaded overlay

This doesn't make much sense if you're not using a sidebar background image, but if you are, this places a shaded overlay over the image, which can improve legibility of sidebar content in some cases by "dimming" it:

[params]
  sidebarbgshade = true

Sidebar content drop shadow

This will add a drop shadow to the text and fontawesome icons (if any) used on the sidebar:

[params]
  sidebardropshadow = true

Sidebar social icons

To show social icons on the sidebar, add one or more of the following to your config:

[[params.social]]
  faName = "keybase"
  faStyle = "fab"
  url = "https://keybase.io/adampiontek"

in the above example:

  • faName is the name of the fontawesome icon you want to use.
  • faStyle is the fontawesome style you want to use, usually fab for 'brands' but could also be fas for 'solid' or, if you have the pro package and want to update the fontawesome CDN link in the header, then this could be far for 'regular' or fal for 'light.'
  • url is where you want the link to go. Either the corresponding social profile, or maybe for an rss button, "/index.xml" like I use.

Sidebar menu

Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disabled 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).

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add the themeColor variable under params, like so:

TOML

theme = "hyde"

[params]
  themeColor = "theme-base-09"

YAML

theme: "hyde"

params:
  themeColor: "theme-base-09"

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 with reverse layout

To reverse page orientation, add the layoutReverse variable under params, like so:

TOML

theme = "hyde"

[params]
  layoutReverse = true

YAML

theme: "hyde"

params:
  layoutReverse: true

Disqus

You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable disqusShortname to your config file.

TOML

disqusShortname = "spf13"

YAML

disqusShortname : spf13

Note: Previous version 1.0 the Disqus shortname had to be defined inside the [params] block.

Google Analytics

Google Analytics can be enabled by assigning your tracking code to the googleAnalytics variable in the config file:

TOML

googleAnalytics = "Your tracking code"

YAML

googleAnalytics: Your tracking code

Author

Mark Otto

Ported By

Steve Francia

License

Open sourced under the MIT license.

<3