Address several PR comments

- Darken text color like done for hackage
- Move synopsis to left side
- Make table of contents stick to the left on wide screens
- Wrap links to avoid page overflow
- Improve expand/collapse buttons
- Fix issue with content size on mobile devices
- Fix issue with font-size on landscape mode
- Increase width of the content
- Change colors of table of contents and synopsis
- Etc

1 files changed, 78 insertions, 43 deletions

diff --git a/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css b/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css
index fe6300fe..a3b75dc7 100644
--- a/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css
+++ b/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css
@@ -11,10 +11,20 @@ html {
 
 body {
   background: #fefefe;
-  color: rgba(69, 59, 97, 0.95);
+  color: #221D30;
   text-align: left;
   min-height: 100%;
   position: relative;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+  -moz-font-feature-settings: "kern" 1;
+  -o-font-feature-settings: "kern" 1;
+  font-feature-settings: "kern" 1;
+  font-kerning: normal;
+}
+
+#content a {
+  overflow-wrap: break-word;
 }
 
 p {
@@ -63,21 +73,36 @@ body.js-enabled .hide-when-js-enabled {
 
 @media only screen and (min-width: 1280px) {
   #content {
-    width: 60vw;
+    width: 65vw;
     max-width: 1450px;
-    min-width: 830px;
+  }
+
+  #table-of-contents {
+    position: fixed;
+    left: 10px;
+    max-width: 10vw;
+    top: 10.2em;
   }
 }
 
 @media only screen and (max-width: 1280px) {
   #content {
-    width: 75vw;
+    width: 80vw;
   }
 }
 
-@media only screen and (max-width: 950px) {
+@media only screen and (max-width: 1000px) {
   #content {
-    width: 88vw;
+    width: 93vw;
+  }
+
+  #synopsis {
+    display: block;
+    padding: 0;
+    position: relative;
+    margin: 4em 0;
+    border-bottom: 1px dashed #5E5184;
+    width: 100%;
   }
 }
 
@@ -98,6 +123,22 @@ body.js-enabled .hide-when-js-enabled {
     float: right;
     margin: 3px 2em 2px 1em;
   }
+
+  #synopsis {
+    display: block;
+    position: fixed;
+    top: 5em;
+    left: 10px;
+    padding: 0.25em;
+    max-width: 65vw;
+    /* Ensure that synopsis covers everything (including MathJAX markup) */
+    z-index: 1;
+  }
+
+  #synopsis .show {
+    border: 1px solid #5E5184;
+    padding: 0.7em;
+  }
 }
 
 /* menu for smaller screens
@@ -150,10 +191,6 @@ h3 { font-size: 116%;   /* 15pt */ }
 h4 { font-size: 100%;   /* 13pt */ }
 h5 { font-size: 100%;   /* 13pt */ }
 
-select, input, button, textarea {
-	font:99% sans-serif;
-}
-
 table {
 	font-size:inherit;
 	font:100%;
@@ -238,17 +275,17 @@ ul.links li a {
 .clear { clear: both; }
 
 .collapser:before, .expander:before {
-  font-size: 0.9em;
+  font-size: 1.2em;
   color: #5E5184;
   display: inline-block;
   padding-right: 7px;
 }
 
 .collapser:before {
-  content: '-'
+  content: '⊗';
 }
 .expander:before {
-  content: "+";
+  content: "⊕";
 }
 
 .collapser, .expander {
@@ -276,7 +313,7 @@ details[open] > summary {
 pre {
   padding: 1rem;
   margin: 0px;
-  background-color: rgba(0, 0, 0, .033);
+  background-color: #f7f7f7;
   overflow: auto;
 }
 
@@ -342,7 +379,8 @@ table.info {
 }
 
 .info th {
-	padding: 0 1em 0 0;
+  padding: 0 1em 0 0;
+  text-align: right;
 }
 
 div#style-menu-holder {
@@ -398,14 +436,15 @@ div#style-menu-holder {
 
 /* @group Front Matter */
 
+#synopsis .caption,
+#table-of-contents .caption {
+  font-size: 1rem;
+}
+
 #table-of-contents {
-  float: right;
-  clear: right;
-  background: #faf9dc;
-  border: 1px solid #d8d7ad;
-  padding: 0.5em 1em;
-  max-width: 20em;
-  margin: 0.5em 0 1em 1em;
+  background:  #f7f7f7;
+  padding: 1em;
+  margin: 1em 0 2em 0;
 }
 
 #table-of-contents .caption {
@@ -428,19 +467,6 @@ div#style-menu-holder {
   display: none;
 }
 
-#synopsis {
-  display: block;
-  position: fixed;
-  height: 80%;
-  top: 9vh;
-  right: 10px;
-  padding: 0;
-  max-width: 75%;
-  z-index: 1;
-  /* Ensure that synopsis covers everything (including MathJAX markup) */
-  z-index: 1;
-}
-
 #synopsis summary {
   display: block;
   float: left;
@@ -470,7 +496,7 @@ div#style-menu-holder {
 
 #synopsis ul,
 #synopsis ul li.src {
-  background-color: #faf9dc;
+  background-color: #f7f7f7;
   white-space: nowrap;
   list-style: none;
   margin-left: 0;
@@ -480,7 +506,9 @@ div#style-menu-holder {
 
 /* @group Main Content */
 
-#interface div.top { margin: 2em 0; }
+#interface div.top + div.top { margin-top: 0.6em; }
+
+#interface p + div.top,
 #interface h1 + div.top,
 #interface h2 + div.top,
 #interface h3 + div.top,
@@ -600,11 +628,6 @@ div#style-menu-holder {
   border-top: 1px solid #ccc;
 }
 
-.subs, .doc {
-  /* use this selector for one level of indent */
-  padding-left: 2em;
-}
-
 .warning {
   color: red;
 }
@@ -726,7 +749,19 @@ div#style-menu-holder {
 }
 
 :target {
-  background-color: #ffff00;
+  background: -webkit-linear-gradient(top, transparent 0%, transparent 65%, #fbf36d 60%, #fbf36d 100%);
+  background: -moz-linear-gradient(top, transparent 0%, transparent 65%, #fbf36d 60%, #fbf36d 100%);
+  background: -o-linear-gradient(top, transparent 0%, transparent 65%, #fbf36d 60%, #fbf36d 100%);
+  background: -ms-linear-gradient(top, transparent 0%, transparent 65%, #fbf36d 60%, #fbf36d 100%);
+  background: linear-gradient(to bottom, transparent 0%, transparent 65%, #fbf36d 60%, #fbf36d 100%);
+}
+
+:target:hover {
+  background: -webkit-linear-gradient(top, transparent 0%, transparent 0%, #fbf36d 0%, #fbf36d 100%);
+  background: -moz-linear-gradient(top, transparent 0%, transparent 0%, #fbf36d 0%, #fbf36d 100%);
+  background: -o-linear-gradient(top, transparent 0%, transparent 0%, #fbf36d 0%, #fbf36d 100%);
+  background: -ms-linear-gradient(top, transparent 0%, transparent 0%, #fbf36d 0%, #fbf36d 100%);
+  background: linear-gradient(to bottom, transparent 0%, transparent 0%, #fbf36d 0%, #fbf36d 100%);
 }
 
 /* @end */