From: Armin Ronacher Date: Thu, 22 Mar 2007 16:43:33 +0000 (+0100) Subject: [svn] improved jinja webpage design X-Git-Tag: 2.0rc1~404 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b6f8a586bd0fe2dc985fb2147783022a44e24003;p=thirdparty%2Fjinja.git [svn] improved jinja webpage design --HG-- branch : trunk --- diff --git a/www/layout/base.tmpl b/www/layout/base.tmpl index e881373d..bd1e9c8f 100644 --- a/www/layout/base.tmpl +++ b/www/layout/base.tmpl @@ -16,7 +16,7 @@

<% for href, id, caption in navigation %> diff --git a/www/static/headerbg.png b/www/static/headerbg.png new file mode 100644 index 00000000..035f9d49 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 index 00000000..f29b465e --- /dev/null +++ b/www/static/print.css @@ -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; +} diff --git a/www/static/style.css b/www/static/style.css index 644e6717..0fa944e8 100644 --- a/www/static/style.css +++ b/www/static/style.css @@ -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; }

Jinja

Jinja