update mobile view and some bugs (#2836)

* Fix dark theme bugs: mobile TOC is visible on 1px and has white background, menu icon is black

* Refactoring css styles for header controls

* Change header responsive layout

* Change header responsive layout

* Fix scrollable columns for any header size

* Remove main content mobile spacing

* Change style for platform filters and labels

* Fix: add burger icon into dist

* Fix: long code token in mobile view

* Fix: color in filter selector

* Fix: long token in keyValue for desktop

* Fix: add spacing for iPad Mini

* Fix: dropdown for multiple versions

* update platform brand colors

* Fix: sample spacing, blockquote, playground initialize

* Safari fix outline for platform tags

* Fix non-js main content for better SEO

* Fix outline for safari browser

* Add consistent vertical spacing for header. It should normalize subpixel artifacts and centred content.

* Update manual for custom logo

* Add comment for playground

* Hide copy button for non-js user

* fix; use google fonts

* feat; change style for platform in platform-tags

* Revert Inter as defult font

* Add breaks for CONSTANTS

* incorrect non-js script position

* less specific selector for article links

11 files changed, 628 insertions, 477 deletions

diff --git a/plugins/base/frontend/src/main/components/assets/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
index 159f2578..3fa1f24f 100644
--- a/plugins/base/frontend/src/main/components/assets/searchIcon.svg
+++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
-</svg>
\ No newline at end of file
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.8469 14.8611C22.6607 12.4913 20.2362 10.9961 17.5861 11C14.5427 10.9989 11.8476 12.965 10.9197 15.8634C9.99166 18.7619 11.0436 21.9277 13.5217 23.6944C15.9998 25.4611 19.3356 25.4233 21.7731 23.601L27.8791 29.707L29.2931 28.293L23.1861 22.187C24.7773 20.0677 25.0332 17.2309 23.8469 14.8611ZM22.5861 18C22.5861 20.7614 20.3475 23 17.5861 23C16.26 23 14.9882 22.4732 14.0506 21.5355C13.1129 20.5979 12.5861 19.3261 12.5861 18C12.5861 15.2386 14.8247 13 17.5861 13C20.3475 13 22.5861 15.2386 22.5861 18Z" fill="white"/>
+</svg>
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 780ea6b3..ebb102d3 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/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;
 }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index e2be3ef0..6e754264 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/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",
diff --git a/plugins/base/src/main/resources/dokka/images/burger.svg b/plugins/base/src/main/resources/dokka/images/burger.svg
new file mode 100644
index 00000000..d6dcefcc
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/burger.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.3379 5.83331H4.67126V8.16665H23.3379V5.83331Z" fill="white"/>
+    <path d="M23.3379 12.8333H4.67126V15.1666H23.3379V12.8333Z" fill="white"/>
+    <path d="M4.67126 19.8333H23.3379V22.1666H4.67126V19.8333Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
index 2a8d750e..dad3ff2a 100644
--- a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
+++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path fill="white" fill-rule="evenodd" clip-rule="evenodd"
-          d="M0 9a9 9 0 1018 0A9 9 0 000 9zm16 0a7 7 0 01-7 7V2a7 7 0 017 7z" transform="translate(3, 3)"></path>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.9824 29.0078C21.7625 29.0078 23.5025 28.48 24.9826 27.491C26.4626 26.5021 27.6161 25.0965 28.2973 23.452C28.9785 21.8074 29.1568 19.9978 28.8095 18.252C28.4622 16.5062 27.6051 14.9025 26.3464 13.6439C25.0877 12.3852 23.4841 11.528 21.7382 11.1807C19.9924 10.8335 18.1828 11.0117 16.5383 11.6929C14.8937 12.3741 13.4881 13.5276 12.4992 15.0077C11.5103 16.4877 10.9824 18.2278 10.9824 20.0078C10.9851 22.3939 11.9342 24.6816 13.6214 26.3688C15.3087 28.0561 17.5963 29.0051 19.9824 29.0078ZM19.9824 13.0078C21.8389 13.0078 23.6194 13.7453 24.9322 15.0581C26.2449 16.3708 26.9824 18.1513 26.9824 20.0078C26.9824 21.8643 26.2449 23.6448 24.9322 24.9576C23.6194 26.2703 21.8389 27.0078 19.9824 27.0078V13.0078Z" fill="white"/>
 </svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
index 1f99ba1f..88d4d71a 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
+++ b/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() {
diff --git a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css b/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css
deleted file mode 100644
index 9a0f06f8..00000000
--- a/plugins/base/src/main/resources/dokka/styles/jetbrains-mono.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face{
-    font-family: 'JetBrains Mono';
-    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/web/JetBrainsMono-Regular.eot') format('embedded-opentype'),
-         url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'),
-         url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face{
-    font-family: 'JetBrains Mono';
-    src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/web/JetBrainsMono-Bold.eot') format('embedded-opentype'),
-         url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2'),
-         url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: bold;
-}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/logo-styles.css b/plugins/base/src/main/resources/dokka/styles/logo-styles.css
index 25de3f61..f3846e82 100644
--- a/plugins/base/src/main/resources/dokka/styles/logo-styles.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index e34b9fb4..8d5770df 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -1,7 +1,6 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700);
-@import url('https://rsms.me/inter/inter.css');
-@import url('jetbrains-mono.css');
+@import url('https://fonts.googleapis.com/css?family=JetBrains+Mono');
 
+/* --- root styles --- */
 :root {
     --default-gray: #f4f4f4;
     --default-font-color: black;
@@ -18,7 +17,6 @@
     --footer-go-to-top-color: white;
 
     --horizontal-spacing-for-content: 16px;
-    --mobile-horizontal-spacing-for-content: 8px;
     --bottom-spacing: 16px;
     --color-scrollbar: rgba(39, 40, 44, 0.40);
     --color-scrollbar-track: var(--default-gray);
@@ -44,36 +42,12 @@
     --inactive-tab-border-color: rgba(164, 164, 170, 0.7);
 
     --active-section-color: #7F52FF;
-    --inactive-section-color: rgba(25,25,28,.7);
+    --inactive-section-color: rgba(25, 25, 28, .7);
 
+    --sidebar-width: 280px;
     --sidemenu-section-active-color: #7F52FF;
 }
 
-:root.theme-dark {
-    --background-color: #27282c;
-    --color-dark: #3d3d41;
-    --default-font-color: hsla(0, 0%, 100%, 0.8);
-    --border-color: hsla(0, 0%, 100%, 0.2);
-    --code-background: hsla(0, 0%, 100%, 0.05);
-    --breadcrumb-font-color: #8c8c8e;
-    --brief-color: hsla(0, 0%, 100%, 0.4);
-    --copy-icon-color: hsla(0, 0%, 100%, 0.6);
-    --copy-icon-hover-color: #fff;
-
-    --active-tab-border-color: var(--default-font-color);
-    --inactive-tab-border-color: hsla(0, 0%, 100%, 0.4);
-
-    --active-section-color: var(--default-font-color);
-    --inactive-section-color: hsla(0, 0%, 100%, 0.4);
-
-    --navigation-highlight-color: rgba(255, 255, 255, 0.05);
-    --footer-background: hsla(0, 0%, 100%, 0.05);
-    --footer-font-color: hsla(0, 0%, 100%, 0.6);
-    --footer-go-to-top-color: var(--footer-font-color);
-
-    --sidemenu-section-active-color: var(--color-dark);
-}
-
 html {
     height: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -100,62 +74,417 @@ html ::-webkit-scrollbar-thumb {
     background: var(--color-scrollbar);
 }
 
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+/* /--- root styles --- */
 
-.main-content {
-    padding-bottom: var(--bottom-spacing);
-    z-index: 0;
-    max-width: var(--max-width);
+/* --- global tags styles --- */
+body, table {
+    background: var(--background-color);
+    font-family: var(--default-font-family);
+    font-style: normal;
+    font-weight: normal;
+    font-size: var(--default-font-size);
+    line-height: 1.6;
+    margin: 0;
+}
+
+h1 {
+    font-size: 40px;
+    line-height: 48px;
+    letter-spacing: -1px;
+}
+
+h2 {
+    font-size: 31px;
+    line-height: 40px;
+    letter-spacing: -0.5px;
+}
+
+h3 {
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+}
+
+p, ul, ol, table, pre, dl {
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+u {
+    text-decoration: none;
+    padding-bottom: 2px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+blockquote {
+    border-left: 1ch solid var(--default-gray);
+    margin: 0;
+    padding-left: 1ch;
+    font-style: italic;
+    color: var(--average-color);
+}
+
+.theme-dark blockquote {
+    color: var(--default-font-color);
+    border-left-color: var(--code-background);
+}
+
+pre {
+    display: block;
+}
+
+dt {
+    color: #444;
+    font-weight: 700;
+}
+
+img {
+    max-width: 100%;
+}
+
+small {
+    font-size: 11px;
+}
+
+table {
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    border-collapse: collapse;
+    padding: 5px;
 }
 
-.main-content > * {
-    margin-left: var(--horizontal-spacing-for-content);
-    margin-right: var(--horizontal-spacing-for-content);
+th, td {
+    padding: 12px 10px 11px;
+    text-align: left;
+    vertical-align: top;
 }
 
-.main-content .content > hr {
-    margin: 30px 0;
-    border-top: 3px double #8c8b8b;
+tbody > tr {
+    min-height: 56px;
 }
 
-.navigation-wrapper {
+td:first-child {
+    width: 20vw;
+}
+/* /---  global tags styles --- */
+
+/* ---  utils classes --- */
+.w-100 {
+    width: 100%;
+}
+
+.no-gutters {
+    margin: 0;
+    padding: 0;
+}
+
+.d-flex {
     display: flex;
-    flex-wrap: wrap;
-    position: sticky;
-    top: 0;
-    background-color: var(--color-dark);
-    z-index: 4;
+}
+
+.floating-right {
+    float: right;
+}
+
+.pull-right {
+    float: right;
+    margin-left: auto
+}
+
+.clearfix::after {
+    display: block;
+    content: '';
+    clear: both;
+    height: 0;
+}
+/* /---  utils classes --- */
+
+/* ---dark theme --- */
+.theme-dark {
+    --background-color: #27282c;
+    --color-dark: #3d3d41;
+    --default-font-color: hsla(0, 0%, 100%, 0.8);
+    --border-color: hsla(0, 0%, 100%, 0.2);
+    --code-background: hsla(0, 0%, 100%, 0.05);
+    --breadcrumb-font-color: #8c8c8e;
+    --brief-color: hsla(0, 0%, 100%, 0.4);
+    --copy-icon-color: hsla(0, 0%, 100%, 0.6);
+    --copy-icon-hover-color: #fff;
+
+    --active-tab-border-color: var(--default-font-color);
+    --inactive-tab-border-color: hsla(0, 0%, 100%, 0.4);
+
+    --active-section-color: var(--default-font-color);
+    --inactive-section-color: hsla(0, 0%, 100%, 0.4);
+
+    --navigation-highlight-color: rgba(255, 255, 255, 0.05);
+    --footer-background: hsla(0, 0%, 100%, 0.05);
+    --footer-font-color: hsla(0, 0%, 100%, 0.6);
+    --footer-go-to-top-color: var(--footer-font-color);
+
+    --sidemenu-section-active-color: var(--color-dark);
+}
+/* /---dark theme --- */
+
+.root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* --- Navigation styles --- */
+.navigation {
+    display: flex;
+    justify-content: space-between;
+
     color: #fff;
+    background-color: var(--color-dark);
     font-family: var(--default-font-family);
     letter-spacing: -0.1px;
-    align-items: center;
 
     /* Reset margin and use padding for border */
     margin-left: 0;
     margin-right: 0;
-    padding: 19px var(--horizontal-spacing-for-content) 18px;
+    padding: 10px var(--horizontal-spacing-for-content);
+
+    z-index: 4;
 }
 
-.navigation-wrapper > .library-name {
-    font-weight: 700;
-    margin-right: 12px;
+.navigation--inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    flex: 1 1 auto;
 }
 
-.navigation-wrapper a {
-    color: #fff;
+.navigation--inner, .navigation-title {
+    min-height: 40px;
 }
 
-#searchBar {
-    margin-left: 16px;
-    display: inline-flex;
-    align-content: center;
+.navigation-title, .filter-section {
     align-items: center;
-    width: 36px;
-    height: 36px;
 }
 
+.navigation-title {
+    display: flex;
+    align-items: center;
+}
+
+/* --- Navigation MENU --- */
+.menu-toggle {
+    color: var(--background-color);
+    line-height: 0;
+    font-size: 0;
+    text-indent: -9999px;
+
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin-right: 16px;
+    outline: none;
+
+    transition: margin .2s ease-out;
+    z-index: 5;
+}
+
+@media (min-width: 760px) {
+    .menu-toggle {
+        display: none;
+    }
+}
+
+.menu-toggle::before {
+    display: block;
+    content: '';
+    background: url('../images/burger.svg') no-repeat center;
+    height: 28px;
+    width: 28px;
+}
+/* /--- Navigation MENU --- */
+
+.library-version {
+    position: relative;
+    top: -4px;
+    margin-left: 3px;
+
+    color: rgba(255,255,255,.7);
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 16px;
+}
+
+.filter-section {
+    z-index: 0;
+}
+
+.no-js .filter-section {
+    display: none;
+}
+
+@media (min-width: 760px) {
+    .filter-section {
+        padding: 5px 0 5px;
+    }
+}
+/* --- Navigation controls --- */
+.navigation-controls {
+    display: flex;
+}
+
+@media (min-width: 760px) {
+    .navigation-controls {
+        align-items: center;
+    }
+}
+
+.no-js .navigation-controls {
+    display: none;
+}
+
+/* --- Navigation THEME --- */
+.navigation-controls--search {
+    display: inline-flex;
+    font-size: 0;
+    line-height: 0;
+}
+
+.navigation-controls--theme {
+    display: block;
+    border-radius: 50%;
+    background-color: inherit;
+    margin-left: 4px;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    font-size: 0;
+    line-height: 0;
+}
+
+.navigation-controls--theme::before {
+    height: 40px;
+    width: 40px;
+}
+
+.navigation-controls--theme:hover {
+    background: var(--white-10);
+}
+
+.navigation-controls--theme::before {
+    display: block;
+    content: url("../images/theme-toggle.svg");
+}
+
+@media (max-width: 759px) {
+    .navigation-controls--theme {
+        display: none;
+    }
+}
+/* /--- Navigation THEME --- */
+
+.navigation .platform-selector:not([data-active]) {
+    color: #fff;
+}
+/* /--- Navigation controls --- */
+/* /--- Navigation styles --- */
+
+/* --- Layout styles --- */
+
+#container {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0; /* full height exclude header */
+}
+
+#container > .sidebar, #container > #main {
+    overflow: auto;
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0; /* full width, but no affects for sidebar */
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-right: 1px solid var(--border-color);
+    width: var(--sidebar-width);
+}
+
+.no-js .sidebar {
+    display: none;
+}
+
+@media (max-width: 759px) {
+    #container {
+        position: relative;
+    }
+
+    .sidebar {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        box-sizing: border-box;
+        background: var(--background-color);
+        margin-left: calc(-1 * var(--sidebar-width));
+        transition: margin .2s ease-out;
+        z-index: 4;
+    }
+
+    .sidebar.open {
+        margin-left: 0;
+    }
+
+    .sidebar.open ~ #main .navigation-controls--search {
+        display: none;
+    }
+
+    .sidebar.open ~ #main .menu-toggle {
+        margin-left: var(--sidebar-width);
+    }
+}
+
+.sidebar--inner {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    padding-top: 22px;
+    padding-bottom: 16px;
+}
+/* /--- Layout styles --- */
+
+/* --- Main Content styles --- */
+.main-content {
+    padding-bottom: var(--bottom-spacing);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--max-width);
+    width: 100%;
+    z-index: 0;
+}
+
+.main-content > * {
+    margin-left: var(--horizontal-spacing-for-content);
+    margin-right: var(--horizontal-spacing-for-content);
+}
+
+.main-content .content > hr {
+    margin: 30px 0;
+    border-top: 3px double #8c8b8b;
+}
+/* /--- Main Content styles --- */
+
+/* /--- Breadcrumbs styles --- */
 .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
     margin-top: var(--breadcrumb-margin);
     color: var(--breadcrumb-font-color);
@@ -169,6 +498,7 @@ html ::-webkit-scrollbar-thumb {
 .breadcrumbs .current {
     color: var(--default-font-color);
 }
+/* /--- Breadcrumbs styles --- */
 
 .tabs-section > .section-tab:first-child,
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark:first-child {
@@ -192,6 +522,14 @@ html ::-webkit-scrollbar-thumb {
     margin-bottom: 16px;
 }
 
+.no-js .platform-bookmarks-row + .sourceset-dependent-content {
+    margin-top: 8px;
+}
+
+.no-js .platform-bookmarks-row + .sourceset-dependent-content:last-of-type {
+    margin-top: 0;
+}
+
 .section-tab:hover {
     color: var(--default-font-color);
     border-bottom: 2px solid var(--default-font-color);
@@ -246,10 +584,13 @@ html ::-webkit-scrollbar-thumb {
 }
 
 .main-content p.paragraph,
-.sample-container {
+.sample-container, blockquote,
+.content > .symbol {
     margin-top: 8px;
 }
 
+blockquote,
+.content > .symbol:first-of-type,
 p.paragraph:first-child,
 .brief p.paragraph {
     margin-top: 0;
@@ -281,41 +622,6 @@ p.paragraph:first-child,
     padding-top: 0;
 }
 
-#container {
-    display: flex;
-    flex-direction: row;
-    height: calc(100% - var(--top-navigation-height));
-}
-
-#container > div {
-    height: 100%;
-    max-height: calc(100vh - var(--top-navigation-height));
-    overflow: auto;
-}
-
-#main {
-    width: 100%;
-    max-width: calc(100% - 300px);
-    display: flex;
-    flex-direction: column;
-}
-
-#leftColumn {
-    width: 300px;
-    border-right: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-}
-
-#sideMenu {
-    padding-top: 22px;
-    overflow-y: auto;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    height: 100%;
-}
-
 .sample-container, div.CodeMirror {
     position: relative;
     display: flex;
@@ -361,6 +667,16 @@ code.paragraph {
     position: relative;
 }
 
+code {
+    overflow-x: auto;
+    max-width: 100%;
+}
+
+code:not(.block) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .symbol > a {
     color: var(--hover-link-color);
 }
@@ -373,7 +689,7 @@ code.paragraph {
     display: none;
 }
 
-.sample-container:hover span.copy-icon {
+.js .sample-container:hover span.copy-icon {
     display: inline-block;
 }
 
@@ -399,7 +715,7 @@ code.paragraph {
     align-items: center;
     position: absolute;
     z-index: 1000;
-    background: white;
+    background: var(--background-color);
     font-weight: normal;
     font-family: var(--default-font-family);
     width: max-content;
@@ -407,9 +723,9 @@ code.paragraph {
     cursor: default;
     border: 1px solid #D8DCE1;
     box-sizing: border-box;
-    box-shadow: 0px 5px 10px var(--ring-popup-shadow-color);
+    box-shadow: 0 5px 10px var(--ring-popup-shadow-color);
     border-radius: 3px;
-    color: initial;
+    color: var(--default-font-color);
 }
 
 .copy-popup-wrapper > .copy-popup-icon::before {
@@ -473,7 +789,7 @@ code.paragraph {
     box-sizing: border-box;
     content: '';
     top: 0;
-    width: 300px;
+    width: var(--sidebar-width);
     right: 0;
     bottom: 0;
     position: absolute;
@@ -603,50 +919,12 @@ code.paragraph {
     display: none;
 }
 
-body {
-    height: 100%;
-}
-
-body, table {
-    font-family: var(--default-font-family);
-    background: var(--background-color);
-    font-style: normal;
-    font-weight: normal;
-    font-size: var(--default-font-size);
-    line-height: 24px;
-    margin: 0;
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    padding: 5px;
-}
-
-tbody > tr {
-    min-height: 56px;
-}
-
-td:first-child {
-    width: 20vw;
-}
 
 .brief {
     white-space: pre-wrap;
     overflow: hidden;
 }
 
-p, ul, ol, table, pre, dl {
-    margin: 0;
-}
-
-h1 {
-    font-size: 40px;
-    line-height: 48px;
-    letter-spacing: -1px;
-}
-
-
 h1.cover {
     font-size: 52px;
     line-height: 56px;
@@ -656,16 +934,19 @@ h1.cover {
     display: block;
 }
 
-h2 {
-    font-size: 31px;
-    line-height: 40px;
-    letter-spacing: -0.5px;
+@media (max-width: 1119px) {
+    h1.cover {
+        font-size: 48px;
+        line-height: 48px;
+        padding-bottom: 8px;
+    }
 }
 
-h3 {
-    font-size: 20px;
-    line-height: 28px;
-    letter-spacing: -0.2px;
+@media (max-width: 759px) {
+    h1.cover {
+        font-size: 32px;
+        line-height: 32px;
+    }
 }
 
 .UnderCoverText {
@@ -682,12 +963,7 @@ h3 {
     word-break: break-word;
 }
 
-
-a {
-    text-decoration: none;
-}
-
-#main a:not([data-name]) {
+.main-content a:not([data-name]) {
     padding-bottom: 2px;
     border-bottom: 1px solid var(--border-color);
     cursor: pointer;
@@ -698,7 +974,7 @@ a {
     transition: color .1s, border-color .1s;
 }
 
-#main a:hover {
+.main-content a:hover {
     border-bottom-color: unset;
     color: inherit
 }
@@ -709,47 +985,10 @@ a small {
     display: block;
 }
 
-u {
-    text-decoration: none;
-    padding-bottom: 2px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-blockquote {
-    border-left: 1ch solid var(--default-gray);
-    margin: 0;
-    padding-left: 1ch;
-    font-style: italic;
-    color: var(--average-color);
-}
-
-pre {
-    display: block;
-}
-
-th, td {
-    text-align: left;
-    vertical-align: top;
-    padding: 12px 10px 11px;
-}
-
-dt {
-    color: #444;
-    font-weight: 700;
-}
-
 p.paragraph img {
     display: block;
 }
 
-img {
-    max-width: 100%;
-}
-
-small {
-    font-size: 11px;
-}
-
 .deprecation-content {
     margin: 20px 10px;
     border:1px solid var(--border-color);
@@ -783,92 +1022,90 @@ small {
     margin: 0;
 }
 
-.platform-tag {
-    display: flex;
-    flex-direction: row;
-    padding: 4px 8px;
-    height: 24px;
-    border-radius: 100px;
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    margin: 2px;
-    font-family: Inter, Arial, sans-serif;
-    font-size: 12px;
-    font-weight: 400;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    outline: none;
-    color: #fff
+[data-filterable-current=''] {
+    display: none !important;
 }
 
-.platform-tags {
+.platform-tags, .filter-section {
     display: flex;
     flex-wrap: wrap;
-    padding-bottom: 8px;
+    margin-bottom: -8px;
+    margin-left: -4px;
 }
 
-.platform-tags > .platform-tag {
-    align-self: center;
+.platform-tag {
+    --platform-tag-color: #bababb;
+    border: 0 none;
+    margin-right: 4px;
+    margin-bottom: 8px;
+
+    font-family: var(--default-font-family);
+    font-size: 13px;
+    line-height: 1.5;
+    text-transform: capitalize;
 }
 
-.platform-tags > .platform-tag:first-of-type {
-    margin-left: auto;
+.platform-tag.js-like, .platform-tag.jvm-like, .platform-tag.wasm-like {
+    text-transform: uppercase;
 }
 
-.platform-tag.jvm-like {
-    background-color: #4DBB5F;
-    color: white;
+.filter-section .platform-tag {
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 2px 16px;
 }
 
-.platform-tag.js-like {
-    background-color: #FED236;
-    color: white;
+.filter-section .platform-tag.jvm-like[data-active], .platform-tags .platform-tag.jvm-like {
+    --platform-tag-color: #4dbb5f;
 }
 
-.platform-tag.wasm-like {
-    background-color: #654FF0;
-    color: white;
+.filter-section .platform-tag.js-like[data-active], .platform-tags .platform-tag.js-like {
+    --platform-tag-color: #ffc700;
 }
 
-.platform-tag.native-like {
-    background-color: #CD74F6;
-    color: white;
+.filter-section .platform-tag.native-like[data-active], .platform-tags .platform-tag.native-like {
+    --platform-tag-color: #E082F3;
 }
 
-.platform-tag.common-like {
-    background-color: #A6AFBA;
-    color: white;
+.filter-section .platform-tag.wasm-like[data-active], .platform-tags .platform-tag.wasm-like {
+    --platform-tag-color: #9585F9;
 }
 
-.filter-section {
-    display: flex;
-    flex-direction: row;
-    align-self: flex-end;
-    min-height: 36px;
-    z-index: 0;
-    flex-wrap: wrap;
-    align-items: center;
+.filter-section .platform-tag[data-active]:hover {
+    color: #fff;
+    background-color: rgba(186, 186, 187, .7);
 }
 
-.platform-selector:hover {
-    border: 1px solid #A6AFBA !important;
+.filter-section .platform-tag:not([data-active]) {
+    color: #fff;
+    /* Safari doesn't work correctly for `outline` with `border-radius` */
+    /* outline: 1px solid rgba(255,255,255,.6); */
+    /* ...use `box-shadow` instead: */
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 60%);
+    background-color: rgba(255,255,255,.05);
 }
 
-[data-filterable-current=''] {
-    display: none !important;
+.filter-section .platform-tag[data-active] {
+    color: #19191c;
+    background-color: var(--platform-tag-color);
 }
 
-.platform-selector:not([data-active]) {
-    border: 1px solid #DADFE6;
-    background-color: transparent;
-    color: var(--average-color);
+.platform-tags .platform-tag {
+    display: flex;
+    align-items: center;
 }
 
-.navigation-wrapper .platform-selector:not([data-active]) {
-    color: #FFFFFF;
+.platform-tags .platform-tag::before {
+    display: inline-block;
+    content: '';
+    border-radius: 50%;
+    background: var(--platform-tag-color);
+    margin: 0 4px 0 8px;
+    height: 8px;
+    width: 8px;
+
+    font-size: 13px;
+    line-height: 1.6;
 }
 
 td.content {
@@ -885,6 +1122,10 @@ td.content {
     flex-wrap: wrap;
 }
 
+.main-subrow > div {
+    margin-bottom: 8px;
+}
+
 .main-subrow > div > span {
     display: flex;
     position: relative;
@@ -946,8 +1187,12 @@ td.content {
     color: var(--active-section-color);
 }
 
-.platform-hinted > .content:not([data-active]),
-.tabs-section-body *[data-togglable]:not([data-active]) {
+.no-js .platform-bookmarks-row, .no-js .tabs-section {
+    display: none;
+}
+
+.js .platform-hinted > .content:not([data-active]),
+.js .tabs-section-body *[data-togglable]:not([data-active]) {
     display: none;
 }
 
@@ -1044,23 +1289,27 @@ Just in case of possible performance degradation it excluding tabs with briefs o
     width: 100%;
 }
 
+@media print, (min-width: 960px) {
+    .title-row {
+        grid-template-columns: 20% auto 7em;
+    }
+}
+
 .keyValue {
     display: grid;
     grid-gap: 8px;
 }
 
-@media print, screen and (min-width: 960px) {
+@media print, (min-width: 960px) {
     .keyValue {
         grid-template-columns: 20% 80%;
     }
-
-    .title-row {
-        grid-template-columns: 20% auto 7em;
+    .keyValue > div:first-child {
+        word-break: break-word;
     }
 }
 
-@media print, screen and (max-width: 960px) {
-
+@media print, (max-width: 960px) {
     div.wrapper {
         width: auto;
         margin: 0;
@@ -1094,7 +1343,24 @@ Just in case of possible performance degradation it excluding tabs with briefs o
     }
 }
 
+.anchor-highlight {
+    border: 1px solid var(--hover-link-color) !important;
+    box-shadow: 0 0 0 0.2em #c8e1ff;
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+}
+
+.filtered-message {
+    margin: 25px;
+    font-size: 20px;
+    font-weight: bolder;
+}
+
+div.runnablesample {
+    height: fit-content;
+}
 
+/* --- footer --- */
 .footer {
     clear: both;
     display: flex;
@@ -1149,154 +1415,37 @@ Just in case of possible performance degradation it excluding tabs with briefs o
 .footer .padded-icon::before {
     content: url("../images/footer-go-to-link.svg");
 }
+/* /--- footer --- */
 
-.pull-right {
-    float: right;
-    margin-left: auto
-}
-
-div.runnablesample {
-    height: fit-content;
-}
-
-.anchor-highlight {
-    border: 1px solid var(--hover-link-color) !important;
-    box-shadow: 0 0 0 0.2em #c8e1ff;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-}
-
-.w-100 {
-    width: 100%;
-}
-
-.no-gutters {
-    margin: 0;
-    padding: 0;
+/* Logo styles */
+:root {
+    --dokka-logo-image-url: url('../images/logo-icon.svg');
+    --dokka-logo-height: 50px;
+    --dokka-logo-width: 50px;
 }
 
-.d-flex {
+.library-name--link {
     display: flex;
-}
-
-#theme-toggle {
-    content: url("../images/theme-toggle.svg");
-}
-
-#theme-toggle-button {
-    width: 36px;
-    height: 36px;
-    display: inline-flex;
-    justify-content: center;
     align-items: center;
-    border-radius: 24px;
-    margin-left: 16px;
-    background-color: inherit;
-    border: none;
-    cursor: pointer;
-}
-
-#theme-toggle-button:hover {
-    background: var(--white-10);
-}
-
-.filtered-message {
-    margin: 25px;
-    font-size: 20px;
-    font-weight: bolder;
+    color: #fff;
+    font-weight: 700;
 }
 
-@media screen and (max-width: 1119px) {
-    h1.cover {
-        font-size: 48px;
-        line-height: 48px;
-        padding-bottom: 8px;
-    }
+.library-name--link::before {
+    content: '';
+    background: var(--dokka-logo-image-url) center no-repeat;
+    background-size: var(--dokka-logo-height) var(--dokka-logo-width);
+    margin-right: 5px;
+    width: var(--dokka-logo-height);
+    height: var(--dokka-logo-width);
 }
 
-@media screen and (max-width: 759px) {
-    #main {
-        max-width: 100%;
-    }
-
-    #leftColumn {
-        position: fixed;
-        margin-left: -300px;
-        transition: margin .2s ease-out;
-        z-index: 4;
-        background: white;
-        height: 100%;
-    }
-
-    #leftColumn.open {
-        margin-left: 0;
-    }
-
-    #leftColumn.open ~ #main #searchBar {
+@media (max-width: 759px) {
+    .library-name--link::before {
         display: none;
     }
-
-    #leftToggler {
-        z-index: 5;
-        font-size: 20px;
-        transition: margin .2s ease-out;
-        margin-right: 16px;
-
-        color: var(--background-color);
-    }
-
-    #leftToggler .icon-toggler:hover {
-        cursor: pointer;
-    }
-
-    #leftColumn.open ~ #main #leftToggler {
-        margin-left: 300px;
-    }
-
-    .icon-toggler::before {
-        content: "\2630";
-    }
-
-    #leftColumn.open ~ #main .icon-toggler::before {
-        content: "\2630";
-        padding-right: 0.5em;
-        margin-left: -0.5em;
-    }
-
-    .main-content > * {
-        margin-left: var(--mobile-horizontal-spacing-for-content);
-        margin-right: var(--mobile-horizontal-spacing-for-content);
-    }
-
-    .navigation-wrapper {
-        padding-left: var(--mobile-horizontal-spacing-for-content);
-        padding-right: var(--mobile-horizontal-spacing-for-content);
-    }
-
-    #sideMenu {
-        padding-bottom: 16px;
-        overflow: auto;
-    }
-
-    h1.cover {
-        font-size: 32px;
-        line-height: 32px;
-    }
-
-    #theme-toggle-button {
-        display: none;
-    }
-}
-.clearfix::after {
-    content: ' ';
-    clear: both;
-    display: block;
-    height: 0;
-}
-
-.floating-right {
-    float: right;
 }
+/* / Logo styles */
 
 /*
 the hack to hide the headers inside tabs for a package page because each tab
diff --git a/plugins/base/src/main/resources/dokka/templates/base.ftl b/plugins/base/src/main/resources/dokka/templates/base.ftl
index ed19d5f3..0311f9f8 100644
--- a/plugins/base/src/main/resources/dokka/templates/base.ftl
+++ b/plugins/base/src/main/resources/dokka/templates/base.ftl
@@ -2,13 +2,12 @@
 <#import "includes/header.ftl" as header>
 <#import "includes/footer.ftl" as footer>
 <!DOCTYPE html>
-<html>
+<html class="no-js">
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
     <@page_metadata.display/>
-    <@template_cmd name="pathToRoot">
-    <script>var pathToRoot = "${pathToRoot}";</script>
-    </@template_cmd>
+    <@template_cmd name="pathToRoot"><script>var pathToRoot = "${pathToRoot}";</script></@template_cmd>
+    <script>document.documentElement.classList.replace("no-js","js");</script>
     <#-- This script doesn't need to be there but it is nice to have
     since app in dark mode doesn't 'blink' (class is added before it is rendered) -->
     <script>const storage = localStorage.getItem("dokka-dark-mode")
@@ -29,15 +28,17 @@
     <@resources/>
 </head>
 <body>
-    <@header.display/>
-<div id="container">
-    <div id="leftColumn">
-        <div id="sideMenu"></div>
+    <div class="root">
+        <@header.display/>
+        <div id="container">
+            <div class="sidebar" id="leftColumn">
+                <div class="sidebar--inner" id="sideMenu"></div>
+            </div>
+            <div id="main">
+                <@content/>
+                <@footer.display/>
+            </div>
+        </div>
     </div>
-    <div id="main">
-        <@content/>
-        <@footer.display/>
-    </div>
-</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
index 2ec4fd7c..d5c7a613 100644
--- a/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
+++ b/plugins/base/src/main/resources/dokka/templates/includes/header.ftl
@@ -1,24 +1,28 @@
 <#import "source_set_selector.ftl" as source_set_selector>
 <#macro display>
-<div class="navigation-wrapper" id="navigation-wrapper">
-    <div id="leftToggler"><span class="icon-toggler"></span></div>
-    <div class="library-name">
-        <@template_cmd name="pathToRoot">
-            <a href="${pathToRoot}index.html">
-                <@template_cmd name="projectName">
-                    <span>${projectName}</span>
+<nav class="navigation" id="navigation-wrapper">
+    <div class="navigation--inner">
+        <div class="navigation-title">
+            <button class="menu-toggle" id="menu-toggle" type="button">toggle menu</button>
+            <div class="library-name">
+                <@template_cmd name="pathToRoot">
+                    <a class="library-name--link" href="${pathToRoot}index.html">
+                        <@template_cmd name="projectName">
+                            ${projectName}
+                        </@template_cmd>
+                    </a>
                 </@template_cmd>
-            </a>
-        </@template_cmd>
-    </div>
-    <div>
-        <#-- This can be handled by the versioning plugin -->
-        <@version/>
-    </div>
-    <div class="pull-right d-flex">
+            </div>
+            <div class="library-version">
+                <#-- This can be handled by the versioning plugin -->
+                <@version/>
+            </div>
+        </div>
         <@source_set_selector.display/>
-        <button id="theme-toggle-button"><span id="theme-toggle"></span></button>
-        <div id="searchBar"></div>
     </div>
-</div>
+    <div class="navigation-controls">
+        <button class="navigation-controls--btn navigation-controls--theme" id="theme-toggle-button" type="button">switch theme</button>
+        <div class="navigation-controls--btn navigation-controls--search" id="searchBar" role="button">search in API</div>
+    </div>
+</nav>
 </#macro>