]>
Commit | Line | Data |
---|---|---|
da66ac19 | 1 | # Hyde |
2 | ||
3 | Hyde is a brazen two-column [hugo](http://hugo.spf13.com) theme based on the [Jekyll](http://jekyllrb.com) theme of the same name. | |
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 | ||
da66ac19 | 11 | - [Options](#options) |
12 | - [Sidebar menu](#sidebar-menu) | |
13 | - [Sticky sidebar content](#sticky-sidebar-content) | |
14 | - [Themes](#themes) | |
15 | - [Reverse layout](#reverse-layout) | |
62ef2ef0 | 16 | - [Disqus](#disqus) |
da66ac19 | 17 | - [Development](#development) |
18 | - [Author](#author) | |
5a4a5b18 | 19 | - [Ported by](#ported-by) |
da66ac19 | 20 | - [License](#license) |
21 | ||
22 | ||
23 | ## Options | |
24 | ||
25 | Hyde includes some customizable options, typically applied via classes on the `<body>` element. | |
26 | ||
27 | ||
28 | ### Sidebar menu | |
29 | ||
30 | Create a list of nav links in the sidebar by assigning "menu=main" in the front matter. | |
31 | ||
32 | ||
33 | ### Sticky sidebar content | |
34 | ||
35 | 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. | |
36 | ||
37 | ```html | |
38 | <!-- Default sidebar --> | |
39 | <div class="sidebar"> | |
40 | <div class="container sidebar-sticky"> | |
41 | ... | |
42 | </div> | |
43 | </div> | |
44 | ||
45 | <!-- Modified sidebar --> | |
46 | <div class="sidebar"> | |
47 | <div class="container"> | |
48 | ... | |
49 | </div> | |
50 | </div> | |
51 | ``` | |
52 | ||
53 | ||
54 | ### Themes | |
55 | ||
56 | 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). | |
57 | ||
58 | ![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png) | |
59 | ||
60 | There are eight themes available at this time. | |
61 | ||
62 | ![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) | |
63 | ||
a874cebd | 64 | To use a theme, add the `themeColor` variable under `params`, like so: |
da66ac19 | 65 | |
00eb7169 | 66 | **TOML** |
67 | ```toml | |
68 | theme = "hyde" | |
69 | ||
70 | [params] | |
71 | themeColor = "theme-base-09" | |
72 | ``` | |
73 | ||
74 | **YAML** | |
a874cebd | 75 | ```yaml |
00eb7169 | 76 | theme: "hyde" |
a874cebd | 77 | |
00eb7169 | 78 | params: |
79 | themeColor: "theme-base-09" | |
da66ac19 | 80 | ``` |
81 | ||
82 | 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. | |
83 | ||
84 | ### Reverse layout | |
85 | ||
86 | ![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png) | |
87 | ||
88 | Hyde's page orientation can be reversed with a single class. | |
89 | ||
90 | ```html | |
91 | <body class="layout-reverse"> | |
92 | ... | |
93 | </body> | |
94 | ``` | |
95 | ||
62ef2ef0 | 96 | ### Disqus |
97 | ||
98 | You can optionally enable a comment system powered by Disqus for the posts. Simply add the variable `disqusShortname` to the `params` in your config file. | |
99 | ||
100 | **TOML** | |
101 | ```toml | |
102 | [params] | |
103 | disqusShortname = "spf13" | |
104 | ``` | |
105 | ||
106 | **YAML** | |
107 | ```yaml | |
108 | params: | |
109 | disqusShortname: "spf13" | |
110 | ``` | |
111 | ||
da66ac19 | 112 | ## Author |
da66ac19 | 113 | **Mark Otto** |
114 | - <https://github.com/mdo> | |
115 | - <https://twitter.com/mdo> | |
116 | ||
117 | ## Ported By | |
118 | **Steve Francia** | |
119 | - <https://github.com/spf13> | |
120 | - <https://twitter.com/spf13> | |
121 | ||
122 | ## License | |
123 | ||
124 | Open sourced under the [MIT license](LICENSE.md). | |
125 | ||
126 | <3 |