Fix content tests

3 files changed, 134 insertions, 72 deletions

diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/f.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/f.html
index aca93d48..2344d54b 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/f.html
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/f.html
@@ -16,13 +16,11 @@
         <div id="searchBar"></div>
         <script type="text/javascript" src="../../scripts/pages.js"></script>
         <script type="text/javascript" src="../../scripts/main.js"></script>
-        <div id="content" pageIds="//f/#kotlin.Function0[kotlin.String]//">//<a href="../index.html">root</a>/<a href="index.html"></a>/<a href="f.html">f</a>
-          <div class="platform-tagged">
-            <div class="platform-tag jvm">JVM</div>
-            <div class="content">
-              <h1>f</h1>
-<div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>            </div>
-          </div>
+        <div id="content" pageIds="//f/#kotlin.Function0[kotlin.String]//">
+          <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html"></a>/<a href="f.html">f</a></div>
+          <div class="cover ">
+            <h1>f</h1>
+<div class="symbol monospace">final fun <a href="f.html">f</a>(a: <div class="symbol monospace">() -&gt; <a href="">String</a></div>)</div>          </div>
         </div>
       </div>
     </div>
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
index d7caa9e7..275bac43 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/root/index.html
@@ -16,12 +16,10 @@
         <div id="searchBar"></div>
         <script type="text/javascript" src="../../scripts/pages.js"></script>
         <script type="text/javascript" src="../../scripts/main.js"></script>
-        <div id="content" pageIds="/////">//<a href="../index.html">root</a>/<a href="index.html"></a>
-          <div class="platform-tagged">
-            <div class="platform-tag jvm">JVM</div>
-            <div class="content">
-              <h1>Package </h1>
-            </div>
+        <div id="content" pageIds="/////">
+          <div class="breadcrumbs">//<a href="../index.html">root</a>/<a href="index.html"></a></div>
+          <div class="cover ">
+            <h1>Package </h1>
           </div>
           <h2>Functions</h2>
           <table>
diff --git a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
index 80865758..5c347128 100644
--- a/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
+++ b/plugins/base/src/test/resources/expect/inlineSuspendFunction/out/html/styles/style.css
@@ -13,9 +13,10 @@
 }
 
 #leftColumn {
-    padding-left: 12px;
+    width: 280px;
     min-height: 100%;
-    border-right: 2px solid #DADFE6;
+    border-right: 1px solid #DADFE6;
+    flex: 0 0 auto;
 }
 
 @media screen and (max-width: 600px) {
@@ -29,12 +30,9 @@
 }
 
 #sideMenu {
-    padding-top: 12px;
-    padding-right: 12px;
-}
-
-#sideMenu .sideMenuPart {
-    padding-left: 1em;
+    padding-top: 16px;
+    position: relative;
+    overflow: auto;
 }
 
 #sideMenu img {
@@ -50,12 +48,14 @@
 }
 
 #logo {
-    padding: 5px;
-    background-size: 55% 90%;
-    border-bottom: 2px solid #DADFE6;
+    background-size: 125px 26px;
+    border-bottom: 1px solid #DADFE6;
     background-repeat: no-repeat;
     background-image: url(../images/docs_logo.svg);
-    height: 6vh;
+    background-origin: content-box;
+    padding-left: 24px;
+    padding-top: 24px;
+    height: 48px;
 }
 
 .monospace,
@@ -63,31 +63,76 @@
     font-family: monospace;
 }
 
+.overview > .navButton {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 24px;
+}
+
 .strikethrough {
     text-decoration: line-through;
 }
 
 .symbol:empty {
-    padding: 0px;
+    padding: 0;
 }
+
 .symbol {
-    padding: 5px;
     background-color: #F4F4F4;
+    align-items: center;
+    display: flex;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    font-weight: bold;
+    white-space: pre;
+}
+
+#nav-submenu > .sideMenuPart {
+    padding-left: 0; /* packages are same level as modules */
 }
 
 .sideMenuPart > .overview {
+    height: 40px;
     width: 100%;
-    display: inline-flex;
+    display: flex;
+    align-items: center;
+    position: relative;
+    user-select: none; /* there's a weird bug with text selection */
 }
 
-.overview > .navButton {
-    width: 100%;
-    display: inline-flex;
-    justify-content: flex-end;
+.sideMenuPart a {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    color: #637282;
 }
 
-.sideMenuPart > .overview:hover {
-    background-color: rgba(91, 93, 239, 0.15);
+.sideMenuPart > .overview:before {
+    box-sizing: border-box;
+    content: '';
+    top: 0;
+    width: 200%;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: -1;
+}
+
+.overview:hover:before {
+    background-color: #DADFE5;
+}
+
+#nav-submenu {
+    padding-left: 24px;
+}
+
+.sideMenuPart {
+    padding-left: 12px;
+    box-sizing: border-box;
 }
 
 .sideMenuPart .hidden > .overview .navButtonContent::before {
@@ -121,7 +166,7 @@ body, table {
     font: 14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
     background: #F4F4F4;
     font-weight: 300;
-    margin-right: auto;
+    margin: 0;
     max-width: 1440px;
 }
 
@@ -134,6 +179,7 @@ table {
 
 tbody > tr {
     border-bottom: 2px solid #F4F4F4;
+    min-height: 56px;
 }
 
 td:first-child {
@@ -149,6 +195,12 @@ td:first-child {
 .symbol {
     font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
     font-size: 12px;
+    min-height: 43px;
+}
+
+.symbol > a {
+    color: #5B5DEF;
+    text-decoration: underline;
 }
 
 .identifier {
@@ -195,8 +247,8 @@ a {
 }
 
 a:hover {
-    color: inherit;
-    text-decoration: underline;
+    color: #282E34;
+    text-decoration: none;
 }
 
 a small {
@@ -343,41 +395,41 @@ footer {
 }
 
 .platform-tag {
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	width: 10px;
-	height: 10px;
-	max-width: 10px;
-	max-height: 10px;
-	border-radius: 8px;
-	transition: width 1s, height 1s;
-	margin-left: 14px;
-	margin-top: auto;
-	margin-bottom: auto;
-	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;
-	color: #fff
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 10px;
+    height: 10px;
+    max-width: 10px;
+    max-height: 10px;
+    border-radius: 8px;
+    transition: width 1s, height 1s;
+    margin-left: 14px;
+    margin-top: auto;
+    margin-bottom: auto;
+    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;
+    color: #fff
 }
 
 .platform-tagged:hover .platform-tag,
-.platform-tagged:hover>.platform-tag {
-	text-indent: 0;
-	white-space: nowrap;
-	padding: 0 7px;
-	border-radius: 9px;
-	margin-left: 8px;
-	width: auto;
-	height: 15px;
-	max-width: 500px;
-	max-height: 500px;
-	transition: max-width 1s, max-height 1s
+.platform-tagged:hover > .platform-tag {
+    text-indent: 0;
+    white-space: nowrap;
+    padding: 0 7px;
+    border-radius: 9px;
+    margin-left: 8px;
+    width: auto;
+    height: 15px;
+    max-width: 500px;
+    max-height: 500px;
+    transition: max-width 1s, max-height 1s
 }
 
 .platform-tagged {
@@ -416,9 +468,23 @@ tr.platform-tagged {
     color: white;
 }
 
-.platform-tagged > .content {
-    display: block;
-    flex: auto;
+td.content {
+    padding-left: 24px;
+    padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.content > a {
+    text-decoration: none;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    color: #282E34;
+}
+
+.content > a:hover {
+    color: #5B5DEF;
 }
 
 @media print, screen and (max-width: 960px) {