Fix for issue #116.

expressjs · Jan 27, 2014 · c55fd53 · c55fd53
1 parent 878d2c5
commit c55fd53
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 76 deletions.
diff --git a/api.jade b/api.jade
@@ -15,7 +15,7 @@ html
 
       include en/api/menu
 
-      #right
+      #main
         include en/api/express
 
         h2 Application

diff --git a/applications.jade b/applications.jade
@@ -10,5 +10,6 @@ html
         include includes/logo
         active = './applications.html'
         include includes/menu
-      include en/applications
+      #main
+        include en/applications
     include includes/footer
diff --git a/en/community.jade b/en/community.jade
@@ -1,4 +1,4 @@
-#boxes.clearfix
+#main
   section#mailing-list
     h3 Mailing List
     p.

diff --git a/faq.jade b/faq.jade
@@ -10,6 +10,6 @@ html
         include includes/logo
         active = './faq.html'
         include includes/menu
-      #faq
+      #main
         include en/faq
     include includes/footer
diff --git a/guide.jade b/guide.jade
@@ -13,7 +13,8 @@ html
 
       include includes/mixins
       include en/guide/menu
-
-      include en/guide/index
+
+      #main
+        include en/guide/index
 
     include includes/footer
diff --git a/includes/menu.jade b/includes/menu.jade
@@ -8,4 +8,3 @@ nav.clearfix
   +item('./applications.html') Applications
   +item('./community.html') Community
   +item('./faq.html') FAQ
-
diff --git a/index.jade b/index.jade
@@ -8,9 +8,10 @@ html
     .bar
     section#content
       header
-        include includes/logo
         active = './'
         include includes/menu
+      section
+        include includes/logo
      section#logos
        .content
          include includes/app-logos

diff --git a/style.css b/style.css
@@ -38,33 +38,27 @@ strong {
   margin-top: 100px;
 }
 
-#content {
-  margin-left: 80px;
-  width: 900px;
-  margin-bottom: 80px;
-}
-
 li code {
   color: #353535;
 }
 
-section section p {
-  width: 60%;
-}
-
 h2 {
   margin-top: 80px;
   font-weight: bold;
 }
 
 h3 {
   background: url(images/hr.png) top center no-repeat;
-  margin-top: 40px;
   padding-top: 50px;
   padding-bottom: 5px;
   font-weight: bold;
 }
 
+#main {
+  width: 75%;
+  margin: 0 12.5% 0 12.5%;
+}
+
 /* links */
 
 a {
@@ -87,11 +81,12 @@ nav a {
 
 /* logo */
 
+#content > section {
+  margin: 10% 0 10% 0;
+}
+
 #logo {
-  margin-top: 180px;
-  margin-bottom: 180px;
-  margin-left: 80px;
-  padding-left: 40px;
+  margin: auto;
   width: 440px;
   border-left: 1px dotted #eee;
   -webkit-font-smoothing: antialiased;
@@ -233,11 +228,15 @@ code .number { color: #2F6FAD }
 
 /* navigation */
 
+header {
+  width: 100%;
+  height: 57px;
+}
+
 nav {
-  position: fixed;
-  top: 20px;
-  right: 15px;
-  z-index: 100;
+  margin-top: 15px;
+  margin-right: 15px;
+  float: right;
 }
 
 nav a {
@@ -282,7 +281,8 @@ html[xmlns] .clearfix {
 
 #boxes {
   background: url(images/hr.png) top center no-repeat;
-  margin-left: 50px;
+  width: 75%;
+  margin: 0 12.5% 0 12.5%;
   padding-top: 50px;
   padding-bottom: 50px;
   font-size: 12px;
@@ -293,13 +293,23 @@ html[xmlns] .clearfix {
 }
 
 #boxes section {
-  width: 180px;
+  width: 15%;
   margin: 0 25px;
   float: left;
   /* fix grid jank. #105 */
   min-height: 200px;
 }
 
+#boxes section:last-child {
+  width: 30%;
+}
+
+#boxes section:last-child p {
+  width: 50%;
+  display: inline-block;
+  margin-top: 0;
+}
+
 #boxes h3 {
   background: none;
   margin-top: 0;
@@ -371,6 +381,7 @@ html[xmlns] .clearfix {
 
 .application img {
   float: right;
+  width: 60%;
 }
 
 .application .link {
@@ -385,76 +396,102 @@ html[xmlns] .clearfix {
 
 /* ipad landscape */
 
-@media all and (max-width: 1200px) {
-  #content {
-    width: 760px;
+@media all and (max-width: 1200px) {    
+  #boxes section {
+    width: 100%;
+    margin-top: 20px;
+    margin-left: 0;
+    /* undo grid jank */
+    min-height: 0;
   }
-
-  .applications #content,
-  .community #content {
-    width: 900px;
+
+  #boxes section:last-child {
+    width: 100%;
   }
 }
 
 /* ipad portrait */
 
 @media all and (max-width: 768px) {
-  #content {
-    width: 500px;
-  }
-
-  .applications #content,
-  .community #content {
-    width: 600px;
-  }
-
   .application img {
     width: 60%;
   }
-
-  .application {
-    height: 450px;
+  
+  .inner header {
+    height: 85px;
   }
-
-  #boxes {
-    margin-left: 0;
+
+  nav {
+    margin-top: 50px;
+    margin-left: 20px;
+    float: left;
   }
-
-  #boxes section {
-    width: 100%;
-    margin-top: 20px;
-    margin-left: 0;
-    /* undo grid jank */
-    min-height: 0;
+
+  /* reference only the nav on the home page */
+  #content header nav:first-child {
+    float: right;
+  }
+
+  #menu {
+    display: none;
   }
 }
 
 /* iphone portrait */
 
 @media all and (max-width: 650px) {
-  #logo {
-    margin-left: 0;
+  body a > img {
+    display: none;
   }
-
-  #content {
-    width: 380px;
+
+  nav {
+    margin: 15px 0 0 0;
+    width: 30%;
+    display: inline-block;
+    float: right;
   }
-
-  .applications #content,
-  .community #content {
-    width: 500px;
+
+  nav a {
+    display: inherit;
+  }
+
+  #content header {
+    height: 150px;
+  }
+
+  .inner header {
+    position: static;
+  }
+
+  .inner {
+    margin-top: 0;
+  }
+
+  .inner.scroll header {
+    border-bottom: 0;
+    box-shadow: 0 0 0;
+  }
+
+  .inner #logo {
+    padding-top: 60px;
+    display: inline-block;
+    position: static;
+  }
+
+  #menu {
+    display: none;
   }
 
   section section p {
     width: 100%;
   }
 
-  .application {
-    height: 380px;
-  }
-
   .application img {
-    width: 60%;
+    width: 50%;
+  }
+
+  .application .link {
+    left: 70%;
   }
 }
 
@@ -469,8 +506,7 @@ html[xmlns] .clearfix {
 }
 
 #book img {
-  position: absolute;
-  top: 0;
-  right: -110px;
-  width: 50%;
+  display: inline-block;
+  width: 30%;
+  float: right;
 }