mirror of
https://github.com/necolas/normalize.css.git
synced 2024-12-25 15:14:19 +00:00
d6ebdb0dbe
Change font-family from Calibri to Helvetica Neue font stack. Add a subheading to immediately explain the project. Use cleaner button style. Emphasise viewing the project on GitHub and downloading the file over viewing the demo. Remove the footer and link to our websites/twitter in the credits.
211 lines
3.2 KiB
CSS
211 lines
3.2 KiB
CSS
html {
|
|
font-size: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
max-width: 480px;
|
|
padding: 0 10px 30px;
|
|
margin: 0 auto;
|
|
font: 1em/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
color: #222;
|
|
background: #fff;
|
|
_width: 480px;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
a {
|
|
font-weight:bold;
|
|
text-decoration: none;
|
|
color: #6ead1a;
|
|
}
|
|
|
|
a:focus {
|
|
outline: thin dotted;
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
outline: 0;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
a:active {
|
|
text-decoration: underline;
|
|
color: #569107;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: consolas, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
padding: 5px;
|
|
margin: 1em 0;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
background: #222;
|
|
white-space: pre;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
ul {
|
|
list-style: square;
|
|
padding: 0;
|
|
margin: 0 0 1.4em;
|
|
}
|
|
|
|
li {
|
|
margin: 0.35em 0;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0.25em 0 0.5em;
|
|
font-size: 3.5em;
|
|
}
|
|
|
|
h2 {
|
|
margin: 1.25em 0 0.5em;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
/* structure */
|
|
|
|
.fork img {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.hgroup h1 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.hgroup h2 {
|
|
margin: 0 0 2em;
|
|
font-size: 1em;
|
|
color: #555;
|
|
}
|
|
|
|
.cta {
|
|
margin:1em 0 4em;
|
|
}
|
|
|
|
.cta p {
|
|
margin: 0.5em 0 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.button {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0.4em 1em;
|
|
border: 1px solid #487310;
|
|
margin: 20px 5px 0 0;
|
|
font-size: 1.375em;
|
|
line-height: 1.273;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
color: #555;
|
|
background: #f5f5f5;
|
|
background-image: -webkit-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
|
|
background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
|
|
background-image: -ms-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
|
|
background-image: -o-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
|
|
/* IE6/7 inline-block hack */
|
|
*display: inline;
|
|
*zoom: 1;
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus,
|
|
.button:active {
|
|
text-decoration: none;
|
|
border-color: #c6c6c6;
|
|
color: #333;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.button:focus {
|
|
border-color: #105cb6;
|
|
outline: 0;
|
|
}
|
|
|
|
.button:active {
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
background-color: #eee;
|
|
}
|
|
|
|
.button-main {
|
|
border-color: #5e9612;
|
|
color: #fff;
|
|
background-color: #69a619;
|
|
}
|
|
|
|
.button-main:hover,
|
|
.button-main:focus,
|
|
.button-main:active {
|
|
border-color: #558713;
|
|
color: #fff;
|
|
background-color: #6ead1a;
|
|
}
|
|
|
|
.button-main:active {
|
|
background-color: #5D9117;
|
|
}
|
|
|
|
.share-bar {
|
|
overflow: hidden;
|
|
padding: 0 0 30px;
|
|
border-bottom: 2px solid #ccc;
|
|
margin: 30px 0 0;
|
|
*zoom: 1;
|
|
}
|
|
|
|
.share-opt {
|
|
float: left;
|
|
margin: 0 15px 0 0;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
@media screen and (max-width:480px) {
|
|
body {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
.fork {
|
|
display: none;
|
|
}
|
|
}
|