# jekyll-theme-miniplex

A theme for [Jekyll](https://jekyllrb.com/). Features:

- Light & dark modes.
- Table reformatting on mobile and for very small screens.
- Styles for printing.
- At least some basic accessibility.
- Responsive.
- Hamburger menu at the bottom right, easy to reach.
- Uses the [IBM Plex](https://www.ibm.com/plex/) typeface, hence the name.

I'm using this for [my personal web site](https://timowuersch.com/), so don't expect this to fit your needs.

## What it looks like

### On desktop

![](screenshot.png)



### On mobile

![](screenshot-mobile.png)

## Installation

Add the following to your Jekyll site's `Gemfile`:

```ruby
gem "jekyll-theme-miniplex"

# jekyll-theme-miniplex depends on these.
gem "jekyll-titles-from-headings", "~> 0.5.3"
gem "jekyll-seo-tag"

# Use the most recent version of jekyll-sass-converter, to force Dart Sass
gem "sass-embedded"
gem "jekyll-sass-converter", github: "jekyll/jekyll-sass-converter"
```

(Note that this will also install [jekyll-titles-from-headings](https://github.com/benbalter/jekyll-titles-from-headings) and [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag/), which this theme depends on.)

Add the following to your Jekyll site's `_config.yml`:

```yaml
theme: jekyll-theme-miniplex

plugins:
  - jekyll-coffeescript
  - jekyll-titles-from-headings
  - jekyll-seo-tag

titles_from_headings:
  enabled: true
  strip_title: true
  collections: true
```

Execute...

    $ bundle

... to install everything.


## Usage

### Layouts

There are 2 layouts:

- `page`: A clean layout with a larger column at the right for text, and a narrower left-hand navigation column.
- `post`: Visually identical to the `page` layout, but shows the post's date and author below the title.

### Configuration options

To change the label of the mobile navigation menu, add this to your `_config.yml`:

```yaml
miniplex:
  mobile_nav_menu_title: "Menü"
```

### Navigation & footer content, and additional HEAD content

Optionally, put any of the following files into the `_includes` folder to override or extend the defaults:

- `footer.html` contains the footer content
- `additional_head_tags.html` will be included at the end of the HEAD block, before BODY starts
- `navigation_desktop.html` and `navigation_mobile.html` contain the contents of the desktop and mobile navigation, respectively.

## ToDos & Missing Features

- [ ] Font legibility & weights optimizations
- [ ] Maximizable tables
- [ ] In-page navigation
- [ ] Breadcrumbs, if possible
- [ ] Side notes, if possible


### Done

Most recent at the top.

- [X] Removed `overview` layout because it wasn't really a layout.
- [X] Tests & fixes for mobile navigation. Issues:
  - [X] Chrome on Android: Navigation bar position (floating or hidden)
  - [X] Missing shadow on mobile nav
- [X] Footer
- [X] Dark mode
- [X] Print CSS
- [X] Mobile nav bugfixing
- [X] Post author & date flexibility
- [X] Add a post's date to the page layout, or to a separate post layout


## License

The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).