| 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 } | 11 background-image: url('body-bg.png'); |
| 12 | 12 background-repeat: repeat; |
| 13 h1 { | |
| 14 font: 700 22px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 15 sans-serif; | |
| 16 margin: 0 0 22px 0; | |
| 17 } | 13 } |
| 18 | 14 |
| 19 h2 { | 15 h2 { |
| 20 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 16 font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| 21 sans-serif; | 17 sans-serif; |
| 22 margin: 22px 0; | 18 margin: 0 0 22px 0; |
| 23 } | 19 } |
| 24 | 20 |
| 25 h3 { | 21 h3 { |
| 26 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 22 font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| 27 sans-serif; | 23 sans-serif; |
| 28 color: #999; | 24 color: #999; |
| 29 margin: 22px 0 0 0; | 25 margin: 22px 0 0 0; |
| 30 } | 26 } |
| 31 | 27 |
| 32 h4 { | 28 h4 { |
| (...skipping 15 matching lines...) Expand all Loading... |
| 48 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; | 44 font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; |
| 49 color: hsl(220, 20%, 30%); | 45 color: hsl(220, 20%, 30%); |
| 50 background: hsl(220, 20%, 95%); | 46 background: hsl(220, 20%, 95%); |
| 51 margin: 22px 0; | 47 margin: 22px 0; |
| 52 padding: 0 4px; | 48 padding: 0 4px; |
| 53 border-radius: 4px; | 49 border-radius: 4px; |
| 54 overflow: hidden; | 50 overflow: hidden; |
| 55 } | 51 } |
| 56 | 52 |
| 57 a { | 53 a { |
| 58 color: hsl(220, 50%, 50%); | 54 color: #15c; |
| 59 text-decoration: none; | 55 text-decoration: none; |
| 60 } | 56 } |
| 61 | 57 |
| 62 a:hover { | 58 a:hover { |
| 63 color: hsl(220, 100%, 70%); | 59 text-decoration: underline; |
| 64 } | 60 } |
| 65 | 61 |
| 66 a:visited { | 62 a:visited { |
| 67 color: hsl(270, 50%, 40%); | 63 color: #15c; |
| 68 } | 64 } |
| 69 | 65 |
| 70 li { | 66 li { |
| 71 font-size: 16px; | 67 font-size: 16px; |
| 72 line-height: 22px; | 68 line-height: 22px; |
| 73 } | 69 } |
| 74 | 70 |
| 75 ol, ul { | 71 ol, ul { |
| 76 padding-left: 22px; | 72 padding-left: 22px; |
| 77 } | 73 } |
| 78 | 74 |
| 79 hr { | 75 hr { |
| 80 border: none; | 76 border: none; |
| 81 height: 1px; | 77 height: 1px; |
| 82 background: #ccc; | 78 background: #ccc; |
| 83 margin: 22px 0 21px 0; | 79 margin: 22px 0 21px 0; |
| 84 } | 80 } |
| 85 | 81 |
| 86 hr + h2 { | 82 hr + h2 { |
| 87 margin-top: 21px; /* To compensate for the thickness of the hr. */ | 83 margin-top: 21px; /* To compensate for the thickness of the hr. */ |
| 88 } | 84 } |
| 89 | 85 |
| 90 .page { | 86 .page { |
| 91 max-width: 960px; /* 43 x 22px */ | 87 max-width: 1000px; |
| 92 background: #fff; | 88 background: #fff; |
| 93 margin: 0 auto 22px auto; | 89 margin: 0 auto 22px auto; |
| 94 border: solid 1px #ccc; | 90 border: solid 1px #ccc; |
| 95 border-top: none; | 91 border-top: none; |
| 92 box-shadow: 0 0 50px #888; |
| 93 |
| 94 background-image: url('content-bg.png'); |
| 95 background-repeat: repeat-y; |
| 96 } |
| 97 |
| 98 .header { |
| 99 background: #333; |
| 100 background-image: url('header-bg.png'); |
| 101 height: 44px; |
| 102 color: hsl(0, 0%, 50%); |
| 103 font: 400 15px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| 104 sans-serif; |
| 105 } |
| 106 |
| 107 .header .logo { |
| 108 background-image: url('dart-logo-small.png'); |
| 109 width: 66px; |
| 110 height: 44px; |
| 111 float: left; |
| 112 } |
| 113 |
| 114 .header a { |
| 115 color: hsl(0, 0%, 80%); |
| 116 } |
| 117 |
| 118 .header a:hover { |
| 119 color: hsl(0, 0%, 100%); |
| 96 } | 120 } |
| 97 | 121 |
| 98 .nav { | 122 .nav { |
| 99 float: left; | 123 float: left; |
| 100 width: 263px; /* 12 x 22px - 1 for border */ | 124 width: 263px; /* 12 x 22px - 1 for border */ |
| 101 padding: 22px 22px; | 125 padding: 0 22px; |
| 102 overflow: hidden; | 126 overflow: hidden; |
| 103 background: #f4f4f4; | 127 background: #f4f4f4; |
| 104 border-right: solid 1px #ccc; | 128 border-right: solid 1px #ccc; |
| 105 } | 129 } |
| 106 | 130 |
| 107 .nav h2 { | 131 .nav h2 { |
| 108 font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', | 132 font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| 109 sans-serif; | 133 sans-serif; |
| 110 margin: 0 -21px; | 134 margin: 0 -21px; |
| 111 padding: 11px 22px; | 135 padding: 11px 22px; |
| (...skipping 187 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 299 } | 323 } |
| 300 | 324 |
| 301 p { | 325 p { |
| 302 border-left: solid 4px purple; | 326 border-left: solid 4px purple; |
| 303 } | 327 } |
| 304 | 328 |
| 305 section { | 329 section { |
| 306 border-left: solid 4px gray; | 330 border-left: solid 4px gray; |
| 307 } | 331 } |
| 308 */ | 332 */ |
| OLD | NEW |