SONAR-11380 Float docs page content and page-level ToC

1 files changed, 39 insertions, 46 deletions

diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css
index 082e2963d9c..a3655abb617 100644
--- a/server/sonar-docs/src/templates/page.css
+++ b/server/sonar-docs/src/templates/page.css
@@ -151,12 +151,6 @@ body > div,
   z-index: 50;
 }
 
-@media only screen and (max-width: 1100px) {
-  .page-container {
-    max-width: 100% !important;
-  }
-}
-
 .search-container {
   position: relative;
 }
@@ -307,65 +301,64 @@ a.search-result .note {
   font-weight: 700;
 }
 
-.headings-container {
-  background: #e8eff4;
-  margin: 4px -20px 8px -36px;
-  padding: 4px 0;
+.page-container {
+  max-width: 900px;
+  min-width: 320px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 15px;
+  flex-grow: 1;
+  margin: 0 auto;
 }
 
-.headings-container:before {
-  border-bottom: 5px solid #e8eff4;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  content: '\A';
-  height: 0;
-  left: 50px;
-  margin-top: -8px;
-  position: absolute;
-  width: 0;
+.page-container .headings-container {
+  float: right;
+  width: 200px;
+  border-left: 1px solid #cfd3d7;
+  padding-left: 26px;
 }
 
-.headings-container ul {
-  margin: 0;
-  padding: 8px 6px 8px 18px;
+.page-container .headings-container span {
+  font-weight: 700;
 }
 
-.headings-container li {
-  color: #2679af;
-  list-style-position: inside;
-  list-style-type: circle;
-  margin: 0;
-  line-height: 16px;
-  padding: 4px 26px 4px 58px;
+.page-container .headings-container ul {
+  margin: 10px 0 0 0;
+  padding: 0;
 }
 
-.sub-menu .headings-container li {
-  padding-left: 38px;
+.page-container .headings-container li {
+  list-style: none;
+  margin: 0 0 8px;
+  line-height: 16px;
 }
 
-.headings-container a {
+.page-container .headings-container a {
+  color: rgba(0, 0, 0, 0.8);
   display: block;
-  margin-top: -15px;
   font-size: 13px;
   color: #2d3032;
   text-decoration: inherit;
-  margin-left: -4px;
-  padding-left: 20px;
+  border-bottom: none !important;
 }
 
-.headings-container a.active,
-.headings-container a:hover {
+.page-container .headings-container a.active,
+.page-container .headings-container a:hover {
   color: #2679af;
 }
 
-.page-container {
-  width: 900px;
-  max-width: calc(100% - 220px);
-  min-width: 320px;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 15px;
-  flex-grow: 1;
+.page-container .headings-container a.active {
+  font-weight: 700;
+}
+
+.markdown-container {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.headings-container + .markdown-container {
+  max-width: 900px;
+  padding-right: 220px;
 }
 
 .page-container h1 {