Improve CSS, pages navigation tree and create anchors on page

8 files changed, 607 insertions, 147 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 7ebcf00e..67fa2d91 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -22,7 +22,7 @@ open class HtmlRenderer(
 
     private val sourceSetDependencyMap = with(context.sourceSetCache) {
         allSourceSets.map { sourceSet ->
-            sourceSet to allSourceSets.filter { sourceSet.dependentSourceSets.contains(it.sourceSetName ) }
+            sourceSet to allSourceSets.filter { sourceSet.dependentSourceSets.contains(it.sourceSetName) }
         }.toMap()
     }
 
@@ -38,22 +38,24 @@ open class HtmlRenderer(
         val additionalClasses = node.style.joinToString(" ") { it.toString().toLowerCase() }
         return when {
             node.hasStyle(ContentStyle.TabbedContent) -> div(additionalClasses) {
-                val secondLevel = node.children.filterIsInstance<ContentComposite>().flatMap { it.children }.filterIsInstance<ContentHeader>().flatMap { it.children }.filterIsInstance<ContentText>()
-                val firstLevel = node.children.filterIsInstance<ContentHeader>().flatMap { it.children }.filterIsInstance<ContentText>()
+                val secondLevel = node.children.filterIsInstance<ContentComposite>().flatMap { it.children }
+                    .filterIsInstance<ContentHeader>().flatMap { it.children }.filterIsInstance<ContentText>()
+                val firstLevel = node.children.filterIsInstance<ContentHeader>().flatMap { it.children }
+                    .filterIsInstance<ContentText>()
 
                 val renderable = firstLevel.union(secondLevel)
 
-                div(classes = "tabs-section"){
+                div(classes = "tabs-section") {
                     attributes["tabs-section"] = "tabs-section"
                     renderable.forEachIndexed { index, node ->
-                        button(classes = "section-tab"){
-                            if(index == 0 ) attributes["data-active"] = ""
+                        button(classes = "section-tab") {
+                            if (index == 0) attributes["data-active"] = ""
                             attributes["data-togglable"] = node.text
                             text(node.text)
                         }
                     }
                 }
-                div(classes = "tabs-section-body"){
+                div(classes = "tabs-section-body") {
                     childrenCallback()
                 }
             }
@@ -61,7 +63,10 @@ open class HtmlRenderer(
                 node.extra.extraHtmlAttributes().forEach { attributes[it.extraKey] = it.extraValue }
                 childrenCallback()
             }
-            node.dci.kind == ContentKind.Symbol -> div("symbol $additionalClasses") { childrenCallback() }
+            node.dci.kind in setOf(ContentKind.Symbol, ContentKind.Sample) -> div("symbol $additionalClasses") {
+                childrenCallback()
+                if (node.hasStyle(TextStyle.Monospace)) copyButton()
+            }
             node.dci.kind == ContentKind.BriefComment -> div("brief $additionalClasses") { childrenCallback() }
             node.dci.kind == ContentKind.Cover -> div("cover $additionalClasses") {
                 filterButtons(node)
@@ -80,7 +85,7 @@ open class HtmlRenderer(
                 button(classes = "platform-tag platform-selector") {
                     attributes["data-active"] = ""
                     attributes["data-filter"] = it.sourceSetName
-                    when(it.platform.key){
+                    when (it.platform.key) {
                         "common" -> classes = classes + "common-like"
                         "native" -> classes = classes + "native-like"
                         "jvm" -> classes = classes + "jvm-like"
@@ -92,40 +97,57 @@ open class HtmlRenderer(
         }
     }
 
+    private fun FlowContent.copyButton() = span(classes = "top-right-position") {
+        span("copy-icon") {
+            unsafe {
+                raw(
+                    """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4H15V16H5V4ZM17 7H19V18V20H17H8V18H17V7Z" fill="black"/>
+                       </svg>""".trimIndent()
+                )
+            }
+        }
+        copiedPopup("Content copied to clipboard", "popup-to-left")
+    }
+
+    private fun FlowContent.copiedPopup(notificationContent: String, additionalClasses: String = "") =
+        div("copy-popup-wrapper $additionalClasses") {
+            unsafe {
+                raw(
+                    """
+                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M18 9C18 14 14 18 9 18C4 18 0 14 0 9C0 4 4 0 9 0C14 0 18 4 18 9ZM14.2 6.2L12.8 4.8L7.5 10.1L5.3 7.8L3.8 9.2L7.5 13L14.2 6.2Z" fill="#4DBB5F"/>
+                    </svg>
+                    """.trimIndent()
+                )
+            }
+            span {
+                text(notificationContent)
+            }
+        }
+
     override fun FlowContent.buildPlatformDependent(content: PlatformHintedContent, pageContext: ContentPage) =
-        buildPlatformDependent(content.sourceSets.map { it to setOf(content.inner) }.toMap(), pageContext, content.extra)
+        buildPlatformDependent(
+            content.sourceSets.map { it to setOf(content.inner) }.toMap(),
+            pageContext,
+            content.extra,
+            content.style
+        )
 
     private fun FlowContent.buildPlatformDependent(
         nodes: Map<SourceSetData, Collection<ContentNode>>,
         pageContext: ContentPage,
-        extra: PropertyContainer<ContentNode> = PropertyContainer.empty()
+        extra: PropertyContainer<ContentNode> = PropertyContainer.empty(),
+        styles: Set<Style> = emptySet()
     ) {
-        var mergedToOneSourceSet : SourceSetData? = null
-        div("platform-hinted") {
+        val contents = contentsForSourceSetDependent(nodes, pageContext)
+        val shouldHaveTabs = contents.size != 1
+
+        val styles = "platform-hinted ${styles.joinToString()}" + if (shouldHaveTabs) " with-platform-tabs" else ""
+        div(styles) {
             attributes["data-platform-hinted"] = "data-platform-hinted"
             extra.extraHtmlAttributes().forEach { attributes[it.extraKey] = it.extraValue }
-            val additionalClasses = if(nodes.toList().size == 1) "single-content" else ""
-            var counter = 0
-            val contents = nodes.toList().map { (sourceSet, elements) ->
-                sourceSet to createHTML(prettyPrint = false).div {
-                    elements.forEach {
-                        buildContentNode(it, pageContext, setOf(sourceSet))
-                    }
-                }.stripDiv()
-            }.groupBy(Pair<SourceSetData, String>::second, Pair<SourceSetData, String>::first).entries.flatMap { (html, sourceSets) ->
-                sourceSets.filterNot {
-                    sourceSetDependencyMap[it].orEmpty().any { dependency -> sourceSets.contains(dependency) }
-                }.map {
-                    it to createHTML(prettyPrint = false).div(classes = "content $additionalClasses") {
-                        if (counter++ == 0) attributes["data-active"] = ""
-                        attributes["data-togglable"] = it.sourceSetName
-                        unsafe {
-                            +html
-                        }
-                    }
-                }
-            }
-            if (contents.size != 1) {
+            if (shouldHaveTabs) {
                 div("platform-bookmarks-row") {
                     attributes["data-toggle-list"] = "data-toggle-list"
                     contents.forEachIndexed { index, pair ->
@@ -134,27 +156,53 @@ open class HtmlRenderer(
                             attributes["data-filterable-set"] = pair.first.sourceSetName
                             if (index == 0) attributes["data-active"] = ""
                             attributes["data-toggle"] = pair.first.sourceSetName
-                            when(
+                            when (
                                 pair.first.platform.key
-                            ){
-                            "common" -> classes = classes + "common-like"
-                            "native" -> classes = classes + "native-like"
-                            "jvm" -> classes = classes + "jvm-like"
-                            "js" -> classes = classes + "js-like"
+                                ) {
+                                "common" -> classes = classes + "common-like"
+                                "native" -> classes = classes + "native-like"
+                                "jvm" -> classes = classes + "jvm-like"
+                                "js" -> classes = classes + "js-like"
                             }
                             attributes["data-toggle"] = pair.first.sourceSetName
                             text(pair.first.sourceSetName)
                         }
                     }
                 }
-            } else if (nodes.size > 1) {
-                mergedToOneSourceSet = contents.first().first
             }
             contents.forEach {
                 consumer.onTagContentUnsafe { +it.second }
             }
         }
-        mergedToOneSourceSet?.let { createPlatformTagBubbles(listOf(it)) }
+    }
+
+    private fun contentsForSourceSetDependent(
+        nodes: Map<SourceSetData, Collection<ContentNode>>,
+        pageContext: ContentPage,
+    ): List<Pair<SourceSetData, String>> {
+        var counter = 0
+        return nodes.toList().map { (sourceSet, elements) ->
+            sourceSet to createHTML(prettyPrint = false).div {
+                elements.forEach {
+                    buildContentNode(it, pageContext, setOf(sourceSet))
+                }
+            }.stripDiv()
+        }.groupBy(
+            Pair<SourceSetData, String>::second,
+            Pair<SourceSetData, String>::first
+        ).entries.flatMap { (html, sourceSets) ->
+            sourceSets.filterNot {
+                sourceSetDependencyMap[it].orEmpty().any { dependency -> sourceSets.contains(dependency) }
+            }.map {
+                it to createHTML(prettyPrint = false).div(classes = "content sourceset-depenent-content") {
+                    if (counter++ == 0) attributes["data-active"] = ""
+                    attributes["data-togglable"] = it.sourceSetName
+                    unsafe {
+                        +html
+                    }
+                }
+            }
+        }
     }
 
     override fun FlowContent.buildDivergent(node: ContentDivergentGroup, pageContext: ContentPage) {
@@ -183,26 +231,38 @@ open class HtmlRenderer(
             val groupedDivergent = it.value.groupBy { it.second }
 
             consumer.onTagContentUnsafe {
-                +createHTML().div("divergent-group"){
+                +createHTML().div("divergent-group") {
                     attributes["data-filterable-current"] = groupedDivergent.keys.joinToString(" ") {
                         it.sourceSetName
                     }
                     attributes["data-filterable-set"] = groupedDivergent.keys.joinToString(" ") {
                         it.sourceSetName
                     }
-                    consumer.onTagContentUnsafe { +it.key.first }
-                    div("main-subrow") {
 
-                        if (node.implicitlySourceSetHinted) {
-                            buildPlatformDependent(
-                                groupedDivergent.map { (sourceSet, elements) ->
-                                    sourceSet to elements.map { e -> e.first.divergent }
-                                }.toMap(),
-                                pageContext
-                            )
-                            if (distinct.size > 1 && groupedDivergent.size == 1) {
-                                createPlatformTags(node, groupedDivergent.keys)
+                    val divergentForPlatformDependent = groupedDivergent.map { (sourceSet, elements) ->
+                        sourceSet to elements.map { e -> e.first.divergent }
+                    }.toMap()
+
+                    val content = contentsForSourceSetDependent(divergentForPlatformDependent, pageContext)
+
+                    consumer.onTagContentUnsafe {
+                        +createHTML().div("brief-with-platform-tags") {
+                            consumer.onTagContentUnsafe { +it.key.first }
+
+                            consumer.onTagContentUnsafe {
+                                +createHTML().span("pull-right") {
+                                    if ((distinct.size > 1 && groupedDivergent.size == 1) || groupedDivergent.size == 1 || content.size == 1) {
+                                        if (node.sourceSets.size != 1) {
+                                            createPlatformTags(node, setOf(content.first().first))
+                                        }
+                                    }
+                                }
                             }
+                        }
+                    }
+                    div("main-subrow") {
+                        if (node.implicitlySourceSetHinted) {
+                            buildPlatformDependent(divergentForPlatformDependent, pageContext)
                         } else {
                             it.value.forEach {
                                 buildContentNode(it.first.divergent, pageContext, setOf(it.second))
@@ -272,7 +332,8 @@ open class HtmlRenderer(
             .filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
             .takeIf { it.isNotEmpty() }
             ?.let {
-                withAnchor(node.dci.dri.first().toString()) {
+                val anchorName = node.dci.dri.first().toString()
+                withAnchor(anchorName) {
                     div(classes = "table-row") {
                         if (!style.contains(MultimoduleTable)) {
                             attributes["data-filterable-current"] = node.sourceSets.joinToString(" ") {
@@ -286,7 +347,10 @@ open class HtmlRenderer(
                             div("main-subrow " + node.style.joinToString(" ")) {
                                 it.filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
                                     .forEach {
-                                        it.build(this, pageContext, sourceSetRestriction)
+                                        span {
+                                            it.build(this, pageContext, sourceSetRestriction)
+                                            buildAnchor(anchorName)
+                                        }
                                         if (ContentKind.shouldBePlatformTagged(node.dci.kind) && (node.sourceSets.size == 1))
                                             createPlatformTags(node)
                                     }
@@ -317,7 +381,7 @@ open class HtmlRenderer(
         div("platform-tags") {
             sourceSets.forEach {
                 div("platform-tag") {
-                    when(it.platform.key){
+                    when (it.platform.key) {
                         "common" -> classes = classes + "common-like"
                         "native" -> classes = classes + "native-like"
                         "jvm" -> classes = classes + "jvm-like"
@@ -331,7 +395,7 @@ open class HtmlRenderer(
 
     private fun FlowContent.createPlatformTags(node: ContentNode, sourceSetRestriction: Set<SourceSetData>? = null) {
         node.takeIf { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }?.let {
-            createPlatformTagBubbles( node.sourceSets.filter {
+            createPlatformTagBubbles(node.sourceSets.filter {
                 sourceSetRestriction == null || it in sourceSetRestriction
             })
         }
@@ -342,7 +406,7 @@ open class HtmlRenderer(
         pageContext: ContentPage,
         sourceSetRestriction: Set<SourceSetData>?
     ) {
-        when(node.dci.kind){
+        when (node.dci.kind) {
             ContentKind.Comment -> buildDefaultTable(node, pageContext, sourceSetRestriction)
             else -> div(classes = "table") {
                 node.extra.extraHtmlAttributes().forEach { attributes[it.extraKey] = it.extraValue }
@@ -388,13 +452,14 @@ open class HtmlRenderer(
 
     override fun FlowContent.buildHeader(level: Int, node: ContentHeader, content: FlowContent.() -> Unit) {
         val anchor = node.extra[SimpleAttr.SimpleAttrKey("anchor")]?.extraValue
+        val classes = node.style.joinToString { it.toString() }.toLowerCase()
         when (level) {
-            1 -> h1() { withAnchor(anchor, content) }
-            2 -> h2() { withAnchor(anchor, content) }
-            3 -> h3() { withAnchor(anchor, content) }
-            4 -> h4() { withAnchor(anchor, content) }
-            5 -> h5() { withAnchor(anchor, content) }
-            else -> h6() { withAnchor(anchor, content) }
+            1 -> h1(classes = classes) { withAnchor(anchor, content) }
+            2 -> h2(classes = classes) { withAnchor(anchor, content) }
+            3 -> h3(classes = classes) { withAnchor(anchor, content) }
+            4 -> h4(classes = classes) { withAnchor(anchor, content) }
+            5 -> h5(classes = classes) { withAnchor(anchor, content) }
+            else -> h6(classes = classes) { withAnchor(anchor, content) }
         }
     }
 
@@ -420,6 +485,23 @@ open class HtmlRenderer(
             text(to.name)
         }
 
+    private fun FlowContent.buildAnchor(pointingTo: String) {
+        span(classes = "anchor-wrapper") {
+            span(classes = "anchor-icon") {
+                attributes["pointing-to"] = pointingTo
+                unsafe {
+                    raw("""
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21.2496 5.3C20.3496 4.5 19.2496 4 18.0496 4C16.8496 4 15.6496 4.5 14.8496 5.3L10.3496 9.8L11.7496 11.2L16.2496 6.7C17.2496 5.7 18.8496 5.7 19.8496 6.7C20.8496 7.7 20.8496 9.3 19.8496 10.3L15.3496 14.8L16.7496 16.2L21.2496 11.7C22.1496 10.8 22.5496 9.7 22.5496 8.5C22.5496 7.3 22.1496 6.2 21.2496 5.3Z"/>
+                    <path d="M8.35 16.7998C7.35 17.7998 5.75 17.7998 4.75 16.7998C3.75 15.7998 3.75 14.1998 4.75 13.1998L9.25 8.6998L7.85 7.2998L3.35 11.7998C1.55 13.5998 1.55 16.3998 3.35 18.1998C4.25 19.0998 5.35 19.4998 6.55 19.4998C7.75 19.4998 8.85 19.0998 9.75 18.1998L14.25 13.6998L12.85 12.2998L8.35 16.7998Z"/>
+                </svg>
+            """.trimIndent())
+                }
+            }
+            copiedPopup("Link copied to clipboard")
+        }
+    }
+
     fun FlowContent.buildLink(
         to: DRI,
         platforms: List<SourceSetData>,
@@ -497,7 +579,7 @@ open class HtmlRenderer(
             }
         }
 
-    private fun resolveLink(link: String, page: PageNode) : String = if (URI(link).isAbsolute) link else page.root(link)
+    private fun resolveLink(link: String, page: PageNode): String = if (URI(link).isAbsolute) link else page.root(link)
 
     open fun buildHtml(page: PageNode, resources: List<String>, content: FlowContent.() -> Unit) =
         createHTML().html {
@@ -506,9 +588,13 @@ open class HtmlRenderer(
                 title(page.name)
                 with(resources) {
                     filter { it.substringBefore('?').substringAfterLast('.') == "css" }
-                        .forEach { link(rel = LinkRel.stylesheet, href = resolveLink(it,page)) }
+                        .forEach { link(rel = LinkRel.stylesheet, href = resolveLink(it, page)) }
                     filter { it.substringBefore('?').substringAfterLast('.') == "js" }
-                        .forEach { script(type = ScriptType.textJavaScript, src = resolveLink(it,page)) { async = true } }
+                        .forEach {
+                            script(type = ScriptType.textJavaScript, src = resolveLink(it, page)) {
+                                async = true
+                            }
+                        }
                 }
                 script { unsafe { +"""var pathToRoot = "${locationProvider.resolveRoot(page)}";""" } }
             }
@@ -532,6 +618,38 @@ open class HtmlRenderer(
                         script(type = ScriptType.textJavaScript, src = page.root("scripts/pages.js")) {}
                         script(type = ScriptType.textJavaScript, src = page.root("scripts/main.js")) {}
                         content()
+                        div(classes = "footer") {
+                            span("go-to-top-icon") {
+                                a(href = "#container") {
+                                    unsafe {
+                                        raw(
+                                            """
+                                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M11.3337 9.66683H0.666992L6.00033 3.66683L11.3337 9.66683Z" fill="black"/>
+                                        <path d="M0.666992 0.333496H11.3337V1.66683H0.666992V0.333496Z" fill="black"/>
+                                    </svg>
+                                """.trimIndent()
+                                        )
+                                    }
+                                }
+                            }
+                            span { text("© 2020 Copyright") }
+                            span { text("Privacy Policy") }
+                            span("pull-right") {
+                                span { text("Sponsored and developed by Dokka") }
+                                span(classes = "padded-icon") {
+                                    unsafe {
+                                        raw(
+                                            """
+                                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M8 0H2.3949L4.84076 2.44586L0 7.28662L0.713376 8L5.55414 3.15924L8 5.6051V0Z" fill="black"/>
+                                    </svg>
+                                """.trimIndent()
+                                        )
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
             }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index 45ef1457..f10c85d5 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -5,6 +5,8 @@ import kotlinx.html.id
 import kotlinx.html.table
 import kotlinx.html.tbody
 import org.jetbrains.dokka.base.renderers.platforms
+import org.jetbrains.dokka.model.DEnum
+import org.jetbrains.dokka.model.DEnumEntry
 import org.jetbrains.dokka.pages.*
 import org.jetbrains.dokka.plugability.DokkaContext
 import org.jetbrains.dokka.transformers.pages.PageTransformer
@@ -44,12 +46,19 @@ object NavigationPageInstaller : PageTransformer {
             page.name,
             page.dri.first(),
             page.platforms(),
-            if (page !is ClasslikePageNode)
-                page.children.filterIsInstance<ContentPage>()
-                    .map { visit(it) }
-            else
-                emptyList()
+            page.navigableChildren()
         )
+
+    private fun ContentPage.navigableChildren(): List<NavigationNode> {
+        if(this !is ClasslikePageNode){
+            return children.filterIsInstance<ContentPage>()
+                .map { visit(it) }
+        } else if(documentable is DEnum) {
+            return children.filter { it is ContentPage && it.documentable is DEnumEntry }.map { visit(it as ContentPage) }
+        }
+
+        return emptyList()
+    }
 }
 
 object ResourceInstaller : PageTransformer {
@@ -68,6 +77,7 @@ object StyleAndScriptsAppender : PageTransformer {
                 "scripts/navigationLoader.js",
                 "scripts/platformContentHandler.js",
                 "scripts/sourceset_dependencies.js",
+                "scripts/clipboard.js",
                 "styles/jetbrains-mono.css"
             )
         )
diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
index 4868d91e..5514f9e5 100644
--- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
+++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
@@ -253,7 +253,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
         }
 
     private fun funType(dri: DRI, sourceSets: Set<SourceSetData>, type: TypeConstructor) =
-        contentBuilder.contentFor(dri, sourceSets, ContentKind.Symbol, setOf(TextStyle.Monospace)) {
+        contentBuilder.contentFor(dri, sourceSets) {
             if (type.extension) {
                 signatureForProjection(type.projections.first())
                 text(".")
diff --git a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
index 1954cec9..bdc6d680 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
@@ -66,9 +66,11 @@ open class DefaultPageCreator(
 
     protected open fun contentForModule(m: DModule) = contentBuilder.contentFor(m) {
         group(kind = ContentKind.Cover) {
-            header(1, m.name)
-            sourceSetDependentHint(m.dri, m.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint){
-                +contentForDescription(m)
+            cover(m.name)
+            if(contentForDescription(m).isNotEmpty()){
+                sourceSetDependentHint(m.dri, m.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint, styles = setOf(TextStyle.UnderCoverText)){
+                    +contentForDescription(m)
+                }
             }
         }
         +contentForComments(m)
@@ -81,9 +83,11 @@ open class DefaultPageCreator(
 
     protected open fun contentForPackage(p: DPackage) = contentBuilder.contentFor(p) {
         group(kind = ContentKind.Cover) {
-            header(1, "Package ${p.name}")
-            sourceSetDependentHint(p.dri, p.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint){
-                +contentForDescription(p)
+            cover("Package ${p.name}")
+            if(contentForDescription(p).isNotEmpty()){
+                sourceSetDependentHint(p.dri, p.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint, styles = setOf(TextStyle.UnderCoverText)){
+                    +contentForDescription(p)
+                }
             }
         }
         group(styles = setOf(ContentStyle.TabbedContent)){
@@ -92,8 +96,8 @@ open class DefaultPageCreator(
             block("Type aliases", 2, ContentKind.TypeAliases, p.typealiases, p.sourceSets.toSet(), extra = mainExtra + SimpleAttr.header("Type aliases")) {
                 link(it.name, it.dri, kind = ContentKind.Main)
                 sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint, styles = emptySet()) {
-                    +buildSignature(it)
                     contentForBrief(it)
+                    +buildSignature(it)
                 }
             }
         }
@@ -109,9 +113,8 @@ open class DefaultPageCreator(
         block("Properties", 2, ContentKind.Properties, s.properties, sourceSets.toSet(), extra = mainExtra + SimpleAttr.header( "Properties")) {
             link(it.name, it.dri, kind = ContentKind.Main)
             sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint) {
-                +buildSignature(it)
-
                 contentForBrief(it)
+                +buildSignature(it)
             }
         }
         s.safeAs<WithExtraProperties<Documentable>>()?.let { it.extra[InheritorsInfo] }?.let { inheritors ->
@@ -140,10 +143,10 @@ open class DefaultPageCreator(
 
     protected open fun contentForEnumEntry(e: DEnumEntry) = contentBuilder.contentFor(e) {
         group(kind = ContentKind.Cover) {
-            header(1, e.name)
+            cover(e.name)
             sourceSetDependentHint(e.dri, e.sourceSets.toSet()) {
-                +buildSignature(e)
                 +contentForDescription(e)
+                +buildSignature(e)
             }
         }
         group(styles = setOf(ContentStyle.TabbedContent)){
@@ -154,10 +157,10 @@ open class DefaultPageCreator(
 
     protected open fun contentForClasslike(c: DClasslike) = contentBuilder.contentFor(c) {
         group(kind = ContentKind.Cover) {
-            header(1, c.name.orEmpty())
-                sourceSetDependentHint(c.dri, c.sourceSets.toSet()) {
-                +buildSignature(c)
+            cover(c.name.orEmpty())
+            sourceSetDependentHint(c.dri, c.sourceSets.toSet()) {
                 +contentForDescription(c)
+                +buildSignature(c)
             }
         }
 
@@ -174,8 +177,8 @@ open class DefaultPageCreator(
                 ) {
                     link(it.name, it.dri, kind = ContentKind.Main)
                     sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint, styles = emptySet()) {
-                        +buildSignature(it)
                         contentForBrief(it)
+                        +buildSignature(it)
                     }
                 }
             }
@@ -183,8 +186,8 @@ open class DefaultPageCreator(
                 block("Entries", 2, ContentKind.Classlikes, c.entries, c.sourceSets.toSet(), extra = mainExtra + SimpleAttr.header("Entries"), styles = emptySet()) {
                     link(it.name, it.dri)
                     sourceSetDependentHint(it.dri, it.sourceSets.toSet(), kind = ContentKind.SourceSetDependantHint) {
-                        +buildSignature(it)
                         contentForBrief(it)
+                        +buildSignature(it)
                     }
                 }
             }
@@ -215,7 +218,7 @@ open class DefaultPageCreator(
 
         val platforms = d.sourceSets.toSet()
 
-        return contentBuilder.contentFor(d) {
+        return contentBuilder.contentFor(d, styles = setOf(TextStyle.Block)) {
             val description = tags.withTypeUnnamed<Description>()
             if (description.any { it.value.root.children.isNotEmpty() }) {
                 platforms.forEach { platform ->
@@ -317,13 +320,11 @@ open class DefaultPageCreator(
                 header(2, "Samples")
                 group(extra = mainExtra + SimpleAttr.header("Samples"), styles = setOf(ContentStyle.WithExtraAttributes)){
                     sourceSetDependentHint(sourceSets = platforms.toSet(), kind = ContentKind.SourceSetDependantHint) {
-                        table(kind = ContentKind.Sample) {
-                            platforms.map { platformData ->
-                                val content = samples.filter { it.value.isEmpty() || platformData in it.value }
-                                buildGroup(sourceSets = setOf(platformData), styles = setOf(ContentStyle.RowTitle)) {
-                                    content.forEach {
-                                        comment(Text(it.key))
-                                    }
+                        platforms.map { platformData ->
+                            val content = samples.filter { it.value.isEmpty() || platformData in it.value }
+                            group(sourceSets = setOf(platformData), kind = ContentKind.Sample, styles = setOf(TextStyle.Monospace)) {
+                                content.forEach {
+                                    text(it.key)
                                 }
                             }
                         }
@@ -355,17 +356,17 @@ open class DefaultPageCreator(
     protected open fun contentForTypeAlias(t: DTypeAlias) = contentForMember(t)
     protected open fun contentForMember(d: Documentable) = contentBuilder.contentFor(d) {
         group(kind = ContentKind.Cover) {
-            header(1, d.name.orEmpty())
+            cover(d.name.orEmpty())
         }
         divergentGroup(ContentDivergentGroup.GroupID("member")) {
             instance(setOf(d.dri), d.sourceSets.toSet()) {
-                divergent(kind = ContentKind.Symbol) {
-                    +buildSignature(d)
-                }
-                after {
+                before {
                     +contentForDescription(d)
                     +contentForComments(d)
                 }
+                divergent(kind = ContentKind.Symbol) {
+                    +buildSignature(d)
+                }
             }
         }
     }
@@ -389,14 +390,14 @@ open class DefaultPageCreator(
                         ) {
                             elements.map {
                                 instance(setOf(it.dri), it.sourceSets.toSet()) {
+                                    before {
+                                        contentForBrief(it)
+                                    }
                                     divergent {
-                                        group(kind = ContentKind.Symbol) {
+                                        group {
                                             +buildSignature(it)
                                         }
                                     }
-                                    after {
-                                        contentForBrief(it)
-                                    }
                                 }
                             }
                         }
diff --git a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
index b670626a..c499be6f 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
@@ -107,6 +107,16 @@ open class PageContentBuilder(
             )
         }
 
+        fun cover(
+            text: String,
+            platformData: Set<SourceSetData> = mainPlatformData,
+            styles: Set<Style> = mainStyles + TextStyle.Cover,
+            extra: PropertyContainer<ContentNode> = mainExtra,
+            block: DocumentableContentBuilder.() -> Unit = {}
+            ) {
+            header(1, text, platformData = platformData, styles = styles, extra = extra, block = block)
+        }
+
         fun text(
             text: String,
             kind: Kind = ContentKind.Main,
@@ -411,7 +421,7 @@ open class PageContentBuilder(
             block: DocumentableContentBuilder.() -> Unit
         ) {
             contentFor(dri, sourceSets, kind, styles, extra, block)
-                .takeIf { it.children.isNotEmpty() }
+                .takeIf { it.hasAnyContent() }
                 .also { before = it }
         }
 
@@ -435,7 +445,7 @@ open class PageContentBuilder(
             block: DocumentableContentBuilder.() -> Unit
         ) {
             contentFor(dri, sourceSets, kind, styles, extra, block)
-                .takeIf { it.children.isNotEmpty() }
+                .takeIf { it.hasAnyContent() }
                 .also { after = it }
         }
 
diff --git a/plugins/base/src/main/resources/dokka/scripts/clipboard.js b/plugins/base/src/main/resources/dokka/scripts/clipboard.js
new file mode 100644
index 00000000..b00ce246
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/scripts/clipboard.js
@@ -0,0 +1,52 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll('span.copy-icon').forEach(element => {
+        element.addEventListener('click', (el) => copyElementsContentToClipboard(element));
+    })
+
+    document.querySelectorAll('span.anchor-icon').forEach(element => {
+        element.addEventListener('click', (el) => {
+            if(element.hasAttribute('pointing-to')){
+                const location = hrefWithoutCurrentlyUsedAnchor() + '#' + element.getAttribute('pointing-to')
+                copyTextToClipboard(element, location)
+            }
+        });
+    })
+})
+
+const copyElementsContentToClipboard = (element) => {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(element.parentNode.parentNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    copyAndShowPopup(element,  () => selection.removeAllRanges())
+}
+
+const copyTextToClipboard = (element, text) => {
+    var textarea = document.createElement("textarea");
+    textarea.textContent = text;
+    textarea.style.position = "fixed";
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    copyAndShowPopup(element, () => document.body.removeChild(textarea))
+}
+
+const copyAndShowPopup = (element, after) => {
+    try {
+        document.execCommand('copy');
+        element.nextElementSibling.classList.add('active-popup');
+        setTimeout(() => {
+            element.nextElementSibling.classList.remove('active-popup');
+        }, 1200);
+    } catch (e) {
+        console.error('Failed to write to clipboard:', e)
+    }
+    finally {
+        if(after) after()
+    }
+}
+
+const hrefWithoutCurrentlyUsedAnchor = () => window.location.href.split('#')[0]
+
diff --git a/plugins/base/src/main/resources/dokka/scripts/navigationLoader.js b/plugins/base/src/main/resources/dokka/scripts/navigationLoader.js
index cac46d2a..c2f60ec5 100644
--- a/plugins/base/src/main/resources/dokka/scripts/navigationLoader.js
+++ b/plugins/base/src/main/resources/dokka/scripts/navigationLoader.js
@@ -14,6 +14,17 @@ window.addEventListener('load', () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
+
+    /* Smooth scrolling support for going to the top of the page */
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
 })
 
 revealNavigationForCurrentPage = () => {
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index d573b76c..f180762b 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -4,11 +4,14 @@
 
 :root {
     --breadcrumb-font-color: #A6AFBA;
-    --hover-link-color: #5B5DEF
+    --hover-link-color: #5B5DEF;
+    --footer-height: 64px;
+    --horizontal-spacing-for-content: 42px
 }
 
 #content {
-    padding: 0 41px;
+    padding: 0 var(--horizontal-spacing-for-content);
+    height: calc(100% - var(--footer-height));
 }
 
 .breadcrumbs {
@@ -40,7 +43,7 @@
     padding: 11px 3px;
     font-size: 14px;
     color: #637282;
-    outline:none;
+    outline: none;
     margin: 0 8px;
 }
 
@@ -55,29 +58,86 @@
 }
 
 .tabs-section-body {
-    padding: 24px 0
+    margin: 12px 0;
+    background-color: white;
+}
+
+.tabs-section-body > .table {
+    margin: 12px 0;
+}
+
+.tabs-section-body .with-platform-tabs > div {
+    margin: 0 12px;
+}
+
+.tabs-section-body .table .with-platform-tabs > div {
+    margin: 0;
+}
+
+.tabs-section-body .with-platform-tabs {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.tabs-section-body .with-platform-tabs .sourceset-depenent-content .table-row {
+    background-color: #f4f4f4;
+    border-bottom: 2px solid white;
 }
 
 .cover > .platform-hinted {
-    padding: 24px 0
+    padding-top: 24px;
+    margin-top: 24px;
+    padding-bottom: 16px;
 }
 
 .cover {
     display: flex;
     flex-direction: column;
+    width: 100%;
+    padding-bottom: 48px;
 }
 
 .tabbedcontent {
-    padding: 24px 0;
+    padding: 14px 0;
 }
 
-.cover .platform-hinted .single-content > .symbol {
+.cover .platform-hinted .sourceset-depenent-content > .symbol,
+.cover > .symbol {
     background-color: white;
 }
 
+.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .symbol {
+    background-color: #f4f4f4;
+}
+
+.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block ~ .symbol {
+    padding-top: 16px;
+    padding-left: 0;
+}
+
+.cover .sourceset-depenent-content > .block {
+    padding: 16px 0;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block {
+    padding: 0;
+    font-size: 14px;
+}
+
+.cover ~ .divergent-group {
+    margin-top: 24px;
+    padding: 24px 8px 8px 8px;
+}
+
+.cover ~ .divergent-group .main-subrow .symbol {
+    width: 100%;
+}
+
 .divergent-group {
     background-color: white;
-    padding: 12px 8px;
+    padding: 16px 8px;
     margin-bottom: 2px;
 }
 
@@ -85,6 +145,10 @@
     background-color: #F4F4F4;
 }
 
+.title > .divergent-group:first-of-type {
+    padding-top: 0;
+}
+
 #container {
     display: flex;
     flex-direction: row;
@@ -93,7 +157,7 @@
 
 #main {
     width: 100%;
-    padding-left: 12px;
+    max-width: calc(100% - 280px);
 }
 
 #leftColumn {
@@ -114,10 +178,9 @@
 }
 
 #sideMenu {
-    height: 100%;
+    max-height: calc(100% - 90px);
     padding-top: 16px;
     position: relative;
-    overflow: auto;
 }
 
 #sideMenu img {
@@ -149,7 +212,6 @@
 }
 
 .overview > .navButton {
-    width: 100%;
     height: 100%;
     align-items: center;
     display: flex;
@@ -169,19 +231,65 @@
     background-color: #F4F4F4;
     align-items: center;
     display: flex;
-    padding: 8px 16px;
+    padding: 8px 8px 8px 16px;
     box-sizing: border-box;
     font-weight: bold;
-    flex-wrap: wrap;
+    position: relative;
+    line-height: 24px;
+}
+
+.symbol span.copy-icon path {
+    fill: #637282;
+}
+
+.symbol span.copy-icon:hover path {
+    fill: black;
+}
+
+.copy-popup-wrapper {
+    display: none;
+    align-items: center;
+    position: absolute;
+    z-index: 1000;
+    background: white;
+    font-weight: normal;
+    box-shadow: 0 2px 16px 0 var(--ring-popup-shadow-color);
+    font-family: 'Inter', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    width: max-content;
+    font-size: 14px;
+    cursor: default;
+}
+
+.copy-popup-wrapper.popup-to-left {
+    /* since it is in position absolute we can just move it to the left to make it always appear on the left side of the icon */
+    left: -15em;
+}
+
+.copy-popup-wrapper.active-popup {
+    display: flex !important;
+}
+
+.copy-popup-wrapper:hover {
+    font-weight: normal;
+}
+
+.copy-popup-wrapper svg {
+    padding: 8px;
+}
+
+.copy-popup-wrapper > span:last-child {
+    padding-right: 14px;
 }
 
-#nav-submenu > .sideMenuPart {
-    padding-left: 0; /* packages are same level as modules */
+.symbol .top-right-position {
+    /* it is important for a parent to have a position: relative */
+    position: absolute;
+    top: 8px;
+    right: 8px;
 }
 
 .sideMenuPart > .overview {
     height: 40px;
-    width: 100%;
     display: flex;
     align-items: center;
     position: relative;
@@ -194,13 +302,14 @@
     flex: 1;
     height: 100%;
     color: #637282;
+    overflow: hidden;
 }
 
 .sideMenuPart > .overview:before {
     box-sizing: border-box;
     content: '';
     top: 0;
-    width: 200%;
+    width: 280px;
     right: 0;
     bottom: 0;
     position: absolute;
@@ -255,7 +364,7 @@ body, table {
     font-size: 14px;
     line-height: 24px;
     margin: 0;
-    max-width: 1440px;
+    /*max-width: 1440px; TODO: This results in worse experience on ultrawide, but on 16:9/16:10 looks better.*/
 }
 
 table {
@@ -305,30 +414,62 @@ td:first-child {
 
 h1, h2, h3, h4, h5, h6 {
     color: #222;
+    font-weight: bold;
 }
 
 p, ul, ol, table, pre, dl {
     margin: 0 0 20px;
 }
 
-h1, h2, h3 {
-    line-height: 1.1;
+h1 {
+    font-weight: bold;
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -1px;
 }
 
-h1 {
+
+h1.cover {
     font-size: 60px;
     line-height: 64px;
     letter-spacing: -1.5px;
+
+    margin-left: calc(-1 * var(--horizontal-spacing-for-content));
+    margin-right: calc(-1 * var(--horizontal-spacing-for-content));
+    padding-left: var(--horizontal-spacing-for-content);
+    padding-right: var(--horizontal-spacing-for-content);
+    border-bottom: 1px solid #DADFE6;
+
+    margin-bottom: 0;
+    padding-bottom: 32px;
 }
 
 h2 {
     color: #393939;
+    font-size: 31px;
+    line-height: 40px;
+    letter-spacing: -0.5px;
+}
+
+h3 {
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+}
+
+h4 {
+    margin: 0;
 }
 
 h3, h4, h5, h6 {
     color: #494949;
 }
 
+.UnderCoverText {
+    font-size: 18px;
+    line-height: 28px;
+}
+
 a {
     color: #5B5DEF;
     font-weight: 400;
@@ -367,12 +508,6 @@ code, pre {
 
 pre {
     display: block;
-    /*
-        padding:8px 8px;
-        background: #f8f8f8;
-        border-radius:5px;
-        border:1px solid #e5e5e5;
-    */
     overflow-x: auto;
 }
 
@@ -537,10 +672,13 @@ footer {
 
 .filter-section {
     display: flex;
-    display: flex;
     flex-direction: row;
     align-self: flex-end;
     min-height: 30px;
+    position: absolute;
+    top: 20px;
+    right: 88px;
+    z-index: 0;
 }
 
 .platform-selector:hover {
@@ -552,7 +690,7 @@ footer {
 }
 .platform-selector:not([data-active]) {
     border: 1px solid #DADFE6;
-    background-color: white;
+    background-color: transparent;
     color: #637282;
 }
 
@@ -570,7 +708,12 @@ td.content {
     justify-content: space-between;
 }
 
-.main-subrow > a {
+.main-subrow > span {
+    display: flex;
+    position: relative;
+}
+
+.main-subrow > span > a {
     text-decoration: none;
     font-style: normal;
     font-weight: 600;
@@ -578,10 +721,30 @@ td.content {
     color: #282E34;
 }
 
-.main-subrow > a:hover {
+.main-subrow > span > a:hover {
     color: var(--hover-link-color);
 }
 
+.main-subrow .anchor-icon {
+    padding: 0 8px;
+}
+
+.main-subrow .anchor-icon > svg path {
+    fill: #637282;
+}
+
+.main-subrow .anchor-icon:hover {
+    cursor: pointer;
+}
+
+.main-subrow .anchor-icon:hover > svg path {
+    fill: var(--hover-link-color);
+}
+
+.main-subrow .anchor-wrapper {
+    position: relative;
+}
+
 .platform-hinted {
     flex: auto;
     display: block;
@@ -648,9 +811,52 @@ td.content {
     display: none
 }
 
-.sideMenuPart[data-active] > .overview {
-    background: rgba(91, 93, 239, 0.15);
+.brief-with-platform-tags {
+    display: inline-block;
+    width: 100%;
+}
+
+.tabs-section-body .brief-with-platform-tags {
+    display: inline-flex;
+}
+
+.brief-with-platform-tags ~ .main-subrow {
+    padding-top: 16px;
+}
+
+.cover .with-platform-tabs {
+    background-color: white;
+}
+
+.cover > .with-platform-tabs .platform-bookmarks-row {
+    margin: 0 16px;
+}
+
+.cover > .with-platform-tabs > .content {
+    margin: 0 16px;
+    background-color: #f4f4f4;
+    padding: 8px 16px;
+}
+
+.cover > .block {
+    padding-top: 48px;
+    padding-bottom: 24px;
+    font-size: 18px;
+    line-height: 28px;
+}
+
+.cover > .block:empty {
+    padding-bottom: 0;
+}
+
+.table-row .with-platform-tabs .sourceset-depenent-content .brief {
+    padding: 16px;
+    background-color: #f4f4f4;
+}
+
+.sideMenuPart[data-active] > .overview:before {
     border-left: 4px solid var(--hover-link-color);
+    background: rgba(91, 93, 239, 0.15);
 }
 
 .table {
@@ -662,7 +868,7 @@ td.content {
     display: flex;
     flex-direction: column;
     background: white;
-    margin-bottom: 2px;
+    border-bottom: 2px solid #f4f4f4;
     padding: 16px 24px 16px 24px;
 }
 
@@ -683,7 +889,7 @@ td.content {
 
 @media print, screen and (min-width: 960px) {
     .keyValue {
-        grid-template-columns: 20% auto;
+        grid-template-columns: 20% 80%;
     }
 
     .title-row {
@@ -761,3 +967,55 @@ td.content {
         color: #444;
     }
 }
+
+.footer {
+    clear: both;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: var(--footer-height);
+    border-top: 1px solid #DADFE6;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+    color: var(--breadcrumb-font-color);
+    margin-top: 48px;
+}
+
+.footer span.go-to-top-icon {
+    border-radius: 2em;
+    padding: 11px 10px !important;
+    background-color: white;
+}
+
+.footer span.go-to-top-icon path {
+    fill: #637282;
+}
+
+.footer > span:first-child {
+    margin-left: var(--horizontal-spacing-for-content);
+    padding-left: 0;
+}
+
+.footer > span:last-child {
+    margin-right: var(--horizontal-spacing-for-content);
+    padding-right: 0;
+}
+
+.footer > span {
+    padding: 0 16px;
+}
+
+.footer .padded-icon {
+    padding-left: 0.5em;
+}
+
+/*For svg*/
+.footer path {
+    fill: var(--breadcrumb-font-color);
+}
+
+.pull-right {
+    float: right;
+    margin-left: auto
+}