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

3 files changed, 547 insertions, 425 deletions

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