Merge lp:~sinzui/launchpad/fixed-font-sizes-1 into lp:launchpad

[Curtis Hovey]

Update Launchpad text to Ubuntu web guidelines.

    Launchpad bug: https://bugs.launchpad.net/bugs/523189
    Pre-implementation: huwshimi
    Test command: None

Launchpad uses YUI-Font to normalise font sizes across browser and OSes. It
stipulates that all font sizes must be expressed in specific percentages to
get the expected point size. This is difficult to use because browsers know
that percentages are relative; nesting classes have surprising results.

Text sizes are not what the developer expects them to be. The text size
becomes smaller than the expected lower limit. The recently removal of
application colour makes it difficult to see headings because their
size and white-space is not distinct.

Ubuntu's web guidelines stipulate 6 font-sizes for headings, navigation
and text. Modern browsers (IE7+, Firefox, webkit) use a base font size of
16pt and have a zoom function that sizes text based on pixels. The older
convention of using ems and changing the default browser font size is causes
unpredictable results, and could only be used by power users and designers.

--------------------------------------------------------------------

RULES

    * Remove yui/cssfonts/fonts.css
    * Change % to ems (93% => .93em)
    * Rebase the font-size from 13px to 10px (10px/16px)
    * Convert the ems to pxs (1.2em => 12px)
    * Update the headings to the guideline's suggest size and space
    * Update body and .discreet .lesser size and space
    * Review, update, delete all font-size
      * Delete all cases that should be the default (body is 12px)
      * Update cases that must be like the .lesser size rule (10px)
    * Set the default colour to #333
    * Remove cases that set the text colour to black
    * Review, update, delete all colour definitions
      * Delete all cases that should be the default (#333)
      * Update cases that must be like inactive or is a note (#666)
    * ADDENDUM: Fix cases broken by the changes
      * The launchpad front page defines lots of exceptions that should
        be deleted.
      * The changelog and release notes sections of a released milestone
        are broken by the heading size size.

QA and CONSIDERATIONS

    * Tour the site. Look for inconsistencies in font-size, white-space
      and colour. We want the pages to be very consistent.
      * Compare Lp's front page and a released milestone because they
        got special treatment.
    * Consider cases where headings take up more space.
      * Is the page design at fault? Can we change it
      * Is the convention at fault: eg
        PORTLET HEADING _see all items_
        is an Lp-only convention. The guidelines stipulate:
        _PORTLET HEADING >_
      * If the issue is very common, maybe Lp needs to use a smaller heading
        size until the layout/convention can be changed.
    * Consider other sites that have implemented the guidelines:
      * ubuntu.com uses 13px instead of 12px as the body.
      * one.ubuntu.com wrongly specified Ubuntu font before UbuntuBeta
        * ADDENDUM: UbuntuBeta now contains only a light and medium font
          and you may be seeing the thiner light version.
          * The guidelines may change to:
            UbuntuBeta Regular, UbuntuRegular, ...

LINT

    buildout-templates/bin/combine-css.in
    lib/canonical/launchpad/icing/style-3-0.css.in
    lib/canonical/launchpad/icing/style.css
    lib/lp/app/templates/root-index.pt
    lib/lp/registry/templates/project-listing-detailed.pt

IMPLEMENTATION

Updated the font size instructions and removed the obsolete colour
instructions. Updated the headings, body, and .lesser rules to use
the size, space and colour suggested by the guidelines.
* Hacked ".portlet h2:first-child" because many headings are the
  first item in a portlet that has setup leading white-space. We may keep
  this rule if we decide that portlets will continue to define margins and
  padding.
* Removed sever rules that are identical or do not occur:
  "strong em", "dl.faq dt", "ul.cross-reference"
* Hacked the ".top-portlet .summary" rule to keep the presentation as it is.
  An alternate option would be use the default size and make it bold or black.
* Hacked some .watermark issues to preserve the current header layout.
* Removed the italic rule for the .registering; I should not have added it
  last year.
* Hacked ".side h2" to preserve the current layout of headings in side bars.
  We may want to switch those headings to <h3>
    buildout-templates/bin/combine-css.in
    lib/canonical/launchpad/icing/style-3-0.css.in
    lib/canonical/launchpad/icing/style.css

Removed rules that defined exceptional size, space, and borders. This
permitted me to remove three entire rules.
    lib/lp/app/templates/root-index.pt

Added a rule for links in headings so that the edit icons appear close to the
heading text instead of floating high above
"h1 a.sprite, h2 a.sprite, h3 a.sprite"
I then inlined the link into the heading.
    lib/lp/registry/templates/project-listing-detailed.pt

[Curtis Hovey (sinzui)]

> I like font sizing and line height. I think we might get some backlash
> over the change to 12px default, but I think we'll just need to manage
> this well.

We can consider 13px as ubuntu.com uses. But look at these other changes
before deciding that 12px is too small.

> I think at this point as the font is in such an early stage we should
> break the font rules to make it regular for font testers. The
> combination of 12px font and light weight makes it too small.

I agree. I change the font rule to prefer ubuntubeta regular.

> The multi-line edit widgets seem to be broken (.lazr-multiline-edit h2
> line-height is too high).

Ah. I see that the bug description is mis-aligned. And what ever is specifying
the rule has the wrong margins, font, weight, and colour when compared with
the other headings on the page.
/me looks
Yuck. lazr inlineedit is pumping generic css into Lp.
I defined a rule that makes the heading consistent with the others on the
page, then forced the margin and line-height to match the space allocated.
The edit widget now looks right in firefox and chromium.

> Sidebar and content portlets h2s need more space below them.

I see. I fixed it with one rule and broke it with the first-child rule.
I think we only want to remove the leading space for first child. I think
I fixed the side headings and the heading in the content too.

> The project name needs a bit of positioning work (project name needs to
> be moved down and less space before the tabs).

Oh, the <h2> in the header jumps:
    https://launchpad.dev/firefox
verses
    https://launchpad.dev/firefox/trunk

I think I fixed this by specify the bottom margin. hmm. maybe the <h2>
in the watermark (Mozilla Firefox) would look better if it was always
the same height as a <h1>.

> I was confused as I looked around the site about when we bold things. We
> might need to make a rule for this.

There isn't. I ask that some be removed from build page recently. They did
not make sense. stevek reported most were added in 2005. We have not been
good at removing styles as Lp's style changes.

> The main heading (h1) seems a bit oversized, but maybe that's ok, I got
> used to it pretty quickly. I think it needs a bit more space top and bottom.

I think we need to user a smaller font because Lp's <h1>s contain user
content. We do not control how large they can grow, and users have tailored
names and titles to the space available. Since Lp's <h1> will *never* appear
in content, unlike what the guidelines assume, We do not need them to make
a large distinction from <h2>s.

/me tries 30/34px.
I like it

Also, the guidelines strive to merge heading and subheading using colours.
There is often redundancy in the two headings. If we redesign out watermark
area, we could merge our two headings:
    MOZILLA FIREFOX: trunk series

I think the <h2> needs to be smaller now. This will address some of the issues
in the boxy portlets.
/me tries 20px.
I think it is to small now
/me tries 22px.
I think this works. It gives us 6px difference between each heading.

> Our icon sprite [mis-]alignment is really killing us. It is adding a lot
> of clutter to the page by interrupting the flow of the lines ...

[Huw Wilkins (huwshimi)]

> We can consider 13px as ubuntu.com uses. But look at these other changes
> before deciding that 12px is too small.

Oh I'm quite happy with 12px. The change to regular makes this way less of an issue anyway.

> Ah. I see that the bug description is mis-aligned. And what ever is specifying
> the rule has the wrong margins, font, weight, and colour when compared with
> the other headings on the page.

This looks better. I wonder if it should be a h3 (or look like a h3). I just looks a little squashed in there now that the line height has been fixed for the widget.

> > Sidebar and content portlets h2s need more space below them.

Much better. There seems to be a situation in the sidebar where the h2 is not the first item in the portlet where it is too close to the text above it. E.g. if you view a bug and look in the subscribers portlet the Subscribers and Also notified headings need more space above them (the space below is great).

> Oh, the <h2> in the header jumps:
> https://launchpad.dev/firefox
> verses
> https://launchpad.dev/firefox/trunk
>
> I think I fixed this by specify the bottom margin. hmm. maybe the <h2>
> in the watermark (Mozilla Firefox) would look better if it was always
> the same height as a <h1>.

This is good now. Although it is still different for https://launchpad.dev/firefox (when the heading is a h1 rather than a h2).

> I think we need to user a smaller font because Lp's <h1>s contain user
> content. We do not control how large they can grow, and users have tailored
> names and titles to the space available. Since Lp's <h1> will *never* appear
> in content, unlike what the guidelines assume, We do not need them to make
> a large distinction from <h2>s.
>
> /me tries 30/34px.
> I like it

Me too.

> I think the <h2> needs to be smaller now. This will address some of the issues
> in the boxy portlets.
> /me tries 20px.
> I think it is to small now
> /me tries 22px.
> I think this works. It gives us 6px difference between each heading.

Looks good.

> WAIT! Now that the line-height of text is almost always 12/18px why does
> .sprite set padding? We may need special rules for h2 and h1 editing, and
> we have them...
> /me removes the sprite padding.
> LOOKS BETTER!
> I am sure you will want me to land this part of my branch.

Wow. That makes a huge difference. That's really great.

> I still want to remove the floating "see more" links in the portlets. We
> could land a branch to switch to the ">" style proposed in the guidelines.

Yeah those links aren't great. Particularly on a wide monitor. Not really sure what to do about them. I need to think about it a bit more.

> It was missing padding. I added padding, made the colour #999. The solid
> line looks like a hard divide. Portlets use the solid line mean new topic.
> I tried the dotted line. I think it looks better...
> ...I would like to remove the lines from the portlets, well I just want
> the boxes to go, but if lines must remain, I think dotted may look better.
> So I changed the border rule to be grey and dotted. I see that u1 is using
> dotted lines too.

This all looks great to me too.

Thanks for doing all this work it's really starting to come t...

[Curtis Hovey (sinzui)]

> > Ah. I see that the bug description is mis-aligned. And what ever is specifying
> > the rule has the wrong margins, font, weight, and colour when compared with
> > the other headings on the page.
>
> This looks better. I wonder if it should be a h3 (or look like a h3).
> I just looks a little squashed in there now that the line height has
> been fixed for the widget.

/me investigates what generates the markup.
I changed the markup to a h3 and revised to rule now that there are
fewer rules we need to override from lazr.

> > > Sidebar and content portlets h2s need more space below them.
>
> Much better. There seems to be a situation in the sidebar where the h2
> is not the first item in the portlet where it is too close to the text
> above it. E.g. if you view a bug and look in the subscribers portlet
> the Subscribers and Also notified headings need more space above them
> (the space below is great).

I see. The portlet h2:first-child selector needs to specify direct
descendant:
.portlet > h2:first-child
Done.

> > Oh, the <h2> in the header jumps:
> > https://launchpad.dev/firefox
> > verses
> > https://launchpad.dev/firefox/trunk
> >
> > I think I fixed this by specify the bottom margin. hmm. maybe the <h2>
> > in the watermark (Mozilla Firefox) would look better if it was always
> > the same height as a <h1>.
>
> This is good now. Although it is still different for
> https://launchpad.dev/firefox (when the heading is a h1 rather than a
> h2).

I did not make it the same height.
/me does
I merged the .watermark h2 and h1 rules. h2 was specify 6px for top
margin. They are now identical.

...

> > I still want to remove the floating "see more" links in the portlets. We
> > could land a branch to switch to the ">" style proposed in the guidelines.
>
> Yeah those links aren't great. Particularly on a wide monitor. Not
> really sure what to do about them. I need to think about it a bit
> more.

Yes. variable resolution and font size were the first concern when I saw
the design. I grew to dislike it when I implemented. The intent of the
titles, links, and lists in those portlets is to call out activities
that the user can contribute to. Page 25 of the Web Guidelines shows two
presentations. Making the heading a blue link would may the page
difficult to read. (Well making it the standard link colour is the
issue). The second example preserves the default text colour, replying
on the ">" and hover behaviour to signal that the user can see more. the
previous designs had the "more" link at the bottom of the listing. We
wanted to place the link into the heading so that the call to action was
prominent.

[Huw Wilkins (huwshimi)]

These changes are all good.

I'm not sure what to do about those links (I think they may be a different situation to the guidelines). I'm happy to have them dealt with as part of a different branch if you like.

review: Approve

=== modified file 'buildout-templates/bin/combine-css.in'
--- buildout-templates/bin/combine-css.in	2011-02-23 22:11:37 +0000
+++ buildout-templates/bin/combine-css.in	2011-03-01 04:51:52 +0000
@@ -23,7 +23,6 @@
 names = [
     'style.css',
     'lazr/build/yui/cssreset/reset.css',
-    'lazr/build/yui/cssfonts/fonts.css',
     # Use the old cssgrids instead of the new cssgrids.
     #'lazr/build/yui/cssgrids/grids.css',
     'cssgrids/grids.css',

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css.in'
--- lib/canonical/launchpad/icing/style-3-0.css.in	2011-02-25 22:09:46 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css.in	2011-03-01 04:51:52 +0000
@@ -5,35 +5,15 @@
       launchpad. Rules for just an application or a page do not belong
       in this file.
    2. Do not use IDs because they discourage reuse.
-   3. This style sheet depends on YUI-Font;
-      Only use these font percentages.
-      Pixels  Percent
-      10      77
-      11      85
-      12      93
-      13      100
-      14      108
-      15      116
-      16      123.1
-      17      131
-      18      138.5
-      19      146.5
-      20      153.9
-      21      161.6
-      22      167
-      23      174
-      24      182
-      25      189
-      26      197
-   4. Use these colors when defing using application colors.
-      * Launchpad-Gold: #F8C300
-      * Answers: #3840BE
-      * Blueprints: #3594BB
-      * Bugs: #9F2B33
-      * Code: #D18B39
-      * Translations: #BB3A84
-      * Registry: default (i.e. black)
-   5. Add rules to the appropriate section.
+   3. Only use these font-sizes for text people read. Users use the zoom to
+      scale fonts, and rendering is optimized for this behavior.
+      10px -- smallest text
+      12px -- body
+      14px -- navigation
+      16px -- h3
+      22px -- h2
+      30px -- h1
+   4. Add rules to the appropriate section.
       * Page layout
       * Block
       * Inline
@@ -105,6 +85,9 @@
     border-top: 1px solid #EBEBEB;
     padding: 1em 0;
     }
+.portlet > h2:first-child {
+    margin-top: 0;
+    }
 .top-portlet {
     padding: 0 0 0.5em 0;
     margin: 0 0 1em;
@@ -139,10 +122,11 @@
     width: auto !important;
     min-width: 340px;
     }
-
-html, body {
-    font-family: UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
-    font-size: 93%;
+body {
+    font-family: 'UbuntuBeta Regular', Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
+    font-size: 12px;
+    line-height: 18px; /* The same as the sprite height. */
+    color: #333;
     }
 body.private {
     /* It must be obvious to the user that the context is private */
@@ -152,22 +136,27 @@
     /* stops floats dropping in IE 5.5/6 */
     word-wrap: break-word;
     }
+
 h1, h2, h3, h4, h5, h6 {
     background: none;
     clear: left;
     }
 h1 {
     clear: none;
-    padding-top: 6px; /* An offset from the logo. */
-    font-size: 197%;
+    font-size: 30px;
+    line-height: 34px;
     }
 h2 {
-    margin-bottom: 0.3em;
-    margin-top: 0.3em;
-    font-size: 123.1%;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-size: 22px;
+    line-height: 26px;
     }
 h3 {
-    font-size: 108%;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-size: 16px;
+    line-height: 20px;
     }
 p {
     width: auto;
@@ -185,7 +174,6 @@
     }
 pre, code, samp, tt, .console {
     font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
-    font-size: 93%;
     margin-bottom: 0.8em;
     }
 pre.wrap {
@@ -234,11 +222,9 @@
     }
 div.profiling_info h2 {
     border-bottom: 3px solid gray;
-    color: black;
     }
 div.profiling_info h3 {
     border-bottom: 1px solid gray;
-    color: black;
     }
 div.profiling_info p {
     color: black;
@@ -246,7 +232,7 @@
 div.hide_reveal_profiling {
     text-decoration: underline;
     color: #093;
-    font-size: 85%;
+    font-size: 10px;
     }
 
 /* =========================
@@ -300,10 +286,6 @@
 strong {
     font-weight: bold;
     }
-strong em {
-    font-style: normal;
-    color: #353535;
-    }
 .title {
     font-weight: bold;
     }
@@ -332,9 +314,6 @@
 dd {
     margin-bottom: .8em;
     }
-dl.faq dt {
-    font-weight: bold;
-    }
 dl.faq dd {
     margin: 1em 0 2em 4em;
     }
@@ -397,9 +376,6 @@
     display: inline;
     margin: 0 0 0 0;
     }
-ul.cross-reference {
-    font-size: 123.1%;
-    }
 .bulleted {
     margin-bottom: 0.5em;
     }
@@ -461,8 +437,6 @@
     }
 .portlet dd {
     margin-bottom: 0.5em;
-    font-size: 85%;
-    color: #484848;
     }
 .portlet dl strong {
     color: #000;
@@ -631,7 +605,6 @@
 table.listing {
     margin: 0;
     width: 100%;
-    font-size: 93%;
     }
 table.listing, table.listing tbody, table.listing td.end-of-section {
     border-bottom: 1px solid #d2d2d2;
@@ -667,7 +640,6 @@
     padding: 0;
     }
 table.listing thead th, table.listing tr.thead th {
-    font-size: 108%;
     white-space: nowrap;
     }
 table.listing td {
@@ -690,7 +662,6 @@
     padding: 0.25em;
     }
 table.listing .section-heading {
-    font-size: 108%;
     border: none;
     padding-top: 1.5em;
     }
@@ -701,7 +672,6 @@
     padding: 0 0.5em 0.5em 0;
     }
 table.summary th {
-    color: #555;
     font-weight: normal;
     }
 table.summary caption {
@@ -908,7 +878,6 @@
 .long legend {
     color: #666;
     font-weight: bold;
-    font-size: 123.1%;
     }
 fieldset.collapsible {
     /* Collapsible sections
@@ -942,7 +911,7 @@
     margin-bottom: 0;
     }
 h1 .edit {
-    font-size: 50%;
+    font-size: 12px;
     position: relative;
     top: -3px;
     margin-left: 0.5em;
@@ -951,7 +920,7 @@
     padding-right: 288px;
     }
 h1 .yui3-ieditor-errors {
-    font-size: 0.5em;
+    font-size: 12px;
     }
 .lazr-multiline-edit .yui3-ieditor {
     padding-right: 0;
@@ -959,6 +928,11 @@
 .lazr-multiline-edit textarea {
     max-width: inherit;
     }
+.lazr-multiline-edit .clearfix h3 {
+    /* Undo the damage done by lazr. */
+    font-family: 'UbuntuBeta Regular', Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
+    line-height: 12px;
+    }
 .widget-hd.js-action {
     /* The js-action class is also used for non-links, for example, with
        expand/collapse sections. */
@@ -1041,7 +1015,6 @@
     background: #d4e8ff url('/+icing/blue-fade-to-grey');
     border: solid #666;
     border-width: 1px 2px 2px 1px;
-    color: black;
     padding: 5px 5px 5px 5px;
     width:44em;
     }
@@ -1078,7 +1051,6 @@
     }
 .important-notice a {
     font-weight: bold;
-    color: black;
     text-decoration: underline;
     }
 
@@ -1088,7 +1060,6 @@
    These appear to be 3.0 specific.
 */
 div.see-all {
-    font-size: 123.1%; /* Same as a h2 */
     text-align:right;
     }
 span.nolink {
@@ -1100,7 +1071,7 @@
 .see-all a {
     padding-left: 8px;
     background: inherit;
-    font-size: 72%;
+    font-size: 12px;
     text-decoration: underline;
     }
 .unseen {
@@ -1124,25 +1095,17 @@
     margin: 0 5px 0 0;
     }
 .registered {
-    font-size: 85%;
     color: #666;
     }
 .description {
     clear: both;
-    font-size: 100%;
-    }
-.application-summary {
-    font-size: 123.1%;
     }
 .search-results {
     margin-top: 1em;
     }
-p.search-results {
-    font-size: 93%;
-    }
 .top-portlet .summary {
     margin: 0 0 1em 0;
-    font-size: 138.5%;
+    font-size: 16px; /* Same as h3, this appears under a h1. */
     }
 .main-portlet {
     margin: 1em 0 1em 0;
@@ -1180,7 +1143,7 @@
     float: left;
     margin: 0.2em 1.2em 0 0;
     color: #666;
-    font-size: 77%;
+    font-size: 10px;
     }
 div.watermark-apps-portlet {
     clear: both;
@@ -1196,19 +1159,19 @@
     margin: 0 1.5em 0 0;
     }
 div.watermark-apps-portlet h1, div.watermark-apps-portlet h2 {
-    padding-top: 0.1em;
-    margin-bottom: 0.8em;
+    margin-top: 0px;
+    margin-bottom: 6px;
     color: #000000;
     font-weight: bold;
+    font-size: 30px;
+    line-height: 34px;
     clear: none;
     }
-div.watermark-apps-portlet h1 {
-    margin-bottom: 0.2em;
-    padding-top: 0;
-    }
 div.watermark-apps-portlet span img {
     float: none;
     margin: 0;
+    font-weight: bold;
+    clear: none;
     }
 .watermark-apps-portlet li {
     display:inline;
@@ -1252,15 +1215,14 @@
 .registering {
     /* Registered slot */
     margin: .5em 0 1em 0;
-    font-style: italic;
-    font-size: 77%;
+    font-size: 10px;
     color: #666;
     }
 .breadcrumbs {
     margin-left: 0;
     list-style-type: none;
     clear: both;
-    font-size: 77%;
+    font-size: 10px;
     }
 .breadcrumbs li {
     display:inline;
@@ -1293,7 +1255,7 @@
     }
 #logincontrol input[type='submit'] {
     /* The button lacks the right margin that buttons usually have: */
-    font-size: 77%;
+    font-size: 10px;
     margin-right: 0;
     }
 
@@ -1304,7 +1266,6 @@
 */
 .side {
     padding: 0.5em;
-    color: #484848;
     }
 .side .portlet {
     width: 90%;
@@ -1315,11 +1276,13 @@
     -khtml-border-radius: 5px;
     border-radius: 5px;
     padding: 0.5em;
-    color: #484848;
     background: #fbfbfb;
     }
+.side h2 {
+    font-size: 16px; /* BAD: the markup should be h3? */
+    line-height: 20px;
+    }
 .side ul {
-    color: #484848;
     background: #fbfbfb;
     }
 #privacy.private {
@@ -1343,7 +1306,6 @@
     padding: 6%;
     padding-right: 40px;
     color: #fff;
-    font-size: 93%;
     }
 .downloads .version {
     -moz-border-radius: 5px 5px 0 0;
@@ -1368,7 +1330,6 @@
 .involvement li {
     border-top: 1px solid #d0d0d0;
     padding: 0;
-    font-size: 108%;
     font-weight: bold;
     }
 .involvement a {
@@ -1409,7 +1370,6 @@
     border-bottom: 1px solid #d0d0d0;
     }
 .announcement .registered {
-    font-size: 93%;
     margin-top: -2px;
     }
 
@@ -1471,14 +1431,6 @@
    Colors and fonts
 */
 
-h1, h2, h3,
-table.listing thead,
-#homepage-stats strong,
-#application-footer strong,
-#application-summary strong {
-    color: #5a5a5a;
-}
-
 .exception {
     color: #cc0000;
     }
@@ -1784,27 +1736,26 @@
     }
 
 .discreet, .lesser, .duplicate-details {
-    font-size: 85%;
+    font-size: 10px;
     }
 pre.changelog, table.diff,
 .bug-comment, .bug-activity, .codereviewcomment {
-    font-size: 93%;
     font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
     }
 .cloud-size-smallest {
-    font-size: 77%;
+    font-size: 10px;
     }
 .cloud-size-small {
-    font-size: 85%;
+    font-size: 12px;
     }
 .cloud-size-medium {
-    font-size: 131%;
+    font-size: 14px;
     }
 .cloud-size-large {
-    font-size: 167%;
+    font-size: 16px;
     }
 .cloud-size-largest {
-    font-size: 197%;
+    font-size: 18px;
     }
 .cloud-dark {
     color: #00f;
@@ -1822,7 +1773,6 @@
 div#edit-description,
 div#edit-commit_message {
     font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
-    font-size: 93%;
     margin: 1em 0;
     }
 
@@ -1836,12 +1786,15 @@
    Sprites
 */
 .sprite {
-    padding: 2px 0 5px 18px;
+    padding: 0px 0 0px 18px;
     line-height: 18px;
     }
 .sprite-after {
     padding: 2px 18px 0 0;
     }
+h1 a.sprite, h2 a.sprite, h3 a.sprite {
+    font-size: 12px;
+    }
 .icon-only {
     border: 0;
     padding: 0;
@@ -2416,11 +2369,7 @@
 /* =====
    Soyuz
 */
-ul.latest-ppa-updates .duration, ul.latest-ppa-updates .build-details {
-    /* For the Latest updates portlet
-      at https://launchpad.dev/~cprov/+archive/ppa */
-    font-size: 75%;
-    }
+
 ul.latest-ppa-updates li {
     padding: 3px;
     background-repeat: no-repeat;

=== modified file 'lib/canonical/launchpad/icing/style.css'
--- lib/canonical/launchpad/icing/style.css	2011-02-23 22:11:37 +0000
+++ lib/canonical/launchpad/icing/style.css	2011-03-01 04:51:52 +0000
@@ -33,8 +33,11 @@
 .green {color: green;}
 .red {color: red;}
 
-.helpwanted {background-color: #fafca9; color: black; border: 1px solid black;
-    padding: 0.5em; font-size: smaller; padding-left: 3em
+.helpwanted {
+    background-color: #fafca9;
+    border: 1px solid black;
+    padding: 0.5em;
+    padding-left: 3em;
 }
 .whiteboard {
   color: #666;
@@ -77,7 +80,6 @@
 
 .official-tags-layout-table th {
   text-align: left;
-  font-size: 1.25em;
   padding-bottom: 5px;
 }
 
@@ -113,8 +115,7 @@
 }
 
 .official-tags-layout-table ul .tag-used-count {
-  color: #888;
-  font-size: 75%;
+  color: #666;
 }
 
 .official-tags-layout-table .list-scrollable-area {
@@ -136,7 +137,6 @@
 
 .official-tag-error-message-header {
   font-weight: bold;
-  font-size: 1.25em;
   margin-left: 1em;
 }
 
@@ -172,9 +172,8 @@
 
 /* == Application-specific styles == */
 
-.description {font-size: 1.125em;}
 /* person/project/bug descriptions, bug comments */
-.report h2 {font-size: 1.4em;}
+.report h2 {font-size: 24px;}
 .boardComment, .boardCommentSummary {border: 1px solid #ddd;}
 .boardComment {margin: 1em 0 1.5em;}
 .boardCommentSummary {margin: 0.3em 0 0.3em 0;}
@@ -209,10 +208,10 @@
   margin-bottom: 0.5em;
   margin-top: 0.5em;
 }
-.boardCommentContent { line-height: 1.5em;}
+.boardCommentContent { line-height: 1.4em;}
 .boardCommentFooter {
   background-color: #eee;
-  color: #555;
+  color: #666;
   padding: 0.5em 12px;
   border-top: 1px solid #ddd;
 }
@@ -299,7 +298,7 @@
 .update-in-progress-message {
     background: url(/@@/spinner) center left no-repeat;
     padding-left: 18px;
-    color: #999;
+    color: #666;
 }
 
 a.update-retry {
@@ -358,7 +357,6 @@
     padding: 0 0 0 15px;
     margin:0;
     cursor: pointer;
-    font-size: 100%;
 }
 form.archive-subscription-activation button:hover {
     text-decoration: underline;
@@ -371,7 +369,7 @@
     padding: 5px;
     border: solid gray;
     border-width: 1px;
-    font: 100% monospace;
+    font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
     -moz-border-radius: 5px;
     -o-border-radius: 5px;
     -webkit-border-radius: 5px;
@@ -435,11 +433,9 @@
   -webkit-border-radius: 5px;
 }
 
-.pending-update h3{
-  color: black;
+.pending-update h3 {
   font-weight: bold;
   text-align: center;
-  font-size: 160%;
   margin-top: 0.5em;
 }
 
@@ -462,9 +458,6 @@
   margin: 0;
 }
 
-.yui-diff-overlay table.diff {
-  font-size: 98%;
-}
 #proposal-summary td, #proposal-summary th { padding-bottom: 2px; }
 table.diff {
    white-space: pre-wrap;
@@ -530,7 +523,6 @@
 
 .highlight-message {
   margin: 2em 0 2em 0;
-  font-size: 120%;
 }
 
 .patches-view-cell {
@@ -566,20 +558,11 @@
 
 .central {
   clear: left; /* Bugs FP */
-  font-size: 1.125em;
   margin: 0 auto 1em;
   padding: 0.5em 0; /* FP should fit in ~750px; Bugs FP */
   width: auto;
 }
-.central input {
-  font-size: 1em;
-}
-.front_page label {
-  color: #303030;
-  font-size: 1.2em;
-}
 #application-summary, #application-footer, #page-summary {
-  font-size: 1.2em;
   line-height: 1.4em;
   margin-top: 0;
 }
@@ -665,14 +648,14 @@
 #search-results .upper-batch-nav, .freeform-batch .upper-batch-nav {
   border-top: 1px solid #d2d2d2;
   margin-top: 2.5em;
-  margin-bottom: 10px;
+  margin-bottom: 1em;
   background: #e7effc;
 }
 
 #search-results .lower-batch-nav, .freeform-batch .lower-batch-nav  {
   margin-top: 1.5em;
   border-top: 1px solid #d2d2d2;
-  margin-bottom: 10px;
+  margin-bottom: 1em;
   background: #e7effc;
 }
 

=== modified file 'lib/lp/app/doc/lazr-js-widgets.txt'
--- lib/lp/app/doc/lazr-js-widgets.txt	2011-02-10 01:57:55 +0000
+++ lib/lp/app/doc/lazr-js-widgets.txt	2011-03-01 04:51:52 +0000
@@ -132,7 +132,7 @@
     >>> print widget()
     <div id="edit-description" class="lazr-multiline-edit">
       <div class="clearfix">
-        <h2>A title</h2>
+        <h3>A title</h3>
       </div>
       <div class="yui3-editable_text-text"><p>short description</p></div>
     </div>
@@ -154,7 +154,7 @@
           <a class="yui3-editable_text-trigger sprite edit"
              href="http://launchpad.dev/~eric/+archive/ppa/+edit"></a>
         </div>
-        <h2>A title</h2>
+        <h3>A title</h3>
       </div>
       <div class="yui3-editable_text-text"><p>short description</p></div>
       <script>...</script>

=== modified file 'lib/lp/app/templates/root-index.pt'
--- lib/lp/app/templates/root-index.pt	2011-02-23 22:11:37 +0000
+++ lib/lp/app/templates/root-index.pt	2011-03-01 04:51:52 +0000
@@ -12,29 +12,12 @@
           width: 90%;
           max-width: 80em;
       }
-      .homepage-portlet {
-          margin-bottom: 3em;
-          line-height: 140%;
-      }
-      .homepage-portlet h2 {
-          border-bottom: 1px solid;
-          margin-top: 2em;
-          font-size: 167%;
-          padding-bottom: 2px;
-          }
-      .homepage-whatslaunchpad h2 {
-          font-size: 189%;
-          font-weight: bold;
-          line-height: 110%;
-          margin-bottom: 0.5em;
-      }
       #homepage-whatslaunchpad ul {
           margin-left: 1em;
           margin-bottom: 0.5em;
       }
       #homepage-whatslaunchpad ul,
       #homepage-whatslaunchpad-tour {
-          font-size: 116%;
           font-weight: bold;
       }
       #homepage-stats {
@@ -42,7 +25,6 @@
           margin: auto;
           padding-top: 0.5em;
           color: gray;
-          font-size: 83.3%
       }
       #homepage-blogposts {
           padding-right: 4em;
@@ -51,7 +33,6 @@
           padding-top: 0.5em;
           }
       .featured-project-top h3 {
-          font-size: 131%;
           font-weight: bold;
           }
       .featured-project-top h3 img {
@@ -60,7 +41,8 @@
       .featured-project-top p {
           margin-top: 0.5em;
           margin-bottom: 1em;
-          border-bottom: 1px solid #888888;
+          padding-bottom: .5em;
+          border-bottom: 1px dotted #999;
           }
     </style>
   </metal:head>
@@ -76,14 +58,14 @@
 
       <div id="homepage" class="homepage">
 
-        <div class="top-portlet" style="border-bottom: 1px solid;">
+        <div class="top-portlet" style="border-bottom: 1px dotted #999;">
           <img src="/@@/launchpad-logo-and-name.png"
                alt=""
                style="margin: 0 9em 1em 0"/>
         </div>
 
         <div class="yui-g">
-          <div class="yui-u first">
+          <div class="yui-u first" style="margin-top: 1.5em;">
             <div class="homepage-whatslaunchpad"
                  tal:condition="not:view/user" tal:content="cache:anonymous">
               <h2><span class="launchpad-gold">Launchpad</span> is a software collaboration platform that provides:</h2>

=== modified file 'lib/lp/app/templates/text-area-editor.pt'
--- lib/lp/app/templates/text-area-editor.pt	2011-02-22 00:29:59 +0000
+++ lib/lp/app/templates/text-area-editor.pt	2011-03-01 04:51:52 +0000
@@ -1,4 +1,6 @@
-<div tal:attributes="id view/content_box_id;
+<div
+  xmlns:tal="http://xml.zope.org/namespaces/tal"
+  tal:attributes="id view/content_box_id;
                      class view/tag_class">
   <div class="clearfix">
     <div class="edit-controls" tal:condition="view/can_write">
@@ -6,8 +8,8 @@
       <a tal:attributes="href view/edit_url"
          class="yui3-editable_text-trigger sprite edit"></a>
     </div>
-    <h2 tal:condition="view/title"
-        tal:content="view/title">the title</h2>
+    <h3 tal:condition="view/title"
+        tal:content="view/title">the title</h3>
   </div>
   <div class="yui3-editable_text-text"
        tal:content="structure view/value">some text</div>
@@ -35,5 +37,5 @@
             }
             lpns.widgets['${view/content_box_id}'] = widget;
         });
-"/>
+"></script>
 </div>

=== modified file 'lib/lp/registry/templates/productrelease-portlet-data.pt'
--- lib/lp/registry/templates/productrelease-portlet-data.pt	2011-02-23 22:11:37 +0000
+++ lib/lp/registry/templates/productrelease-portlet-data.pt	2011-03-01 04:51:52 +0000
@@ -67,9 +67,7 @@
   </div>
 
   <div class="top-portlet">
-    <h2 style="float:left">Release notes &nbsp;</h2>
-    <a tal:replace="structure view/release/menu:context/edit/fmt:icon" />
-    <div style="clear:both"></div>
+    <h2>Release notes&nbsp;<a tal:replace="structure view/release/menu:context/edit/fmt:icon" /></h2>
 
     <div id="release-notes"
       tal:content="structure view/release/release_notes/fmt:text-to-html"
@@ -81,9 +79,7 @@
       <em>This release does not have release notes.</em>
     </p>
 
-    <h2 style="float:left">Changelog &nbsp;</h2>
-    <a tal:replace="structure view/release/menu:context/edit/fmt:icon" />
-    <div style="clear:both"></div>
+    <h2>Changelog&nbsp;<a tal:replace="structure view/release/menu:context/edit/fmt:icon" /></h2>
 
     <fieldset class="collapsible collapsed" style="padding: 0px;"
       tal:condition="view/release/changelog">