Many UI changes for styling

4 files changed, 173 insertions, 157 deletions

diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css
index b7c3f58b..147568ac 100644
--- a/core/src/main/resources/dokka/styles/style.css
+++ b/core/src/main/resources/dokka/styles/style.css
@@ -1,26 +1,23 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700);
 
 
-#content {
-    margin-top: 3em;
-    margin-left: 15em;
-}
-
-#navigation {
-    position: relative
+#container {
+    display: flex;
+    flex-direction: row;
 }
 
-#sideMenu, #searchBar {
-    position: absolute;
+@media screen and (max-width: 600px) {
+    #container {
+        flex-direction: column;
+    }
 }
 
 #sideMenu {
-    width: 14em;
-    padding-left: 0.5em;
+    padding-right: 12px;
 }
 
 #sideMenu .sideMenuPart {
-    margin-left: 1em;
+    padding-left: 1em;
 }
 
 #sideMenu img {
@@ -40,13 +37,19 @@
     float: right;
     pointer-events: all;
 }
+
 .monospace,
 .code {
     font-family: monospace;
 }
 
+.symbol {
+    padding: 5px;
+    background-color: #F4F4F4;
+}
+
 .sideMenuPart > .navButton {
-    margin-left:0.25em
+    margin-left: 0.25em
 }
 
 .sideMenuPart > .overview .navButtonContent::after {
@@ -59,25 +62,32 @@
 }
 
 .sideMenuPart.hidden > .sideMenuPart {
-    display: none;
+    height: 0;
+    visibility: hidden;
 }
 
 .filtered > a, .filtered > .navButton {
     display: none;
 }
 
-body, table{
-    font:14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+body, table {
+    font: 14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
     background: #F4F4F4;
-    font-weight:300;
+    font-weight: 300;
     margin-left: auto;
     margin-right: auto;
     max-width: 1440px;
 }
 
 table {
-    display: flex;
-    padding:5px;
+    width: 100%;
+    border-collapse: collapse;
+    background-color: #ffffff;
+    padding: 5px;
+}
+
+tbody > tr {
+    border-bottom: 2px solid #F4F4F4;
 }
 
 td:first-child {
@@ -85,20 +95,20 @@ td:first-child {
 }
 
 .keyword {
-    color:black;
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size:12px;
+    color: black;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
 }
 
 .symbol {
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size:12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
 }
 
 .identifier {
     color: darkblue;
-    font-size:12px;
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-size: 12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
 }
 
 .brief {
@@ -109,255 +119,250 @@ td:first-child {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color:#222;
+    color: #222;
 }
 
 p, ul, ol, table, pre, dl {
-    margin:0 0 20px;
+    margin: 0 0 20px;
 }
 
 h1, h2, h3 {
-    line-height:1.1;
+    line-height: 1.1;
 }
 
 h1 {
-    font-size:28px;
+    font-size: 28px;
 }
 
 h2 {
-    color:#393939;
+    color: #393939;
 }
 
 h3, h4, h5, h6 {
-    color:#494949;
+    color: #494949;
 }
 
 a {
-    color:#258aaf;
-    font-weight:400;
-    text-decoration:none;
+    color: #258aaf;
+    font-weight: 400;
+    text-decoration: none;
 }
 
 a:hover {
     color: inherit;
-    text-decoration:underline;
+    text-decoration: underline;
 }
 
 a small {
-    font-size:11px;
-    color:#555;
-    margin-top:-0.6em;
-    display:block;
+    font-size: 11px;
+    color: #555;
+    margin-top: -0.6em;
+    display: block;
 }
 
 .wrapper {
-    width:860px;
-    margin:0 auto;
+    width: 860px;
+    margin: 0 auto;
 }
 
 blockquote {
-    border-left:1px solid #e5e5e5;
-    margin:0;
-    padding:0 0 0 20px;
-    font-style:italic;
+    border-left: 1px solid #e5e5e5;
+    margin: 0;
+    padding: 0 0 0 20px;
+    font-style: italic;
 }
 
 code, pre {
-    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    color:#333;
-    font-size:12px;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    color: #333;
+    font-size: 12px;
 }
 
 pre {
     display: block;
-/*
-    padding:8px 8px;
-    background: #f8f8f8;
-    border-radius:5px;
-    border:1px solid #e5e5e5;
-*/
+    /*
+        padding:8px 8px;
+        background: #f8f8f8;
+        border-radius:5px;
+        border:1px solid #e5e5e5;
+    */
     overflow-x: auto;
 }
 
-table {
-    width:100%;
-    border-collapse:collapse;
-}
-
 th, td {
-    text-align:left;
+    text-align: left;
     vertical-align: top;
-    padding:5px 10px;
+    padding: 5px 10px;
 }
 
 dt {
-    color:#444;
-    font-weight:700;
+    color: #444;
+    font-weight: 700;
 }
 
 th {
-    color:#444;
+    color: #444;
 }
 
 img {
-    max-width:100%;
+    max-width: 100%;
 }
 
 header {
-    width:270px;
-    float:left;
-    position:fixed;
+    width: 270px;
+    float: left;
+    position: fixed;
 }
 
 header ul {
-    list-style:none;
-    height:40px;
+    list-style: none;
+    height: 40px;
 
-    padding:0;
+    padding: 0;
 
     background: #eee;
     background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-    background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-    background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
+    background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
 
-    border-radius:5px;
-    border:1px solid #d2d2d2;
-    box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
-    width:270px;
+    border-radius: 5px;
+    border: 1px solid #d2d2d2;
+    box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
+    width: 270px;
 }
 
 header li {
-    width:89px;
-    float:left;
-    border-right:1px solid #d2d2d2;
-    height:40px;
+    width: 89px;
+    float: left;
+    border-right: 1px solid #d2d2d2;
+    height: 40px;
 }
 
 header ul a {
-    line-height:1;
-    font-size:11px;
-    color:#999;
-    display:block;
-    text-align:center;
-    padding-top:6px;
-    height:40px;
+    line-height: 1;
+    font-size: 11px;
+    color: #999;
+    display: block;
+    text-align: center;
+    padding-top: 6px;
+    height: 40px;
 }
 
 strong {
-    color:#222;
-    font-weight:700;
+    color: #222;
+    font-weight: 700;
 }
 
 header ul li + li {
-    width:88px;
-    border-left:1px solid #fff;
+    width: 88px;
+    border-left: 1px solid #fff;
 }
 
 header ul li + li + li {
-    border-right:none;
-    width:89px;
+    border-right: none;
+    width: 89px;
 }
 
 header ul a strong {
-    font-size:14px;
-    display:block;
-    color:#222;
+    font-size: 14px;
+    display: block;
+    color: #222;
 }
 
 section {
-    width:500px;
-    float:right;
-    padding-bottom:50px;
+    width: 500px;
+    float: right;
+    padding-bottom: 50px;
 }
 
 small {
-    font-size:11px;
+    font-size: 11px;
 }
 
 hr {
-    border:0;
-    background:#e5e5e5;
-    height:1px;
-    margin:0 0 20px;
+    border: 0;
+    background: #e5e5e5;
+    height: 1px;
+    margin: 0 0 20px;
 }
 
 footer {
-    width:270px;
-    float:left;
-    position:fixed;
-    bottom:50px;
+    width: 270px;
+    float: left;
+    position: fixed;
+    bottom: 50px;
 }
 
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {
-        width:auto;
-        margin:0;
+        width: auto;
+        margin: 0;
     }
 
     header, section, footer {
-        float:none;
-        position:static;
-        width:auto;
+        float: none;
+        position: static;
+        width: auto;
     }
 
     header {
-        padding-right:320px;
+        padding-right: 320px;
     }
 
     section {
-        border:1px solid #e5e5e5;
-        border-width:1px 0;
-        padding:20px 0;
-        margin:0 0 20px;
+        border: 1px solid #e5e5e5;
+        border-width: 1px 0;
+        padding: 20px 0;
+        margin: 0 0 20px;
     }
 
     header a small {
-        display:inline;
+        display: inline;
     }
 
     header ul {
-        position:absolute;
-        right:50px;
-        top:52px;
+        position: absolute;
+        right: 50px;
+        top: 52px;
     }
 }
 
 @media print, screen and (max-width: 720px) {
     body {
-        word-wrap:break-word;
+        word-wrap: break-word;
     }
 
     header {
-        padding:0;
+        padding: 0;
     }
 
     header ul, header p.view {
-        position:static;
+        position: static;
     }
 
     pre, code {
-        word-wrap:normal;
+        word-wrap: normal;
     }
 }
 
 @media print, screen and (max-width: 480px) {
     body {
-        padding:15px;
+        padding: 15px;
     }
 
     header ul {
-        display:none;
+        display: none;
     }
 }
 
 @media print {
     body {
-        padding:0.4in;
-        font-size:12pt;
-        color:#444;
+        padding: 0.4in;
+        font-size: 12pt;
+        color: #444;
     }
 }
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index a2a31340..07de6867 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -30,6 +30,7 @@ open class HtmlRenderer(
     ) {
         val additionalClasses = node.style.joinToString { it.toString().toLowerCase() }
         return when {
+            node.dci.kind == ContentKind.Symbol -> div("symbol $additionalClasses") { childrenCallback() }
             node.dci.kind == ContentKind.BriefComment -> div("brief $additionalClasses") { childrenCallback() }
             node.style.contains(TextStyle.Paragraph) -> p(additionalClasses) { childrenCallback() }
             node.style.contains(TextStyle.Block) -> div(additionalClasses) { childrenCallback() }
@@ -214,13 +215,17 @@ open class HtmlRenderer(
 
     override fun buildPage(page: ContentPage, content: (FlowContent, ContentPage) -> Unit): String =
         buildHtml(page, page.embeddedResources) {
-            attributes["pageIds"] = page.dri.toList()[0].toString()
-            content(this, page)
+            div {
+                id = "content"
+                attributes["pageIds"] = page.dri.first().toString()
+                content(this, page)
+            }
         }
 
     open fun buildHtml(page: PageNode, resources: List<String>, content: FlowContent.() -> Unit) =
         createHTML().html {
             head {
+                meta(name = "viewport", content = "width=device-width, initial-scale=1")
                 title(page.name)
                 with(resources) {
                     filter { it.substringBefore('?').substringAfterLast('.') == "css" }
@@ -232,23 +237,23 @@ open class HtmlRenderer(
             }
             body {
                 div {
-                    id = "navigation"
+                    id = "container"
                     div {
-                        id = "searchBar"
-                        form(action = page.root("-search.html"), method = FormMethod.get) {
-                            id = "searchForm"
-                            input(type = InputType.search, name = "query")
-                            input(type = InputType.submit) { value = "Search" }
-                        }
+                        id = "sideMenu"
                     }
                     div {
-                        id = "sideMenu"
+                        id = "main"
+                        div {
+                            id = "searchBar"
+                            form(action = page.root("-search.html"), method = FormMethod.get) {
+                                id = "searchForm"
+                                input(type = InputType.search, name = "query")
+                                input(type = InputType.submit) { value = "Search" }
+                            }
+                        }
+                        content()
                     }
                 }
-                div {
-                    id = "content"
-                    content()
-                }
             }
         }
 }
diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
index 3c4698fe..98394872 100644
--- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
+++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
@@ -77,7 +77,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
         }
     }
 
-    private fun signature(t: TypeParameter) = contentBuilder.contentFor(t, ContentKind.Symbol, setOf(TextStyle.Monospace)) {
+    private fun signature(t: TypeParameter) = contentBuilder.contentFor(t, ContentKind.Main) {
         link(t.name, t.dri)
         list(t.bounds, prefix = " : ") {
             signatureForProjection(it)
diff --git a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
index 1f7f0b01..401802eb 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt
@@ -61,8 +61,9 @@ open class DefaultPageCreator(
         block("Types", 2, ContentKind.Classlikes, s.classlikes, platformData.toSet()) {
             link(it.name.orEmpty(), it.dri)
             group {
-                +buildSignature(it)
-                breakLine()
+                group(kind = ContentKind.Symbol) {
+                    +buildSignature(it)
+                }
                 group(kind = ContentKind.BriefComment) {
                     text(it.briefDocumentation())
                 }
@@ -71,8 +72,9 @@ open class DefaultPageCreator(
         block("Functions", 2, ContentKind.Functions, s.functions, platformData.toSet()) {
             link(it.name, it.dri)
             group {
-                +buildSignature(it)
-                breakLine()
+                group(kind = ContentKind.Symbol) {
+                    +buildSignature(it)
+                }
                 group(kind = ContentKind.BriefComment) {
                     text(it.briefDocumentation())
                 }
@@ -89,14 +91,18 @@ open class DefaultPageCreator(
 
     protected open fun contentForClasslike(c: Classlike) = contentBuilder.contentFor(c) {
         header(1) { text(c.name.orEmpty()) }
-        +buildSignature(c)
+        group(kind = ContentKind.Symbol) {
+            +buildSignature(c)
+        }
         +contentForComments(c) { it !is Property }
 
         if (c is WithConstructors) {
             block("Constructors", 2, ContentKind.Constructors, c.constructors, c.platformData.toSet()) {
                 link(it.name, it.dri)
                 group {
-                    +buildSignature(it)
+                    group(kind = ContentKind.Symbol) {
+                        +buildSignature(it)
+                    }
                     group(kind = ContentKind.BriefComment) {
                         text(it.briefDocumentation())
                     }