|
1 | | -# Lanyon |
| 1 | +### Personal website |
2 | 2 |
|
3 | | -Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler. |
4 | | - |
5 | | - |
6 | | - |
7 | | - |
8 | | - |
9 | | -## Contents |
10 | | - |
11 | | -- [Usage](#usage) |
12 | | -- [Options](#options) |
13 | | - - [Sidebar menu](#sidebar-menu) |
14 | | - - [Themes](#themes) |
15 | | - - [Reverse layout](#reverse-layout) |
16 | | -- [Development](#development) |
17 | | -- [Author](#author) |
18 | | -- [License](#license) |
19 | | - |
20 | | - |
21 | | -## Usage |
22 | | - |
23 | | -Lanyon is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll. |
24 | | - |
25 | | - |
26 | | -## Options |
27 | | - |
28 | | -Lanyon includes some customizable options, typically applied via classes on the `<body>` element. |
29 | | - |
30 | | - |
31 | | -### Sidebar menu |
32 | | - |
33 | | -Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/). |
34 | | - |
35 | | -``` |
36 | | ---- |
37 | | -layout: page |
38 | | -title: About |
39 | | ---- |
40 | | -``` |
41 | | - |
42 | | -**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout. |
43 | | - |
44 | | - |
45 | | -### Themes |
46 | | - |
47 | | -Lanyon 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). |
48 | | - |
49 | | - |
50 | | - |
51 | | - |
52 | | -There are eight themes available at this time. |
53 | | - |
54 | | - |
55 | | - |
56 | | -To use a theme, add any one of the available theme classes to the `<body>` element in the `default.html` layout, like so: |
57 | | - |
58 | | -```html |
59 | | -<body class="theme-base-08"> |
60 | | - ... |
61 | | -</body> |
62 | | -``` |
63 | | - |
64 | | -To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/lanyon/blob/master/public/css/lanyon.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. |
65 | | - |
66 | | - |
67 | | -### Reverse layout |
68 | | - |
69 | | - |
70 | | - |
71 | | - |
72 | | -Reverse the page orientation with a single class. |
73 | | - |
74 | | -```html |
75 | | -<body class="layout-reverse"> |
76 | | - ... |
77 | | -</body> |
78 | | -``` |
79 | | - |
80 | | - |
81 | | -### Sidebar overlay instead of push |
82 | | - |
83 | | -Make the sidebar overlap the viewport content with a single class: |
84 | | - |
85 | | -```html |
86 | | -<body class="sidebar-overlay"> |
87 | | - ... |
88 | | -</body> |
89 | | -``` |
90 | | - |
91 | | -This will keep the content stationary and slide in the sidebar over the side content. It also adds a `box-shadow` based outline to the toggle for contrast against backgrounds, as well as a `box-shadow` on the sidebar for depth. |
92 | | - |
93 | | -It's also available for a reversed layout when you add both classes: |
94 | | - |
95 | | -```html |
96 | | -<body class="layout-reverse sidebar-overlay"> |
97 | | - ... |
98 | | -</body> |
99 | | -``` |
100 | | - |
101 | | -### Sidebar open on page load |
102 | | - |
103 | | -Show an open sidebar on page load by modifying the `<input>` to add the `checked` boolean attribute: |
104 | | - |
105 | | -```html |
106 | | -<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked> |
107 | | -``` |
108 | | - |
109 | | -Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only: |
110 | | - |
111 | | -```html |
112 | | -<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}> |
113 | | -``` |
114 | | - |
115 | | -## Development |
116 | | - |
117 | | -Lanyon has two branches, but only one is used for active development. |
118 | | - |
119 | | -- `master` for development. **All pull requests should be to submitted against `master`.** |
120 | | -- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** |
121 | | - |
122 | | - |
123 | | -## Author |
124 | | - |
125 | | -**Mark Otto** |
126 | | -- <https://github.com/mdo> |
127 | | -- <https://twitter.com/mdo> |
128 | | - |
129 | | - |
130 | | -## License |
131 | | - |
132 | | -Open sourced under the [MIT license](LICENSE.md). |
133 | | - |
134 | | -<3 |
| 3 | +Here is my personal website created using [Jekyll](http://jekyllrb.com) and the [lanyon](https://github.com/poole/lanyon) theme (modified from [ragupappu](https://github.com/ragupappu/ragupappu.github.io)). |
0 commit comments