OLD | NEW |
---|---|
1 /* Reset */ | 1 /* Reset */ |
2 body, h1, h2, h3, h4, li, ol, p, pre, section, ul { | 2 body, h1, h2, h3, h4, li, ol, p, pre, section, ul { |
3 margin: 0; | 3 margin: 0; |
4 padding: 0; | 4 padding: 0; |
5 } | 5 } |
6 | 6 |
7 body { | 7 body { |
8 font-family: Georgia, serif; | 8 font-family: Georgia, serif; |
9 background: #e4e4e4; | 9 background: #e8e8e8; |
10 color: #333; | 10 color: #333; |
11 background-image: url('button-textured.png'); | |
12 background-repeat: repeat; | |
11 } | 13 } |
12 | 14 |
13 h1 { | 15 h1 { |
14 font: 700 22px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 16 font: 700 22px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
15 sans-serif; | 17 sans-serif; |
16 margin: 0 0 22px 0; | 18 margin: 0 0 22px 0; |
17 } | 19 } |
18 | 20 |
19 h2 { | 21 h2 { |
20 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 22 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
(...skipping 27 matching lines...) Expand all Loading... | |
48 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; | 50 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; |
49 color: hsl(220, 20%, 30%); | 51 color: hsl(220, 20%, 30%); |
50 background: hsl(220, 20%, 95%); | 52 background: hsl(220, 20%, 95%); |
51 margin: 22px 0; | 53 margin: 22px 0; |
52 padding: 0 4px; | 54 padding: 0 4px; |
53 border-radius: 4px; | 55 border-radius: 4px; |
54 overflow: hidden; | 56 overflow: hidden; |
55 } | 57 } |
56 | 58 |
57 a { | 59 a { |
58 color: hsl(220, 50%, 50%); | 60 color: #15c; |
59 text-decoration: none; | 61 text-decoration: none; |
60 } | 62 } |
61 | 63 |
62 a:hover { | 64 a:hover { |
63 color: hsl(220, 100%, 70%); | 65 text-decoration: underline; |
64 } | 66 } |
65 | 67 |
66 a:visited { | 68 a:visited { |
67 color: hsl(270, 50%, 40%); | 69 color: #15c; |
68 } | 70 } |
69 | 71 |
70 li { | 72 li { |
71 font-size: 16px; | 73 font-size: 16px; |
72 line-height: 22px; | 74 line-height: 22px; |
73 } | 75 } |
74 | 76 |
75 ol, ul { | 77 ol, ul { |
76 padding-left: 22px; | 78 padding-left: 22px; |
77 } | 79 } |
78 | 80 |
79 hr { | 81 hr { |
80 border: none; | 82 border: none; |
81 height: 1px; | 83 height: 1px; |
82 background: #ccc; | 84 background: #ccc; |
83 margin: 22px 0 21px 0; | 85 margin: 22px 0 21px 0; |
84 } | 86 } |
85 | 87 |
86 hr + h2 { | 88 hr + h2 { |
87 margin-top: 21px; /* To compensate for the thickness of the hr. */ | 89 margin-top: 21px; /* To compensate for the thickness of the hr. */ |
88 } | 90 } |
89 | 91 |
90 .page { | 92 .page { |
Emily Fortuna
2011/12/21 18:27:25
Is it possible to make the page go all the way dow
Bob Nystrom
2011/12/21 18:34:20
It is, but I actually kind of like the way it look
| |
91 max-width: 960px; /* 43 x 22px */ | 93 max-width: 1000px; /* 43 x 22px */ |
92 background: #fff; | 94 background: #fff; |
93 margin: 0 auto 22px auto; | 95 margin: 0 auto 22px auto; |
94 border: solid 1px #ccc; | |
95 border-top: none; | 96 border-top: none; |
97 box-shadow: 0 0 50px #888; | |
96 } | 98 } |
97 | 99 |
98 .nav { | 100 .nav { |
99 float: left; | 101 float: left; |
100 width: 263px; /* 12 x 22px - 1 for border */ | 102 width: 263px; /* 12 x 22px - 1 for border */ |
101 padding: 22px 22px; | 103 padding: 22px 22px; |
102 overflow: hidden; | 104 overflow: hidden; |
103 background: #f4f4f4; | 105 background: #f4f4f4; |
104 border-right: solid 1px #ccc; | 106 border-right: solid 1px #ccc; |
105 } | 107 } |
(...skipping 193 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
299 } | 301 } |
300 | 302 |
301 p { | 303 p { |
302 border-left: solid 4px purple; | 304 border-left: solid 4px purple; |
303 } | 305 } |
304 | 306 |
305 section { | 307 section { |
306 border-left: solid 4px gray; | 308 border-left: solid 4px gray; |
307 } | 309 } |
308 */ | 310 */ |
OLD | NEW |