From 70e81e6f55ad77f3777e87c4edd646a2f5ac8bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Jul 2012 08:42:09 -0700 Subject: new jumbotron --- docs/assets/css/docs.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 772fee2c3..1328177a4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -775,3 +775,61 @@ form.bs-docs-example { float: none; } } + + + + +.navbar { +} +.jumbo { + padding: 100px 0; + margin-top: -60px; + background-color: #222; + color: #fff; + text-align: center; + text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); + + background: #c9cabc; /* Old browsers */ +background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9cabc), color-stop(100%,#68686d)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */ +background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + xborder-bottom: 1px solid #68686d; + + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); +} +.jumbo h1 { + font-size: 120px; + font-weight: 200; + line-height: 1; + margin: 0 0 5px; + letter-spacing: -2px; +} +.jumbo p { + margin-bottom: 30px; + font-size: 40px; + font-weight: 200; + line-height: 1.25; +} +.jumbo .btn { + font-size: 20px; + padding: 14px 24px; + margin: 0 10px 30px 0; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); +} +.jumbo .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); +} + + + -- cgit v1.2.3 From 3ad52ca632e07948153ffb072132527d74e67c1d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Jul 2012 22:49:01 -0700 Subject: fast responsive tweaks --- docs/assets/css/docs.css | 20 +++++++++++++++++++- 1 file changed, 19 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 1328177a4..1e73e9ef0 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -820,7 +820,8 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end .jumbo .btn { font-size: 20px; padding: 14px 24px; - margin: 0 10px 30px 0; + margin: 0 0 30px 0; + font-weight: 200; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); @@ -832,4 +833,21 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } +@media (max-width: 480px) { + body { + padding-top: 0; + } + .jumbo { + margin: -20px -20px ; + padding: 40px 25px; + } + .jumbo h1 { + font-size: 72px; + } + .jumbo p { + font-size: 20px; + } + +} + -- cgit v1.2.3 From 62c386259b7fbd1ef665fc6baf4458c8e05ad1f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 4 Jul 2012 23:31:30 -0700 Subject: rewrite docs homepage, new graphics --- docs/assets/css/docs.css | 105 +++++++++++++++++++++++++++++++---------------- 1 file changed, 70 insertions(+), 35 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1e73e9ef0..b003b89d5 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -86,7 +86,7 @@ section { /* Faded out hr */ hr.soften { height: 1px; - margin: 54px 0; + margin: 70px 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); @@ -185,33 +185,33 @@ hr.soften { /* Marketing section of Overview -------------------------------------------------- */ -.marketing .row { - margin-bottom: 9px; +.marketing { + text-align: center; } .marketing h1 { - margin: 40px 0 10px; - font-size: 40px; - font-weight: 300; - text-align: center; + margin: 60px 0 10px; + font-size: 60px; + font-weight: 400; + line-height: 1; + letter-spacing: -1px; } .marketing h2 { - font-weight: 300; + font-weight: 400; + letter-spacing: -1px; } .marketing p { - margin: 5px 10px 15px 0; -} -.marketing .bs-icon { - float: left; - margin: 7px 10px 0 0; - opacity: .8; + color: #555; } .marketing .marketing-byline { - margin-bottom: 30px; + margin-bottom: 40px; font-size: 20px; font-weight: 300; line-height: 25px; color: #999; - text-align: center; +} +.marketing img { + display: block; + margin: 0 auto 20px; } @@ -220,8 +220,8 @@ hr.soften { -------------------------------------------------- */ .footer { - padding: 40px 0; - margin-top: 49px; + padding: 70px 0; + margin-top: 70px; border-top: 1px solid #e5e5e5; } .footer p { @@ -405,7 +405,7 @@ h2 + .row { /* Example sites showcase */ .example-sites { - margin-left: 20px; + xmargin-left: 20px; } .example-sites img { max-width: 100%; @@ -778,16 +778,18 @@ form.bs-docs-example { - -.navbar { +.navbar-inner { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } .jumbo { padding: 100px 0; - margin-top: -60px; + margin: -60px 0 60px; background-color: #222; color: #fff; text-align: center; - text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); + text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075); background: #c9cabc; /* Old browsers */ background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ @@ -798,6 +800,24 @@ background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */ background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #803353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#803353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#803353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#803353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#803353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#803353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#803353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + xborder-bottom: 1px solid #68686d; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); @@ -806,9 +826,9 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } .jumbo h1 { font-size: 120px; - font-weight: 200; + font-weight: ; line-height: 1; - margin: 0 0 5px; + margin: 0 0 10px; letter-spacing: -2px; } .jumbo p { @@ -818,19 +838,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end line-height: 1.25; } .jumbo .btn { - font-size: 20px; + font-size: 24px; padding: 14px 24px; - margin: 0 0 30px 0; font-weight: 200; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + border: 0; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); } .jumbo .btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); - box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); +} +.jumbo-links { + margin: 0; + list-style: none; +} +.jumbo-links li { + display: inline; + padding: 0 10px; + color: rgba(255,255,255,.25); +} +.jumbo-links a { + color: #fff; + color: rgba(255,255,255,.5); } +.jumbo-links a:hover { + color: #fff; +} + @media (max-width: 480px) { @@ -849,5 +886,3 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } } - - -- cgit v1.2.3 From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: update thumbnails to fix display issues and refine aesthetics --- docs/assets/css/docs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b003b89d5..7b12bb5da 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -33,10 +33,10 @@ body { p { margin-bottom: 15px; } -li { +/*li { line-height: 25px; } - +*/ /* Code in headings */ h3 code { font-size: 14px; -- cgit v1.2.3 From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: updates to type scale --- docs/assets/css/docs.css | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7b12bb5da..6d64028f8 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -26,17 +26,6 @@ body { margin: 0 auto; } -/* Increase docs base type size and line-heights */ -body { - line-height: 20px; -} -p { - margin-bottom: 15px; -} -/*li { - line-height: 25px; -} -*/ /* Code in headings */ h3 code { font-size: 14px; @@ -49,7 +38,6 @@ h3 code { -------------------------------------------------- */ .navbar { - font-size: 13px; } /* Change the docs' brand */ @@ -197,8 +185,7 @@ hr.soften { } .marketing h2 { font-weight: 400; - letter-spacing: -1px; -} +`} .marketing p { color: #555; } -- cgit v1.2.3 From 68146db00454b46493545aff34d06cf2c11e0f6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:15:57 -0700 Subject: buttons and pre updates for font-size --- docs/assets/css/docs.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6d64028f8..bee42dc36 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -428,6 +428,9 @@ h2 + .row { margin-left: 0; list-style: none; } +.the-icons li { + line-height: 25px; +} .the-icons i:hover { background-color: rgba(255,0,0,.25); } -- cgit v1.2.3 From 095e052606a8e1afb496ec4a1e95567a7f123827 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jul 2012 10:10:56 -0700 Subject: adding homepage social buttons --- docs/assets/css/docs.css | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'docs/assets/css/docs.css') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bee42dc36..6ad151181 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -147,7 +147,7 @@ hr.soften { font-size: 12px; } .quick-links { - min-height: 30px; + height: 20px; margin: 0; padding: 0; list-style: none; @@ -157,15 +157,10 @@ hr.soften { min-height: 0; } .quick-links li { - display: inline; + display: inline-block; margin: 0 8px; color: #999; -} -.quick-links .github-btn, -.quick-links .tweet-btn, -.quick-links .follow-btn { - position: relative; - top: 5px; + line-height: 1; } @@ -774,7 +769,7 @@ form.bs-docs-example { border-radius: 6px; } .jumbo { - padding: 100px 0; + padding: 80px 0; margin: -60px 0 60px; background-color: #222; color: #fff; @@ -859,6 +854,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } +.jumbo-buttons { + padding: 20px 0; + margin-top: -60px; + text-align: center; + background-color: #f5f5f5; + border-top: 1px solid #fff; + border-bottom: 1px solid #ddd; +} + @media (max-width: 480px) { body { -- cgit v1.2.3