From c55fd53bb3aae7d57725a0a61ab5a5bfd5227ec5 Mon Sep 17 00:00:00 2001 From: Austin Davies Date: Sat, 18 Jan 2014 09:10:10 -0800 Subject: [PATCH] Fix for issue #116. --- api.jade | 2 +- applications.jade | 3 +- en/community.jade | 2 +- faq.jade | 2 +- guide.jade | 5 +- includes/menu.jade | 1 - index.jade | 3 +- style.css | 172 +++++++++++++++++++++++++++------------------ 8 files changed, 114 insertions(+), 76 deletions(-) diff --git a/api.jade b/api.jade index ba91c1f98..c4030953d 100644 --- 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 index f7a05e294..89cd7c4f4 100644 --- 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 index 5c1265471..9bba7acf5 100644 --- 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 index 7e80438cc..745293940 100644 --- 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 index 069e209bc..e76d7ec67 100644 --- 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 index 7ec26d2cf..b0feeba80 100644 --- 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 index 25179b03d..11ca7b4fa 100644 --- 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 index 66d6aac7d..a3e0d5621 100644 --- a/style.css +++ b/style.css @@ -38,20 +38,10 @@ 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; @@ -59,12 +49,16 @@ h2 { 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; }