normalize.css/main.css

207 lines
2.7 KiB
CSS
Raw Normal View History

html {
2016-03-12 16:41:49 +00:00
background: #fff;
2014-03-27 04:51:08 +00:00
color: #333;
font: 16px/1.4 Open Sans, Helvetica, Arial, sans-serif;
}
body {
2014-03-27 04:51:08 +00:00
max-width: 720px;
padding: 20px 40px;
margin: 0 auto;
}
a {
2016-03-12 16:41:49 +00:00
color: #e3695f;
2014-03-27 04:51:08 +00:00
text-decoration: none;
}
a:hover,
a:focus,
a:active {
2014-03-27 04:51:08 +00:00
text-decoration: underline;
}
h1,
h2 {
2014-03-27 04:51:08 +00:00
line-height: 1.2;
2016-03-12 16:41:49 +00:00
font-family: 'Source Sans Pro', sans-serif;
}
p {
2014-03-27 04:51:08 +00:00
margin: 1em 0;
}
/* structure */
.site-box {
2014-03-27 04:51:08 +00:00
padding: 40px 60px 0;
margin: 0 0 3em;
background: #fff;
text-align: center;
2016-03-12 16:41:49 +00:00
box-shadow: 2px 4px 6px 1px rgba(50, 50, 50, 0.14);
}
.site-footer {
2014-03-27 04:51:08 +00:00
width: 85%;
margin: 0 auto;
}
.logo {
2016-03-12 16:41:49 +00:00
width: 10rem;
}
.title {
margin-bottom: 40px;
font-size: 2.6em;
}
.tagline {
2014-03-27 04:51:08 +00:00
margin: 0 0 0.75em;
font-size: 2.25em;
}
/**
* Calls to action
*/
.cta-option {
2014-03-27 04:51:08 +00:00
position: relative;
display: inline-block;
/* IE6/7 inline-block hack */
*display: inline;
*zoom: 1;
2014-03-27 04:51:08 +00:00
margin: 1.5em 0.75em 0.5em;
vertical-align: bottom;
}
/**
* Download button
*/
.btn-download {
2014-03-27 04:51:08 +00:00
position: relative;
display: inline-block;
/* IE6/7 inline-block hack */
*display: inline;
*zoom: 1;
padding: 0.4em 1em;
2016-03-12 16:41:49 +00:00
border: 1px solid #e3695f;
2014-03-27 04:51:08 +00:00
margin: 0 0 10px;
color: #fff;
2016-03-12 16:41:49 +00:00
background: #e3695f;
2014-03-27 04:51:08 +00:00
border-radius: 4px;
font-size: 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.btn-download:hover,
.btn-download:focus,
.btn-download:active {
2014-03-27 04:51:08 +00:00
text-decoration: none;
}
/**
* Alternative download button
*
* @extends .btn-download
*/
.btn-download-alt {
2014-03-27 04:51:08 +00:00
border-color: #ccc;
background: #eee;
box-shadow: none;
color: #666;
font-size: 1.25em;
}
.btn-download-alt:hover,
.btn-download-alt:focus,
.btn-download-alt:active {
2014-03-27 04:51:08 +00:00
background: #f5f5f5;
}
.btn-download-alt:active {
2014-03-27 04:51:08 +00:00
background: #ddd;
}
/**
* Share bar
*/
.share-bar {
2014-03-27 04:51:08 +00:00
overflow: hidden;
padding: 15px 30px;
border-top: 1px solid #ddd;
margin: 50px -60px 0;
2016-03-12 16:41:49 +00:00
background: #fff;
2014-03-27 04:51:08 +00:00
line-height: 28px;
*zoom: 1;
}
.share-opt {
2014-03-27 04:51:08 +00:00
float: left;
height: 28px;
margin: 0 15px 0 0;
}
.read-more {
2014-03-27 04:51:08 +00:00
float: right;
}
/**
* Utilities
*/
.txt-small {
2014-03-27 04:51:08 +00:00
font-size: 0.75em;
}
.txt-large {
2014-03-27 04:51:08 +00:00
font-size: 1.25em;
}
.txt-mute {
2014-03-27 04:51:08 +00:00
color: #999;
}
@media screen and (max-width: 700px) {
2014-03-27 04:51:08 +00:00
.read-more {
float: none;
display: block;
margin: 0 0 1em;
line-height: 1.2;
}
}
@media screen and (max-width: 540px) {
2014-03-27 04:51:08 +00:00
body {
padding: 20px;
font-size: 0.875em;
}
.site-box {
padding: 30px 30px 0;
}
.cta-option {
margin-left: 0;
margin-right: 0;
}
.share-bar {
margin-left: -30px;
margin-right: -30px;
text-align: center;
}
.share-opt {
float: none;
display: inline-block;
margin: 0 1em 0.5em;
}
}