Merge pull request #132 from froschdesign/hotfix/60

Fixes #60 - Very long table of contents overlaps footer section

Author: froschdesign

asset/sass/blocks/_toc.scss

@@ -3,13 +3,12 @@
     margin-left: map_get($spacers, 4);
 
     @media (min-width: 1750px) {
-        margin-top: 6rem;
         margin-left: -20rem;
         margin-bottom: 0;
-        position: fixed;
-        border-right: 1px solid $separater-color;
-        padding-right: map_get($spacers, 3);
+        position: sticky;
         width: 18rem;
+        height: 0;
+        top: 2rem;
         text-align: right;
     }
 
@@ -20,6 +19,7 @@
     &__headline {
         color: $text-color-reduced;
         margin: 0 0 map_get($spacers, 2);
+        padding-right: map_get($spacers, 3);
         font-size: $font-size-base;
     }
 
@@ -28,6 +28,30 @@
         padding-left: 0;
         margin-bottom: 0;
         font-size: $font-size-base * 0.9;
+        border-right: 1px solid $separater-color;
+
+        @media (min-width: 1750px) {
+            padding-right: map_get($spacers, 3);
+            max-height: calc(100vh - 400px);
+            min-height: 100px;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        scrollbar-color: darken($separater-color, 30%) $separater-color;
+        scrollbar-width: thin;
+
+        &::-webkit-scrollbar {
+            width: 5px;
+
+            &-track {
+                background: $separater-color;
+            }
+
+            &-thumb {
+                background: darken($separater-color, 30%);
+            }
+        }
 
         &-item {
             border: none;