search

riboseinc / jekyll-theme-open-project

Jekyll theme for site suite presenting your open software and specifications.
MIT License
30 stars 3 forks source link

Implement narrow screen styling in accordance with mobile design mock-ups #32

Closed strogonoff closed 5 years ago

strogonoff commented 5 years ago

Ricardo’s mobile screen mock-ups reside at https://github.com/riboseinc/open-design/tree/master/screen-mockups.

strogonoff commented 5 years ago

First iteration of mobile styling is released in 1.1.3, pending CI on metanorma.com

strogonoff commented 5 years ago

Before

sep-05-2018 16-53-08 mobile-unfriendly metanorma

After

sep-05-2018 16-49-58 mobile-friendly metanorma

ronaldtse commented 5 years ago

Thanks for the awesome work!

There might be some minor adjustments, such as the "Get Started" and "Samples" buttons being too close vertically. But the rest is really nice. Perhaps the hamburger menu can be a bit larger (i.e. the whole top right corner) too.

strogonoff commented 5 years ago

@ronaldtse

Thanks for the awesome work!

Happy to be helping you out with this!

There might be some minor adjustments

Absolutely. There’re a few more UI inconsistencies and a couple of bugs to address before issue is closed.

Maybe you could take a look at Metanorma colors though? I think @riksalazar is still waiting for your choice. I implemented a hidden color switcher to preview colors under consideration on live metanorma.com (see https://github.com/riboseinc/metanorma.com/issues/17).

ronaldtse commented 5 years ago

Out of 0, a and c, maybe C for now?

strogonoff commented 5 years ago

Narrow screens work sufficiently well now per WebKit-based testing. Some examples:

Metanorma Ribose Open
metanorma com_4001_ pixel 2 open-hub local_4000_ pixel 2
ronaldtse commented 5 years ago

@strogonoff thank you very, very much -- this looks so much nicer!