Skip to content

Commit

Permalink
readme and cname
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Dec 30, 2013
1 parent 21f14ba commit fa70898
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 62 deletions.
2 changes: 1 addition & 1 deletion CNAME
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
did.andhyde.com
lanyon.getpoole.com
82 changes: 21 additions & 61 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,31 @@
# [Did](https://mdo.github.io/did)
# Lanyon

[Did](http://mdo.github.io/did) is a [Jekyll](http://jekyllrb.com) theme, designed and built by [@mdo](https://twitter.com/mdo). It's based on another theme, [Hyde](http://andhyde.com). Did is designed to showcase your content first and foremost. Navigation and extraneous information remains offscreen until the reader requests it.
Lanyon is a [Jekyll](http://jekyllrb.com) theme built with a featuring a toggleable sidebar drawer for out of sight navigation. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler.

![Did](https://f.cloud.github.com/assets/98681/1819955/697ac4c8-70c0-11e3-8d34-403dac775329.png)
![Did with open sidebar](https://f.cloud.github.com/assets/98681/1819956/697b6e5a-70c0-11e3-8fe9-b8098f9c61e5.png)
![Lanyon](https://f.cloud.github.com/assets/98681/1819955/697ac4c8-70c0-11e3-8d34-403dac775329.png)
![Lanyon with open sidebar](https://f.cloud.github.com/assets/98681/1819956/697b6e5a-70c0-11e3-8fe9-b8098f9c61e5.png)

The name originates from a rather well-known, and unsurprisingly relevant, psychiatric condition, [dissociative identity disorder](http://en.wikipedia.org/wiki/Dissociative_identity_disorder). (Protip: It's just like Dr. Jekyll & Mr. Hyde.)

## Installation

## Usage
### Requires Poole

### 1. Install Jekyll
To get started, download [Poole](https://github.com/poole/poole). See [the usage guidelines](https://github.com/poole/poole#usage) for how to install and get up and running with Jekyll and Poole.

Did is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:
### Enabling Lanyon

```bash
$ gem install jekyll
```

**Windows users:** Windows users have a bit more work to do, but luckily [@juthilo](https://github.com/juthilo) has your back with his [Run Jekyll on Windows](https://github.com/juthilo/run-jekyll-on-windows) guide.

You may also need to install Pygments, the Python syntax highlighter for code snippets that places nicely with Jekyll. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting).

### 2a. Quick start

To help anyone with any level of familiarity with Jekyll quickly get started, Did includes everything you need for a basic Jekyll site. To that end, just download Did and start up Jekyll.

### 2b. Roll your own Jekyll site

Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Did and then copy what you need (likely `_layouts/`, `*.html` files, `atom.xml` for RSS, and `public/` for CSS, JS, etc.).

### 3. Running locally

To see your Jekyll site with Did applied, start a Jekyll server. In Terminal, from `/did` (or whatever your Jekyll site's root directory is named):
Copy over the included files to turn any vanilla Poole site into a Lanyon site.

```bash
$ jekyll serve
```
- Replace `_includes/head.html` with the included file of the same name
- Replace `_layouts/default.html` with the included file of the same name
- Move `public/css/lanyon.css` to `public/css/`

Open <http://localhost:4000> in your browser, and voilà. You're done.
Then, start up your Jekyll server and go!


## Options

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


### Rems, `font-size`, and scaling

Did is built with almost entirely with `rem`s (instead of pixels like Hyde 1.1.x). `rem`s are like `em`s, but instead of building on the immediate parent's `font-size`, they build on the root element, `<html>`.

By default, we use the following:

```css
html {
font-size: 16px;
line-height: 1.5;
}
@media (min-width: 48rem) { /* ~768px */
html {
font-size: 20px;
}
}

```

To easily scale your site's typography and components, simply customize the base `font-size`s here.
Lanyon includes some customizable options, typically applied via classes on the `<body>` element.


### Sidebar menu
Expand All @@ -84,14 +44,14 @@ title: About

### Themes

Just like [Hyde](https://github.com/mdo/hyde), Did 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).
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).

![Did with red theme](https://f.cloud.github.com/assets/98681/1819959/6999645a-70c0-11e3-9086-c451f597ee70.png)
![Did with red theme and open sidebar](https://f.cloud.github.com/assets/98681/1819960/699a181e-70c0-11e3-8696-a6a8f258824e.png)
![Lanyon with red theme](https://f.cloud.github.com/assets/98681/1819959/6999645a-70c0-11e3-9086-c451f597ee70.png)
![Lanyon with red theme and open sidebar](https://f.cloud.github.com/assets/98681/1819960/699a181e-70c0-11e3-8696-a6a8f258824e.png)

There are eight themes available at this time.

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

To use a theme, add anyone of the available theme classes to the `<body>` element in the `default.html` layout, like so:

Expand All @@ -101,13 +61,13 @@ To use a theme, add anyone of the available theme classes to the `<body>` elemen
</body>
```

To create your own theme, look to the Themes section of [Did's CSS](https://github.com/mdo/did/blob/master/public/css/did.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
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.


### Reverse layout

![Did with reverse layout](https://f.cloud.github.com/assets/98681/1819958/698cbe1c-70c0-11e3-861d-a7a2fdc34823.png)
![Did with reverse layout and open sidebar](https://f.cloud.github.com/assets/98681/1819957/698c2d08-70c0-11e3-88c7-6b8e1618b363.png)
![Lanyon with reverse layout](https://f.cloud.github.com/assets/98681/1819958/698cbe1c-70c0-11e3-861d-a7a2fdc34823.png)
![Lanyon with reverse layout and open sidebar](https://f.cloud.github.com/assets/98681/1819957/698c2d08-70c0-11e3-88c7-6b8e1618b363.png)

Reverse the page orientation with a single class.

Expand Down

0 comments on commit fa70898

Please sign in to comment.