fix static navbar container issues, clean up docs presentation by unf…

…ixing the top navbar in favor of static one, start adding table of contents for longer sections of docs
ikennyfallas · Aug 20, 2012 · 4e979f0 · 4e979f0
1 parent e4d4ef4
commit 4e979f0
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 52 deletions.
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
@@ -110,6 +110,7 @@
     margin-left: 30px;
   }
   .container,
+  .navbar-static-top .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
     width: 1170px;
@@ -455,6 +456,7 @@
     margin-left: 20px;
   }
   .container,
+  .navbar-static-top .container,
   .navbar-fixed-top .container,
   .navbar-fixed-bottom .container {
     width: 724px;

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -219,6 +219,7 @@ a:hover {
 }
 
 .container,
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   width: 940px;
@@ -4172,7 +4173,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
+.navbar-fixed-bottom .navbar-inner,
+.navbar-static-top .navbar-inner {
   border: 0;
 }
 
@@ -4185,6 +4187,7 @@ input[type="submit"].btn.btn-mini {
           border-radius: 0;
 }
 
+.navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
   width: 940px;
@@ -4194,7 +4197,8 @@ input[type="submit"].btn.btn-mini {
   top: 0;
 }
 
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
@@ -12,7 +12,6 @@
 
 body {
   position: relative;
-  padding-top: 40px;
 }
 
 /* Code in headings */
@@ -26,12 +25,12 @@ h3 code {
 /* Tweak navbar brand link to be super sleek
 -------------------------------------------------- */
 
-body > .navbar-fixed-top {
+body > .navbar-static-top {
   font-size: 13px;
 }
 
 /* Change the docs' brand */
-body > .navbar-fixed-top .brand {
+body > .navbar-static-top .brand {
   padding-right: 0;
   padding-left: 0;
   margin-left: 20px;
@@ -43,7 +42,7 @@ body > .navbar-fixed-top .brand {
      -moz-transition: all .2s linear;
           transition: all .2s linear;
 }
-body > .navbar-fixed-top .brand:hover {
+body > .navbar-static-top .brand:hover {
   text-decoration: none;
   text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
 }
@@ -54,7 +53,7 @@ body > .navbar-fixed-top .brand:hover {
 
 /* padding for in-page bookmarks and fixed navbar */
 section {
-  padding-top: 60px;
+  padding-top: 30px;
 }
 section > .page-header,
 section > .lead {
@@ -759,10 +758,9 @@ form.bs-docs-example {
 }
 
 .bs-docs-sidenav {
-  width: 218px;
+  width: 228px;
   margin-top: 30px;
   padding: 0;
-  margin-right: 10px;
   background-color: #fff;
   margin-left: 0;
   -webkit-border-radius: 6px;
@@ -790,9 +788,13 @@ form.bs-docs-example {
           border-radius: 0 0 6px 6px;
 }
 .bs-docs-sidenav > .active > a {
-  border-color: #08c;
   position: relative;
   z-index: 2;
+  padding: 9px 15px;
+  border: 0;
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 }
 /* Chevrons */
 .bs-docs-sidenav .icon-chevron-right {
@@ -807,12 +809,13 @@ form.bs-docs-example {
 .bs-docs-sidenav a:hover .icon-chevron-right {
   opacity: .5;
 }
-.bs-docs-sidenav .active .icon-chevron-right {
+.bs-docs-sidenav .active .icon-chevron-right,
+.bs-docs-sidenav .active a:hover .icon-chevron-right {
   background-image: url(../img/glyphicons-halflings-white.png);
   opacity: .75;
 }
 .bs-docs-sidenav.affix {
-  top: 40px;
+  top: 0;
 }
 .bs-docs-sidenav.affix-bottom {
   position: absolute;
@@ -869,18 +872,11 @@ form.bs-docs-example {
   body {
     padding-top: 0;
   }
-  /* Widen masthead and social buttons to fill body padding */
-  .jumbotron {
-    margin-top: -20px; /* Offset bottom margin on .navbar */
-  }
   /* Adjust sidenav width */
   .bs-docs-sidenav {
     width: 166px;
     margin-top: 20px;
   }
-  .bs-docs-sidenav.affix {
-    top: 0;
-  }
 }
 
 /* Tablet
@@ -936,9 +932,6 @@ form.bs-docs-example {
   .footer p {
     margin-bottom: 9px;
   }
-  .bs-docs-sidenav.affix {
-    top: 0;
-  }
 }
 
 /* Landscape phones

diff --git a/docs/base-css.html b/docs/base-css.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -106,7 +106,15 @@ <h1>Base CSS</h1>
             <h1>Typography</h1>
           </div>
 
-          <h2>Headings</h2>
+          <ul>
+            <li><a href="./base-css.html#headings">Headings</a></li>
+            <li><a href="./base-css.html#body-copy">Body copy</a></li>
+            <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+          </ul>
+
+          <hr>
+
+          <h2 id="headings">Headings</h2>
           <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
           <div class="bs-docs-example">
             <h1>h1. Heading 1</h1>
@@ -117,7 +125,7 @@ <h5>h5. Heading 5</h5>
             <h6>h6. Heading 6</h6>
           </div>
 
-          <h2>Body copy</h2>
+          <h2 id="body-copy">Body copy</h2>
           <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
           <div class="bs-docs-example">
             <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
@@ -133,14 +141,14 @@ <h3>Lead body copy</h3>
           </div>
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
-          <h2>Built with Less</h2>
+          <h3>Built with Less</h3>
           <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
 
 
           <hr class="bs-docs-separator">
 
 
-          <h2>Emphasis</h2>
+          <h2 id="emphasis">Emphasis</h2>
           <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
 
           <h3><code>&lt;small&gt;</code></h3>

diff --git a/docs/components.html b/docs/components.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/customize.html b/docs/customize.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/extend.html b/docs/extend.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/getting-started.html b/docs/getting-started.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/index.html b/docs/index.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/javascript.html b/docs/javascript.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -71,7 +71,7 @@
 
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
   <div class="container">
     <h1>JavaScript for Bootstrap</h1>
     <p class="lead">Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.

diff --git a/docs/scaffolding.html b/docs/scaffolding.html
@@ -27,11 +27,11 @@
 
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
@@ -39,11 +39,11 @@
     {{/production}}
   </head>
 
-  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+  <body data-spy="scroll" data-target=".bs-docs-sidebar">
 
     <!-- Navbar
     ================================================== -->
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-inverse navbar-static-top">
       <div class="navbar-inner">
         <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
@@ -35,8 +35,16 @@
             <h1>{{_i}}Typography{{/i}}</h1>
           </div>
 
+          <ul>
+            <li><a href="./base-css.html#headings">Headings</a></li>
+            <li><a href="./base-css.html#body-copy">Body copy</a></li>
+            <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+          </ul>
+
+          <hr>
+
           {{! Headings }}
-          <h2>{{_i}}Headings{{/i}}</h2>
+          <h2 id="headings">{{_i}}Headings{{/i}}</h2>
           <p>{{_i}}All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.{{/i}}</p>
           <div class="bs-docs-example">
             <h1>h1. {{_i}}Heading 1{{/i}}</h1>
@@ -48,7 +56,7 @@
           </div>
 
           {{! Body copy }}
-          <h2>{{_i}}Body copy{{/i}}</h2>
+          <h2 id="body-copy">{{_i}}Body copy{{/i}}</h2>
           <p>{{_i}}Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}</p>
           <div class="bs-docs-example">
             <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
@@ -66,15 +74,15 @@
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
           {{! Using LESS }}
-          <h2>{{_i}}Built with Less{{/i}}</h2>
+          <h3>{{_i}}Built with Less{{/i}}</h3>
           <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
 
 
           <hr class="bs-docs-separator">
 
 
           {{! Emphasis }}
-          <h2>{{_i}}Emphasis{{/i}}</h2>
+          <h2 id="emphasis">{{_i}}Emphasis{{/i}}</h2>
           <p>{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}</p>
 
           <h3><code>&lt;small&gt;</code></h3>

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
@@ -1,6 +1,6 @@
 <!-- Subhead
 ================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
   <div class="container">
     <h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
     <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 13 custom jQuery plugins.{{/i}}