Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

generate docs

  • Loading branch information...
commit ff7a24138254aaa45c6602b0786cb971b0c6ffa2 1 parent 5ff728e
@logicalparadox authored
View
5 docs/data/index.md
@@ -2,8 +2,6 @@
title: Electron
---
-> A simple argument-parsing and program framework for [node.js](http://nodejs.org) command-line interfaces.
-
#### Features
- reimagined `process.argv` parsing utility
@@ -51,7 +49,7 @@ argv.mode('m', 'minify'); // true
argv.param('o', 'out'); // 'saved.min.js'
```
-Recommend reading the "Argument Parsing" section of this documentation
+Recommend reading the "Argument Parsing Utility" section of this documentation
to learn about the methodologies and specifics of each of the helpers.
#### Your First Program
@@ -101,6 +99,7 @@ program.parse();
```
Your `-h, --help` and `-v, --version` will be generated for you automatically.
+
Recommend reading the "Program Framework" and "Constructing Commands" sections
of this documentation to learn about all of the available chainable commands
and theming options available to construct your programs.
View
145 docs/out/index.html
@@ -9,13 +9,16 @@
<body>
<div class="wrapper">
<header>
- <h1>Electron</h1>
+ <h1><a href="#top" class="scroll">Electron</a></h1>
+ <div class="tagline">A simple command-line interface <br>framework for <a href="http://nodejs.org">node.js</a>.</div><a href="https://github.com/logicalparadox/electron" class="fork">
+ <h2>View the Project on GitHub</h2>
+ <div class="project">logicalparadox/electron</div></a>
<nav>
- <div id="installation" class="head"> <a href="#header-installation" class="scroll">Installation</a></div>
- <div id="argument_parsing" class="head"><a href="#header-argument_parsing" class="scroll">Argument Parsing</a></div>
- <div id="command" class="section argument_parsing"><a href="#argument_parsing-command" class="scroll">command</a></div>
- <div id="mode" class="section argument_parsing"><a href="#argument_parsing-mode" class="scroll">mode</a></div>
- <div id="param" class="section argument_parsing"><a href="#argument_parsing-param" class="scroll">param</a></div>
+ <div id="installation" class="head"> <a href="#header-installation" class="scroll">Quick Start</a></div>
+ <div id="argument_parsing_utility" class="head"><a href="#header-argument_parsing_utility" class="scroll">Argument Parsing Utility</a></div>
+ <div id="command" class="section argument_parsing_utility"><a href="#argument_parsing_utility-command" class="scroll">command</a></div>
+ <div id="mode" class="section argument_parsing_utility"><a href="#argument_parsing_utility-mode" class="scroll">mode</a></div>
+ <div id="param" class="section argument_parsing_utility"><a href="#argument_parsing_utility-param" class="scroll">param</a></div>
<div id="defaults" class="section "><a href="#-defaults" class="scroll">defaults</a></div>
<div id="program_framework" class="head"><a href="#header-program_framework" class="scroll">Program Framework</a></div>
<div id="command" class="section program_framework"><a href="#program_framework-command" class="scroll">command</a></div>
@@ -34,25 +37,105 @@
</header>
<section id="content">
<div id="header-installation" class="segment">
- <div class="description"><blockquote>
-<p>A tiny cli framework for node.js.
-
-</p>
-</blockquote>
-<h2>Features</h2>
+ <div class="para"><a href="#header-installation">&para;</a></div>
+ <div class="description"><h4>Features</h4>
<ul>
-<li>tbd</li>
+<li>reimagined <code>process.argv</code> parsing utility</li>
+<li>framework for single or multiple command programs</li>
+<li>automatic <code>--help</code> command generation with multiple theming options</li>
+<li>built in cli coloring </li>
+<li>chainable api</li>
</ul>
-<h2>Installation</h2>
-<h5>Node</h5>
-<p><code>electron</code> package is available through <a href="http://npmjs.org">npm</a>.
+<h2>Quick Start Guide</h2>
+<h4>Installation</h4>
+<p>The <code>electron</code> package is available through <a href="http://npmjs.org">npm</a>. It is recommended
+that you add it to your project&#39;s <code>package.json</code>.
</p>
<pre><code class="lang-bash">npm install electron</code></pre>
+<h4>Parsing Arguments</h4>
+<p>The argument parsing utility can be used independently of the program
+framework. Just pass the <code>process.argv</code> from any node modules and your
+ready to go.
+
+</p>
+<p>The following command execution...
+
+</p>
+<pre><code class="lang-bash">$ node cli.js build --minify --out saved.min.js</code></pre>
+<p>Could be captured as so...
+
+</p>
+<pre><code class="lang-javascript"><span class="keyword">var</span> argv = require(<span class="string">'electron'</span>).argv();
+
+<span class="comment">// objects</span>
+argv.commands; <span class="comment">// [ 'build' ]</span>
+argv.modes; <span class="comment">// [ 'minify' ]</span>
+argv.params; <span class="comment">// { out: 'saved.min.js' }</span>
+
+<span class="comment">// helpers</span>
+argv.command(<span class="string">'build'</span>); <span class="comment">// true</span>
+argv.mode(<span class="string">'m'</span>, <span class="string">'minify'</span>); <span class="comment">// true</span>
+argv.param(<span class="string">'o'</span>, <span class="string">'out'</span>); <span class="comment">// 'saved.min.js'</span></code></pre>
+<p>Recommend reading the &quot;Argument Parsing Utility&quot; section of this documentation
+to learn about the methodologies and specifics of each of the helpers.
+
+</p>
+<h4>Your First Program</h4>
+<p>To construct your first program, simply execute the electron export
+with a parameter of the namespace you wish to use for your program.
+Then proceed to define your settings and commands.
+
+</p>
+<pre><code class="lang-javascript"><span class="keyword">var</span> myApp = require(<span class="string">'../lib/myapp'</span>)
+ , program = require(<span class="string">'electron'</span>)(<span class="string">'myapp'</span>);
+
+<span class="comment">/**
+ * Define your program settings
+ */</span>
+
+program
+ .name(<span class="string">'My Cool App'</span>)
+ .desc(<span class="string">'http://docs.mycoolapp.com'</span>)
+ .version(myApp.version);
+
+<span class="comment">/**
+ * Define your first command
+ */</span>
+
+program
+ .command(<span class="string">'build'</span>)
+ .desc(<span class="string">'start a build task'</span>)
+ .option(<span class="string">'-m, --minify'</span>, <span class="string">'flag to set enable minification'</span>)
+ .option(<span class="string">'-o, --out [file.js]'</span>, <span class="string">'name of output file'</span>)
+ .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
+ <span class="keyword">var</span> minify = argv.mode(<span class="string">'m'</span>, <span class="string">'minify'</span>)
+ , savefile = argv.param(<span class="string">'o'</span>, <span class="string">'out'</span>)
+ , cwd = argv.cwd;
+
+ program.colorize();
+ console.log(<span class="string">'Welcome to myApp'</span>.gray + myApp.version);
+ console.log(<span class="string">'It works if it ends with '</span>.gray + <span class="string">'myApp '</span> + <span class="string">'ok'</span>.green);
+ <span class="comment">// etc...</span>
+ });
+
+<span class="comment">/**
+ * Parse argv and execute respective command
+ */</span>
+
+program.parse();</code></pre>
+<p>Your <code>-h, --help</code> and <code>-v, --version</code> will be generated for you automatically.
+
+</p>
+<p>Recommend reading the &quot;Program Framework&quot; and &quot;Constructing Commands&quot; sections
+of this documentation to learn about all of the available chainable commands
+and theming options available to construct your programs.
+</p>
</div>
</div>
- <div id="header-argument_parsing" class="segment">
- <div class="summary"><h2>Argument Parsing</h2>
+ <div id="header-argument_parsing_utility" class="segment">
+ <div class="para"><a href="#header-argument_parsing_utility">&para;</a></div>
+ <div class="summary"><h2>Argument Parsing Utility</h2>
</div>
<ul class="tags">
</ul>
@@ -74,8 +157,8 @@
</p>
<h5>Commands</h5>
<p>Commands are the simplest of arguments. They are any arguments
-that are listed to that do not start with the <code>-</code> prefix. Essentially,
-they are a list of keys.
+that are listed to that do not start with the <code>-</code> or <code>--</code> prefix.
+Essentially, they are a list of keys.
</p>
<pre><code><span class="comment">// $ node cli.js hello universe</span>
@@ -102,7 +185,8 @@
};</code></pre>
</div>
</div>
- <div id="argument_parsing-command" class="segment">
+ <div id="argument_parsing_utility-command" class="segment">
+ <div class="para"><a href="#argument_parsing_utility-command">&para;</a></div>
<div class="summary"><h3>.command (cmd, [cmd], [...])</h3>
</div>
<ul class="tags">
@@ -117,7 +201,8 @@
, world = argv.command(<span class="string">'world'</span>, <span class="string">'earth'</span>); <span class="comment">// false</span></code></pre>
</div>
</div>
- <div id="argument_parsing-mode" class="segment">
+ <div id="argument_parsing_utility-mode" class="segment">
+ <div class="para"><a href="#argument_parsing_utility-mode">&para;</a></div>
<div class="summary"><h3>.mode (mode, [mode], [...])</h3>
</div>
<ul class="tags">
@@ -132,7 +217,8 @@
, world = argv.mode(<span class="string">'w'</span>, <span class="string">'world'</span>); <span class="comment">// false</span></code></pre>
</div>
</div>
- <div id="argument_parsing-param" class="segment">
+ <div id="argument_parsing_utility-param" class="segment">
+ <div class="para"><a href="#argument_parsing_utility-param">&para;</a></div>
<div class="summary"><h3>.param (param, [param], [...])</h3>
</div>
<ul class="tags">
@@ -149,6 +235,7 @@
</div>
</div>
<div id="header-program_framework" class="segment">
+ <div class="para"><a href="#header-program_framework">&para;</a></div>
<div class="summary"><h2>Program Framework</h2>
</div>
<ul class="tags">
@@ -181,6 +268,7 @@
</div>
</div>
<div id="program_framework-command" class="segment">
+ <div class="para"><a href="#program_framework-command">&para;</a></div>
<div class="summary"><h3>.command (name)</h3>
</div>
<ul class="tags">
@@ -282,6 +370,7 @@
</div>
</div>
<div id="program_framework-parse" class="segment">
+ <div class="para"><a href="#program_framework-parse">&para;</a></div>
<div class="summary"><h3>.parse (process.argv)</h3>
</div>
<ul class="tags">
@@ -306,6 +395,7 @@
</div>
</div>
<div id="program_framework-name" class="segment">
+ <div class="para"><a href="#program_framework-name">&para;</a></div>
<div class="summary"><h3>.name (name)</h3>
</div>
<ul class="tags">
@@ -320,6 +410,7 @@
</div>
</div>
<div id="program_framework-version" class="segment">
+ <div class="para"><a href="#program_framework-version">&para;</a></div>
<div class="summary"><h3>.version (version)</h3>
</div>
<ul class="tags">
@@ -334,6 +425,7 @@
</div>
</div>
<div id="program_framework-desc" class="segment">
+ <div class="para"><a href="#program_framework-desc">&para;</a></div>
<div class="summary"><h3>.desc (description)</h3>
</div>
<ul class="tags">
@@ -348,6 +440,7 @@
</div>
</div>
<div id="program_framework-cwd" class="segment">
+ <div class="para"><a href="#program_framework-cwd">&para;</a></div>
<div class="summary"><h3>.cwd (fqp)</h3>
</div>
<ul class="tags">
@@ -371,6 +464,7 @@
</div>
</div>
<div id="program_framework-theme" class="segment">
+ <div class="para"><a href="#program_framework-theme">&para;</a></div>
<div class="summary"><h3>.theme (theme, specifications)</h3>
</div>
<ul class="tags">
@@ -428,6 +522,7 @@
</div>
</div>
<div id="program_framework-colorize" class="segment">
+ <div class="para"><a href="#program_framework-colorize">&para;</a></div>
<div class="summary"><h3>.colorize ()</h3>
</div>
<ul class="tags">
@@ -455,6 +550,7 @@
</div>
</div>
<div id="header-constructing_commands" class="segment">
+ <div class="para"><a href="#header-constructing_commands">&para;</a></div>
<div class="summary"><h2>Constructing Commands</h2>
</div>
<ul class="tags">
@@ -466,6 +562,7 @@
</div>
</div>
<div id="constructing_commands-desc" class="segment">
+ <div class="para"><a href="#constructing_commands-desc">&para;</a></div>
<div class="summary"><h3>.desc (description)</h3>
</div>
<ul class="tags">
@@ -481,6 +578,7 @@
</div>
</div>
<div id="constructing_commands-option" class="segment">
+ <div class="para"><a href="#constructing_commands-option">&para;</a></div>
<div class="summary"><h3>.option (opts, description, required)</h3>
</div>
<ul class="tags">
@@ -507,6 +605,7 @@
</div>
</div>
<div id="constructing_commands-action" class="segment">
+ <div class="para"><a href="#constructing_commands-action">&para;</a></div>
<div class="summary"><h3>.action (function)</h3>
</div>
<ul class="tags">
View
82 docs/out/public/css/main.css
@@ -1,5 +1,5 @@
@import url("https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700");
-@import url("http://fonts.googleapis.com/css?family=Oxygen");
+@import url("https://fonts.googleapis.com/css?family=Oxygen");
html,
body,
div,
@@ -138,32 +138,78 @@ body {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 50px;
- color: #777;
+ background-color: #f1f1f0;
+ color: #292929;
}
h1,
h2 {
- font-family: Oxygen, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: 'Oxygen', sans-serif;
+ color: #696866;
+}
+h1 a,
+h2 a {
+ color: #696866;
}
h2 {
margin-top: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
-h1,
-h2,
+h3,
h4,
h5,
h6 {
- color: #222;
+ color: #696866;
font-weight: bold;
}
-h3 {
- color: #39c;
-}
a {
- color: #c30;
+ color: #e78427;
text-decoration: none;
}
+a.fork {
+ display: block;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9903d), color-stop(1, #e78427));
+ background: -webkit-linear-gradient(top, #e9903d 0%, #e78427 100%);
+ background: -moz-linear-gradient(top, #e9903d 0%, #e78427 100%);
+ background: -o-linear-gradient(top, #e9903d 0%, #e78427 100%);
+ background: -ms-linear-gradient(top, #e9903d 0%, #e78427 100%);
+ background: linear-gradient(top, #e9903d 0%, #e78427 100%);
+ -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+ -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+ box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+ border: 1px solid #c26916;
+ color: #fff;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding: 10px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ text-shadow: 1px 1px 0px #aa5c13;
+}
+a.fork:hover {
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ec9d52), color-stop(1, #e9903d));
+ background: -webkit-linear-gradient(top, #ec9d52 0%, #e9903d 100%);
+ background: -moz-linear-gradient(top, #ec9d52 0%, #e9903d 100%);
+ background: -o-linear-gradient(top, #ec9d52 0%, #e9903d 100%);
+ background: -ms-linear-gradient(top, #ec9d52 0%, #e9903d 100%);
+ background: linear-gradient(top, #ec9d52 0%, #e9903d 100%);
+}
+a.fork h2 {
+ border-bottom: 0px;
+ margin: 0px;
+ color: #fff;
+ padding: 0px;
+}
+a.fork .project {
+ font-size: 16px;
+}
+em {
+ font-style: italic;
+}
+strong {
+ font-weight: bold;
+}
code,
pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
@@ -187,6 +233,19 @@ pre {
}
.segment {
margin-bottom: 60px;
+ position: relative;
+}
+.segment .para {
+ position: absolute;
+ left: -20px;
+ font-size: 14px;
+ width: 20px;
+ display: none;
+ opacity: 0;
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+}
+.segment .para a {
+ color: #292929;
}
ul.tags {
font-size: 12px;
@@ -212,6 +271,7 @@ header {
}
section#content {
width: 500px;
+ padding-top: 65px;
float: right;
}
nav {
@@ -227,7 +287,7 @@ nav .head > a {
color: #222;
}
nav .section > a {
- color: #39c;
+ color: #aa5c13;
}
footer {
width: 270px;
View
78 docs/out/public/js/main.js
@@ -1,5 +1,23 @@
$(document).ready(function() {
- // :D
+ // :)
+
+ $('.segment').mouseenter(function (e) {
+ var $para = $(this).find('.para');
+ $para.css({
+ display: 'block'
+ });
+
+ $para
+ .stop()
+ .animate({ 'opacity': 1 }, 300);
+ });
+
+ $('.segment').mouseleave(function (e) {
+ var $para = $(this).find('.para');
+ $para
+ .stop()
+ .animate({ 'opacity': 0 }, 300);
+ });
var scrolling = false
, lastSection = 'installation';
@@ -7,29 +25,35 @@ $(document).ready(function() {
$('a.scroll').click(function (e) {
e.preventDefault();
- var section = $(this).attr('href')
- , $scrollto = $(section);
-
+ var section = $(this).attr('href');
scrolling = true;
- $('html,body').animate({
- scrollTop: $scrollto.offset().top - 15
- }, function () {
- setTimeout(function () {
- lastSection = section.substr(1);
- setActiveMenu();
- scrolling = false;
- }, 300);
- });
+ if (section == '#top') {
+ $('html,body').animate({
+ scrollTop: 0
+ }, function () {
+ setTimeout(function () {
+ lastSection = 'header-installation';
+ setActiveMenu();
+ scrolling = false;
+ }, 300);
+ });
+ } else {
+ var $scrollto = $(section);
+ $('html,body').animate({
+ scrollTop: $scrollto.offset().top - 15
+ }, function () {
+ setTimeout(function () {
+ lastSection = section.substr(1);
+ setActiveMenu();
+ scrolling = false;
+ }, 300);
+ });
+ }
});
var panelTops = {}
+ , theTimer;
- $('.segment').each(function(index) {
- var id = $(this).attr('id');
- panelTops[id] = $(this).offset().top;
- });
-
- console.log(panelTops);
function detectActiveMenu() {
if (scrolling) return;
@@ -54,8 +78,6 @@ $(document).ready(function() {
, isHeader = (info[0] == 'header') ? true : false
, primary = (isHeader) ? info[1] : info[0];
- console.log(isHeader, primary);
-
$('nav > div').removeClass('active');
if (isHeader) {
$('nav > #' + primary + '.head')
@@ -96,12 +118,24 @@ $(document).ready(function() {
}
setTimeout(function () {
+
+ $('.segment').each(function(index) {
+ var id = $(this).attr('id');
+ panelTops[id] = $(this).offset().top;
+ });
+
detectActiveMenu();
// this handles the document scroll event
$(document).scroll(function(e) {
if (!scrolling) detectActiveMenu();
+ if (!theTimer) {
+ theTimer = setTimeout(function () {
+ detectActiveMenu();
+ theTimer = null;
+ }, 1000);
+ }
});
- }, 500);
+ }, 2000);
});
View
78 docs/template/assets/js/main.js
@@ -1,5 +1,23 @@
$(document).ready(function() {
- // :D
+ // :)
+
+ $('.segment').mouseenter(function (e) {
+ var $para = $(this).find('.para');
+ $para.css({
+ display: 'block'
+ });
+
+ $para
+ .stop()
+ .animate({ 'opacity': 1 }, 300);
+ });
+
+ $('.segment').mouseleave(function (e) {
+ var $para = $(this).find('.para');
+ $para
+ .stop()
+ .animate({ 'opacity': 0 }, 300);
+ });
var scrolling = false
, lastSection = 'installation';
@@ -7,29 +25,35 @@ $(document).ready(function() {
$('a.scroll').click(function (e) {
e.preventDefault();
- var section = $(this).attr('href')
- , $scrollto = $(section);
-
+ var section = $(this).attr('href');
scrolling = true;
- $('html,body').animate({
- scrollTop: $scrollto.offset().top - 15
- }, function () {
- setTimeout(function () {
- lastSection = section.substr(1);
- setActiveMenu();
- scrolling = false;
- }, 300);
- });
+ if (section == '#top') {
+ $('html,body').animate({
+ scrollTop: 0
+ }, function () {
+ setTimeout(function () {
+ lastSection = 'header-installation';
+ setActiveMenu();
+ scrolling = false;
+ }, 300);
+ });
+ } else {
+ var $scrollto = $(section);
+ $('html,body').animate({
+ scrollTop: $scrollto.offset().top - 15
+ }, function () {
+ setTimeout(function () {
+ lastSection = section.substr(1);
+ setActiveMenu();
+ scrolling = false;
+ }, 300);
+ });
+ }
});
var panelTops = {}
+ , theTimer;
- $('.segment').each(function(index) {
- var id = $(this).attr('id');
- panelTops[id] = $(this).offset().top;
- });
-
- console.log(panelTops);
function detectActiveMenu() {
if (scrolling) return;
@@ -54,8 +78,6 @@ $(document).ready(function() {
, isHeader = (info[0] == 'header') ? true : false
, primary = (isHeader) ? info[1] : info[0];
- console.log(isHeader, primary);
-
$('nav > div').removeClass('active');
if (isHeader) {
$('nav > #' + primary + '.head')
@@ -96,12 +118,24 @@ $(document).ready(function() {
}
setTimeout(function () {
+
+ $('.segment').each(function(index) {
+ var id = $(this).attr('id');
+ panelTops[id] = $(this).offset().top;
+ });
+
detectActiveMenu();
// this handles the document scroll event
$(document).scroll(function(e) {
if (!scrolling) detectActiveMenu();
+ if (!theTimer) {
+ theTimer = setTimeout(function () {
+ detectActiveMenu();
+ theTimer = null;
+ }, 1000);
+ }
});
- }, 500);
+ }, 2000);
});
View
13 docs/template/index.jade
@@ -1,11 +1,18 @@
extends layout
block header
- h1= file.title
+ h1: a.scroll(href='#top')= file.title
+ .tagline A simple command-line interface <br>framework for
+ a(href='http://nodejs.org') node.js
+ | .
+ a.fork(href='https://github.com/logicalparadox/electron')
+ h2 View the Project on GitHub
+ .project logicalparadox/electron
+
block nav
div(id='installation', class='head')
- a.scroll(href='#header-installation') Installation
+ a.scroll(href='#header-installation') Quick Start
for codeFile in files.code
- var lastHeader = ''
for comment in codeFile.prepared
@@ -18,6 +25,7 @@ block nav
block content
#header-installation.segment
+ .para: a(href='#header-installation') &para;
.description!= file.prepared
for codeFile in files.code
- var lastPrimary = ''
@@ -31,6 +39,7 @@ block content
- if (tag.type === 'name')
- id = lastPrimary + '-' + tag.string
.segment(id=id)
+ .para: a(href='#' + id) &para;
.summary!= comment.description.summary
ul.tags
each tag in comment.tags
View
64 docs/template/stylus/main.styl
@@ -1,5 +1,5 @@
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
-@import url(http://fonts.googleapis.com/css?family=Oxygen);
+@import url(https://fonts.googleapis.com/css?family=Oxygen);
@import 'nib'
@import 'fez'
@@ -7,31 +7,63 @@
global-reset()
fez-reset()
+electrorange = #E78427
+
body
font 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif
font-weight 300
padding 50px
- color #777
+ background-color #F1F1F0
+ color #292929
h1, h2
- font-family Oxygen, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif
+ font-family 'Oxygen', sans-serif
+ color #696866
+ a
+ color #696866
h2
margin-top 30px
padding-bottom 10px
border-bottom 1px solid #ccc
-h1, h2, h4, h5, h6
- color #222
+h3, h4, h5, h6
+ color #696866
font-weight bold
-h3
- color #39C
-
a
- color #cc3300
+ color electrorange
text-decoration none
+a.fork
+ display block
+ background linear-gradient(top ,lighten(electrorange, 10%), electrorange)
+ box-shadow 1px 1px 5px rgba(0,0,0,30%)
+ border 1px solid darken(electrorange, 20%)
+ color #fff
+ margin-top 30px
+ margin-bottom 30px
+ padding 10px
+ border-radius 5px
+ text-shadow 1px 1px 0px darken(electrorange, 30%)
+
+ &:hover
+ background linear-gradient(top ,lighten(electrorange, 20%), lighten(electrorange, 10%))
+
+ h2
+ border-bottom 0px
+ margin 0px
+ color #fff
+ padding 0px
+ .project
+ font-size 16px
+
+em
+ font-style italic
+
+strong
+ font-weight bold
+
code, pre
font-family Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
color #333;
@@ -52,6 +84,17 @@ pre
.segment
margin-bottom 60px
+ position relative
+
+ .para
+ position absolute
+ left -20px
+ font-size 14px
+ width 20px
+ display none
+ opacity 0
+ a
+ color #292929
ul.tags
font-size 12px
@@ -75,6 +118,7 @@ header
section#content
width 500px
+ padding-top 65px
float right
nav
@@ -89,7 +133,7 @@ nav
.head > a
color #222
.section > a
- color #39C
+ color darken(electrorange, 30%)
footer
width 270px
Please sign in to comment.
Something went wrong with that request. Please try again.