update mobile view and some bugs

docs/topics/formats/dokka-html.md

@@ -195,7 +195,6 @@ It's also possible to override Dokka's default stylesheets by providing files wi
 | `style.css`          | Main stylesheet, contains most of the styles used across all pages |
 | `logo-styles.css`    | Header logo styling                                                |
 | `prism.css`          | Styles for [PrismJS](https://prismjs.com/) syntax highlighter      |
-| `jetbrains-mono.css` | Font styling                                                       |
 
 The source code for all of Dokka's stylesheets is
 [available on GitHub](https://github.com/Kotlin/dokka/tree/%dokkaVersion%/plugins/base/src/main/resources/dokka/styles).

examples/gradle/dokka-customFormat-example/logo-styles.css

@@ -1,20 +1,20 @@
 /*
  * All Margins and sizes are custom for the ktor-logo.png file.
- * You may need to modify it and find what works best for your case.
+ * You may need to override it and find what works best for your case.
  */
-.library-name a {
-    position: relative;
-    margin-left: 55px;
+:root {
+    --dokka-logo-image-url: url('../images/ktor-logo.png');
+    --dokka-logo-height: 125px;
+    --dokka-logo-width: 50px;
 }
 
-.library-name a::before {
-    content: '';
-    background-image: url('../images/ktor-logo.png');
-    background-repeat: no-repeat;
-    background-size: 125px 50px;
-    position: absolute;
-    width: 52px;
-    height: 50px;
-    top: -18px;
-    left: -62px;
+/* link custom rules styles */
+.library-name--link {
+    /* ... */
 }
+
+/* logo custom rules styles */
+.library-name--link::before {
+    background-position: left;
+    width: 52px;
+}

plugins/base/frontend/src/main/components/search/search.scss

@@ -1,24 +1,34 @@
 $font-color: hsla(0, 0%, 100%, 0.8);
 $secondary-font-color: hsla(0, 0%, 100%, 0.6);
 
-.search {
-  button {
-    margin-top: 10px;
-
-    cursor: pointer;
+#pages-search {
+  cursor: pointer;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  fill: #fff;
+  fill: var(--dark-mode-and-search-icon-color);
+
+  &:focus {
+    outline: none;
+  }
 
-    border: none;
-    background: var(--color-dark);
-    fill: #fff;
-    fill: var(--dark-mode-and-search-icon-color);
+  &:hover {
+    background: var(--white-10);
+  }
+}
 
-    &:focus {
-      outline: none;
-    }
+.search {
+  &, [data-test="ring-select"], [data-test="ring-tooltip"], [data-test="ring-select_focus"], #pages-search {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    font-size: 0;
+    line-height: 0;
   }
 }
 
-.search-hotkey-popup{
+.search-hotkey-popup {
   background-color: var(--background-color) !important;
   padding: 4px;
 }

plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt

@@ -75,7 +75,6 @@ class ScriptsInstaller(private val dokkaContext: DokkaContext) : PageTransformer
 class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer {
     private val stylesPages = listOf(
         "styles/style.css",
-        "styles/jetbrains-mono.css",
         "styles/main.css",
         "styles/prism.css",
         "styles/logo-styles.css"
@@ -102,6 +101,7 @@ object AssetsInstaller : PageTransformer {
         "images/copy-icon.svg",
         "images/copy-successful-icon.svg",
         "images/theme-toggle.svg",
+        "images/burger.svg",
 
         // navigation icons
         "images/nav-icons/abstract-class.svg",

plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js

@@ -82,7 +82,7 @@ const samplesAreEnabled = () => {
 
 
 const initHidingLeftNavigation = () => {
-    document.getElementById("leftToggler").onclick = function (event) {
+    document.getElementById("menu-toggle").onclick = function (event) {
         //Events need to be prevented from bubbling since they will trigger next handler
         event.preventDefault();
         event.stopPropagation();
@@ -329,6 +329,16 @@ function refreshFiltering() {
     refreshFilterButtons()
     refreshPlatformTabs()
     refreshNoContentNotification()
+    refreshPlaygroundSamples()
+}
+
+function refreshPlaygroundSamples() {
+    document.querySelectorAll('code.runnablesample').forEach(node => {
+        const playground = node.KotlinPlayground;
+        /* Some samples may be hidden by filter, they have 0px height  for visible code area
+         * after rendering. Call this method for re-calculate code area height */
+        playground && playground.view.codemirror.refresh();
+    });
 }
 
 function refreshNoContentNotification() {

plugins/base/src/main/resources/dokka/styles/logo-styles.css

@@ -1,15 +1,5 @@
-.library-name a {
-    position: relative;
-    margin-left: 55px;
+:root {
+    --dokka-logo-image-url: url('../images/logo-icon.svg');
+    --dokka-logo-height: 50px;
+    --dokka-logo-width: 50px;
 }
-
-.library-name a::before {
-    content: '';
-    background: url("../images/logo-icon.svg") center no-repeat;
-    background-size: contain;
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    top: -18px;
-    left: -55px;
-}