Merge pull request #93 from SeeClickFix/joeu/fix/tp-198323-logo-follow-up

ssawyer1024 · web-flow · commit 96221a4e9d35 · 2025-01-23T10:57:43.000-05:00
[TP-198323] Header changes
diff --git a/layouts/default.html b/layouts/default.html
@@ -22,16 +22,13 @@
 <body class="api">
     <div id="header-wrapper">
       <div id="header">
-        <div>
-          <a class="logo" href="/">
-            <img src="/images/seeclickfix-311-crm-logo.png" height="33px" alt="CivicPlus SeeClickFix 311 CRM" />
-          </a>
-          <ul class="nav">
-            <li><a href="/">v2 (current)</a></li>
-            <li><a href="http://seeclickfix.com" target="_blank">SeeClickFix.com</a></li>
-            <li><a href="http://seeclickfix.com/contact_us" target="_blank">Support</a></li>
-          </ul>
-        </div>
+        <a class="logo" href="/">
+          <img src="/images/seeclickfix-311-crm-logo.png" height="54px" alt="CivicPlus SeeClickFix 311 CRM" />
+        </a>
+        <ul class="nav">
+          <li><a href="http://seeclickfix.com" target="_blank">SeeClickFix.com</a></li>
+          <li><a href="http://seeclickfix.com/contact_us" target="_blank">Support</a></li>
+        </ul>
       </div><!-- #header -->
     </div><!-- #header-wrapper -->
 
diff --git a/static/shared/css/documentation.css b/static/shared/css/documentation.css
@@ -123,42 +123,32 @@ a img {
 #header-wrapper {
   margin-bottom: 0;
   clear: both;
-  height: 55px;
+  height: 70px;
   background: white url(../images/background-v2.png) 0 0 repeat-x;
   border-bottom: 1px solid #CCC;
 }
 
 #header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   margin: 0 auto;
   width: 920px;
+  height: inherit;
 }
 
 #header a.logo {
-  float: left;
-  margin-top: 10px;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
 }
 
 #header ul.nav {
   float: right;
-  padding: 8px 3px 8px 2px;
   font-weight: bold;
-  text-shadow: white 1px 1px 0px;
-  font-size: 12px;
-  margin-top: 10px;
-  background: #f5f5f5;
-  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcfcfc', endColorstr='#ececec');
-  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fcfcfc), to(#e8e8e8));
-  background:-moz-linear-gradient(270deg, #fcfcfc, #ececec);
-  border-color:#eee;
-  border:1px solid #e9e9e9;
-  border-bottom-color:#f5f5f5;
-  -webkit-border-radius:2px;
-  -moz-border-radius:2px;
-  border-radius:2px;
-  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-  box-shadow:0 1px 1px rgba(0,0,0,0.2);
+  font-size: 13px;
 }
 
 #header ul.nav li:first-child {
