Skip to content

Commit

Permalink
tweaking prettify styles to introduce dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Oct 21, 2011
1 parent d28f3d8 commit 41ada30
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 50 deletions.
68 changes: 61 additions & 7 deletions docs/assets/js/google-code-prettify/prettify.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,29 @@
.kwd, .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #CB4B16; }
.pln { color: #93a1a1; }
pre.prettyprint {
background: #fefbf3;
.prettyprint {
background-color: #fefbf3;
padding: 9px;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; }
.linenums {
margin: 0 0 0 40px;
}
/* IE indents via margin-left */
.linenums li {
margin-left: -5px;
padding: 0 5px;
color: rgba(0,0,0,.15);
line-height: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { }

Expand All @@ -38,4 +49,47 @@ $violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
*/
*/


/*
#1d1f21 Background
#282a2e Current Line
#373b41 Selection
#c5c8c6 Foreground
#969896 Comment
#cc6666 Red
#de935f Orange
#f0c674 Yellow
#b5bd68 Green
#8abeb7 Aqua
#81a2be Blue
#b294bb Purple
*/


/* DARK THEME */
/* ---------- */

.prettyprint-dark {
background-color: #1d1f21;
border: 0;
padding: 10px;
}
.prettyprint-dark .linenums li {
color: #444;
}
.prettyprint-dark .linenums li:hover {
background-color: #282a2e;
}
/* tags in html */
.prettyprint-dark .kwd,
.prettyprint-dark .tag { color: #cc6666; }
/* html attr */
.prettyprint-dark .typ,
.prettyprint-dark .atn,
.prettyprint-dark .dec,
.prettyprint-dark .var { color: #de935f; }
/* html attr values */
.prettyprint-dark .str,
.prettyprint-dark .atv { color: #b5bd68; }
86 changes: 43 additions & 43 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ <h2>Default grid</h2>
<div class="span12">
<h3>Example grid markup</h3>
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
<pre class="prettyprint linenums">
<pre class="prettyprint prettyprint-dark linenums">
&lt;div class="row"&gt;
&lt;div class="span6"&gt;
...
Expand Down Expand Up @@ -327,7 +327,7 @@ <h2>Roll your own grid</h2>
<div class="span12">
<h3>Inside the grid</h3>
<p>The variables needed to modify the grid system currently all reside in <code>variables.less</code>.</p>
<table class="zebra-striped">
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th>Variable</th>
Expand Down Expand Up @@ -601,7 +601,7 @@ <h2>Code</h2>
<div class="span12">
<h3>Presenting code</h3>
<p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code>&lt;pre&gt;</code> element. For inline code, use the <code>&lt;code&gt;</code> element.</p>
<table class="zebra-striped">
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th style="width: 190px;">Element</th>
Expand Down Expand Up @@ -651,7 +651,7 @@ <h2>Inline labels</h2>
<div class="span12">
<h3>Label anything</h3>
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
<table class="zebra-striped">
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th style="width: 50%;">Label</th>
Expand Down Expand Up @@ -903,7 +903,7 @@ <h3>Example: Bordered table</h3>
&lt;/table&gt;</pre>
<h3>Example: Zebra-striped</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>
<table class="zebra-striped">
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -949,7 +949,7 @@ <h3>Example: Zebra-striped</h3>
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
<pre class="prettyprint linenums">
&lt;table class="zebra-striped"&gt;
...
...
&lt;/table&gt;</pre>
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
Expand Down Expand Up @@ -1763,43 +1763,43 @@ <h2>Getting started</h2>
<div class="span12">
<h3>What's included</h3>
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
<table class="zebra-striped">
<thead>
<tr>
<th style="width: 150px;">File</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
<td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
</tr>
<tr>
<td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
<td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
</tr>
<tr>
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
</tr>
<tr>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
</tr>
<tr>
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th style="width: 150px;">File</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
<td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
</tr>
<tr>
<td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
<td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
</tr>
<tr>
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
</tr>
<tr>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
</tr>
<tr>
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
</tr>
<tr>
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
</tr>
<tr>
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
</tr>
</tbody>
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
</tr>
<tr>
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
</tr>
<tr>
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
</tr>
</tbody>
</table>
<h3>Is javascript necessary?</h3>
<p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
Expand Down Expand Up @@ -1922,7 +1922,7 @@ <h3>Operations</h3>
<h2>Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
<table class="zebra-striped">
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th style="width: 120px;">Method</th>
Expand Down

0 comments on commit 41ada30

Please sign in to comment.