Permalink
Browse files

Footer and header images included from SUMO. Paths set such that this…

… submodule works from media/global

Updating readme and adding JS.
  • Loading branch information...
1 parent 58fd793 commit 1dc2e732c9982a0e0780ae75ca59e0147da32346 Paul Craciunoiu committed Dec 8, 2010
Showing with 52 additions and 0 deletions.
  1. +10 −0 README → README.rst
  2. BIN background.png
  3. BIN header-logos.png
  4. +15 −0 headerfooter.css
  5. +27 −0 menu.js
View
@@ -5,10 +5,20 @@ The following projects are currently using this code:
Kitsune: https://github.com/jsocol/kitsune/
Zamboni: https://github.com/jbalogh/zamboni/
+Out of the box, you get:
+
+* Header/footer images, CSS set such that these image paths work if the CSS is served from media/global, both minified and not
+* Fluid width for both header and footer
+* JS that adds a hide delay on header drop downs
+
Requirements
^^^^^^^^^^^
+* Jinja 2.
+
* A jinja ``|f`` filter, used to interpolate parameters, like so:
'visit {0}'|f('<span>mozilla</span>')
+
+* The JS is optional, but using it requires jQuery; tested with 1.3 or later.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -7,6 +7,7 @@
}
body {
+ background: #fff url(../global/background.png) 0 -700px repeat-x;
padding-top: 10px;
}
@@ -56,6 +57,7 @@ body {
#header h1 a,
#header h1 a:link,
#header h1 a:visited {
+ background: url(../global/header-logos.png) 15px 0 no-repeat;
display: block;
height: 57px;
width: 110px;
@@ -66,6 +68,11 @@ body {
#header h1 a:hover,
#header h1 a:active {
+ background: -moz-radial-gradient(center 45deg,
+ ellipse closest-side,
+ rgba(255,255,255,0.3) 0%,
+ rgba(255,255,255,0) 100%),
+ url(../global/header-logos.png) 15px 0 no-repeat;
-moz-transition: background 0.2s ease-in-out;
}
@@ -300,6 +307,7 @@ body {
}
#header a.mozilla span {
+ background: url(../global/header-logos.png) 1px -73px no-repeat;
overflow: hidden;
text-indent: -9999px;
width: 64px;
@@ -321,6 +329,7 @@ body {
----------------------------------*/
#footer {
+ background: #33559b url(../global/background.png) 0 0 repeat-x;
clear: both;
color: #476FBE;
display: block;
@@ -332,6 +341,7 @@ body {
#footer-logo a,
#footer-logo a:link,
#footer-logo a:visited {
+ background: url("../global/header-logos.png") no-repeat scroll 15px 0 transparent;
display: block;
height: 57px;
width: 110px;
@@ -342,6 +352,11 @@ body {
#footer-logo a:hover,
#footer-logo a:active {
+ background: -moz-radial-gradient(center 45deg,
+ ellipse closest-side,
+ rgba(255,255,255,0.3) 0%,
+ rgba(255,255,255,0) 100%),
+ url(../global/header-logos.png) 15px 0 no-repeat;
-moz-transition: background 0.2s ease-in-out;
}
View
27 menu.js
@@ -0,0 +1,27 @@
+/* Adds delay on hiding submenu of header */
+// Use closure to avoid globals
+(function () {
+var HIDE_TIMEOUT = 750, // hide timeout, in milliseconds
+ SHOWING = 'sfhover', // CSS class for showing submenu
+ showing = null, // reference to last parent showing its submenu
+ timeout = null; // reference to timeout event from setTimeout
+
+ $('#nav-main > ul > li').mouseover(function () {
+ // Ensures only one submenu displays
+ if (null !== showing) {
+ showing.removeClass(SHOWING);
+ showing = null;
+ clearTimeout(timeout);
+ }
+ // Fixes drop downs not showing on IE6
+ $(this).addClass(SHOWING);
+ }).mouseout(function () {
+ showing = $(this);
+ showing.addClass(SHOWING);
+ // Hide submenu HIDE_TIMEOUT ms
+ timeout = setTimeout(function () {
+ showing.removeClass(SHOWING);
+ showing = null;
+ }, HIDE_TIMEOUT);
+ });
+}());

0 comments on commit 1dc2e73

Please sign in to comment.