[svn] improved jinja webpage design
authorArmin Ronacher <armin.ronacher@active-4.com>
Thu, 22 Mar 2007 16:43:33 +0000 (17:43 +0100)
committerArmin Ronacher <armin.ronacher@active-4.com>
Thu, 22 Mar 2007 16:43:33 +0000 (17:43 +0100)
--HG--
branch : trunk

www/layout/base.tmpl
www/static/headerbg.png [new file with mode: 0644]
www/static/print.css [new file with mode: 0644]
www/static/style.css

index e881373d6fed50fc2b357d1540bde15f94021730..bd1e9c8f4c50845f9ff983cf7b61c381ac16f275 100644 (file)
@@ -16,7 +16,7 @@
   </head>
   <body>
     <div id="header">
-      <h1>Jinja</h1>
+      <h1><span>Jinja</span></h1>
     </div>
     <ul id="navigation">
     <% for href, id, caption in navigation %>
diff --git a/www/static/headerbg.png b/www/static/headerbg.png
new file mode 100644 (file)
index 0000000..035f9d4
Binary files /dev/null and b/www/static/headerbg.png differ
diff --git a/www/static/print.css b/www/static/print.css
new file mode 100644 (file)
index 0000000..f29b465
--- /dev/null
@@ -0,0 +1,17 @@
+#header, #footer, #navigation {
+    display: none;
+}
+
+#contentwrapper, #content {
+    max-width: 100%;
+    padding: 0;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+#contentwrapper h1 {
+    margin-left: 0;
+}
index 644e6717442d11343a718e7e7ebb81349b51b7cc..0fa944e8574c1db561d1e7f2cbb851f1b2e4090a 100644 (file)
@@ -116,19 +116,13 @@ div.admonition p {
     background-color: white;
     background-image: url(watermark.png);
     padding: 10px;
-    margin: 25px 25px 0 25px;
-    border: 4px solid #ddd;
-    border-bottom: none;
 }
 
 #footer {
-    margin: 0 25px 25px 25px;
-    border: 4px solid #ddd;
-    border-top: none;
-    background-color: #fff;
-    color: #999;
-    text-align: right;
-    padding: 0 20px 20px 0;
+    color: #fff;
+    text-align: center;
+    font-size: 14px;
+    padding: 10px 20px 10px 20px;
 }
 
 #contentwrapper {
@@ -137,22 +131,30 @@ div.admonition p {
 }
 
 #header {
+    padding: 10px;
+    border-top: 6px solid #d20000;
+    background-color: #888;
+    background-image: url(headerbg.png);
+    background-position: top left;
+}
+
+#header h1 {
+    margin: 0;
+    padding: 0;
     height: 80px;
-    background-color: #eee;
     background-image: url(jinjabanner.png);
     background-repeat: no-repeat;
-    border-bottom: 4px solid #ccc;
 }
 
-#header h1 {
+#header h1 span {
     display: none;
 }
 
 #navigation {
-    background-color: #fff;
     border: 1px solid #ccc;
-    border-right: none;
-    margin: 50px 29px 10px 10px;
+    background-color: #555;
+    font-family: 'Trebuchet MS', 'Arial', sans-serif;
+    margin: -60px 29px 10px 10px;
     padding: 0;
     float: right;
     list-style: none;
@@ -160,14 +162,16 @@ div.admonition p {
 }
 
 #navigation li {
+    float: left;
     margin: 0;
+    padding: 0;
 }
 
 #navigation li a {
     display: block;
     text-decoration: none;
     padding: 5px 10px 5px 10px;
-    color: #333;
+    color: #eee;
 }
 
 #navigation li a:hover {
@@ -189,15 +193,21 @@ div.admonition p {
     color: #fff;
 }
 
+#contentwrapper h1,
+#contentwrapper h2,
+#contentwrapper h3 {
+    font-family: 'Trebuchet MS', 'Arial', sans-serif;
+}
+
 #contentwrapper h1 {
     color: #b41717;
-    font-size: 26px;
+    font-size: 28px;
     margin: 20px 0 0 -5px;
 }
 
 #contentwrapper h2 {
     color: #444;
-    font-size: 20px;
+    font-size: 22px;
     margin: 20px 0 0 0;
 }