From 6a7c5fef87106a92e710413259262ab2b1e78005 Mon Sep 17 00:00:00 2001 From: Nuno Alexandre Date: Sat, 3 Feb 2018 21:39:30 +0100 Subject: Make the style consistent with hackage Several things are addressed here: - better responsive behaviour on the header - better space usage - consistent colors overall - other nit PR comments --- .../html/NewOcean.std-theme/new-ocean.css | 106 ++++++++++++--------- haddock-api/src/Haddock/Backends/Xhtml.hs | 4 +- haddock-api/src/Haddock/Backends/Xhtml/Layout.hs | 4 +- 3 files changed, 66 insertions(+), 48 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 4191c8b0..8a7fdf97 100644 --- a/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css +++ b/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css @@ -37,8 +37,8 @@ dd { } a { text-decoration: none; } -a[href]:link { color: rgb(196,69,29); } -a[href]:visited { color: rgb(171,105,84); } +a[href]:link {color: #9C5791;} +a[href]:visited {color: #5E3558;} a[href]:hover { text-decoration:underline; } a[href].def:link, a[href].def:visited { color: rgba(69, 59, 97, 0.8); } @@ -57,45 +57,68 @@ body.js-enabled .hide-when-js-enabled { /* @group responsive */ -@media only screen and (min-width: 950px) { - #page-header { - text-align: left; - text-align: left; - } +#package-header .caption { + margin: 0px 1em 0 2em; +} +@media only screen and (min-width: 1280px) { #content { width: 60vw; + max-width: 1450px; + min-width: 830px; } +} - #package-header .caption { - margin: 0 0 0 20vw; +@media only screen and (max-width: 1280px) { + #content { + width: 75vw; } +} - ul.links { - margin: 0px 20vw 0 0; +@media only screen and (max-width: 950px) { + #content { + width: 88vw; } - } -@media only screen and (max-width: 950px) { - #page-header { - text-align: center; + +/* menu for wider screens + + Display the package name at the left and the menu links at the right, + inline with each other: + The package name Source . Contents . Index +*/ +@media only screen and (min-width: 1000px) { + #package-header .caption { + display: inline-block; + margin: 3px 1em 2px 2em; } - #content { - width: 80vw; + #package-header ul.links { + float: right; + margin: 3px 2em 2px 1em; } +} +/* menu for smaller screens + +Display the package name on top of the menu links and center both elements: + The package name + Source . Contents . Index +*/ +@media only screen and (max-width: 1000px) { #package-header .caption { - margin: 0 0 0 10vw; + display: block; + margin: 4px 0; + text-align: center; } - ul.links { - margin: 0px 10vw 0 0; + #package-header ul.links { + float: none; + text-align: center; + margin: 0.6em 0 0 0; } -} -@media only screen and (max-width: 500px) { #module-header table.info { float: none; top: 0; @@ -107,6 +130,7 @@ body.js-enabled .hide-when-js-enabled { /* @end */ + /* @group Fonts & Sizes */ /* Basic technique & IE workarounds from YUI 3 @@ -115,7 +139,7 @@ body.js-enabled .hide-when-js-enabled { */ body { - font: 300 13px/1.85 "Merriweather Sans", sans-serif; + font: 400 16px/1.6 'Open Sans', sans-serif; *font-size:small; /* for IE */ *font:x-small; /* for IE in quirks mode */ } @@ -150,18 +174,17 @@ pre, code, kbd, samp, tt, .src { } #module-header .caption sup { - font-size: 70%; + font-size: 80%; font-weight: normal; } +#package-header #page-menu a:link, #package-header #page-menu a:visited { color: white; } + + .info { font-size: 85%; /* 11pt */ } -#table-of-contents, #synopsis { - /* font-size: 85%; /* 11pt */ -} - /* @end */ @@ -169,11 +192,11 @@ pre, code, kbd, samp, tt, .src { .caption, h1, h2, h3, h4, h5, h6, summary { font-weight: bold; - color: rgb(78,98,114); - color: rgb(142, 80, 132); + color: #5E5184; margin: 2em 0 1em 0; } + * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 { margin-top: 2em; } @@ -190,15 +213,10 @@ ul + p { margin-top: 2em; } -ul.links, #package-header p.caption { - padding-top: 3px; -} - ul.links { list-style: none; text-align: left; - float: right; - font-size: 13px; + font-size: 1em; } ul.links li { @@ -258,7 +276,7 @@ details[open] > summary { pre { padding: 17px; margin: 1em 0 2em 0; - background-color: rgba(0, 0, 0, .025); + background-color: rgba(0, 0, 0, .033); overflow: auto; border-bottom: 0.25em solid white; /* white border adds some space below the box to compensate @@ -291,22 +309,21 @@ pre { background: rgb(94, 81, 132); border-bottom: 5px solid rgba(69, 59, 97, 0.5); color: #ddd; - padding: 8px 0; + padding: 0.6em 0 0.2em 0; position: relative; text-align: left; margin: 0 auto; + overflow: hidden; } #package-header .caption { - background: url(hslogo-16.png) no-repeat 0em; color: white; - font-weight: normal; font-style: normal; - padding-left: 35px; + font-size: 1.1rem; + font-weight: bold; } #module-header .caption { - color: rgb(94, 81, 132); font-weight: bold; border-bottom: 1px solid #ddd; } @@ -414,11 +431,12 @@ div#style-menu-holder { #synopsis { display: block; position: fixed; - right: 0; height: 80%; - top: 10%; + top: 9vh; + right: 10px; padding: 0; max-width: 75%; + z-index: 1; /* Ensure that synopsis covers everything (including MathJAX markup) */ z-index: 1; } diff --git a/haddock-api/src/Haddock/Backends/Xhtml.hs b/haddock-api/src/Haddock/Backends/Xhtml.hs index 0264b7f7..6f1f1f60 100644 --- a/haddock-api/src/Haddock/Backends/Xhtml.hs +++ b/haddock-api/src/Haddock/Backends/Xhtml.hs @@ -130,8 +130,8 @@ headHtml docTitle themes mathjax_url = script ! [src mjUrl, thetype "text/javascript"] << noHtml ] where - fontUrl = "https://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,700" - mjUrl = maybe "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id mathjax_url + fontUrl = "https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" + mjUrl = fromMaybe "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" mathjax_url srcButton :: SourceURLs -> Maybe Interface -> Maybe Html srcButton (Just src_base_url, _, _, _) Nothing = diff --git a/haddock-api/src/Haddock/Backends/Xhtml/Layout.hs b/haddock-api/src/Haddock/Backends/Xhtml/Layout.hs index 1c44ffda..bdf989ed 100644 --- a/haddock-api/src/Haddock/Backends/Xhtml/Layout.hs +++ b/haddock-api/src/Haddock/Backends/Xhtml/Layout.hs @@ -74,8 +74,8 @@ sectionName = paragraph ! [theclass "caption"] -- If it would have otherwise been empty, then give it the class ".empty". nonEmptySectionName :: Html -> Html nonEmptySectionName c - | isNoHtml c = paragraph ! [theclass "caption empty"] $ spaceHtml - | otherwise = paragraph ! [theclass "caption"] $ c + | isNoHtml c = thediv ! [theclass "caption empty"] $ spaceHtml + | otherwise = thediv ! [theclass "caption"] $ c divPackageHeader, divContent, divModuleHeader, divFooter, -- cgit v1.2.3