add support for a dynamic table of contents

[chloro.git] / chloro / rdio / static / css / style.scss

diff --git a/chloro/rdio/static/css/style.scss b/chloro/rdio/static/css/style.scss
index c022eceec2b0624fbd593d156db23c31b53c3de4..74b8d67e997fdf6e0e9147f66a37d8bb7b82c45c 100644 (file)
--- a/chloro/rdio/static/css/style.scss
+++ b/chloro/rdio/static/css/style.scss
@@ -90,7 +90,7 @@ article {
                border-left: 0.3em solid #555;
                padding-left: 0.5em;
        }
-       a {
+       [contenteditable] a {
                box-shadow: inset 0 -8px 0 0 rgba(34, 27, 242, 0.1);
                transition: box-shadow ease 0.2s;;
                &:hover {
@@ -338,3 +338,33 @@ article h2:hover {
                }
        }
 }
+
+#toc {
+       box-sizing: border-box;
+       padding: 1em 1em 1em 0;
+       float: right;
+       width: 15em;
+       background: rgba(255, 255, 255, 0.8);
+       margin-right: -17em;
+       position: sticky;
+       top: 1em;
+       ul, li {
+               margin: 0;
+               padding: 0;
+               list-style: none;
+       }
+       li {
+               margin: 0em;
+               border-left: 0.3em solid transparent;
+               padding: 5px 0 5px 0.5em;
+               &.active {
+                       border-left: 0.3em solid #555;
+               }
+       }
+}
+
+@media screen and (max-width: 80em) {
+       #toc {
+               display: none;
+       }
+}