| Message ID | 20201027132015.621733-5-berrange@redhat.com |
|---|---|
| State | New |
| Headers | show |
| Series | Re-design the QEMU home page to better present information | expand |
On 27/10/2020 14.20, Daniel P. Berrangé wrote: > When the browser window is narrow, but not yet switched into the mobile > layout, the page header nav will line wrap. This breaks layout > assumptions resulting in overlapping/obscured text. > > This deals with the probem by reducing padding between the links, and > shortening "Documentation" to just "Docs". > > This avoids the line wrapping, as well as making room for new links in > the future. > > Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> > --- > _includes/nav.html | 2 +- > assets/css/style-desktop.css | 3 ++- > 2 files changed, 3 insertions(+), 2 deletions(-) Reviewed-by: Thomas Huth <thuth@redhat.com> ... and pushed it already (I used this patch to test my access to the new repo on gitlab.com instead the old one at qemu.org)
diff --git a/_includes/nav.html b/_includes/nav.html index 58b6c5a..c66ee92 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -6,7 +6,7 @@ </li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="{{ relative_root }}/download">Download</a> </li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a> </li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a> - </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Documentation</a> + </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Docs</a> </li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li> </ul> </nav> diff --git a/assets/css/style-desktop.css b/assets/css/style-desktop.css index ce58fe2..b7e403a 100644 --- a/assets/css/style-desktop.css +++ b/assets/css/style-desktop.css @@ -237,13 +237,14 @@ { text-align: right; margin: 0; + padding: 0; } #nav > ul > li { display: inline-block; margin: 0; - padding: 0.5em 2em 0.5em 0em; + padding: 0.5em 1em 0.5em 0em; color: #FFF; letter-spacing: 0.06em; text-transform: uppercase;
When the browser window is narrow, but not yet switched into the mobile layout, the page header nav will line wrap. This breaks layout assumptions resulting in overlapping/obscured text. This deals with the probem by reducing padding between the links, and shortening "Documentation" to just "Docs". This avoids the line wrapping, as well as making room for new links in the future. Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- _includes/nav.html | 2 +- assets/css/style-desktop.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-)