||3 years ago|
|archetypes||7 years ago|
|images||7 years ago|
|layouts||3 years ago|
|static||3 years ago|
|static_dev/css||3 years ago|
|.gitignore||3 years ago|
|CHANGELOG.md||4 years ago|
|LICENSE.md||7 years ago|
|README.md||3 years ago|
|brunch-config.js||3 years ago|
|brunch-config.js.save||3 years ago|
|package-lock.json||3 years ago|
|package.json||3 years ago|
|theme.toml||4 years ago|
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.htmlif you want a different license.
- Ported by
To install Hyde as your default theme, first install this repository in the
$ cd themes/ $ git clone https://github.com/apiontek/hyde
hyde as your default theme in the
config.toml file. Just add the line
theme = "hyde"
at the top of the file.
Hyde includes some customizable options, typically applied via classes on the
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
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.
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
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:
faNameis the name of the fontawesome icon you want to use.
faStyleis the fontawesome style you want to use, usually
fabfor 'brands' but could also be
fasfor 'solid' or, if you have the pro package and want to update the fontawesome CDN link in the header, then this could be
farfor 'regular' or
urlis where you want the link to go. Either the corresponding social profile, or maybe for an rss button, "/index.xml" like I use.
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>
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 the
themeColor variable under
params, like so:
theme = "hyde" [params] themeColor = "theme-base-09"
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.
To reverse page orientation, add the
layoutReverse variable under
params, like so:
theme = "hyde" [params] layoutReverse = true
theme: "hyde" params: layoutReverse: true
You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable
disqusShortname to your config file.
disqusShortname = "spf13"
disqusShortname : spf13
Note: Previous version 1.0 the Disqus shortname had to be defined inside the
Google Analytics can be enabled by assigning your tracking code to the
googleAnalytics variable in the config file:
googleAnalytics = "Your tracking code"
googleAnalytics: Your tracking code
Open sourced under the MIT license.