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 92aaf5be07aa232d4abc4d261807306d565baa90..7d8b57e6ce7809ed2a5fe7955b9e3ba6234e4d98 100644 (file)
--- 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 a6b5c27978a8914d000c2d8e7615e1baff9479dc..af7439a743bed3f090207672568fd2b924f5ec17 100644 (file)
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 09f6264bbc357f00ebbbb7aba5e3dd016b5a89c4..0813923c6c308d48974577df894be7be974edd8a 100644 (file)
Binary files a/static/deadfoxjunction/img/logo.png and b/static/deadfoxjunction/img/logo.png differ