diff options
author | Herdy Handoko <herdy.handoko@hotmail.com> | 2017-04-06 15:17:37 +0800 |
---|---|---|
committer | Felix Mulder <felix.mulder@gmail.com> | 2017-04-06 09:17:37 +0200 |
commit | e7bad078d00070eb056116a9608bc5c2f25cc7fd (patch) | |
tree | 41e48704dbe65eacb676955b29e3018f1ddecb93 /tests/patmat | |
parent | 4f4e37325fb5160905b2ba9dcdb95994c791390b (diff) | |
download | dotty-e7bad078d00070eb056116a9608bc5c2f25cc7fd.tar.gz dotty-e7bad078d00070eb056116a9608bc5c2f25cc7fd.tar.bz2 dotty-e7bad078d00070eb056116a9608bc5c2f25cc7fd.zip |
Make dottydoc main page responsive (#2052)
* Add CSS media queries to support off-canvas sidebar
* Add sidebar toggle interactivity for small viewports
* Re-add sidebar toggle support for desktop viewport widths
* Widen sidebar in mobile viewport and removed extra padding in content body
* Reduce sidebar width back to 250px on Desktop and Tablet viewports
Tablet (576px <= x < 768px) viewport sidebar is now limited to 250px to follow
Desktop viewports whilst still retaining its off-canvas behaviour like Mobile.
Mobile viewport (x < 576px) still implements 60% sidebar width.
* Refactor media queries to follow mobile-first strategy
Instead of specifying specific styles at a viewport width range, e.g. Tablet
(576px <= x < 768px), the CSS properties are arranged as such that default CSS
properties applies to Mobile, with Tablet and Desktop styles defined within
media queries.
Mobile-first strategy will ensure more consistency as style resolution will go
in one direction, e.g. from Mobile -> Tablet -> Desktop.
* Move `div#entity-container` and `div#doc-page-container` further down
The change above, in addition to qualifying `button#menu-toggle` with
`div#content-wrapper` parent selector will make the existing CSS easier
to refactor removing duplicates, and to swap it into CSS pre-processor
languages such as SASS or Less.
* Merge redundant `div#content-body` styles
Two different `div#content-body` styles was defined, one with only
`position: relative` and another with the complete styles.
In addition, a `div#content-body` Tablet and Desktop padding style was moved
into the relevant media query to make future changes more transparent.
* Change `rgba(...)` properties to insert space and prefix decimals with `0`
Within the CSS file, RGBA property declaration is inconsistent: some with space
after comma and some without, some has leading `0` for decimals and some dont'.
This change make sure that one style is followed (space after comma and always
use the leading `0` in decimals).
* Move hamburger menu to original location and restore hover styling
Hamburger menu now stays in the content body as per original design. However
to prevent overlap with body text, a permanent 30px left padding on the body
container has been added.
* Remove hamburger menu transformation into arrow on expansion
As per PR review comments (https://github.com/lampepfl/dotty/pull/2052)
the old hamburger menu style is restored by removing CSS transforms.
* Change hamburger menu positioning to `absolute`
As per PR review comments (https://github.com/lampepfl/dotty/pull/2052)
the hamburger menu positioning is changed back to absolute, which also
means the left padding on content body is no longer needed and can be
removed.
Diffstat (limited to 'tests/patmat')
0 files changed, 0 insertions, 0 deletions