From c60b5a3ad7a0c705423382ec3aedc5b6fd8fe061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Tue, 5 Jul 2022 10:12:53 +0200
Subject: [PATCH 01/14] change color of grey-12 color token, fix header
 margins, change order of switcher elements, remove border from gh link

---
 scaladoc/resources/dotty_res/styles/theme/colors.css   |  2 +-
 .../styles/theme/components/button/text-button.css     |  1 +
 .../resources/dotty_res/styles/theme/layout/header.css |  2 +-
 .../dotty/tools/scaladoc/renderers/HtmlRenderer.scala  | 10 +++++-----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/scaladoc/resources/dotty_res/styles/theme/colors.css b/scaladoc/resources/dotty_res/styles/theme/colors.css
index e6d34255cad0..57e426b65d47 100644
--- a/scaladoc/resources/dotty_res/styles/theme/colors.css
+++ b/scaladoc/resources/dotty_res/styles/theme/colors.css
@@ -176,7 +176,7 @@
   --grey9: #706f78;
   --grey10: #7e7d86;
   --grey11: #a09fa6;
-  --grey12: #cccccc;
+  --grey12: #ededef;
 
   /* red colors */
   --red1: #1f1315;
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css b/scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css
index 739a14b0a76a..97c52807259b 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css
@@ -84,6 +84,7 @@ a:active {
   text-decoration: none;
   margin-bottom: calc(1 * var(--base-spacing));
   display: inline-block;
+  border-bottom: none;
 }
 
 .text-button.with-link::after {
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/header.css b/scaladoc/resources/dotty_res/styles/theme/layout/header.css
index aba2e5a4c27f..977d11a2cb17 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/header.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/header.css
@@ -5,7 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: calc(1.75 * var(--base-spacing)) calc(3 * var(--base-spacing));
+  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing));
   position: absolute;
   height: var(--header-height);
   left: 0px;
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
index 989d79729924..1a5912b4c94a 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -252,15 +252,15 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
       div(id := "leftColumn", cls := "body-small")(
         Seq(
           div(cls:= "switcher-container")(
-            apiNavOpt match {
-              case Some(isApiActive, apiNav) =>
-                Seq(a(id := "api-nav-button", cls:= s"switcher h100 ${if isApiActive then "selected" else ""}", href := pathToPage(link.dri, rootApiPage.get.link.dri))("API"))
-              case _ => Nil
-            },
             docsNavOpt match {
               case Some(isDocsActive, docsNav) =>
                 Seq(a(id := "docs-nav-button", cls:= s"switcher h100 ${if isDocsActive then "selected" else ""}", href := pathToPage(link.dri, rootDocsPage.get.link.dri))("Docs"))
               case _ => Nil
+            },
+            apiNavOpt match {
+              case Some(isApiActive, apiNav) =>
+                Seq(a(id := "api-nav-button", cls:= s"switcher h100 ${if isApiActive then "selected" else ""}", href := pathToPage(link.dri, rootApiPage.get.link.dri))("API"))
+              case _ => Nil
             }
           ),
           apiNavOpt

From fd84b312543bc82976ae2836d568b1199ec16c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Tue, 5 Jul 2022 12:19:03 +0200
Subject: [PATCH 02/14] add missing code prop background, remove link border
 from toc, add proper width to toc, add missing divider above navigation
 arrows,

---
 docs/_layouts/static-site-main.html                           | 1 +
 .../dotty_res/styles/theme/components/code-snippet.css        | 2 ++
 .../dotty_res/styles/theme/components/table-of-content.css    | 3 ++-
 scaladoc/resources/dotty_res/styles/theme/layout/content.css  | 4 +++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/_layouts/static-site-main.html b/docs/_layouts/static-site-main.html
index 592ae0440e37..4b628ce8fd1f 100644
--- a/docs/_layouts/static-site-main.html
+++ b/docs/_layouts/static-site-main.html
@@ -12,6 +12,7 @@
     page.
   </aside>
   {% endif %} {{ content }}
+  <div class="divider" />
   <nav class="arrow-navigation" aria-label="Page navigation">
     {% if page.previous %}
     <div>
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css b/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
index d17a6dbeb585..10f0de2dc11f 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
@@ -8,6 +8,8 @@
   border: 1px solid transparent;
   color: var(--text-primary);
   overflow-x: scroll;
+  margin-bottom: calc(3 * var(--base-spacing));
+  margin-top: calc(3 * var(--base-spacing));
 }
 
 .snippet pre {
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css b/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
index 20c62efcce17..beb2dd35ad8a 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: 0 calc(1 * var(--base-spacing));
-  width: calc(29 * var(--base-spacing));
+  width: calc(28 * var(--base-spacing));
 }
 
 #toc-container {
@@ -77,6 +77,7 @@
 #content .toc-nav a {
   color: var(--action-primary-content-default);
   text-decoration: none;
+  border-bottom: none;
 }
 
 #toc li:hover > a {
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index 9211b124883f..fccd590ec413 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -165,13 +165,15 @@
   border-bottom: 1px solid var(--text-secondary);
 }
 
-#content .cover-header a, #content .cover-header a:hover {
+#content .cover-header a,
+#content .cover-header a:hover {
   border-bottom: none;
 }
 
 #content :not(pre) > code {
   color: var(--code-props-content);
   font-family: "FiraCode-Regular";
+  background-color: var(--red3);
 }
 
 .breadcrumbs {

From ed273622c6adfdeb02ce73b314e2b14f53cae61e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Wed, 6 Jul 2022 09:43:55 +0200
Subject: [PATCH 03/14] add margin under divider, remove border-bottom from
 contributors anchors

---
 .../dotty_res/styles/theme/components/contributors.css        | 1 +
 scaladoc/resources/dotty_res/styles/theme/layout/content.css  | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/scaladoc/resources/dotty_res/styles/theme/components/contributors.css b/scaladoc/resources/dotty_res/styles/theme/components/contributors.css
index bcc24f285db7..05fcafceef3b 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/contributors.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/contributors.css
@@ -21,6 +21,7 @@
 
 #content .content-contributors .contributors-container div a {
   text-decoration: none;
+  border-bottom: none;
 }
 
 .content-contributors .contributors-container {
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index fccd590ec413..a869af84b9f4 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -408,3 +408,7 @@
 #content section {
   margin-top: calc(6 * var(--base-spacing));
 }
+
+#content section:last-child {
+  margin-bottom: calc(6 * var(--base-spacing));
+}

From 95e35bb27c333f259040e7e282c723d7b25a32c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Thu, 7 Jul 2022 11:51:29 +0200
Subject: [PATCH 04/14] check if toc exists on floating button click function

---
 scaladoc/resources/dotty_res/scripts/ux.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/scaladoc/resources/dotty_res/scripts/ux.js b/scaladoc/resources/dotty_res/scripts/ux.js
index 9eea0ff16b5e..909e8bb64d71 100644
--- a/scaladoc/resources/dotty_res/scripts/ux.js
+++ b/scaladoc/resources/dotty_res/scripts/ux.js
@@ -139,14 +139,17 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   })
 
-  // show/hide side menu on mobile view
-  const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
-  sideMenuToggler.addEventListener('click', _e => {
-    document.getElementById("leftColumn").classList.toggle("show")
-    document.getElementById("content").classList.toggle("sidebar-shown")
-    document.getElementById("toc").classList.toggle("sidebar-shown")
-    sideMenuToggler.classList.toggle("menu-shown")
-  })
+ // show/hide side menu on mobile view
+ const sideMenuToggler = document.getElementById("mobile-sidebar-toggle");
+ sideMenuToggler.addEventListener('click', _e => {
+   document.getElementById("leftColumn").classList.toggle("show")
+   document.getElementById("content").classList.toggle("sidebar-shown")
+   const toc = document.getElementById("toc");
+   if(toc) {
+     toc.classList.toggle("sidebar-shown")
+   }
+   sideMenuToggler.classList.toggle("menu-shown")
+ })
 
     // show/hide mobile menu on mobile view
     const mobileMenuOpenIcon = document.getElementById("mobile-menu-toggle");

From e82d4b50ddd0b96cb6d86db57ffb26e725abf25e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Thu, 7 Jul 2022 12:10:33 +0200
Subject: [PATCH 05/14] add missing project name to mobile menu

---
 .../styles/theme/layout/mobileMenu.css        | 20 ++++++++++++++-----
 .../scaladoc/renderers/HtmlRenderer.scala     |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css b/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css
index 9f1b1ce24da3..efbe70a6358e 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/mobileMenu.css
@@ -13,15 +13,25 @@
   display: block;
 }
 
+#mobile-menu .project-name {
+  color: var(--text-primary);
+}
+
 .mobile-menu-header {
   align-items: center;
 }
 
 .mobile-menu-logo {
   opacity: 0.5;
+  display: flex;
+  align-items: center;
 }
 
-@media(min-width: 768px){
+.mobile-menu-logo .project-name {
+  margin-left: calc(2 * var(--base-spacing));
+}
+
+@media (min-width: 768px) {
   #mobile-menu {
     display: none;
   }
@@ -67,11 +77,11 @@
 }
 
 .mobile-menu-item.mode::after {
-  content: "Dark mode"
+  content: "Dark mode";
 }
 
 .theme-dark .mobile-menu-item.mode::after {
-  content: "Light mode"
+  content: "Light mode";
 }
 
 /* contribute item dark */
@@ -203,5 +213,5 @@
 #mobile-scaladoc-searchbar-input {
   height: calc(4.5 * var(--base-spacing));
   background-position: 10px 10px;
-  margin-bottom: calc(1.5 * var(--base-spacing));;
-}
\ No newline at end of file
+  margin-bottom: calc(1.5 * var(--base-spacing));
+}
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
index 1a5912b4c94a..8cd4a668f500 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -239,6 +239,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           span(cls := "mobile-menu-logo")(
             projectLogoElem.toSeq,
             darkProjectLogoElem.toSeq,
+            span(cls := "project-name h300")(args.name)
           ),
           button(id := "mobile-menu-close", cls := "icon-button close"),
         ),

From 6f754b11967f5247b457c89fc9b84e048821a734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 10:48:24 +0200
Subject: [PATCH 06/14] Start line indexing from 1

---
 .../scaladoc/tasty/comments/markdown/SnippetRenderer.scala      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala
index 1358d5a2c026..36f23603149e 100644
--- a/scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/tasty/comments/markdown/SnippetRenderer.scala
@@ -11,7 +11,7 @@ case class SnippetLine(content: String, lineNo: Int, classes: Set[String] = Set.
   def withAttribute(name: String, value: String) = this.copy(attributes = attributes.updated(name, value))
   def toHTML =
     val label = if messages.nonEmpty then s"""label="${messages.map(_.escapeReservedTokens).mkString("\n")}"""" else ""
-    s"""<span line-number="${lineNo}" class="${classes.mkString(" ")}"><span class="tooltip-container" $label></span>$content</span>"""
+    s"""<span line-number="${lineNo + 1}" class="${classes.mkString(" ")}"><span class="tooltip-container" $label></span>$content</span>"""
 
 object SnippetRenderer:
   val hiddenStartSymbol = "//{"

From 6f588140eff35ba5ea18ec0c36e54f6a199fab3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 11:17:26 +0200
Subject: [PATCH 07/14] Style scrollbar in snippets

---
 .../dotty_res/styles/theme/color-tokens.css   |  6 +++++
 .../styles/theme/components/code-snippet.css  | 24 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/scaladoc/resources/dotty_res/styles/theme/color-tokens.css b/scaladoc/resources/dotty_res/styles/theme/color-tokens.css
index 9fc851982969..e644e6b69cde 100644
--- a/scaladoc/resources/dotty_res/styles/theme/color-tokens.css
+++ b/scaladoc/resources/dotty_res/styles/theme/color-tokens.css
@@ -64,6 +64,9 @@
   --code-syntax-highlighting-deletion: var(--crimson11);
   --code-syntax-highlighting-variable: var(--purple9);
 
+  --code-syntax-highlighting-scrollbar: var(--grey8);
+  --code-syntax-highlighting-scrollbar-hover: var(--grey9);
+
   --code-method-highlighting-type: var(--purple9);
   --code-method-highlighting-type-link: var(--sky11);
   --code-method-highlighting-code-fg: var(--grey12);
@@ -142,6 +145,9 @@
   --code-syntax-highlighting-deletion: var(--crimson11);
   --code-syntax-highlighting-variable: var(--purple9);
 
+  --code-syntax-highlighting-scrollbar: var(--grey8);
+  --code-syntax-highlighting-scrollbar-hover: var(--grey9);
+
   --code-method-highlighting-type: var(--purple9);
   --code-method-highlighting-type-link: var(--sky11);
   --code-method-highlighting-code-fg: var(--grey12);
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css b/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
index 10f0de2dc11f..d15a1bf656ea 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/code-snippet.css
@@ -167,3 +167,27 @@
 .hljs-variable {
   color: var(--code-syntax-highlighting-variable);
 }
+
+/* Scrollbar */
+
+/*   For Firefox */
+.snippet {
+  scrollbar-color: var(--code-syntax-highlighting-scrollbar);
+  scrollbar-width: thin;
+}
+
+/*   For Chrome */
+
+.snippet::-webkit-scrollbar-thumb {
+  background-color: var(--code-syntax-highlighting-scrollbar);
+  border-radius: 3px;
+}
+
+.snippet::-webkit-scrollbar-thumb:hover {
+  background-color: var(--code-syntax-highlighting-scrollbar-hover);
+}
+
+.snippet::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}

From cfc4f72c0941f248f5160d2309a1bd2f27666ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 11:50:29 +0200
Subject: [PATCH 08/14] reorganize contributors css. add edit on github button
 below

---
 docs/_layouts/static-site-main.html           |  7 +++
 .../contributors/css/content-contributors.css | 43 +++++++++++---
 .../docs/_layouts/static-site-main.html       | 59 +++++++++++--------
 .../styles/theme/components/contributors.css  | 29 ---------
 4 files changed, 76 insertions(+), 62 deletions(-)
 delete mode 100644 scaladoc/resources/dotty_res/styles/theme/components/contributors.css

diff --git a/docs/_layouts/static-site-main.html b/docs/_layouts/static-site-main.html
index 4b628ce8fd1f..618525782626 100644
--- a/docs/_layouts/static-site-main.html
+++ b/docs/_layouts/static-site-main.html
@@ -43,5 +43,12 @@
   <div class="content-contributors hidden">
     <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
+    {% if urls.editSource %}
+    <div class="github-edit-button">
+      <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+        Edit this page on GitHub
+      </a>
+    </div>
+    {% endif %}
   </div>
 </div>
diff --git a/scaladoc-js/contributors/css/content-contributors.css b/scaladoc-js/contributors/css/content-contributors.css
index 733d6908cc52..6e6e5eb1ccfe 100644
--- a/scaladoc-js/contributors/css/content-contributors.css
+++ b/scaladoc-js/contributors/css/content-contributors.css
@@ -1,24 +1,51 @@
 .content-contributors.hidden {
   display: none;
 }
+
+.content-contributors .contributors-container div a {
+  vertical-align: middle;
+  padding: 3px;
+  text-decoration: none;
+}
+
+.content-contributors {
+  background-color: var(--background-neutral);
+  padding: calc(3 * var(--base-spacing));
+  border-radius: 4px;
+}
+
 .content-contributors .contributors-container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding-bottom: 25px;
+  row-gap: calc(3 * var(--base-spacing));
+  column-gap: calc(4 * var(--base-spacing));
 }
-.content-contributors .contributors-container div {
-  margin: 5px;
-}
-.content-contributors .contributors-container div a {
-  vertical-align: middle;
-  padding: 3px;
-  text-decoration: none;
+
+.content-contributors h1 {
+  color: var(--text-primary);
+  padding-bottom: calc(3 * var(--base-spacing));
 }
+
 .content-contributors .contributors-container div img {
   vertical-align: middle;
   width: 35px;
   height: 35px;
   margin-bottom: 0;
-  border-radius: 7px;
+  border-radius: 50%;
+  margin-right: calc(1.5 * var(--base-spacing));
+}
+
+#content .content-contributors .contributors-container div a {
+  text-decoration: none;
+  border-bottom: none;
+}
+
+.content-contributors .contributors-container {
+  padding: 0;
+}
+
+.content-contributors .github-edit-button {
+  padding-top: calc(2 * var(--base-spacing));
 }
diff --git a/scaladoc-testcases/docs/_layouts/static-site-main.html b/scaladoc-testcases/docs/_layouts/static-site-main.html
index 7c3c22f4740b..2a93ce70c04d 100644
--- a/scaladoc-testcases/docs/_layouts/static-site-main.html
+++ b/scaladoc-testcases/docs/_layouts/static-site-main.html
@@ -1,38 +1,47 @@
 ---
-extraJS:
-  - js/contributors.js
-extraCSS:
-  - css/bootstrap.min.css
-  - css/content-contributors.css
+layout: main
 ---
 
-<div class="container">
+<div class="site-container">
+  <div id="site-header"></div>
   {{ content }}
-  <nav class="arrows-wrapper" aria-label="Page navigation">
+  <div class="divider" />
+  <nav class="arrow-navigation" aria-label="Page navigation">
     {% if page.previous %}
-    <a
-      rel="prev"
-      href="{{ page.previous.url }}"
-      class="arrows previous"
-      aria-keyshortcuts="Left"
-    >
-      <span>{{ page.previous.title }}</span>
-      <i class="fa fa-angle-left"></i>
-    </a>
+    <div>
+      <span class="body-small">Previous</span>
+      <a
+        rel="prev"
+        href="{{ page.previous.url }}"
+        aria-keyshortcuts="Left"
+        class="body-medium"
+      >
+        <span class="body-medium">{{ page.previous.title }}</span>
+      </a>
+    </div>
     {% endif %} {% if page.next %}
-    <a
-      rel="next"
-      href="{{ page.next.url }}"
-      class="arrows next"
-      aria-keyshortcuts="Right"
-    >
-      <span>{{ page.next.title }}</span>
-      <i class="fa fa-angle-right"></i>
-    </a>
+    <div>
+      <span class="body-small">Next</span>
+      <a
+        rel="next"
+        href="{{ page.next.url }}"
+        aria-keyshortcuts="Right"
+        class="body-medium"
+      >
+        <span class="body-medium">{{ page.next.title }}</span>
+      </a>
+    </div>
     {% endif %}
   </nav>
   <div class="content-contributors hidden">
     <h1 class="h200">Contributors to this page</h1>
     <div id="documentation-contributors" class="contributors-container"></div>
+    {% if urls.editSource %}
+    <div class="github-edit-button">
+      <a class="text-button with-link body-small" href="{{ urls.editSource }}">
+        Edit this page on GitHub
+      </a>
+    </div>
+    {% endif %}
   </div>
 </div>
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/contributors.css b/scaladoc/resources/dotty_res/styles/theme/components/contributors.css
deleted file mode 100644
index 05fcafceef3b..000000000000
--- a/scaladoc/resources/dotty_res/styles/theme/components/contributors.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.content-contributors {
-  background-color: var(--background-neutral);
-  padding: calc(3 * var(--base-spacing));
-  border-radius: 4px;
-}
-
-.content-contributors .contributors-container {
-  row-gap: calc(3 * var(--base-spacing));
-  column-gap: calc(4 * var(--base-spacing));
-}
-
-.content-contributors h1 {
-  color: var(--text-primary);
-  padding-bottom: calc(3 * var(--base-spacing));
-}
-
-.content-contributors .contributors-container div img {
-  border-radius: 50%;
-  margin-right: calc(1.5 * var(--base-spacing));
-}
-
-#content .content-contributors .contributors-container div a {
-  text-decoration: none;
-  border-bottom: none;
-}
-
-.content-contributors .contributors-container {
-  padding: 0;
-}

From 293cd132a784e2133cc0db8deffb9a3dfba9e77a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 12:08:20 +0200
Subject: [PATCH 09/14] style first paragraph in content

---
 scaladoc/resources/dotty_res/styles/theme/layout/content.css | 5 +++++
 .../src/dotty/tools/scaladoc/renderers/SiteRenderer.scala    | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index a869af84b9f4..8b261537cc1b 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -150,6 +150,11 @@
   color: var(--text-primary);
 }
 
+/* content first paragraph */
+#content .first-p {
+  color: var(--text-secondary);
+}
+
 /* content list */
 #content li {
   color: var(--text-primary);
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/SiteRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/SiteRenderer.scala
index 966aab1072aa..ef80b4f2d327 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/SiteRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/SiteRenderer.scala
@@ -78,6 +78,10 @@ trait SiteRenderer(using DocContext) extends Locations:
         }
       }
 
+    document.select("header + p").forEach(firstParagraph =>
+      firstParagraph.addClass("body-large")
+      firstParagraph.addClass("first-p")
+    )
     document.select("a").forEach(element =>
       element.attr("href", processLocalLinkWithGuard(element.attr("href")))
     )

From 36f4fb7fbad868151f1391f8e35833e9cf18b030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 12:37:47 +0200
Subject: [PATCH 10/14] add missing headers. fix tabs

---
 scaladoc/resources/dotty_res/scripts/ux.js        |  2 +-
 .../dotty_res/styles/theme/layout/content.css     | 10 +++++-----
 .../tools/scaladoc/renderers/MemberRenderer.scala | 15 ++++++++++++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/scaladoc/resources/dotty_res/scripts/ux.js b/scaladoc/resources/dotty_res/scripts/ux.js
index 909e8bb64d71..16b353160b94 100644
--- a/scaladoc/resources/dotty_res/scripts/ux.js
+++ b/scaladoc/resources/dotty_res/scripts/ux.js
@@ -30,7 +30,7 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   }
 
-  var memberLists = document.getElementsByClassName("membersList")
+  var memberLists = document.getElementsByClassName("tab")
   if (memberLists) {
     for (i = 0; i < memberLists.length; i++) {
       memberLists[i].children[0].onclick = function(e) {
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index 8b261537cc1b..dd340cbc8b86 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -363,27 +363,27 @@
   margin-bottom: calc(3 * var(--base-spacing));
 }
 
-.membersList {
+.tab {
   position: relative;
 }
 
-.membersList h2 {
+.tab h2 {
   border-bottom: 1px solid var(--border-default);
   padding-bottom: calc(3 * var(--base-spacing));
   padding-top: calc(3 * var(--base-spacing));
 }
 
-.membersList > button {
+.tab > button {
   position: absolute;
   right: 0;
   top: calc(3.5 * var(--base-spacing));
 }
 
-.membersList .documentableList {
+.tab .documentableList {
   display: none;
 }
 
-.membersList.expand .documentableList {
+.tab.expand .documentableList {
   display: block;
 }
 
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
index 67527dddcb28..c15799550c7d 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
@@ -125,6 +125,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
       Option.when(bodyContents.nonEmpty || attributes.nonEmpty)(
         div(cls := "cover")(
           div(cls := "doc")(bodyContents),
+          h1(cls := "h500")("Attributes"),
           dl(cls := "attributes")(attributes*)
         )
       )
@@ -260,7 +261,15 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
 
     val children = all.flatten.flatten
     if children.isEmpty then emptyTab
-    else Tab(name, name, h2(tabAttr(name), cls := "h300")(name) +: children, "selected")
+    else Tab(
+      name,
+      name,
+      Seq(
+        button(cls := "icon-button show-content expand"),
+        h2(tabAttr(name), cls := "h300")(name)
+      ) ++ children,
+      "expand"
+    )
 
   case class ExpandedGroup(name: AppliedTag, description: AppliedTag, prio: Int)
 
@@ -289,7 +298,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
             members.map(member)
           ))
       }
-      Tab("Grouped members", "custom_groups", content, "selected")
+      Tab("Grouped members", "custom_groups", content, "expand")
 
   def buildMembers(s: Member): AppliedTag =
     def partitionIntoGroups(members: Seq[Member]) =
@@ -318,7 +327,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
       }.toSeq
 
     div(cls := "membersList expand")(
-    button(cls := "icon-button show-content expand"),
+    h1(cls := "h500")("Members list"),
     renderTabs(
       singleSelection = false,
       buildGroup("Packages", Seq(

From b37a4296ac3d96c3848db4aad4c2d5304b8c4945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 12:52:43 +0200
Subject: [PATCH 11/14] fix tests

---
 .../docs/_layouts/static-site-main.html       | 52 +++++++++----------
 .../scaladoc/renderers/MemberRenderer.scala   |  4 +-
 .../scaladoc/site/SiteGeneratationTest.scala  |  2 +-
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/scaladoc-testcases/docs/_layouts/static-site-main.html b/scaladoc-testcases/docs/_layouts/static-site-main.html
index 2a93ce70c04d..e9b6d094f2a8 100644
--- a/scaladoc-testcases/docs/_layouts/static-site-main.html
+++ b/scaladoc-testcases/docs/_layouts/static-site-main.html
@@ -1,36 +1,34 @@
 ---
-layout: main
+extraJS:
+  - js/contributors.js
+extraCSS:
+  - css/bootstrap.min.css
+  - css/content-contributors.css
 ---
 
-<div class="site-container">
-  <div id="site-header"></div>
+<div class="container">
   {{ content }}
-  <div class="divider" />
-  <nav class="arrow-navigation" aria-label="Page navigation">
+  <nav class="arrows-wrapper" aria-label="Page navigation">
     {% if page.previous %}
-    <div>
-      <span class="body-small">Previous</span>
-      <a
-        rel="prev"
-        href="{{ page.previous.url }}"
-        aria-keyshortcuts="Left"
-        class="body-medium"
-      >
-        <span class="body-medium">{{ page.previous.title }}</span>
-      </a>
-    </div>
+    <a
+      rel="prev"
+      href="{{ page.previous.url }}"
+      class="arrows previous"
+      aria-keyshortcuts="Left"
+    >
+      <span>{{ page.previous.title }}</span>
+      <i class="fa fa-angle-left"></i>
+    </a>
     {% endif %} {% if page.next %}
-    <div>
-      <span class="body-small">Next</span>
-      <a
-        rel="next"
-        href="{{ page.next.url }}"
-        aria-keyshortcuts="Right"
-        class="body-medium"
-      >
-        <span class="body-medium">{{ page.next.title }}</span>
-      </a>
-    </div>
+    <a
+      rel="next"
+      href="{{ page.next.url }}"
+      class="arrows next"
+      aria-keyshortcuts="Right"
+    >
+      <span>{{ page.next.title }}</span>
+      <i class="fa fa-angle-right"></i>
+    </a>
     {% endif %}
   </nav>
   <div class="content-contributors hidden">
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
index c15799550c7d..172732aa754d 100644
--- a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
+++ b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala
@@ -125,7 +125,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
       Option.when(bodyContents.nonEmpty || attributes.nonEmpty)(
         div(cls := "cover")(
           div(cls := "doc")(bodyContents),
-          h1(cls := "h500")("Attributes"),
+          h2(cls := "h500")("Attributes"),
           dl(cls := "attributes")(attributes*)
         )
       )
@@ -327,7 +327,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
       }.toSeq
 
     div(cls := "membersList expand")(
-    h1(cls := "h500")("Members list"),
+    h2(cls := "h500")("Members list"),
     renderTabs(
       singleSelection = false,
       buildGroup("Packages", Seq(
diff --git a/scaladoc/test/dotty/tools/scaladoc/site/SiteGeneratationTest.scala b/scaladoc/test/dotty/tools/scaladoc/site/SiteGeneratationTest.scala
index 1894e107ca02..7ce16933997a 100644
--- a/scaladoc/test/dotty/tools/scaladoc/site/SiteGeneratationTest.scala
+++ b/scaladoc/test/dotty/tools/scaladoc/site/SiteGeneratationTest.scala
@@ -23,7 +23,7 @@ class SiteGeneratationTest extends BaseHtmlTest:
     parents: Seq[String] = Nil,
     checks: DocumentContext => Unit = _ => ())(using ProjectContext) =
       withHtmlFile(path){ content  =>
-        content.assertTextsIn(".project-name", projectName)
+        content.assertTextsIn(".project-name", projectName, projectName) // There are two elements with project name: one for desktop, one for mobile
         content.assertTextsIn(".projectVersion", projectVersion)
         content.assertTextsIn("h1", header)
         content.assertTextsIn("title", title)

From 74895f05d5f9026ceed59ff60f6e59e50ef1af87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Zyba=C5=82a?= <filip.zybala@gmail.com>
Date: Thu, 7 Jul 2022 13:57:20 +0200
Subject: [PATCH 12/14] change default filters behavior

---
 .../dotty_res/scripts/components/DocumentableList.js      | 8 +++++---
 scaladoc/resources/dotty_res/scripts/components/Filter.js | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/scaladoc/resources/dotty_res/scripts/components/DocumentableList.js b/scaladoc/resources/dotty_res/scripts/components/DocumentableList.js
index 8273d5e8d83a..007b40c7ef9b 100644
--- a/scaladoc/resources/dotty_res/scripts/components/DocumentableList.js
+++ b/scaladoc/resources/dotty_res/scripts/components/DocumentableList.js
@@ -4,7 +4,7 @@
  *  @typedef { [key: string, value: string][] } Dataset
  */
 
-class DocumentableList extends Component {
+ class DocumentableList extends Component {
   constructor(props) {
     super(props);
 
@@ -140,7 +140,7 @@ class List {
 
     function includesInputValue() {
       const lcValue = filter.value.toLowerCase()
-      return elementData.name.toLowerCase().includes(lcValue) 
+      return elementData.name.toLowerCase().includes(lcValue)
           || elementData.description.toLowerCase().includes(lcValue);
     }
 
@@ -177,7 +177,9 @@ class List {
         .every(([filterKey, value]) => {
           const filterGroup = filter.filters[filterKey]
 
-          return value.split(",").some(v => filterGroup && filterGroup[v].selected)
+          console.log(Object.entries(filterGroup).filter(arr => arr[1].selected))
+
+          return Object.entries(filterGroup).filter(arr => arr[1].selected).length == 0 || value.split(",").some(v => (filterGroup && filterGroup[v].selected))
         })
 
       return isVisible
diff --git a/scaladoc/resources/dotty_res/scripts/components/Filter.js b/scaladoc/resources/dotty_res/scripts/components/Filter.js
index b9f05defb478..931a8e17527a 100644
--- a/scaladoc/resources/dotty_res/scripts/components/Filter.js
+++ b/scaladoc/resources/dotty_res/scripts/components/Filter.js
@@ -4,7 +4,7 @@
  * @typedef { Record<FilterAttributes, FilterMap> } Filters
  */
 
-class Filter {
+ class Filter {
   /**
    * @param value { string }
    * @param filters { Filters }
@@ -217,8 +217,8 @@ class Filter {
 }
 
 class FilterItem {
-  constructor(selected = true, visible = true) {
+  constructor(selected = false, visible = true) {
     this.selected = selected
     this.visible = visible
   }
-}
\ No newline at end of file
+}

From b82068d6884194a41c8458d897e3b445de518507 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Fri, 8 Jul 2022 08:36:47 +0200
Subject: [PATCH 13/14] add animation on content width change

---
 .../resources/dotty_res/styles/theme/layout/content.css    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index a869af84b9f4..7ba2f3595b81 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -14,6 +14,13 @@
   overflow: hidden;
 }
 
+#content.sidebar-shown {
+  -webkit-transition: width 0.3s ease-in-out;
+  -moz-transition: width 0.3s ease-in-out;
+  -o-transition: width 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
+}
+
 @media (min-width: 1920px) {
   #content {
     width: calc(90 * var(--base-spacing));

From 63ca2865a415ab4d78c50f2fc82b17c1fc945e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=81ukasik?= <fanixus96@gmail.com>
Date: Fri, 8 Jul 2022 09:55:44 +0200
Subject: [PATCH 14/14] fix tablet layout

---
 .../dotty_res/styles/theme/components/table-of-content.css | 7 ++++++-
 .../resources/dotty_res/styles/theme/layout/content.css    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css b/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
index beb2dd35ad8a..0fec18c2cc26 100644
--- a/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: 0 calc(1 * var(--base-spacing));
-  width: calc(28 * var(--base-spacing));
+  width: calc(29 * var(--base-spacing));
 }
 
 #toc-container {
@@ -58,6 +58,11 @@
 }
 
 @media (max-width: 1024px) {
+  #toc {
+    margin-left: calc(6 * var(--base-spacing));
+    margin-right: 0;
+  }
+
   #toc.sidebar-shown {
     display: none;
   }
diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
index 3776e13f0995..68334e05aec6 100644
--- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css
+++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css
@@ -82,7 +82,7 @@
   }
 
   #content > div:first-child {
-    width: auto;
+    width: calc(100% - calc(29 * var(--base-spacing)));
   }
 
   #content.sidebar-shown {