diff --git a/examples/document/data/loremIpsum/assets/css/main.css b/examples/document/data/loremIpsum/assets/css/main.css
new file mode 100644
index 0000000..d5644e4
--- /dev/null
+++ b/examples/document/data/loremIpsum/assets/css/main.css
@@ -0,0 +1,248 @@
+@import https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback
+
+*, *:before, *:after {
+    box-sizing: inherit
+}
+
+* {
+    max-height: 1000000px
+}
+
+body {
+    color: #19191C;
+    background: #fff;
+    font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
+    min-width: 320px;
+    font-size: 16px;
+    line-height: 1.5
+}
+
+.snark-image, .snark-figure-caption {
+    max-width: 100%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}
+
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h {
+    font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
+    font-weight: 530;
+    margin: 0 0 0.5em;
+    color: #19191C
+}
+
+h1, .h1 {
+    font-size: 35px
+}
+
+h2, .h2 {
+    font-size: 28px
+}
+
+h3, .h3 {
+    font-size: 20px
+}
+
+h4, .h4 {
+    font-size: 17px
+}
+
+h5, .h5 {
+    font-size: 14px
+}
+
+h6, .h6 {
+    font-size: 16px
+}
+
+p {
+    margin: 0 0 1em
+}
+
+a {
+    color: #19191C
+}
+
+.snark-main {
+    flex-grow: 1
+
+}
+
+.snark-main__inner {
+    display: flex;
+    height: 100%;
+    margin-top: 11.5rem
+}
+
+.snark-grid {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80rem
+}
+
+.snark-nav__item {
+    pointer-events: none
+}
+
+.snark-sidebar {
+    align-self: flex-start;
+    flex-shrink: 0;
+    padding: 1.2rem 0;
+    position: sticky;
+    top: 2.4rem;
+    width: 12.1rem
+}
+
+@media print {
+    .snark-sidebar {
+        display: none
+    }
+}
+
+@media screen and (max-width: 76.234375em) {
+    [dir=ltr] .snark-sidebar--primary {
+        left:-12.1rem
+    }
+
+    [dir=rtl] .snark-sidebar--primary {
+        right: -12.1rem
+    }
+
+    .snark-sidebar--primary {
+        background-color: #fff;
+        display: block;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        transform: translateX(0);
+        transition: transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;
+        width: 12.1rem;
+        z-index: 5
+    }
+
+    .snark-sidebar--primary .snark-sidebar__scrollwrap {
+        bottom: 0;
+        left: 0;
+        margin: 0;
+        overflow: hidden;
+        position: absolute;
+        right: 0;
+        scroll-snap-type: none;
+        top: 0
+    }
+}
+
+@media screen and (min-width: 76.25em) {
+    .snark-sidebar {
+        height:0
+    }
+
+    .snark-header--lifted~.snark-container .snark-sidebar {
+        top: 4.8rem
+    }
+}
+
+.snark-sidebar--secondary {
+    display: none;
+    order: 2
+}
+
+@media screen and (min-width: 60em) {
+    .snark-sidebar--secondary {
+        height:0
+    }
+
+    .no-js .snark-sidebar--secondary {
+        height: auto
+    }
+
+    .snark-sidebar--secondary:not([hidden]) {
+        display: block
+    }
+
+    .snark-sidebar--secondary .snark-sidebar__scrollwrap {
+        touch-action: pan-y
+    }
+}
+
+.snark-sidebar__scrollwrap {
+    scrollbar-gutter: stable;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    margin: 0 .2rem;
+    overflow-y: auto;
+    scrollbar-color: #19191C;
+    scrollbar-width: thin
+}
+
+.snark-sidebar__scrollwrap::-webkit-scrollbar {
+    height: .2rem;
+    width: .2rem
+}
+
+.snark-sidebar__scrollwrap:focus-within,.snark-sidebar__scrollwrap:hover {
+    scrollbar-color: #19191C
+}
+
+.snark-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,.snark-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
+    background-color: #fff
+}
+
+.snark-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,.snark-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover {
+    background-color: #fff
+}
+
+
+.snark-content {
+    flex-grow: 1;
+    min-width: 0;
+    margin: 0 .8rem 1.2rem;
+    padding-top: .6rem;
+
+}
+
+.snark-content p {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    unicode-bidi: isolate;
+    background-color: #F2F3F7;
+    padding: 10px;
+    padding-right: 5px;
+    border-radius: 15px;
+}
+
+.snark-nav__list {
+    list-style: none;
+    margin: 0;
+    padding: 0
+}
+
+.snark-nav__title {
+    color: #19191C;
+    display: block;
+    font-weight: 700;
+    overflow: hidden;
+    padding: 0 .6rem;
+    text-overflow: ellipsis
+}
+
+.snark-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+.snark-nav__link .snark-ellipsis {
+    position: relative
+}
+
+.snark-nav__link .snark-ellipsis code {
+    word-break: normal
+}
+
+
+
diff --git a/examples/document/data/loremIpsum/chapter2.md b/examples/document/data/loremIpsum/chapter2.md
index 49b6057..b61c87d 100644
--- a/examples/document/data/loremIpsum/chapter2.md
+++ b/examples/document/data/loremIpsum/chapter2.md
@@ -14,9 +14,17 @@ Cras finibus vel leo id mattis. Nulla tellus augue, bibendum in ipsum vitae, ali
 
 Quisque ut ultricies nisi, eget vehicula ipsum. Quisque tortor mauris, sagittis vitae consectetur in, fermentum quis dui. Maecenas nec risus eu ipsum eleifend ornare. Nam tempus interdum mi, eget tincidunt enim interdum et. Nam a ultricies libero. Cras vehicula, quam a egestas semper, ipsum est cursus nunc, ac mollis est velit at enim. Sed nec nibh ut leo fermentum interdum. Donec aliquam elementum metus, non fermentum eros bibendum eu. Suspendisse ut odio vel dolor blandit condimentum. Vivamus malesuada accumsan magna, a suscipit tellus vehicula ut. Duis et orci arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
 
+### Section ${section(3)}
+
+Maecenas at iaculis ipsum. Praesent maximus tristique magna eu faucibus. In tincidunt elementum pharetra. Nam scelerisque eros mattis, suscipit odio sit amet, efficitur mi. Etiam eleifend pulvinar erat a aliquet. Cras pellentesque tincidunt mi eget scelerisque. Proin eget ipsum a velit lobortis commodo. Nulla facilisi. Donec id pretium leo. Ut nec tortor sapien. Praesent vehicula dolor ut laoreet commodo. Pellentesque convallis, sapien et placerat luctus, tortor magna sodales sem, non tristique eros sem vel ipsum. Nulla vulputate accumsan nulla. Duis tempor, mi nec pharetra suscipit, sem odio sagittis mi, ut dignissim odio erat a dolor.
+
+### Section ${section(3)}
+
+In a quam nec turpis venenatis vehicula at ut lorem. Vestibulum tincidunt at velit laoreet sodales. Fusce fermentum enim sed lacinia fringilla. Nam et augue vitae felis sagittis consectetur in eget mauris. Fusce eget auctor turpis. Quisque at tristique nibh, id fringilla arcu. Cras sed finibus sapien.
+
 ```snark
 type: image
 path: myImage.png
 caption: Whatever
 index: ${label(image)}
-```
\ No newline at end of file
+```
diff --git a/examples/document/data/loremIpsum/SPC-logo.png b/examples/document/data/loremIpsum/images/SPC-logo.png
similarity index 100%
rename from examples/document/data/loremIpsum/SPC-logo.png
rename to examples/document/data/loremIpsum/images/SPC-logo.png
diff --git a/examples/document/src/jvmMain/kotlin/main.kt b/examples/document/src/jvmMain/kotlin/main.kt
index b6c01cd..7fefd0f 100644
--- a/examples/document/src/jvmMain/kotlin/main.kt
+++ b/examples/document/src/jvmMain/kotlin/main.kt
@@ -5,6 +5,7 @@ import kotlinx.html.ScriptCrossorigin
 import kotlinx.html.link
 import kotlinx.html.script
 import space.kscience.snark.html.document.allDocuments
+import space.kscience.snark.html.*
 
 @Suppress("unused")
 fun Application.renderAllDocuments() = snarkApplication {
@@ -29,6 +30,15 @@ fun Application.renderAllDocuments() = snarkApplication {
                 crossorigin = ScriptCrossorigin.anonymous
                 attributes["onload"] = "renderMathInElement(document.body);"
             }
+            link {
+                rel = "stylesheet"
+                type = "text/css"
+                href = "main.css"
+            }
+            link {
+                rel = "stylesheet"
+                href = "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"
+            }
         }
     )
 }
diff --git a/examples/document/src/jvmMain/kotlin/snarkApplication.kt b/examples/document/src/jvmMain/kotlin/snarkApplication.kt
index dc0f55d..5c0c20d 100644
--- a/examples/document/src/jvmMain/kotlin/snarkApplication.kt
+++ b/examples/document/src/jvmMain/kotlin/snarkApplication.kt
@@ -43,7 +43,7 @@ fun Application.snarkApplication(contextBuilder: ContextBuilder.() -> Unit = {},
     }
 
     routing {
-        staticResources("/css","css")
+        staticResources("/", "assets")
         site(context, siteData, content = site)
     }
 }
\ No newline at end of file
diff --git a/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt b/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt
index ddd697d..ab371e6 100644
--- a/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt
+++ b/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt
@@ -170,6 +170,9 @@ internal class KtorSiteContext(
 
 }
 
+/*
+* TODO
+* */
 public fun Route.site(
     context: Context,
     data: DataTree<*>?,