| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
Note: I forgot to warn against inline CSS. It's (become) bad practice and may
lead to design inconsistency on secure sites that explicitly forbid inline CSS
(to avoid some classes of attacks where attackers inject CSS rules). It also
breaks separation of semantic content and visual design.
I.e., the site should look good without style at all (try "View > Page Style >
no style" on your browser).
Here come the CSS changes:
1. Replace `padding-top` with `line-height`: it gives a similar result, but the
original text appears in the middle of the logo...
2. Which brings to `color: transparent` to remove the text without removing it
for text-based browsers (including screen readers)
3. Apply `.tagline` style to `body>header>h2` to keep consistency with the proposed design
4. Apply inline CSS to the `.tagline` class (now uniquely used by the tagline).
5. Remove the `div.padding` and use a `padding-bottom` on the header instead
6. Apply `div.grid-container` to `main>article` instead
7. Apply `.grid-container>section` to `main>article>section` instead
8. Apply `.button` to `main nav a` instead
9. Remove `div[name=padding]` and apply margin to `aside>section`
Here we match the proposed design almost to the pixel.
|
