dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some polish for the quick-start instructions section

This commit is contained in:
Coby Chapple 2013-04-04 15:10:55 +01:00
parent fbfe891295
commit 95672bac99
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
site/css/style.css
View File

@ -1,5 +1,11 @@
/* Base */ /* Base */
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body { body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 21px; font-size: 21px;
@ -170,7 +176,7 @@ body > footer a:hover img {
.quickstart { .quickstart {
background: #3F1F1F; background: #3F1F1F;
color: #fff; color: #fff;
margin: 60px 0 80px; margin: 60px 0;
box-shadow: inset 0 3px 10px rgba(0,0,0,.4); box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
} }
@ -178,15 +184,29 @@ body > footer a:hover img {
padding: 0px 0; padding: 0px 0;
} }
.quickstart .code { .quickstart h4 {
margin: -30px 0; font-size: 24px;
float: right; line-height: 24px;
margin-top: 20px;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
} }
.quickstart h4 { .quickstart .code {
margin: 48px 0 0; font-size: 13px;
font-size: 28px; display: block;
text-shadow: 0 1px 3px rgba(0,0,0,.8); margin: 0 0 -30px;
}
@media (min-width: 768px){
.quickstart .code {
font-size: 18px;
margin: -30px 0;
float: right;
}
.quickstart h4 {
margin: 40px 0 0;
text-align: center;
}
} }
/* Code */ /* Code */
@ -194,20 +214,16 @@ body > footer a:hover img {
.quickstart .code { .quickstart .code {
display: block; display: block;
padding: 0; padding: 0;
background: #3d3d3d;
border-radius: 5px;
font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
line-height: 1.3em; line-height: 1.3em;
box-shadow: 0 5px 30px rgba(0,0,0,.3);
} }
.quickstart .code .title { .quickstart .code .title {
display: block; display: block;
text-align: center; text-align: center;
margin: 0; margin: 0 10px;
padding: 5px 0; padding: 5px 0;
border-top-left-radius: 5px; border-radius: 5px 5px 0 0;
border-top-right-radius: 5px;
box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5); box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
@ -229,6 +245,10 @@ body > footer a:hover img {
.quickstart .code .shell { .quickstart .code .shell {
padding: 20px; padding: 20px;
text-shadow: none; text-shadow: none;
margin: 0 10px;
background: #3d3d3d;
border-radius: 0 0 5px 5px;
box-shadow: 0 5px 30px rgba(0,0,0,.3);
} }
.quickstart .code .line { .quickstart .code .line {

4
site/index.html
View File

@ -37,8 +37,8 @@ overview: true
</section> </section>
<section class="quickstart"> <section class="quickstart">
<div class="grid"> <div class="grid">
<div class="unit golden-small"> <div class="unit golden-small center-on-mobiles">
<h4>Get up and running <em>in seconds</em>.</h4> <h4>Get up and running <em>in&nbsp;seconds</em>.</h4>
</div> </div>
<div class="unit golden-large code"> <div class="unit golden-large code">
<p class="title">Quick-start Instructions</p> <p class="title">Quick-start Instructions</p>