Merge pull request #3 from piazzai/hotfix

Fix navigation bug

README.md

@@ -50,13 +50,12 @@ theme: jekyll-nagymaros
 
 The easiest way to set up a new website in this way is to clone the contents of the `demo` folder. This provides a working set of files to get you started.
 
-After you are done creating the basic files, run bundler:
+After you are done creating the basic files, create a local gem library and run bundler:
 
-    $ bundle
-
-Or install the gem yourself as:
-
-    $ gem install jekyll-nagymaros
+```bash
+bundle config set --local path 'vendor/bundle'
+bundle install
+```
 
 To customize hidden files, you can create new files with the same names and paths. For example, to change the layout of the index page, you can create a `_layouts` folder and a file `index.html` within this folder that contains your custom code. During build, Jekyll will give priority to your files over the theme's.
 
@@ -76,42 +75,42 @@ The order of appearance of pages in the theme's navigation bar is determined by
 
 Customizing the CSS is possible by creating a file `_sass/_custom.scss`. You can use this both to define new styles or to overwrite the theme's defaults. The file will be automatically compiled during build.
 
-For convenience, the customization of the theme's color scheme is also possible via YAML: in this case, create a file called `skin.yml` in your `_data` folder and assign new colors from the [Open Color](https://yeun.github.io/open-color) library using the `(color)-(number)` convention. Here is an example:
+For convenience, customization of the theme's color scheme is also possible via YAML. In this case, create a file called `skin.yml` in your `_data` folder and assign new colors from the [Open Color](https://yeun.github.io/open-color) library to various HTML elements using the color-number convention. Here is an example:
 
 ```yaml
 a:
-  color: blue-7
-  hover: blue-9
+  color: blue-7         # links
+  hover: blue-9         # links when hovering
 body:
-  bg: gray-0
-  color: gray-8
+  bg: gray-0            # background
+  color: gray-8         # body text
 btn-primary:
-  bg: blue-5
-  color: gray-0
-  hover: blue-7
-  disabled: blue-3
+  bg: blue-5            # primary button
+  color: gray-0         # primary button text
+  hover: blue-7         # primary button when hovering
+  disabled: blue-3      # disabled primary button
 btn-secondary:
-  bg: gray-4
-  color: gray-0
-  hover: gray-6
+  bg: gray-4            # secondary button
+  color: gray-0         # secondary button text
+  hover: gray-6         # secondary button when hovering
 digit:
-  bg: gray-3
+  bg: gray-3            # background of digit on 404 page
 header:
-  bg: gray-4
+  bg: gray-4            # background of navigation bar
 index:
-  bg: gray-2
+  bg: gray-2            # background of index container
 navbar-brand:
-  color: gray-8
-  hover: gray-9
+  color: gray-8         # website name in header
+  hover: gray-9         # website name in header when hovering
 nav-link:
-  color: gray-7
-  hover: gray-9
+  color: gray-7         # navigation links in header
+  hover: gray-9         # navigation links in header when hovering
 text-muted:
-  color: gray-6
-  hover: gray-9
+  color: gray-6         # light text
+  hover: gray-9         # light text when hovering (if link)
 ```
 
-These are actually the theme's defaults. If no value is provided for some of these variables, or if `_data/skin.yml` does not exist at all, the theme will assume the colors above.
+The variables are named after the HTML elements they style. The colors to which they are set in this example are actually the theme's defaults. If no value is provided for some variables, or if `_data/skin.yml` does not exist, the theme assumes the color scheme above.
 
 ## Credits
 

_layouts/program.html

@@ -27,12 +27,12 @@ <h1 class="display-5">{{ title }}</h1>
                 <div class="{{ classes }}">
                     <div class="btn {{ control }} p-0 aos-init aos-animate" role="tablist" data-aos="fade-up">
                         {% for day in site.data.program.days %}
-                        {% assign slug = day.name | slugify %}
+                        {% assign id = forloop.index | prepend: 'day-' %}
                         {% assign classes = 'btn btn-secondary' %}
                         {% if forloop.first %}
                         {% assign classes = classes | append: ' active' %}
                         {% endif %}
-                        <button type="button" class="{{ classes }}" data-bs-toggle="tab" data-bs-target="#{{ slug }}" role="tab" aria-controls="{{ slug }}" aria-selected="true">
+                        <button type="button" class="{{ classes }}" data-bs-toggle="tab" data-bs-target="#{{ id }}" role="tab" aria-controls="{{ id }}" aria-selected="true">
                             <span class="fs-5">{{ day.name }}</span>
                         </button>
                         {% endfor %}
@@ -46,13 +46,13 @@ <h1 class="display-5">{{ title }}</h1>
             {% endif %}
             <div class="col-lg-{{ width }}">
                 {% for day in site.data.program.days %}
-                {% assign slug = day.name | slugify %}
+                {% assign id = forloop.index | prepend: 'day-' %}
                 {% assign classes = 'tab-pane fade' %}
                 {% if forloop.first %}
                 {% assign classes = classes | append: ' active show' %}
                 {% endif %}
                 <div class="tab-content aos-init aos-animate" data-aos="fade-up">
-                    <div class="{{ classes }}" id="{{ slug }}" role="tabpanel" aria-labelledby="{{ slug }}-tab">
+                    <div class="{{ classes }}" id="{{ id }}" role="tabpanel" aria-labelledby="{{ id }}-tab">
                         {% assign categories = site.data.program.legend.categories %}
                         <ul class="list-unstyled lh-sm">
                             {% for event in day.events %}

demo/Gemfile

@@ -1,3 +1,3 @@
 source "https://rubygems.org"
 
-gem 'jekyll-nagymaros', '~> 2.0'
+gem 'jekyll-nagymaros', '~> 2.0', '>= 2.0.1'

jekyll-nagymaros.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-nagymaros"
-  spec.version       = "2.0.0"
+  spec.version       = "2.0.1"
   spec.authors       = ["piazzai"]
   spec.email         = ["[email protected]"]