Stop tocbot appearing over content on mobile

[yorkshire-pudding]

On mobiles, Tocbots placed in sidebars appear on top of the content. Following discussion over #43 it was decided that to fix the immediate bug we should stop the tocbot block appearing over content.

#43 will remain open to try to implement a pattern that allows that ToC to be used wherever the user is in the content.

[olafgrabienski]

Thanks for the PR! I've tested the change and found out it works only for screens at least 769px wide. To make it work for 768px (e.g. for iPads in portrait mode), I'd suggest to set position: relative without media query condition. Then add a min-width media query to set position: fixed.

[olafgrabienski]

This works for me:

.js-toc-block.is-position-fixed {
  position: relative !important;
}

@media (min-width: 48em) {
  .js-toc-block.is-position-fixed {
    position: fixed !important;
    top: 80px;
    max-width: 150px;
  }
}

Notes re this approach:

• In the first part, I guess we don't need to unset the top value.
• In the second part, I have integrated the changes in the existing media query.

[yorkshire-pudding]

Thanks @olafgrabienski - that makes sense. PR updated

[olafgrabienski]

Thanks a lot, @yorkshire-pudding – I've merged the PR after the last changes.