diff options
author | NunoAlexandre <alexandre.nunomiguel@gmail.com> | 2017-12-27 19:10:32 +0100 |
---|---|---|
committer | Alec Theriault <alec.theriault@gmail.com> | 2018-10-18 08:14:32 -0700 |
commit | 72bb636be9b21ca30c0af6402ab371c07e3e79ed (patch) | |
tree | fb2b22895d0e394ca1dc984147e291ecf95ab9b4 /haddock-api/resources/html/NewOcean.std-theme | |
parent | 1c1c4001cf7d2167e545d88bd58f97a71778621b (diff) |
Make it responsive
- It makes small screens taking more space than larger ones
- fixes a few issues present in small screens currently
- make it look good across different screen sizes.
Diffstat (limited to 'haddock-api/resources/html/NewOcean.std-theme')
-rw-r--r-- | haddock-api/resources/html/NewOcean.std-theme/new-ocean.css | 71 |
1 files changed, 61 insertions, 10 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 f1523143..4191c8b0 100644 --- a/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css +++ b/haddock-api/resources/html/NewOcean.std-theme/new-ocean.css @@ -54,6 +54,59 @@ body.js-enabled .hide-when-js-enabled { /* @end */ + +/* @group responsive */ + +@media only screen and (min-width: 950px) { + #page-header { + text-align: left; + text-align: left; + } + + #content { + width: 60vw; + } + + #package-header .caption { + margin: 0 0 0 20vw; + } + + ul.links { + margin: 0px 20vw 0 0; + } + +} + +@media only screen and (max-width: 950px) { + #page-header { + text-align: center; + } + + #content { + width: 80vw; + } + + #package-header .caption { + margin: 0 0 0 10vw; + } + + ul.links { + margin: 0px 10vw 0 0; + } +} + +@media only screen and (max-width: 500px) { + #module-header table.info { + float: none; + top: 0; + margin: 0 auto; + overflow: hidden; + max-width: 80vw; + } +} + +/* @end */ + /* @group Fonts & Sizes */ /* Basic technique & IE workarounds from YUI 3 @@ -137,12 +190,15 @@ ul + p { margin-top: 2em; } +ul.links, #package-header p.caption { + padding-top: 3px; +} + ul.links { list-style: none; text-align: left; float: right; - display: inline-table; - margin: 0 22vw 0 1em; + font-size: 13px; } ul.links li { @@ -227,16 +283,15 @@ pre { /* @group Page Structure */ #content { - margin: 0 auto; + margin: 3em auto 0 auto; padding: 0; - width: 55vw; } #package-header { background: rgb(94, 81, 132); border-bottom: 5px solid rgba(69, 59, 97, 0.5); color: #ddd; - padding: 0.6em 0 0.2em 0; + padding: 8px 0; position: relative; text-align: left; margin: 0 auto; @@ -245,15 +300,11 @@ pre { #package-header .caption { background: url(hslogo-16.png) no-repeat 0em; color: white; - margin: 0; - margin-left: 22.5vw; font-weight: normal; font-style: normal; - padding-left: 2em; + padding-left: 35px; } -#package-header a:link, #package-header a:visited { color: white; } - #module-header .caption { color: rgb(94, 81, 132); font-weight: bold; |