diff mbox series

[qemu-web,4/7] Make page header nav narrower

Message ID 20201023152957.488974-5-berrange@redhat.com
State Superseded
Headers show
Series Tweaks to page footer and add "edit page" links | expand

Commit Message

Daniel P. Berrangé Oct. 23, 2020, 3:29 p.m. UTC
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(-)
diff mbox series

Patch

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;