Skip to content

Commit bfcd8bd

Browse files
necolasnecolas
committed
Project page: update copy and realign
1 parent f501de7 commit bfcd8bd

File tree

2 files changed

+104
-81
lines changed

2 files changed

+104
-81
lines changed

‎index.html‎

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width">
66
<title>Normalize.css: Make browsers render all elements more consistently.</title>
77
<link rel="stylesheet" href="style.css">
88
</head>
@@ -15,59 +15,62 @@
1515
<div id="container">
1616

1717
<h1><a href="http://github.com/necolas/normalize.css">normalize.css</a></h1>
18-
18+
1919
<p>Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.</p>
2020

2121
<h2>What does it do?</h2>
2222
<ul>
2323
<li><strong>Preserves useful defaults</strong>, unlike many CSS resets.</li>
24-
<li><strong>Normalizes styles</strong> for a wide range of elements.</li>
24+
<li><strong>Normalizes styles</strong> for a wide range of elements (including HTML5).</li>
2525
<li><strong>Corrects bugs</strong> and common browser inconsistencies.</li>
2626
<li><strong>Improves usability</strong> with subtle improvements.</li>
2727
<li><strong>Explains what code does</strong> using detailed comments.</li>
2828
</ul>
29-
29+
3030
<div class="demo">
3131
<a class="button" href="demo.html">Check out the demo</a>
3232
<p><a href="https://github.com/necolas/normalize.css/raw/master/normalize.css">Get the normalize.css file</a></p>
3333
</div>
34-
35-
<h2>How to use it</h2>
36-
<p>You are encouraged to read, edit, customise, add, and trim rulesets or styles from normalize.css on a per project basis.</p>
37-
<p>The normalize.css file is not intended to be a mysterious "black box" that is included in a project and then ignored. It should be used as a customisable starting point on any project.</p>
3834

39-
<h2>Browser support</h2>
40-
<p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p>
41-
42-
<h2>Source code</h2>
43-
<p>Available on GitHub: <a href="http://github.com/necolas/normalize.css">necolas/normalize.css</a></p>
44-
<p>Download it in either <a href="http://github.com/necolas/normalize.css/zipball/master">zip</a> or <a href="http://github.com/necolas/normalize.css/tarball/master">tar</a> formats.</p>
45-
<p>Clone the project with <a href="http://git-scm.com">Git</a> by running:</p>
46-
<pre>$ git clone git://github.com/necolas/normalize.css.git</pre>
47-
48-
<h2>Acknowledgements</h2>
49-
<p>Normalize.css is a project by Nicolas Gallagher and Jonathan Neal.</p>
50-
<p>Detailed information on default UA styles: <a href="http://iecss.com">Internet Explorer User Agent Style Sheets</a> and <a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm">CSS2.1 User Agent Style Sheet Defaults</a></p>
51-
5235
<div class="share-bar">
5336
<div class="share-opt">
54-
<a class="twitter-share-button"
55-
href="http://twitter.com/share"
56-
data-count="vertical"
37+
<a class="twitter-share-button"
38+
href="http://twitter.com/share"
39+
data-count="vertical"
5740
data-text="Checking out normalize.css"
58-
data-via="necolas"
41+
data-via="necolas"
5942
data-related="jon_neal">Tweet</a>
6043
</div>
61-
44+
6245
<div class="share-opt">
63-
<g:plusone size="tall"></g:plusone>
46+
<div class="g-plusone" data-size="tall"></div>
6447
</div>
6548

6649
<div class="share-opt">
67-
<fb:like href="" send="false" layout="box_count" width="40" show_faces="false" font=""></fb:like>
50+
<div class="fb-like" data-send="false" data-width="40" data-layout="box_count" data-show-faces="false"></div>
6851
</div>
6952
</div>
7053

54+
<h2>Browser support</h2>
55+
<p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p>
56+
57+
<h2>How do I use it?</h2>
58+
<p>Normalize.css is intended to be used as an alternative to CSS resets. It's suggested that you read the <code>normalize.css</code> file and consider customising it to meet your needs.</p>
59+
60+
<h2>Who uses it?</h2>
61+
<ul>
62+
<li><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
63+
<li><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
64+
<li><a href="http://css-tricks.com/">CSS Tricks</a></li>
65+
</ul>
66+
67+
<h2>Source code</h2>
68+
<p>Available on GitHub: <a href="http://github.com/necolas/normalize.css">necolas/normalize.css</a></p>
69+
<pre>$ git clone git://github.com/necolas/normalize.css.git</pre>
70+
71+
<h2>Acknowledgements</h2>
72+
<p>Normalize.css is a project by Nicolas Gallagher and Jonathan Neal. Detailed information on default UA styles: <a href="http://iecss.com">Internet Explorer User Agent Style Sheets</a> and <a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm">CSS2.1 User Agent Style Sheet Defaults</a></p>
73+
7174
<div class="footer">
7275
<p>A project by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>.</p>
7376
</div>
@@ -76,15 +79,30 @@ <h2>Acknowledgements</h2>
7679

7780
<div id="fb-root"></div>
7881
<script>
79-
(function(w,d){
80-
w._gaq=[['_setAccount','UA-7489188-1'],['_trackPageview'],['_trackPageLoadTime']];
81-
var u=[
82-
'//connect.facebook.net/en_US/all.js#xfbml=1', // Facebook SDK
83-
'//platform.twitter.com/widgets.js', // Twitter Widgets
84-
'https://apis.google.com/js/plusone.js', // Google +1 Button
85-
('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' // Google Analytics
86-
],i=u.length,n='script',f=d.createDocumentFragment(),e=d.createElement(n),t;while(i--){t=e.cloneNode(false);t.async=t.src=u[i];f.appendChild(t);}(t=d.getElementsByTagName(n)[0]).parentNode.insertBefore(f,t);
87-
}(this,document));
82+
window._gaq=[['_setAccount','UA-7489188-1'],['_trackPageview']];
83+
(function(doc, script) {
84+
var js,
85+
fjs = doc.getElementsByTagName(script)[0],
86+
frag = doc.createDocumentFragment(),
87+
add = function(url, id) {
88+
if (doc.getElementById(id)) {return;}
89+
js = doc.createElement(script);
90+
js.src = url;
91+
id && (js.id = id);
92+
frag.appendChild(js);
93+
};
94+
95+
// Google Analytics
96+
add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js');
97+
// Facebook SDK
98+
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
99+
// Google+ button
100+
add('https://apis.google.com/js/plusone.js');
101+
// Twitter SDK
102+
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
103+
104+
fjs.parentNode.insertBefore(frag, fjs);
105+
}(document, 'script'));
88106
</script>
89107

90108
</body>

‎style.css‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
html {
22
font-size: 100%;
3-
overflow-y: scroll;
4-
-webkit-tap-highlight-color: rgba(0,0,0,0);
53
-webkit-text-size-adjust: 100%;
64
-ms-text-size-adjust: 100%;
75
}
@@ -20,10 +18,10 @@ img {
2018
border: 0;
2119
}
2220

23-
a {
24-
font-weight:bold;
25-
text-decoration: none;
26-
color: #6EAD1A;
21+
a {
22+
font-weight:bold;
23+
text-decoration: none;
24+
color: #6ead1a;
2725
}
2826

2927
a:focus {
@@ -35,23 +33,28 @@ a:active {
3533
outline: 0;
3634
}
3735

38-
a:hover,
39-
a:focus,
40-
a:active {
41-
text-decoration: underline;
42-
color: #569107;
36+
a:hover,
37+
a:focus,
38+
a:active {
39+
text-decoration: underline;
40+
color: #569107;
4341
}
4442

4543
strong {
4644
font-weight: bold;
4745
}
4846

47+
code,
4948
pre {
50-
display: block;
51-
padding: 5px;
52-
margin: 1em 0;
5349
font-family: consolas, monospace;
5450
font-size: 1em;
51+
}
52+
53+
pre {
54+
display: block;
55+
padding: 5px;
56+
margin: 1em 0;
57+
font-size: 13px;
5558
color: #fff;
5659
background: #222;
5760
white-space: pre;
@@ -62,21 +65,21 @@ pre {
6265
ul {
6366
list-style: square;
6467
padding: 0;
65-
margin: 1.4em 0;
68+
margin: 0 0 1.4em;
6669
}
6770

6871
li {
6972
margin: 0.35em 0;
7073
}
7174

72-
h1 {
75+
h1 {
7376
margin: 0.25em 0 0.5em;
74-
font-size: 3.5em;
77+
font-size: 3.5em;
7578
}
7679

77-
h2 {
78-
margin: 1.25em 0 0.75em;
79-
font-size: 1.5em;
80+
h2 {
81+
margin: 1.25em 0 0.5em;
82+
font-size: 1.5em;
8083
}
8184

8285
p {
@@ -101,31 +104,31 @@ p {
101104
}
102105

103106
.button {
104-
display: inline-block;
105-
padding: 6px 15px;
107+
display: inline-block;
108+
padding: 6px 15px;
106109
border: 1px solid #487310;
107-
margin: 20px 0 0;
110+
margin: 20px 0 0;
108111
font-size: 1.375em;
109112
line-height: 1.273;
110-
color: #fff;
111-
background: #6EAD1A;
112-
text-shadow:0 1px 1px rgba(0,0,0,0.4);
113-
-moz-border-radius: 5px;
113+
color: #fff;
114+
background: #6ead1a;
115+
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
116+
-moz-border-radius: 5px;
114117
border-radius: 5px;
115-
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
116-
inset 0 1px rgba(255,255,255,0.5),
117-
inset 0 12px rgba(255,255,255,0.2),
118-
inset 0 10px 20px rgba(255,255,255,0.25),
118+
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
119+
inset 0 1px rgba(255,255,255,0.5),
120+
inset 0 12px rgba(255,255,255,0.2),
121+
inset 0 10px 20px rgba(255,255,255,0.25),
119122
inset 0 -12px 25px rgba(0,0,0,0.3);
120-
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
121-
inset 0 1px rgba(255,255,255,0.5),
122-
inset 0 12px rgba(255,255,255,0.2),
123-
inset 0 10px 20px rgba(255,255,255,0.25),
123+
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
124+
inset 0 1px rgba(255,255,255,0.5),
125+
inset 0 12px rgba(255,255,255,0.2),
126+
inset 0 10px 20px rgba(255,255,255,0.25),
124127
inset 0 -12px 25px rgba(0,0,0,0.3);
125-
box-shadow: 0 1px 3px rgba(0,0,0,0.4),
126-
inset 0 1px rgba(255,255,255,0.5),
127-
inset 0 12px rgba(255,255,255,0.2),
128-
inset 0 10px 10px rgba(255,255,255,0.25),
128+
box-shadow: 0 1px 3px rgba(0,0,0,0.4),
129+
inset 0 1px rgba(255,255,255,0.5),
130+
inset 0 12px rgba(255,255,255,0.2),
131+
inset 0 10px 10px rgba(255,255,255,0.25),
129132
inset 0 -12px 25px rgba(0,0,0,0.3);
130133
-webkit-transition: all 0.15s;
131134
-moz-transition: all 0.15s;
@@ -136,14 +139,16 @@ p {
136139
.button:hover,
137140
.button:focus,
138141
.button:active {
139-
text-decoration: none;
140-
color: #fff;
142+
text-decoration: none;
143+
color: #fff;
141144
background: #569107;
142145
}
143146

144147
.share-bar {
145148
overflow: hidden;
146-
margin: 40px 0 0;
149+
padding: 0 0 30px;
150+
border-bottom: 2px solid #ccc;
151+
margin: 30px 0 0;
147152
*zoom: 1;
148153
}
149154

@@ -164,11 +169,11 @@ p {
164169
body {
165170
font-size: 0.875em;
166171
}
167-
172+
168173
h1 {
169174
font-size: 3em;
170175
}
171-
176+
172177
.fork {
173178
display: none;
174179
}

0 commit comments

Comments
 (0)