Permalink
Browse files

how to build an api

  • Loading branch information...
jrf0110 committed Jun 5, 2012
1 parent fdddb7c commit f546a7e89340e97aa76b2c09e4b95db1782b35b7
Showing with 218 additions and 56 deletions.
  1. +128 −22 css/main.css
  2. BIN img/gb-bg.png
  3. BIN img/like-a-boss.gif
  4. +84 −29 index.html
  5. +6 −5 js/app.js
View
@@ -60,17 +60,19 @@ html, body {
h1 {
font-size: 1.7rem;
line-height: 2rem;
+ margin-bottom: 12px;
}
h2 {
font-size: 1.3rem;
line-height: 1.8rem;
}
p, ul, li, code {
- font-size: 0.8rem;
- line-height: 1.1rem;
+ font-size: 1rem;
+ line-height: 1.6rem;
}
ul {
- margin-left: 44px;
+ color: #555;
+ margin: 18px 0 12px 44px;
}
@@ -81,6 +83,15 @@ ul {
font-family: "bello-pro";
}
+.blue {
+ color: #009cff;
+}
+
+.gb-bg {
+ background-image: url('../img/gb-bg.png');
+ background-repeat: no-repeat;
+}
+
.blue-triangle-banner {
background:
url('../img/triangles-blue-up.png') top left repeat-x
@@ -96,18 +107,45 @@ ul {
.blue-triangle-banner.title-banner {
margin-top: 14px;
}
-.blue-triangle-banner.title-banner > .inner-bg{
+.blue-triangle-banner.title-banner > .inner-bg {
box-sizing: border-box;
padding-left: 14px;
}
.blue-triangle-banner.title-banner .title {
font-size: 1.5rem;
- font-weight: 300;
+ font-weight: 500;
+}
+.page .content {
+ color: #444;
+ text-shadow: 0 1px 0 #fff;
+}
+.page .content.with-topic {
+ position: relative;
+ padding-left: 100px;
+}
+.page .content .topic {
+ position: absolute;
+ left: -300px;
+ top: 50%;
+ margin-top: -120px;
+ width: 600px;
+ font-size: 2rem;
+ opacity: 0.4;
+ -webkit-transform: rotate(-90deg);
+}
+.page .title-wrapper .title,
+.blue-triangle-banner.title-banner .title {
+ margin-bottom: 0;
}
.step > .wrapper {
width: 100%;
}
+.sub-title {
+ font-size: 0.8rem;
+ margin-left: 8px;
+ opacity: 0.9;
+}
.cube {
background: url('../img/gray-texture-bg.png');
@@ -118,32 +156,33 @@ ul {
border-bottom: solid #ccc 1px;
-webkit-transition: box-shadow linear 0.2s;
}
+.cube.gb-bg {
+ background:
+ url('../img/gb-bg.png') no-repeat 110% 112%
+ , url('../img/gray-texture-bg.png');
+}
.cube.present {
box-shadow: 0 0 35px rgba(0,0,0, 0.25);
}
.cube .page .content {
margin: 14px;
- color: #444;
- text-shadow: 0 1px 0 #fff;
}
.cube .title-wrapper {
margin-bottom: 24px;
padding-bottom: 4px;
border-bottom: dotted 3px #aaa;
}
.cube .title {
- font-weight: 300;
+ font-weight: 500;
}
-.cube .sub-title {
- font-size: 0.8rem;
- margin-left: 8px;
- opacity: 0.9;
+.cube .blue-triangle-banner > .inner-bg {
+ position: relative;
+ box-sizing: border-box;
+ padding: 10px 14px;
}
.cube-1 .blue-triangle-banner > .inner-bg {
- position: relative;
- box-sizing: border-box;
- padding: 10px 0 10px 140px;
+ padding-left: 140px;
}
.cube-1 .title {
border-bottom: dashed 5px rgba(0, 0, 0, 0.1);
@@ -158,7 +197,8 @@ ul {
text-transform: uppercase;
opacity: 0.8;
}
-.cube-1 .arrow {
+.cube-1 .arrow,
+.cube-2 .arrow {
position: absolute;
bottom: 20px;
right: 14px;
@@ -169,8 +209,8 @@ ul {
0 -1px 0 rgba(0, 0, 0, 0.4)
, 0 1px 0 rgba(255, 255, 255, 0.4);
}
-.cube-1 .arrow.animate-arrow {
- -webkit-animation: arrow-bounce 1.4s infinite ease-in-out;
+.cube-1.present .arrow {
+ -webkit-animation: arrow-bounce 1.4s infinite ease-in-out 6s;
}
@-webkit-keyframes arrow-bounce {
@@ -185,20 +225,33 @@ ul {
}
}
+.cube-2 .sub-text {
+ line-height: 1.rem;
+}
+.cube-2 .sub-text > .atx {
+ font-size: 1.3rem;
+}
+
.what-are-apis {
width: 1000px;
+ padding-left: 80px;
+}
+.what-are-apis .next-direction {
+ text-align: right;
+ font-size: 72px;
}
.what-are-apis-1 .title-wrapper {
margin-bottom: 60px;
}
.what-are-apis-1 .title {
text-align: center;
+ margin-bottom: 0;
}
.what-are-apis-1 .title .what {
font-size: 6rem;
line-height: 6rem;
- margin-left: -40px;
+ margin: 0 0 18px -40px;
text-align: left;
}
.what-are-apis-1 .title .question-mark {
@@ -213,12 +266,44 @@ ul {
.what-are-apis-1 .title .apis {
font-size: 4rem;
display: inline-block;
- margin-left: 40px;
- opacity: 0.8;
+ margin: 0 10px 10px 30px;
+ opacity: 0.9;
+ color: #009cff;
+}
+.what-are-apis-1 .beers {
+ font-size: 1.3em;
+}
+.what-are-apis-1 .corner-dots {
+ height: 1px;
+ width: 1px;
+ position: absolute;
+ margin-top: -105px;
+ border-left: dotted 10px #999;
+ border-bottom: dotted 10px #999;
+ margin-left: 5px;
+ opacity: 0;
+ -webkit-transition:
+ opacity 0.8s linear 0.8s
+ , height 0.3s ease-in-out 0.8s
+ , width 0.5s ease-in-out 1.2s;
+}
+.what-are-apis-1.present .corner-dots {
+ height: 80px;
+ opacity: 1;
+ width: 241px;
}
.what-are-apis-1.present .title .apis {
-webkit-animation: apis-bulge 0.6s ease-in 0.1s;
}
+.what-are-apis-1 .next-direction {
+ margin: -52px 158px 0 0;
+ opacity: 0;
+ -webkit-transition: all 0.6s ease-in 1s;
+}
+.what-are-apis-1.present .next-direction {
+ opacity: 1;
+ -webkit-animation: blink 1.6s infinite ease-in-out 3s;
+}
@-webkit-keyframes apis-bulge {
0% {
-webkit-transform: scale(1);
@@ -229,6 +314,27 @@ ul {
}
100% {
-webkit-transform: scale(1);
- opacity: 0.8;
+ opacity: 0.9;
+ }
+}
+@-webkit-keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
}
+ 100% {
+ opacity: 1;
+ }
+}
+
+
+.how-to-build {
+ width: 1000px;
+ opacity: 0;
+ -webkit-transition: opacity 1s linear;
+}
+.how-to-build.active {
+ opacity: 1;
}
View
Binary file not shown.
View
Binary file not shown.
Oops, something went wrong.

0 comments on commit f546a7e

Please sign in to comment.