Skip to content

Commit

Permalink
Initial experimentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Ezell committed Apr 23, 2022
1 parent f8f0f5e commit abb88d6
Show file tree
Hide file tree
Showing 5 changed files with 367 additions and 397 deletions.
105 changes: 10 additions & 95 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,118 +1,33 @@
# Hyde

Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler.

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

Vapor1994 is a two-column theme for micro.blog sites.

## Contents

- [Usage](#usage)
- [Options](#options)
- [Sidebar menu](#sidebar-menu)
- [Sticky sidebar content](#sticky-sidebar-content)
- [Themes](#themes)
- [Reverse layout](#reverse-layout)
- [Development](#development)
- [Author](#author)
- [License](#license)


## Usage

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


## 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 each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/).

```
---
layout: page
title: About
---
```

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


### Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable 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
To install Vapor1994 on your micro.blog site, just use this repository's URL in the Design section of your site.

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 anyone of the available theme classes to the `<body>` element in the `default.html` layout, like so:

```html
<body class="theme-base-08">
...
</body>
```

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)

Hyde's page orientation can be reversed with a single class.

```html
<body class="layout-reverse">
...
</body>
```


## Development

Hyde has two branches, but only one is used for active development.
## Author

- `master` for development. **All pull requests should be submitted against `master`.**
- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
**Alex Ezell**

- <https://github.com/aezell>
- <https://micro.alexezell.com>

## Author
My dumb modifications of stellar work by:

**Mark Otto**

- <https://github.com/mdo>
- <https://twitter.com/mdo>


## License

Open sourced under the [MIT license](LICENSE.md).
Open sourced under the [MIT license](LICENSE.md) as licensed by Mark Otto.

<3
85 changes: 48 additions & 37 deletions layouts/partials/head.html
Original file line number Diff line number Diff line change
@@ -1,49 +1,60 @@
<head>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="http://gmpg.org/xfn/11" rel="profile" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>

<title>
{{ if .IsHome }}
{{ .Site.Title }}
{{ else }}
{{ .Site.Title }} &middot; {{ .Title }}
{{ end }}
{{ if .IsHome }} {{ .Site.Title }} {{ else }} {{ .Site.Title }} &middot; {{
.Title }} {{ end }}
</title>

<link rel="shortcut icon" href="https://micro.blog/{{ .Site.Author.username }}/favicon.png" type="image/x-icon" />
<link
rel="shortcut icon"
href="https://micro.blog/{{ .Site.Author.username }}/favicon.png"
type="image/x-icon"
/>

<!-- CSS -->
<link rel="stylesheet" href="{{ "css/poole.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/hyde.css" | relURL }}">
<link rel="stylesheet" href="{{ "custom.css" | relURL }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="{{ "css/poole.css" | relURL }}"> <link
rel="stylesheet" href="{{ "css/syntax.css" | relURL }}"> <link
rel="stylesheet" href="{{ "css/vapor1994.css" | relURL }}"> <link
rel="stylesheet" href="{{ "custom.css" | relURL }}">
<link
href="https://fonts.googleapis.com/css2?family=Bungee&family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>

{{ if .RSSLink -}}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
<link href="{{ "podcast.xml" | absURL }}" rel="alternate" type="application/rss+xml" title="Podcast" />
<link rel="alternate" type="application/json" title="{{ .Site.Title }}" href="{{ "feed.json" | absURL }}" />
<link rel="EditURI" type="application/rsd+xml" href="{{ "rsd.xml" | absURL }}" />
{{ end -}}
{{ if .RSSLink -}}
<link
href="{{ .RSSLink }}"
rel="alternate"
type="application/rss+xml"
title="{{ .Site.Title }}"
/>
<link href="{{ "podcast.xml" | absURL }}" rel="alternate"
type="application/rss+xml" title="Podcast" /> <link rel="alternate"
type="application/json" title="{{ .Site.Title }}" href="{{ "feed.json" |
absURL }}" /> <link rel="EditURI" type="application/rsd+xml" href="{{
"rsd.xml" | absURL }}" /> {{ end -}}

<link rel="me" href="https://micro.blog/{{ .Site.Author.username }}" />
{{ with .Site.Params.twitter_username }}
<link rel="me" href="https://twitter.com/{{ . }}" />
{{ end }}
{{ with .Site.Params.github_username }}
<link rel="me" href="https://github.com/{{ . }}" />
{{ end }}
{{ with .Site.Params.instagram_username }}
<link rel="me" href="https://instagram.com/{{ . }}" />
{{ end }}
<link rel="authorization_endpoint" href="https://micro.blog/indieauth/auth" />
<link rel="token_endpoint" href="https://micro.blog/indieauth/token" />
<link rel="micropub" href="https://micro.blog/micropub" />
<link rel="microsub" href="https://micro.blog/microsub" />
<link rel="webmention" href="https://micro.blog/webmention" />
<link rel="subscribe" href="https://micro.blog/users/follow" />
<link rel="me" href="https://micro.blog/{{ .Site.Author.username }}" />
{{ with .Site.Params.twitter_username }}
<link rel="me" href="https://twitter.com/{{ . }}" />
{{ end }} {{ with .Site.Params.github_username }}
<link rel="me" href="https://github.com/{{ . }}" />
{{ end }} {{ with .Site.Params.instagram_username }}
<link rel="me" href="https://instagram.com/{{ . }}" />
{{ end }}
<link rel="authorization_endpoint" href="https://micro.blog/indieauth/auth" />
<link rel="token_endpoint" href="https://micro.blog/indieauth/token" />
<link rel="micropub" href="https://micro.blog/micropub" />
<link rel="microsub" href="https://micro.blog/microsub" />
<link rel="webmention" href="https://micro.blog/webmention" />
<link rel="subscribe" href="https://micro.blog/users/follow" />
</head>
6 changes: 3 additions & 3 deletions plugin.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "1.0",
"title": "Hyde theme",
"description": "Changes your blog to use the Hyde theme."
"version": "1.0",
"title": "Vapor1994 theme",
"description": "Changes your blog to use the Vapor1994 theme."
}
Loading

0 comments on commit abb88d6

Please sign in to comment.