Skip to content

Commit 4a61f5a

Browse files
mdomdo
committed
start in on v2
1 parent 989e5c2 commit 4a61f5a

11 files changed

+500
-433
lines changed

‎404.html

+9-55
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,9 @@
1-
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
3-
<head>
4-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
5-
<meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1">
6-
<link href="http://gmpg.org/xfn/11" rel="profile">
7-
8-
<title>
9-
Hyde, a Jekyll theme
10-
</title>
11-
12-
<!-- CSS -->
13-
<link rel="stylesheet" href="/public/css/hyde.css">
14-
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700|Abril+Fatface">
15-
16-
<!-- Icons -->
17-
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/touch-icon-144-precomposed.png">
18-
<link rel="shortcut icon" href="/public/favicon.png">
19-
20-
<!-- RSS -->
21-
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
22-
</head>
23-
<body>
24-
25-
<header class="masthead">
26-
<div class="masthead-inner">
27-
<h1>Hyde</h1>
28-
<p class="lead">An elegant open source and mobile first theme for <a href="http://jekyllrb.com" target="_blank">Jekyll</a>. Made by <a href="https://twitter.com/mdo" target="_blank">@mdo</a>.</p>
29-
30-
<div class="colophon">
31-
<ul class="colophon-links">
32-
<li>
33-
<a href="https://github.com/mdo/hyde/archive/v1.0.0.zip">Download</a>
34-
</li>
35-
<li>
36-
<a href="https://github.com/mdo/hyde">GitHub project</a>
37-
</li>
38-
<li>Currently v1.1</li>
39-
</ul>
40-
<p>&copy; 2013. All rights reserved.</p>
41-
</div>
42-
43-
</div>
44-
</header>
45-
46-
<div class="content container">
47-
<h1>404: Page not found</h1>
48-
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="/">Visit the home page</a> to see if you can find it manually. Thanks!</p>
49-
<hr>
50-
<h3>Heads up!</h3>
51-
<p>This is a basic 404 page for use with GitHub Pages. It's source code is not generated by Jekyll.</p>
52-
</div>
53-
54-
</body>
55-
</html>
1+
---
2+
layout: default
3+
title: "404: Page not found"
4+
---
5+
6+
<div class="page">
7+
<h1 class="page-title">404: Page not found</h1>
8+
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="/">Head back home</a> to try finding it again.</p>
9+
</div>

‎README.md

+15-31
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,50 @@
1-
# [Hyde](http://andhyde.com)
1+
# Hyde
22

3-
An elegant open source, mobile first theme for [Jekyll](https://github.com/mojombo/jekyll). It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time.
3+
Hyde is a [Jekyll](https://github.com/mojombo/jekyll) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler.
44

55
![Hyde screenshot](https://f.cloud.github.com/assets/98681/1818325/da6489d8-6ff5-11e3-9b4f-c56b92013e9a.png)
66

77

8-
## Usage
8+
## Installation
99

10-
### 1. Install Jekyll
10+
### Requires Poole
1111

12-
Hyde is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:
12+
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.
1313

14-
```bash
15-
$ gem install jekyll
16-
```
17-
18-
**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.
19-
20-
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).
21-
22-
### 2a. Quick start
23-
24-
To help anyone with any level of familiarity with Jekyll quickly get started, Hyde includes everything you need for a basic Jekyll site. To that end, just download Hyde and start up Jekyll.
14+
### Enabling Hyde
2515

26-
### 2b. Roll your own Jekyll site
16+
Copy over the included files to turn any vanilla Poole site into a Hyde site.
2717

28-
Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Hyde and then copy what you need (likely `_layouts/`, `*.html` files, `atom.xml` for RSS, and `public/` for CSS, JS, etc.).
29-
30-
### 3. Running locally
31-
32-
To see your Jekyll site with Hyde applied, start a Jekyll server. In Terminal, from `/hyde` (or whatever your Jekyll site's root directory is named):
33-
34-
```bash
35-
$ jekyll serve
36-
```
18+
- Replace `_includes/` with the included folder of the same name (will replace `_includes/head.html` and add `_includes/sidebar.html`)
19+
- Replace `_layouts/default.html` with the included file of the same name
20+
- Move `public/css/hyde.css` to `public/css/`
3721

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

4024

4125
## Options
4226

43-
Hyde includes a few options, typically applied via classes on the `<body>` element.
27+
Hyde includes some customizable options, typically applied via classes on the `<body>` element.
4428

4529
### Themes
4630

47-
As of v1.1, Hyde ships with optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action:
31+
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).
4832

4933
![Hyde in red](https://f.cloud.github.com/assets/98681/1818326/da64f56c-6ff5-11e3-9643-7d0c18157dec.png)
5034

5135
There are eight themes available at this time.
5236

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

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

5741
```html
5842
<body class="theme-base-08">
5943
...
6044
</body>
6145
```
6246

63-
To create your own theme, look to the Themes section of [Hyde's CSS](https://github.com/mdo/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.
47+
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.
6448

6549
### Reverse layout
6650

‎_includes/head.html

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
<head>
2+
<link href="http://gmpg.org/xfn/11" rel="profile">
23
<meta http-equiv="content-type" content="text/html; charset=utf-8">
4+
5+
<!-- Enable responsiveness on mobile devices-->
36
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
4-
<link href="http://gmpg.org/xfn/11" rel="profile">
57

68
<title>
7-
{% if page.title %}{{ page.title }} &middot; {% endif %}
8-
{{ site.tagline }}
9+
{% if page.title %} {{ page.title }}
10+
{% else %}
11+
{{ site.title }}
12+
{% endif %}
13+
&middot; {{ site.tagline }}
914
</title>
1015

1116
<!-- CSS -->
12-
<link rel="stylesheet" href="/public/css/hyde.css">
17+
<link rel="stylesheet" href="/public/css/poole.css">
1318
<link rel="stylesheet" href="/public/css/syntax.css">
14-
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700|Abril+Fatface">
19+
<link rel="stylesheet" href="/public/css/hyde.css">
20+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
1521

1622
<!-- Icons -->
17-
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/touch-icon-144-precomposed.png">
18-
<link rel="shortcut icon" href="/public/favicon.png">
23+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
24+
<link rel="shortcut icon" href="/public/favicon.ico">
1925

2026
<!-- RSS -->
2127
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">

‎_includes/masthead.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<header class="masthead">
2+
<div class="masthead-inner">
3+
<h1 class="masthead-title">{{ site.title }}</h1>
4+
<p>{{ site.description }}</p>
5+
6+
<div class="colophon">
7+
<ul class="colophon-links">
8+
<li>
9+
<a href="https://github.com/mdo/hyde/archive/v{{ site.version }}.zip">Download</a>
10+
</li>
11+
<li>
12+
<a href="https://github.com/mdo/hyde">GitHub project</a>
13+
</li>
14+
<li>Currently v{{ site.version }}</li>
15+
</ul>
16+
<p>&copy; 2014. {{ site.author.name }} All rights reserved.</p>
17+
</div>
18+
</div>
19+
</header>

‎_layouts/default.html

+1-19
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,7 @@
55

66
<body>
77

8-
<header class="masthead">
9-
<div class="masthead-inner">
10-
<h1>{{ site.title }}</h1>
11-
<p class="lead">{{ site.description }}</p>
12-
13-
<div class="colophon">
14-
<ul class="colophon-links">
15-
<li>
16-
<a href="https://github.com/mdo/hyde/archive/v{{ site.version }}.zip">Download</a>
17-
</li>
18-
<li>
19-
<a href="https://github.com/mdo/hyde">GitHub project</a>
20-
</li>
21-
<li>Currently v{{ site.version }}</li>
22-
</ul>
23-
<p>&copy; 2014. {{ site.author.name }} All rights reserved.</p>
24-
</div>
25-
</div>
26-
</header>
8+
{% include masthead.html %}
279

2810
<div class="content container">
2911
{{ content }}

‎_layouts/page.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="page">
6+
<h1 class="page-title">{{ page.title }}</h1>
7+
{{ content }}
8+
</div>

‎_layouts/post.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
---
44

55
<div class="post">
6-
<h1>{{ page.title }}</h1>
6+
<h1 class="post-title">{{ page.title }}</h1>
77
<span class="post-date">{{ page.date | date_to_string }}</span>
88
{{ content }}
99
</div>

‎_posts/2013-12-28-hello-world.md

-28
This file was deleted.

‎_posts/2013-12-28-introducing-hyde.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: post
3+
title: Introducing Hyde
4+
---
5+
6+
Hyde is a [Jekyll](http://jekyllrb.com) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler, and is designed to showcase your content first and foremost with extraneous information hidden offscreen until the reader requests it.
7+
8+
### Built on Poole
9+
10+
Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following:
11+
12+
* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
13+
* Mobile friendly design and development
14+
* Easily scalable text and component sizing with `rem` units in the CSS
15+
* Support for a wide gamut of HTML elements
16+
* Related posts (time-based, because Jekyll) below each post
17+
* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
18+
19+
### Hyde features
20+
21+
In addition to the features of Poole, Lanyon adds the following:
22+
23+
* Sidebar includes support for textual modules and a dynamically generated navigation with active link support
24+
* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
25+
* [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `<body>` classes
26+
27+
[Head to the readme](https://github.com/poole/hyde#readme) to learn more.
28+
29+
### Browser support
30+
31+
Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
32+
33+
### Download
34+
35+
Hyde is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/hyde">GitHub repository</a> for downloads, bug reports, and features requests.
36+
37+
Thanks!

0 commit comments

Comments
 (0)