Readme.md 1.09 KB
Newer Older
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
1
# HCI Theme
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
2

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
3
The HCI Theme packaged as a gem.
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
4
5
6
7


## Installation

8
Add these lines to your Jekyll site's `Gemfile`:
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
9
10

```ruby
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
11
12
gem "hci-theme", :git => "git@gitlab2.informatik.uni-wuerzburg.de:hci-development/hci-theme.git"
gem "jekyll-img-srcset", :git => "git@gitlab2.informatik.uni-wuerzburg.de:hci-development/jekyll-img-srcset.git"
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
13
14
```

15
And add these lines to your Jekyll site's `_config.yml`:
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
16
17
18

```yaml
theme: hci-theme
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
19
20
plugins:
  - jekyll-img-srcset
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
21
22
23
24
25
26
27
28
29
30
31
32
```

And then execute:

    $ bundle

Or install it yourself as:

    $ gem install hci-theme

## Usage

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
33
34
### Menu
The menu is configured in the `_config.yml` file as.
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
35

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
36
37
38
39
40
41
42
43
```yaml
menu:
  - title: "Home"
    href: "/"
    items:
      - title: "Other"
        href: "/other"
```
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
44

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
45
46
### Image Carousel
The teaser images at the top can be selected for each page individually with a default in the `_config.yml` as:
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
47

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
48
49
50
51
```yaml
slides:
  - general/bbb-demo.jpg
```
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
52

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
53
54
### Image Resizing
Images get resized to provide lower resulutions for mobile devices. Select which widths to generate in the `_config.yml` with:
Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
55

Jan-Philipp Stauffert's avatar
Jan-Philipp Stauffert committed
56
57
58
59
60
61
62
63
```yaml
widths:
  - 1688
  - 1208
  - 844
  - 640
  - 320
```