[hyde.git] / README.md

# Hyde

Hyde is a brazen two-column [hugo](https://gohugo.io) theme based on the [Jekyll](http://jekyllrb.com) theme of the same name.
It pairs a prominent sidebar with uncomplicated content.

![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png)


## Contents

- [Installation](#installation)
- [Options](#options)
  - [Sidebar menu](#sidebar-menu)
  - [Sticky sidebar content](#sticky-sidebar-content)
  - [Themes](#themes)
  - [Reverse layout](#reverse-layout)
  - [Disqus](#disqus)
  - [Google Analytics](#google-analytics)
- [Author](#author)
- [Ported by](#ported-by)
- [License](#license)


## Installation

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

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

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.


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

```html
<!-- 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](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).

![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png)

There are eight themes available at this time.

![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)

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

**TOML**
```toml
theme = "hyde"

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

**YAML**
```yaml
theme: "hyde"

params:
  themeColor: "theme-base-09"
```

To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). 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](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png)

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

**TOML**
```toml
theme = "hyde"

[params]
  layoutReverse = true
```

**YAML**
```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**
```toml
disqusShortname = "spf13"
```

**YAML**
```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**
```toml
googleAnalytics = "Your tracking code"
```

**YAML**
```yaml
googleAnalytics: Your tracking code
```

## Author
**Mark Otto**
- <https://github.com/mdo>
- <https://twitter.com/mdo>

## Ported By
**Steve Francia**
- <https://github.com/spf13>
- <https://twitter.com/spf13>

## License

Open sourced under the [MIT license](LICENSE.md).

<3
Commit	Line	Data
da66ac19	1	# Hyde
da66ac19	2
01dd84d1	3	Hyde is a brazen two-column [hugo](https://gohugo.io) theme based on the [Jekyll](http://jekyllrb.com) theme of the same name.
da66ac19	4	It pairs a prominent sidebar with uncomplicated content.
	5
	6	![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png)
	7
	8
	9	## Contents
	10
fff9d5b2	11	- [Installation](#installation)
da66ac19	12	- [Options](#options)
	13	- [Sidebar menu](#sidebar-menu)
	14	- [Sticky sidebar content](#sticky-sidebar-content)
	15	- [Themes](#themes)
	16	- [Reverse layout](#reverse-layout)
62ef2ef0	17	- [Disqus](#disqus)
7cf2943e	18	- [Google Analytics](#google-analytics)
da66ac19	19	- [Author](#author)
5a4a5b18	20	- [Ported by](#ported-by)
da66ac19	21	- [License](#license)
	22
	23
fff9d5b2 PM	24	## Installation
	25
	26	To install Hyde as your default theme, first install this repository in the `themes/` directory:
	27
	28	$ cd themes/
	29	$ git clone https://github.com/spf13/hyde.git
	30
	31	Second, specify `hyde` as your default theme in the `config.toml` file. Just add the line
	32
	33	theme = "hyde"
	34
	35	at the top of the file.
	36
	37
da66ac19	38	## Options
	39
	40	Hyde includes some customizable options, typically applied via classes on the `<body>` element.
	41
	42
	43	### Sidebar menu
	44
	45	Create a list of nav links in the sidebar by assigning "menu=main" in the front matter.
	46
	47
	48	### Sticky sidebar content
	49
	50	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.
	51
	52	```html
	53	<!-- Default sidebar -->
	54	<div class="sidebar">
	55	<div class="container sidebar-sticky">
	56	...
	57	</div>
	58	</div>
	59
	60	<!-- Modified sidebar -->
	61	<div class="sidebar">
	62	<div class="container">
	63	...
	64	</div>
	65	</div>
	66	```
	67
	68
	69	### Themes
	70
	71	Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).
	72
	73	![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png)
	74
	75	There are eight themes available at this time.
	76
	77	![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)
	78
a874cebd	79	To use a theme, add the `themeColor` variable under `params`, like so:
da66ac19	80
00eb7169	81	TOML
	82	```toml
	83	theme = "hyde"
	84
	85	[params]
	86	themeColor = "theme-base-09"
	87	```
	88
	89	YAML
a874cebd	90	```yaml
00eb7169	91	theme: "hyde"
a874cebd	92
00eb7169	93	params:
00eb7169	94	themeColor: "theme-base-09"
da66ac19	95	```
	96
	97	To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
	98
	99	### Reverse layout
	100
	101	![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png)
	102
a04b9e15	103	To reverse page orientation, add the `layoutReverse` variable under `params`, like so:
da66ac19	104
a04b9e15 JK	105	TOML
	106	```toml
	107	theme = "hyde"
	108
	109	[params]
	110	layoutReverse = true
	111	```
	112
	113	YAML
	114	```yaml
	115	theme: "hyde"
	116
	117	params:
	118	layoutReverse: true
da66ac19	119	```
da66ac19	120
62ef2ef0	121	### Disqus
62ef2ef0	122
7cf2943e	123	You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable `disqusShortname` to your config file.
62ef2ef0	124
	125	TOML
	126	```toml
eab19740	127	disqusShortname = "spf13"
62ef2ef0	128	```
62ef2ef0	129
804cee45	130	YAML
	131	```yaml
	132	disqusShortname : spf13
	133	```
	134
eab19740	135	> Note: Previous version 1.0 the Disqus shortname had to be defined inside the `[params]` block.
62ef2ef0	136
7cf2943e	137
	138	## Google Analytics
	139
	140	Google Analytics can be enabled by assigning your tracking code to the `googleAnalytics` variable in the config file:
	141
	142	TOML
	143	```toml
	144	googleAnalytics = "Your tracking code"
	145	```
	146
	147	YAML
	148	```yaml
	149	googleAnalytics: Your tracking code
	150	```
	151
da66ac19	152	## Author
da66ac19	153	Mark Otto
	154	- <https://github.com/mdo>
	155	- <https://twitter.com/mdo>
	156
	157	## Ported By
	158	Steve Francia
	159	- <https://github.com/spf13>
	160	- <https://twitter.com/spf13>
	161
	162	## License
	163
	164	Open sourced under the [MIT license](LICENSE.md).
	165
	166	<3