Revamp the layout to look less awful.

2 files changed, 180 insertions, 61 deletions

diff --git a/static/style/aal.css b/static/style/aal.css
index a1b7b10..9bad98f 100644
--- a/static/style/aal.css
+++ b/static/style/aal.css
@@ -25,8 +25,8 @@ blockquote:before,blockquote:after,q:before,q:after {content: ''; content: none;
 header, nav, section, article, aside, footer {display: block;}
 
 /* Basic styles */
-body {background: #fff; color: #000; font: .75em/1.5em "Helvetica Neue",  Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;}
-html>body {font-size: 12px;}
+body {background: #fff; color: #000; font: 0.875em/1.5em "Helvetica Neue",  Helvetica, Arial, "Liberation Sans", "Bitstream Vera Sans", sans-serif;}
+html>body {font-size: 14px;}
 
 img {display: inline-block; vertical-align: bottom;}
 
diff --git a/static/style/cfbe.css b/static/style/cfbe.css
index 360744f..c5f726e 100644
--- a/static/style/cfbe.css
+++ b/static/style/cfbe.css
@@ -1,61 +1,180 @@
 /* @override http://localhost:8080/static/style/cfbe.css */
 
-body { background-image: url(/static/images/gradient-background.png); background-color: #bbbbbb; background-repeat: repeat-x; }
-
-body.rhythm { background-image: url(/static/images/stripe-rhythm.png); background-repeat: repeat; }
-div#content-pane.rhythm { background-color: transparent; }
-div#external-pane-content.rhythm { background-color: transparent; }
-
-div#header    { background-image: url(/static/images/gradient-header.png); background-repeat: repeat-x; 
-                background-color: #770005; color: #fff; margin-top: 1.5em; }
-div#header h1 { font-size: 4em; line-height: 1.5em; margin-bottom: 0em; }
-
-div.center-column { width: 55em; margin-left: 5em; }
-div#content-wrap { display: inline-block; vertical-align: top; }
-div#content-pane { background-color: #fbfbfb; padding: 1.5em 2em; }
-div#external-pane { background-image: url(/static/images/left-arrow.png); background-repeat: no-repeat; width: 24em; padding: 0em; display: inline-block; }
-div#external-pane-content { margin-left: 18px; background-color: #fbfbfb; padding: 1.5em 1em 1px; }
-
-div#footer { text-align: center; width: 59em; }
-div#footer p { font-size: 0.9em; line-height: 1.666em; }
-
-div#nav { margin-bottom: 1.5em; }
-span#filters { float: right; }
-span#filters a { margin-left: 1.5em; }
-
-a:link, a:visited, a:active { color: #d03; text-decoration: none; font-weight: bold; }
-a:hover { color: #60b305; }
-
-.header-with-link { display: inline-block; }
-.header-link { margin-left: 1em; }
-
-table#bug-list { width: 100%; border-collapse: collapse; border: 0.084em solid #ccc; }
-table#bug-list td, table#bug-list th { border: 0em; border-bottom: 0.084em solid #ccc; text-align: left; }
-table tr td, table tr th { padding: 0px 5px; }
-table tr td { line-height: 2.832em; padding-bottom: 0.084em; }
-table tr th { line-height: 2.916em; }
-table { margin-bottom: 1.417em; }
-tr.stripe { background-color: #f5e5f0; }
-
-div#assignees, div#targets { display: none; }
-
-p.creation-info { color: #888; }
-span.detail-field-header { font-weight: 700; width: 7.5em; padding-right: 1em; display: inline-block; text-align: right; }
-
-div.bug-comment { margin-left: 2em;}
-p.bug-comment-body { white-space: pre; margin: 0em 0em 0em 0em; }
-p.bug-comment-footer { margin: 0em 0em; color: #888; }
-h4.bug-comment-header { margin: 1.5em 0em 0em; }
-
-form#create-form { height: 3em; display: none; }
-form#create-form input#create-summary { width: 30em; font-weight: 700; }
-
-form#add-comment-form { display: none; margin-top: 1.5em; }
-p#add-comment-link {margin-top: 1.5em; }
-
-form#bug-details-edit-form { display: none; }
-form#bug-details-edit-form label { font-weight: 700; width: 7.5em; margin-left: 0em; margin-right: 1em; text-align: right; }
-form#bug-details-edit-form .field { padding-left: 0em; }
-
-form#bug-summary-edit-form { display: none; }
-input#bug-summary-edit-body { width: 95%; }
+body {
+    background-color: #eee;
+}
+
+div#main-pane {
+    width: 960px;
+    margin: 3em auto;
+    border: 1px solid #888;
+    background-color: #fcfcfc;
+}
+.inside-main-pane {
+    padding: 0em 3em;
+}
+
+div#header {
+    background-color: #D8004A;
+    height: 6em;
+}
+div#header h1 {
+    font-size: 4em;
+    line-height: 1.5em;
+    margin-bottom: 0em;
+    color: #fff;
+    font-weight: normal;
+    font-family: "Helvetica Neue Ultra Light", "HelveticaNeue-UltraLight", "Helvetica", "Arial", sans-serif;
+    letter-spacing: 1px;
+}
+
+div#navigation {
+    height: 3em;
+    line-height: 3em;
+    border-bottom: 1px solid #888;
+}
+div#content-pane {
+    margin: 1.5em 0em 3em;
+}
+
+div#filter-pane {
+    display: none;
+    border-bottom: 1px solid #888;
+    line-height: 3em;
+    text-align: right;
+}
+ul.filter-items {
+    list-style-type: none;
+    margin: 0em;
+    padding: 0em;
+}
+ul.filter-items li {
+    display: inline;
+    margin-left: 1.5em;
+}
+
+div#footer {
+    text-align: center;
+    height: 3em;
+    border-top: 1px solid #888;
+}
+div#footer p {
+    font-size: 0.9em;
+    line-height: 3.333em;
+}
+
+span#filters {
+    float: right;
+}
+span#filters a {
+    margin-left: 1.5em;
+}
+
+a:link, a:visited, a:active {
+    color: #d03; text-decoration: none; font-weight: bold;
+}
+a:hover {
+    color: #60b305;
+}
+
+.header-with-link {
+    display: inline-block;
+}
+.header-link {
+    margin-left: 1em;
+}
+
+table#bug-list {
+    width: 100%; border-collapse: collapse; border: 0.084em solid #ccc;
+}
+table#bug-list td, table#bug-list th {
+    border: 0em; border-bottom: 0.084em solid #ccc; text-align: left;
+}
+table tr td, table tr th {
+    padding: 0px 5px;
+}
+table tr td {
+    line-height: 2.832em; padding-bottom: 0.084em;
+}
+table tr th {
+    line-height: 2.916em;
+}
+table {
+    margin-bottom: 1.417em;
+}
+tr.stripe {
+    background-color: #fcecf8;
+}
+
+div#assignees, div#targets {
+    display: none;
+}
+
+p.creation-info {
+    color: #888;
+}
+span.detail-field-header {
+    font-weight: 700;
+    width: 7.5em;
+    padding-right: 1em;
+    display: inline-block;
+    text-align: right;
+}
+
+div.bug-comment {
+    margin-left: 2em;
+}
+p.bug-comment-body {
+    white-space: pre;
+    margin: 0em 0em 0em 0em;
+}
+p.bug-comment-footer {
+    margin: 0em 0em; color: #888;
+}
+h4.bug-comment-header {
+    margin: 1.5em 0em 0em;
+}
+
+#create-form {
+    display: none;
+}
+#create-form fieldset {
+    clear: none;
+}
+#create-form input#create-summary {
+    width: 20em;
+    border: 1px solid #888;
+    margin-right: 1.5em;
+}
+#create-button {
+    margin: 0em;
+}
+
+form#add-comment-form {
+    display: none;
+    margin-top: 1.5em;
+}
+p#add-comment-link {
+    margin-top: 1.5em;
+}
+
+form#bug-details-edit-form {
+    display: none;
+}
+form#bug-details-edit-form label {
+    font-weight: 700;
+    width: 7.5em;
+    margin-left: 0em;
+    margin-right: 1em;
+    text-align: right;
+}
+form#bug-details-edit-form .field {
+    padding-left: 0em;
+}
+
+form#bug-summary-edit-form {
+    display: none;
+}
+input#bug-summary-edit-body {
+    width: 95%;
+}