From 9e9109469e5c86c4232cc744639b286bcd9ef0ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:00:58 -0700 Subject: biiiiiig update coming for responsiveness --- docs/assets/css/docs.css | 71 ++++++++++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 23 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a17fd5692..52714d199 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -8,8 +8,9 @@ /* Body and structure -------------------------------------------------- */ body { - background-color: #fff; position: relative; + padding-top: 40px; + background-color: #fff; } section { padding-top: 60px; @@ -21,22 +22,29 @@ section > .row { /* Jumbotrons -------------------------------------------------- */ +.jumbotron, +.jumbotron .inner { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} .jumbotron { - min-width: 940px; - padding-top: 40px; + margin-bottom: 40px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); } .jumbotron .inner { background: transparent url(../img/grid-18px.png) top center; - padding: 45px 0; - -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); - -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -*/} + padding: 36px 60px; + -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); +} .jumbotron h1, .jumbotron p { margin-bottom: 9px; color: #fff; - text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); } .jumbotron h1 { @@ -46,6 +54,7 @@ section > .row { } .jumbotron p { font-weight: 300; + margin-right: 25%; } .jumbotron .lead { font-size: 20px; @@ -60,14 +69,14 @@ section > .row { ------------------------- */ /* main docs page */ .masthead { - background-color: #049cd9; + background-color: #004d9f; background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - background-image: -webkit-linear-gradient(#004D9F, #049cd9); - background-image: -moz-linear-gradient(#004D9F, #049cd9); - background-image: -o-linear-gradient(top, #004D9F, #049cd9); - background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + background-image: -webkit-linear-gradient(#048ccd, #004d9f); + background-image: -moz-linear-gradient(#048ccd, #004d9f); + background-image: -o-linear-gradient(top, #048ccd, #004d9f); + background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ } /* supporting docs pages */ .subhead { @@ -98,15 +107,9 @@ section > .row { /* Footer -------------------------------------------------- */ .footer { - background-color: #eee; - min-width: 940px; padding: 30px 0; - text-shadow: 0 1px 0 #fff; border-top: 1px solid #e5e5e5; - -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); - -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -*/} +} .footer p { color: #555; } @@ -323,3 +326,25 @@ pre.prettyprint { .well form { margin-bottom: 0; } + + +/* Responsive Docs +-------------------------------------------------- */ + +/* Tablet to Medium Desktop +------------------------- */ + +@media (min-width: 768px) and (max-width: 900px) { + + .footer, + .jumbotron { + min-width: 748px; + } + .jumbotron .inner h1, + .jumbotron .inner p { + margin-left: 40px; + margin-right: 40px; + } + +} + -- cgit v1.2.3 From 6f44a90edbfc897082dd69630983391bf6e57ba7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 11:35:24 -0700 Subject: tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles --- docs/assets/css/docs.css | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 52714d199..fb7482edc 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -231,7 +231,7 @@ section > .row { .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 240px; + width: 70%; height: 240px; } .mini-layout.fluid .mini-layout-sidebar, @@ -241,11 +241,11 @@ section > .row { } .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; - width: 90px; + width: 20%; height: 240px; } .mini-layout.fluid .mini-layout-body { - width: 300px; + width: 60%; margin-left: 10px; } @@ -328,23 +328,22 @@ pre.prettyprint { } +.browser-support { + max-width: 100%; +} + /* Responsive Docs -------------------------------------------------- */ - -/* Tablet to Medium Desktop -------------------------- */ +@media (max-width: 480px) { + .large-bird { + display: none; + } +} @media (min-width: 768px) and (max-width: 900px) { - .footer, .jumbotron { min-width: 748px; } - .jumbotron .inner h1, - .jumbotron .inner p { - margin-left: 40px; - margin-right: 40px; - } - } -- cgit v1.2.3 From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 18:01:05 -0700 Subject: tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks --- docs/assets/css/docs.css | 99 +++++++++++++++++++++++++++++------------------- 1 file changed, 61 insertions(+), 38 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb7482edc..01b6f3cd7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -9,7 +9,7 @@ -------------------------------------------------- */ body { position: relative; - padding-top: 40px; + padding-top: 100px; background-color: #fff; } section { @@ -19,65 +19,88 @@ section > .row { margin-bottom: 10px; } +/* Tweak topbar brand link to be super sleek +-------------------------------------------------- */ +.navbar .brand { + float: right; + font-weight: bold; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,.1); +} +.navbar .brand:hover { + text-decoration: none; +} /* Jumbotrons -------------------------------------------------- */ -.jumbotron, -.jumbotron .inner { - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; -} .jumbotron { - margin-bottom: 40px; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); -} -.jumbotron .inner { - background: transparent url(../img/grid-18px.png) top center; - padding: 36px 60px; - -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + position: relative; + padding-bottom: 58px; + margin-bottom: 50px; + border-bottom: 2px solid #eee; } .jumbotron h1, .jumbotron p { - margin-bottom: 9px; - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.3); + margin-bottom: 10px; + text-shadow: 0 1px 0 #fff; } .jumbotron h1 { - font-size: 54px; + font-size: 90px; line-height: 1; - text-shadow: 0 1px 2px rgba(0,0,0,.5); + margin-right: 40%; + letter-spacing: -1px; } .jumbotron p { font-weight: 300; - margin-right: 25%; + margin-right: 32%; } .jumbotron .lead { - font-size: 20px; - line-height: 27px; + margin-bottom: 20px; + font-size: 25px; + line-height: 35px; } .jumbotron p a { - color: #fff; font-weight: bold; } +.jumbotron .btn { + font-size: 20px; + padding: 12px 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} +.benefits { + width: 250px; + position: absolute; + right: 0; + bottom: 60px; +} +.benefits ul { + list-style: none; + margin: 0; +} +.benefits li { + font-size: 16px; + font-weight: 300; + line-height: 40px; + color: #555; +} +.benefits li + li { + border-top: 1px solid #f5f5f5; +} +.benefits h4 { + color: #555; +} +.benefits span { + position: relative; + top: -2px; + padding-right: 5px; + color: #999; +} + /* Specific jumbotrons ------------------------- */ -/* main docs page */ -.masthead { - background-color: #004d9f; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - background-image: -webkit-linear-gradient(#048ccd, #004d9f); - background-image: -moz-linear-gradient(#048ccd, #004d9f); - background-image: -o-linear-gradient(top, #048ccd, #004d9f); - background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ -} /* supporting docs pages */ .subhead { background-color: #767d80; -- cgit v1.2.3 From 1888511d676ced8f30743cc5b540f02257314bde Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 18:45:11 -0700 Subject: updated docs to include quick links and twitter buttons, added updated blueprint pattern to background --- docs/assets/css/docs.css | 51 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 11 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 01b6f3cd7..ee0b9c8a3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -9,8 +9,10 @@ -------------------------------------------------- */ body { position: relative; - padding-top: 100px; + padding-top: 90px; background-color: #fff; + background-image: url(../img/grid-18px-masked.png); + background-repeat: repeat-x; } section { padding-top: 60px; @@ -35,9 +37,6 @@ section > .row { -------------------------------------------------- */ .jumbotron { position: relative; - padding-bottom: 58px; - margin-bottom: 50px; - border-bottom: 2px solid #eee; } .jumbotron h1, .jumbotron p { @@ -57,23 +56,22 @@ section > .row { .jumbotron .lead { margin-bottom: 20px; font-size: 25px; - line-height: 35px; -} -.jumbotron p a { - font-weight: bold; + line-height: 36px; } .jumbotron .btn { font-size: 20px; - padding: 12px 24px; + padding: 14px 24px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } + +/* Benefits list in masthead */ .benefits { width: 250px; position: absolute; right: 0; - bottom: 60px; + bottom: 0; } .benefits ul { list-style: none; @@ -82,7 +80,7 @@ section > .row { .benefits li { font-size: 16px; font-weight: 300; - line-height: 40px; + line-height: 35px; color: #555; } .benefits li + li { @@ -127,6 +125,37 @@ section > .row { } +/* Quick links +-------------------------------------------------- */ +.quick-links { + padding: 5px 20px; + margin: 60px 0; + list-style: none; + text-align: center; + background-color: #eee; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.quick-links li { + display: inline; + margin: 0 5px; + line-height: 30px; +} +.quick-links .divider { + color: #999; +} +.quick-links strong { + font-weight: normal; + color: #999; +} +.quick-links .tweet-btn, +.quick-links .follow-btn { + position: relative; + top: 5px; +} + + /* Footer -------------------------------------------------- */ .footer { -- cgit v1.2.3 From c62a0239bd30a12e9f0d8c1e45f5818460e9df90 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 19:12:33 -0700 Subject: update to responsive to fix new masthead --- docs/assets/css/docs.css | 109 ++++++++++++++--------------------------------- 1 file changed, 32 insertions(+), 77 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ee0b9c8a3..7d36946db 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -37,34 +37,34 @@ section > .row { -------------------------------------------------- */ .jumbotron { position: relative; -} -.jumbotron h1, -.jumbotron p { - margin-bottom: 10px; text-shadow: 0 1px 0 #fff; } .jumbotron h1 { - font-size: 90px; - line-height: 1; margin-right: 40%; + margin-bottom: 10px; + font-size: 90px; letter-spacing: -1px; + line-height: 1; } .jumbotron p { - font-weight: 300; margin-right: 32%; -} -.jumbotron .lead { margin-bottom: 20px; font-size: 25px; + font-weight: 300; line-height: 36px; } .jumbotron .btn { font-size: 20px; padding: 14px 24px; + margin-right: 5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +.jumbotron .download-info { + font-size: 16px; + color: #999; +} /* Benefits list in masthead */ .benefits { @@ -133,9 +133,9 @@ section > .row { list-style: none; text-align: center; background-color: #eee; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } .quick-links li { display: inline; @@ -167,71 +167,6 @@ section > .row { } -/* Quickstart section for getting le code --------------------------------------------------- */ -.quickstart { - background-color: #f5f5f5; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); - background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); - background-image: linear-gradient(#f9f9f9, #f5f5f5); - border-top: 1px solid #fff; - border-bottom: 1px solid #eee; -} -.quickstart .container { - margin-bottom: 0; -} -.quickstart .row { - margin: 0 -20px; - -webkit-box-shadow: 1px 0 0 #f9f9f9; - -moz-box-shadow: 1px 0 0 #f9f9f9; - box-shadow: 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"] { - width: 285px; - height: 117px; - margin-left: 0; - padding: 17px 20px 26px; - border-left: 1px solid #eee; - -webkit-box-shadow: inset 1px 0 0 #f9f9f9; - -moz-box-shadow: inset 1px 0 0 #f9f9f9; - box-shadow: inset 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"]:last-child { - border-right: 1px solid #eee; - width: 286px; -} -.quickstart h6, -.quickstart p { - line-height: 18px; - text-align: center; - margin-bottom: 9px; - color: #333; -} -.quickstart .current-version, -.quickstart .current-version a { - color: #999; -} -.quickstart h6 { - color: #999; -} -.quickstart textarea { - display: block; - width: 275px; - height: auto; - margin: 0 0 9px; - line-height: 21px; - white-space: nowrap; - overflow: hidden; -} - - /* Special grid styles -------------------------------------------------- */ .show-grid { @@ -387,9 +322,29 @@ pre.prettyprint { /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { + + body > .navbar-fixed .nav { + display: none; + } + .large-bird { display: none; } + + .jumbotron h1 { + font-size: 36px; + margin-right: 0; + } + .jumbotron p { + margin-right: 0; + font-size: 18px; + line-height: 24px; + } + .jumbotron .benefits { + position: relative; + width: auto; + margin: 36px 0; + } } @media (min-width: 768px) and (max-width: 900px) { -- cgit v1.2.3 From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 23:04:31 -0700 Subject: few tweaks to responsive stuff, updated docs for grid system (still needs copy editing) --- docs/assets/css/docs.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7d36946db..300eb38f5 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -17,19 +17,16 @@ body { section { padding-top: 60px; } -section > .row { - margin-bottom: 10px; -} /* Tweak topbar brand link to be super sleek -------------------------------------------------- */ -.navbar .brand { +body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.1); } -.navbar .brand:hover { +body > .navbar-fixed .brand:hover { text-decoration: none; } @@ -136,6 +133,9 @@ section > .row { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + box-shadow: inset 0 1px 0 rgba(0,0,0,.03); } .quick-links li { display: inline; @@ -171,10 +171,10 @@ section > .row { -------------------------------------------------- */ .show-grid { margin-top: 10px; - margin-bottom: 10px; + margin-bottom: 20px; } .show-grid [class*="span"] { - background: #eee; + background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; -- cgit v1.2.3 From 6d2e39950d98dafbb82e94f00b3c99b82d0ba1c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 00:03:52 -0700 Subject: updated js docs page to new 12 column layout, fix subhead jumbotron styles to match new front page --- docs/assets/css/docs.css | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 300eb38f5..2af7764e6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -98,28 +98,16 @@ body > .navbar-fixed .brand:hover { ------------------------- */ /* supporting docs pages */ .subhead { - background-color: #767d80; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - background-image: -webkit-linear-gradient(#565d60, #767d80); - background-image: -moz-linear-gradient(#565d60, #767d80); - background-image: -o-linear-gradient(top, #565d60, #767d80); - background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */ -} -.subhead .inner { - padding: 36px 0 27px; + padding-bottom: 18px; + border-bottom: 3px solid #eee; } .subhead h1, .subhead p { - text-align: left; + margin-right: 0; } .subhead h1 { font-size: 40px; } -.subhead p a { - font-weight: normal; -} /* Quick links -- cgit v1.2.3 From 27cbe7f63a13fad987dc2547ef5b6f526ceb268c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 14:17:29 -0700 Subject: add abbr styles, overhaul type docs section to remove lots of verbose text and put emphasis on tables and more scannable content --- docs/assets/css/docs.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2af7764e6..bbf71ab77 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -307,6 +307,11 @@ pre.prettyprint { max-width: 100%; } +/* Make tables spaced out a bit more */ +h2 + table { + margin-top: 10px; +} + /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { -- cgit v1.2.3 From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- docs/assets/css/docs.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bbf71ab77..2d0b87fe2 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -309,7 +309,7 @@ pre.prettyprint { /* Make tables spaced out a bit more */ h2 + table { - margin-top: 10px; + margin-top: 5px; } /* Responsive Docs @@ -347,3 +347,18 @@ h2 + table { } } + + +.supported-devices { + margin-bottom: 9px; + color: #777; +} +.supported-devices strong { + display: block; + font-size: 14px; + line-height: 18px; +} +.supported-devices small { + font-size: 12px; +} + -- cgit v1.2.3