diff options
author | Cristian Maureira-Fredes <Cristian.Maureira-Fredes@qt.io> | 2021-02-09 12:52:31 +0100 |
---|---|---|
committer | Cristian Maureira-Fredes <Cristian.Maureira-Fredes@qt.io> | 2021-02-10 13:06:43 +0100 |
commit | 19bc892133ada1ceae68eb42ce330e2599e2ec33 (patch) | |
tree | 0a4a664784cc0bf39ec0fe619d1649865db72689 /sources/pyside6/doc/_themes | |
parent | a3a3cc0165ef700328a5078e01e503f5eb9fd2fa (diff) |
doc: fix responsiveness of the page
Adding some cases to properly show the page on mobile devices.
Fixes: PYSIDE-1498
Pick-to: 6.0
Change-Id: Ia8ee234d09e5246745706f5b6aca29fe31075c04
Reviewed-by: Christian Tismer <tismer@stackless.com>
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>
Reviewed-by: Paul Wicking <paul.wicking@qt.io>
Diffstat (limited to 'sources/pyside6/doc/_themes')
-rw-r--r-- | sources/pyside6/doc/_themes/pysidedocs/static/pyside.css | 61 |
1 files changed, 55 insertions, 6 deletions
diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css index 625a2d39b..6b9fe3f05 100644 --- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css +++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css @@ -37,7 +37,20 @@ div.admonition a:last-child:after { } .body { - width: 100% + width: 100%; + background-color: #00FF00; + clear: both; + display:inline-block; + background-color:#fff; + padding: 25px 35px 20px 30px; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + -ms-box-sizing:border-box; + box-sizing:border-box; +} +.bodywrapper { + position: relative; + /*background-color: #0000ff;*/ } .bodywrapper .admonition p.admonition-title { margin-bottom:5px @@ -112,6 +125,14 @@ h2 em { .documentwrapper { margin-left: 255px; + position: relative; +} +@media screen and (max-width: 700px) { + .documentwrapper { + clear: both; + margin-left: 0px; + position: relative; + } } .body blockquote { @@ -123,9 +144,10 @@ h2 em { .sphinxsidebar { float: left; width: 186px; - padding: 25px; + padding: 15px; text-align: left; background-color: #fff; + clear: both; } .sphinxsidebar ul { @@ -1112,7 +1134,8 @@ a:hover { .main_index .row>div { letter-spacing:normal } -.col-1,.body { +.col-1 { + clear: both; display:inline-block; background-color:#fff; padding: 25px 35px 20px 30px; @@ -1184,6 +1207,7 @@ div.multi-column div { position: -webkit-sticky; position: sticky; top: 64px; + width: 200px; overflow: scroll; overflow-x: hidden; overflow-y: hidden; @@ -1192,6 +1216,30 @@ div.multi-column div { font-weight: bold; margin-bottom:1em; } + +/* On screens that are less than 700px wide, make the sidebar into a topbar */ +@media screen and (max-width: 700px) { + .sphinxsidebar { + top: 64px; + /*overflow-x: hidden; + overflow-y: hidden;*/ + width: 100%; + height: auto; + position: relative; + } + /*.sidebar a {float: left;}*/ + div.content {margin-left: 0;} +} + +/* On screens that are less than 400px, display the bar vertically, instead of horizontally +@media screen and (max-width: 400px) { + .sphinxsidebar a { + text-align: center; + float: none; + } +} +*/ + .toc h3 a { color:#404244 } @@ -1254,7 +1302,8 @@ div.multi-column div { } .bodywrapper .naviNextPrevious { margin-top:25px; - max-width:100% + max-width:100%; + position: relative; } .naviNextPrevious.headerNavi, p.naviNextPrevious + p { @@ -1353,7 +1402,7 @@ li a.active { min-height:1.25em } .bodywrapper .qmldoc { - margin-top:0.75em + margin-top:0.75em; } .body h2 { margin-top: 1.5em; @@ -1489,7 +1538,7 @@ pre, .LegaleseLeft { } .bodywrapper .LegaleseLeft p { color:#fff; - white-space: pre-wrap + white-space: pre-wrap; } pre .str,code .str { color:#aaaaaa |