From bd630425826ac311bc6b131ecfeab478d1e8adb2 Mon Sep 17 00:00:00 2001 From: Coby Chapple Date: Fri, 15 Mar 2013 15:24:14 +0000 Subject: [PATCH] start bringing the quickstart instruction section back in too --- site/css/style.css | 139 +++++++++++++++++++++++++++++++++++++++++++++ site/index.html | 46 +++++++-------- 2 files changed, 162 insertions(+), 23 deletions(-) diff --git a/site/css/style.css b/site/css/style.css index 9f319c77..e96579df 100644 --- a/site/css/style.css +++ b/site/css/style.css @@ -152,6 +152,145 @@ body > footer a:hover img { } } +/* Quickstart */ + +.quickstart { + background: #3F1F1F; + color: #fff; + margin: 60px 0 80px; + box-shadow: inset 0 3px 10px rgba(0,0,0,.4); +} + +.quickstart .content { + padding: 0px 0; +} + +.quickstart .code { + margin: -30px 0; + float: right; +} + +.quickstart h4 { + margin: 48px 0 0; + font-size: 28px; + text-shadow: 0 1px 3px rgba(0,0,0,.8); +} + +/* Code */ + +.quickstart .code { + display: block; + padding: 0; + background: #3d3d3d; + border-radius: 5px; + font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; + line-height: 1.3em; + box-shadow: 0 5px 30px rgba(0,0,0,.3); +} + +.quickstart .code .title { + display: block; + text-align: center; + margin: 0; + padding: 5px 0; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5); + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 16px; + font-weight: normal; + color: #444; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background: #f7f7f7; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); + background: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(7%,#cfcfcf), color-stop(100%,#aaaaaa)); + background: -webkit-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); + background: -o-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); + background: -ms-linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); + background: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); + border-bottom: 1px solid #111; +} + +.quickstart .code .shell { + padding: 20px; + text-shadow: none; +} + +.quickstart .code .line { + display: block; + margin: 0; + padding: 0; +} + +.quickstart .code .line span { + display: inline-block; +} + +.quickstart .code .path { + color: #87ceeb; +} + +.quickstart .code .prompt { + color: #cd5c5c; +} + +.quickstart .code .command { + color: #f0e68c; +} + +.quickstart .code .output { + color: #888; +} + +/* Free Hosting */ + +.free-hosting .content { + /*margin-bottom: 40px;*/ + position: relative; +} + +.free-hosting .pane { + background: #444; + border-radius: 10px; + padding: 40px 70px 30px; + /*color: #222;*/ + text-shadow: none; +} + +.free-hosting img { + float: left; + margin: -20px 40px -40px -20px; +} + +.free-hosting h2 { + /*font-weight: 800;*/ +} +.free-hosting p, +.free-hosting a { + font-weight: inherit; +} + +.free-hosting p { + margin: 0.75em; +} + +.free-hosting a { + /*color: #c00;*/ +} + +.free-hosting .content:after { + content: " "; + float: right; + background: url(../img/footer-arrow.png) top left no-repeat; + width: 73px; + height: 186px; + position: absolute; + right: 30px; + bottom: -60px; +} + /* HTML Elements */ h1, h2, h3, h4, h5, h6 { diff --git a/site/index.html b/site/index.html index 9dfc924c..f5973c52 100644 --- a/site/index.html +++ b/site/index.html @@ -37,32 +37,32 @@ overview: true
-
+

Get up and running in seconds.

-
-

Quick-start Instructions

-
-

- ~ - $ - gem install jekyll -

-

- ~ - $ - cd my/awesome/site -

-

- ~/my/awesome/site - $ - jekyll serve -

-

- # => Now browse to http://localhost:4000 -

-
+
+

Quick-start Instructions

+
+

+ ~ + $ + gem install jekyll +

+

+ ~ + $ + cd my/awesome/site +

+

+ ~/my/awesome/site + $ + jekyll serve +

+

+ # => Now browse to http://localhost:4000 +

+