From d8ed278279cbbeda2b5e65e280f640b009e2dc29 Mon Sep 17 00:00:00 2001
From: Aaron Boodman <zboogs@gmail.com>
Date: Wed, 18 Dec 2013 23:07:19 -0800
Subject: [PATCH] Prevent layout glitch in nav bar during load caused by web
 fonts loading asynchronously.

Change-Id: Ic1fbfbf2a7d3a6b48fa7a17f0a1b823a6e1fe854
---
 server/camlistored/ui/nav.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/server/camlistored/ui/nav.css b/server/camlistored/ui/nav.css
index 70817f2a7..02ecfee61 100644
--- a/server/camlistored/ui/nav.css
+++ b/server/camlistored/ui/nav.css
@@ -67,6 +67,13 @@ limitations under the License.
   transition: color 300ms ease-out;
   white-space: nowrap;
   width: 100%;
+
+  /* This is a bummer, but it appears that different fonts can actually layout
+  at different heights for the same pixel size, thus we get a layout glitch
+  during load when the font load completes. 42px is the minimum of the size that
+  Firefox and Chrome render this box at with the above font size, padding,
+  etc. */
+  min-height: 42px;
 }
 
 .cam-nav-item:hover,
@@ -137,12 +144,13 @@ limitations under the License.
 }
 
 .cam-logo {
-  position: absolute;
-  left: 0;
   bottom: 0;
+  font-size: 15px;
+  min-height: 0;
+  left: 0;
   opacity: 0.8;
   padding: 4px 9px 4px 31px;
-  font-size: 15px;
+  position: absolute;
   text-decoration: none;
   width: auto;
 }