rejigger some content and start exploring section headings

docs/assets/css/docs.css

@@ -35,7 +35,6 @@ body {
 
 /* Padding for in-page bookmarks */
 section {
-  padding-top: 30px;
 }
 
 /* Few stylistic typography tweaks */
@@ -52,6 +51,19 @@ section > ul li {
 /* Jumbotrons
 -------------------------------------------------- */
 
+.bs-docs-section-header {
+  margin: 60px 0;
+}
+.bs-docs-section-header h1,
+.bs-docs-section-header .lead {
+  color: #8a8a8a;
+}
+.bs-docs-section-header h1 {
+  font-size: 80px;
+  font-size: 8rem;
+  line-height: 1;
+}
+
 /* Base class */
 .bs-docs-jumbotron {
   position: relative;
@@ -198,11 +210,18 @@ section > ul li {
 
 .bs-docs-sidenav-heading {
   margin: 0;
+}
+.bs-docs-sidenav-heading a {
+  display: block;
   padding: 15px 20px;
   color: #999;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 1px 0 #fff;
 }
+.bs-docs-sidenav-heading a:hover {
+  color: #777;
+  text-decoration: none;
+}
 
 .bs-docs-sidenav .nav-header {
   padding: 25px 20px 5px;

docs/docs.html

@@ -6,13 +6,13 @@ description: Overview of the project, its contents, and how to get started with
 
 <div class="bs-docs-sidebar">
   <ul class="nav bs-docs-sidenav">
+    <h3 class="bs-docs-sidenav-heading"><a href="/">Bootstrap</a></h3>
     <li class="nav-header">Getting started</li>
     <li><a href="#download-bootstrap">Download</a></li>
     <li><a href="#file-structure">File structure</a></li>
     <li><a href="#contents">What's included</a></li>
     <li><a href="#html-template">HTML template</a></li>
     <li><a href="#examples">Examples</a></li>
-    <li><a href="#what-next">What next?</a></li>
 
     <li class="nav-header">CSS</li>
     <li><a href="#global">Global settings</a></li>
@@ -63,11 +63,20 @@ description: Overview of the project, its contents, and how to get started with
 
 <div class="container bs-docs-container">
 
+
+
+
+
+  <div class="bs-docs-section-header">
+    <h1>Getting started</h1>
+    <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
+  </div>
+
   <!-- Download
   ================================================== -->
   <section id="download-bootstrap">
     <div class="page-header">
-          <h1>1. Download</h1>
+      <h1>Download</h1>
     </div>
     <p class="lead">Before downloading, be sure to have a code editor (we recommend <a href="http://sublimetext.com/2">Sublime Text 2</a>) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.</p>
 
@@ -91,12 +100,11 @@ description: Overview of the project, its contents, and how to get started with
   </section>
 
 
-
   <!-- File structure
   ================================================== -->
   <section id="file-structure">
     <div class="page-header">
-          <h1>2. File structure</h1>
+      <h1>File structure</h1>
     </div>
     <p class="lead">Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.</p>
     <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
@@ -121,13 +129,11 @@ description: Overview of the project, its contents, and how to get started with
     <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
   </section>
 
-
-
   <!-- Contents
   ================================================== -->
   <section id="contents">
     <div class="page-header">
-          <h1>3. What's included</h1>
+      <h1>What's included</h1>
     </div>
     <p class="lead">Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the <a href="http://getbootstrap.com">Bootstrap documentation</a>.</p>
 
@@ -142,8 +148,6 @@ description: Overview of the project, its contents, and how to get started with
     <p>Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.</p>
   </section>
 
-
-
   <!-- HTML template
   ================================================== -->
   <section id="html-template">
@@ -199,8 +203,6 @@ description: Overview of the project, its contents, and how to get started with
 </pre>
   </section>
 
-
-
   <!-- Examples
   ================================================== -->
   <section id="examples">
@@ -301,19 +303,11 @@ description: Overview of the project, its contents, and how to get started with
 
 
 
-      <!-- Next
+
-      ================================================== -->
+  <div class="bs-docs-section-header">
-      <section id="what-next">
+    <h1>CSS</h1>
-        <div class="page-header">
+    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
-          <h1>What next?</h1>
   </div>
-        <p class="lead">Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.</p>
-        <a class="btn btn-large btn-primary" href="./css.html" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Visit docs']);">Visit the Bootstrap docs</a>
-        <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Next steps', 'Customize']);">Customize Bootstrap</a>
-      </section>
-
-
-
 
         <!-- Global Bootstrap settings
         ================================================== -->