diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index acebb64d3b..3936d8c203 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -3,6 +3,10 @@ visibility: hidden; } @media (max-width: 480px) { + .page-header h1 small { + display: block; + line-height: 18px; + } .form-horizontal .control-group > label { float: none; width: auto; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5a6bd971fb..41029ded1f 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -657,14 +657,13 @@ form.well { } /* Change up some type stuff */ - h1 small { - display: block; - line-height: 20px; - } - /* More space between sections */ h2 { margin-top: 27px; } + h2 small { + display: block; + line-height: 18px; + } h3 { margin-top: 18px; } @@ -681,6 +680,7 @@ form.well { } .jumbotron p { margin-right: 0; + margin-left: 0; font-size: 18px; line-height: 24px; } @@ -695,6 +695,10 @@ form.well { .quick-links { margin: 40px 0 0; } + .quick-links li { + margin-top: 5px; + margin-bottom: 5px; + } /* hide the bullets on mobile since our horizontal space is limited */ .quick-links .divider { display: none; @@ -744,10 +748,10 @@ form.well { .subnav .nav > li { float: none; } - .subnav .nav a { + .subnav .nav > li > a { border: 0; } - .subnav .nav li + li a { + .subnav .nav > li + li a { border-top: 1px solid #e5e5e5; } diff --git a/docs/base-css.html b/docs/base-css.html index 167cb5e694..740e0e1432 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -71,6 +71,7 @@
+ - - -

Code Inline and block

- - - - - - - - - - - - - - - - - - - - - -
ElementResult
<code>In a line of text like this, your wrapped code will look like this <html> element.
<pre> -
<div>
-  <h1>Heading</h1>
-  <p>Something right here…</p>
-</div>
-

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

-
<pre class="prettyprint"> -

Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.

-
<div>
-  <h1>Heading</h1>
-  <p>Something right here…</p>
-</div>
-
<div>
-  <h1>Heading</h1>
-  <p>Something right here…</p>
-</div>
-

Download google-code-prettify and view the readme for how to use.

-
+ +
+
+

Code Inline and block code snippets

+
+
+
+

Inline

+

Wrap inline snippets of code with <code>.

+
+For example, <code>section</code> should be wrapped as inline.
+
+
+
+

Basic block

+

Use <pre> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.

+
+<pre>
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+</pre>
+
+

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

+
+
+

Google Prettify

+

Take the same <pre> element and add two optional classes for enhanced rendering.

+
+<pre class="prettyprint
+     linenums">
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+</pre>
+
+

Download google-code-prettify and view the readme for how to use.

+
+
@@ -1070,9 +1066,9 @@
+ -

Use the same .span* classes from the grid system for input sizes.

diff --git a/docs/components.html b/docs/components.html index a525582203..499e6b87cf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -948,7 +948,7 @@ - + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ad27d2be88..23d72efd57 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -6,6 +6,7 @@
+ - - -

{{_i}}Code Inline and block{{/i}}

-
LabelsLabels Markup
- - - - - - - - - - - - - - - - - - - - -
{{_i}}Element{{/i}}{{_i}}Result{{/i}}
<code>{{_i}}In a line of text like this, your wrapped code will look like this <html> element.{{/i}}
<pre> -
<div>
-  <h1>{{_i}}Heading{{/i}}</h1>
-  <p>{{_i}}Something right here…{{/i}}</p>
-</div>
-

{{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

-
<pre class="prettyprint"> -

{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}

-
<div>
-  <h1>{{_i}}Heading{{/i}}</h1>
-  <p>{{_i}}Something right here…{{/i}}</p>
-</div>
-
<div>
-  <h1>{{_i}}Heading{{/i}}</h1>
-  <p>{{_i}}Something right here…{{/i}}</p>
-</div>
-

{{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}

-
+ +
+
+

{{_i}}Code{{/i}} {{_i}}Inline and block code snippets{{/i}}

+
+
+
+

Inline

+

Wrap inline snippets of code with <code>.

+
+{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
+
+
+
+

Basic block

+

{{_i}}Use <pre> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}

+
+<pre>
+  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+</pre>
+
+

{{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

+
+
+

Google Prettify

+

Take the same <pre> element and add two optional classes for enhanced rendering.

+
+<pre class="prettyprint
+     linenums">
+  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
+</pre>
+
+

{{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}

+
+
@@ -1005,9 +1001,9 @@
+ -

{{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 98e7c3f3f7..d08ea98b59 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -883,7 +883,7 @@ - + diff --git a/less/responsive.less b/less/responsive.less index 8bfe705b4d..6ba31b5c93 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -27,6 +27,12 @@ @media (max-width: 480px) { + // Block level the page header small tag for readability + .page-header h1 small { + display: block; + line-height: @baseLineHeight; + } + // Remove the horizontal form styles .form-horizontal .control-group > label { float: none;
{{_i}}Labels{{/i}}{{_i}}Labels{{/i}} {{_i}}Markup{{/i}}