From: Matthijs Kooijman <matthijs@stdin.nl>
Date: Thu, 29 Apr 2010 10:56:44 +0000 (+0200)
Subject: deadfoxjunction: Improve CSS.
X-Git-Url: https://git.stderr.nl/gitweb?a=commitdiff_plain;h=10d80f804d8ae7a9dde2834052a27fb722449d5a;p=matthijs%2Fprojects%2Fwipi.git

deadfoxjunction: Improve CSS.

This contains various fixes to the layout and background as well as
updating to the new menu HTML structure.
---

diff --git a/static/deadfoxjunction/css/screen.css b/static/deadfoxjunction/css/screen.css
index 92aaf5b..7d8b57e 100644
--- a/static/deadfoxjunction/css/screen.css
+++ b/static/deadfoxjunction/css/screen.css
@@ -7,34 +7,36 @@ html, body {
 
 
 html {
-	background-color:#0a0000;
+	background-color: black;
 }
 
 /* Put some wooden boards behind the site */
 body {
 	background-image: url('../img/background.jpg');
-	background-repeat: repeat;
+	background-repeat: no-repeat;
 }
 
 
-#header #logo {
-	width: 329px;
-	height: 162px;
-	margin-top: 60px;
-	margin-left: 45px;
-}
-
 /* Build the main layout. The header is left, the page is right and the footer
  * ends up below both. We also clear #footerbottom so all of the floating
  * stuff in the footer will still stretch up the body element and get a
  * background. */
 #header {
 	float: left;
-	width: 400px;
+	width: 320px;
 }
 
 #page {
 	float: left;
+	width: 730px;
+}
+
+body {
+	/* Ensure that both floats fit next to each other, even on small
+	 * screens */
+	min-width: 1080px;
+	/* Leave a bit of space open at the top */
+	padding-top: 60px;
 }
 
 #footer, #footerbottom {
@@ -45,16 +47,35 @@ body {
  * Set up the menu bar at the left 
  ****************************************/
 
-ul#menubar {
+#header {
+	padding-left: 30px;
+	padding-top: 60px;
+}
+
+
+/* Make the menubar and the logo the same width, so the menu items are nicely
+ * centered between the logo. Note that this width is a bit more than the
+ * width of #header, so the logo and menu will "stick out" (but end up in the
+ * margin of the "window" to the right, so it will look fine). */
+#header #logo, #menubar {
+	width: 344px;
+}
+
+#menubar {
+	/* Put the logo and the menu a bit closer (they both have some empty
+	 * space at the bottom resp. top). */
+	margin-top: -40px;
+}
+
+#menubar ul {
 	/* Disable all default list-style stuff */
 	padding-left:0px;
 	margin:0;
 	list-style-type:none;
 	list-style-position:outside;
-
 }
 
-ul#menubar li {
+#menubar li {
 	/* Center the menu items */
 	text-align: center;
 
@@ -64,16 +85,19 @@ ul#menubar li {
 	font-weight: bold;
 
 	/* And set up some spacing */
-	height: 50px;
+	height: 60px;
+}
+
+#menubar li img {
 }
 
 /* Disable underlining */
-ul#menubar li a {
+#menubar li a {
 	text-decoration:none;
 }
 
 /* Give the menu bar links a hover color */
-ul#menubar li a:hover {
+#menubar li a:hover {
 	color:#FFD200;
 }
 
@@ -85,7 +109,7 @@ ul#menubar li a:hover {
 
 /* All of these parts have the same width, including the frame (actual window
  * will be smaller) */
-#page, #pagetop, #pagemiddle, #pagebottom {
+#pagetop, #pagemiddle, #pagebottom {
 	width: 730px;
 }
 
diff --git a/static/deadfoxjunction/img/background.jpg b/static/deadfoxjunction/img/background.jpg
index a6b5c27..af7439a 100644
Binary files a/static/deadfoxjunction/img/background.jpg and b/static/deadfoxjunction/img/background.jpg differ
diff --git a/static/deadfoxjunction/img/logo.png b/static/deadfoxjunction/img/logo.png
index 09f6264..0813923 100644
Binary files a/static/deadfoxjunction/img/logo.png and b/static/deadfoxjunction/img/logo.png differ