octoleo
/
nativefier
mirror of https://github.com/Llewellynvdm/nativefier.git
2
2
Fork 0
Code Issues Releases Activity

Create gh-pages branch via GitHub

This commit is contained in:
Jia Hao 2016-02-25 19:15:07 +08:00
commit f215a662ca
5 changed files with 1194 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
index.html Normal file
View File

@ -0,0 +1,408 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Nativefier by jiahaog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Nativefier</h1>
<h2 class="project-tagline">Wrap any web page natively without even thinking, across Windows, OSX and Linux</h2>
<a href="https://github.com/jiahaog/nativefier" class="btn">View on GitHub</a>
<a href="https://github.com/jiahaog/nativefier/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/jiahaog/nativefier/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="nativefier" class="anchor" href="#nativefier" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Nativefier</h1>
<p><a href="https://travis-ci.org/jiahaog/nativefier"><img src="https://travis-ci.org/jiahaog/nativefier.svg?branch=development" alt="Build Status"></a>
<a href="https://www.npmjs.com/package/nativefier"><img src="https://badge.fury.io/js/nativefier.svg" alt="npm version"></a>
<a href="https://codeclimate.com/github/jiahaog/nativefier"><img src="https://codeclimate.com/github/jiahaog/nativefier/badges/gpa.svg" alt="Code Climate"></a></p>
<p><img src="https://raw.githubusercontent.com/jiahaog/nativefier/master/screenshots/Dock%20Screenshot.png" alt="Dock Screenshot"></p>
<p>You want to make a native wrapper for Google Maps (or any web page).</p>
<div class="highlight highlight-source-shell"><pre>$ nativefier maps.google.com</pre></div>
<p>You're done.</p>
<h2>
<a id="introduction" class="anchor" href="#introduction" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Introduction</h2>
<p>Nativefier is a command line tool that allows you to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by <a href="http://electron.atom.io">Electron</a> in an OS executable (<code>.app</code>, <code>.exe</code>, etc.) for use on Windows, OSX and Linux.</p>
<p>I did this because I was tired of having to <code>⌘-tab</code> or <code>alt-tab</code> to my browser and then search through the numerous open tabs when I was using <a href="http://messenger.com">Facebook Messenger</a> or <a href="http://web.whatsapp.com">Whatsapp Web</a>.</p>
<p>View the changelog <a href="https://github.com/jiahaog/nativefier/blob/master/History.md">here</a>.</p>
<p><a href="https://news.ycombinator.com/item?id=10930718">Relevant Hacker News Thread</a></p>
<h3>
<a id="features" class="anchor" href="#features" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Features</h3>
<ul>
<li>Automatically retrieves the correct icon and app name</li>
<li>Flash Support (Needs Testing)</li>
<li>Javascript and CSS injection</li>
</ul>
<h2>
<a id="installation" class="anchor" href="#installation" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Installation</h2>
<p>With <a href="https://nodejs.org/">Node.js</a> installed,</p>
<div class="highlight highlight-source-shell"><pre><span class="pl-c"># for use from the command line</span>
$ npm install nativefier -g</pre></div>
<h3>
<a id="optional-dependencies" class="anchor" href="#optional-dependencies" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Optional Dependencies</h3>
<h4>
<a id="png-to-icns-conversion" class="anchor" href="#png-to-icns-conversion" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><code>.png</code> to <code>.icns</code> Conversion</h4>
<p>To support usage of a <code>.png</code> for a packaged OSX app icon (currently only supported on OSX), you need the following dependencies.</p>
<h5>
<a id="sips" class="anchor" href="#sips" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/sips.1.html">sips</a>
</h5>
<p>Automatically ships with OSX</p>
<h5>
<a id="iconutil" class="anchor" href="#iconutil" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="https://developer.apple.com/library/mac/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Optimizing/Optimizing.html">iconutil</a>
</h5>
<p>You need <a href="https://developer.apple.com/xcode/">XCode</a> installed.</p>
<h5>
<a id="imagemagick" class="anchor" href="#imagemagick" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="http://www.imagemagick.org/script/index.php">imagemagick</a>
</h5>
<div class="highlight highlight-source-shell"><pre>$ brew install imagemagick</pre></div>
<h5>
<a id="google-chrome" class="anchor" href="#google-chrome" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a><a href="https://www.google.com/chrome/">Google Chrome</a>
</h5>
<p>Google Chrome is required for flash to be supported. Alternatively, you could download the PepperFlash Chrome plugin and specify the path to it directly with the <code>--flash</code> flag. See the command line options below for more details.</p>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage</h2>
<p>Creating a native desktop app for <a href="http://medium.com">medium.com</a>:</p>
<div class="highlight highlight-source-shell"><pre>$ nativefier <span class="pl-s"><span class="pl-pds">"</span>http://medium.com<span class="pl-pds">"</span></span></pre></div>
<p>Nativefier will intelligently attempt to determine the app name, your OS and processor architecture, among other options. If desired, the app name or other options can be overwritten by specifying the <code>--name "Medium"</code> as part of the command line options, as such.</p>
<pre><code>$ nativefier --name "Some Awesome App" "http://medium.com"
</code></pre>
<p><strong>For Windows Users:</strong> Take note that the application menu is automatically hidden by default, you can press <code>alt</code> on your keyboard to access it.</p>
<p><strong>For Linux Users:</strong> Do not put spaces if you define the app name yourself with <code>--name</code>, as this will cause problems (tested on Ubuntu 14.04) when pinning a packaged app to the launcher.</p>
<h2>
<a id="command-line-options" class="anchor" href="#command-line-options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Command Line Options</h2>
<div class="highlight highlight-source-shell"><pre>$ nativefier [options] <span class="pl-k">&lt;</span>targetUrl<span class="pl-k">&gt;</span> [dest]</pre></div>
<p>Command line options are listed below.</p>
<h4>
<a id="target-url" class="anchor" href="#target-url" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Target Url</h4>
<p>The url to point the application at.</p>
<h4>
<a id="dest" class="anchor" href="#dest" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[dest]</h4>
<p>Specifies the destination directory to build the app to, defaults to the current working directory.</p>
<h4>
<a id="help" class="anchor" href="#help" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Help</h4>
<pre><code>-h, --help
</code></pre>
<p>Prints the usage information.</p>
<h4>
<a id="version" class="anchor" href="#version" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Version</h4>
<pre><code>-V, --version
</code></pre>
<p>Prints the version of your <code>nativefier</code> install.</p>
<h4>
<a id="name" class="anchor" href="#name" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[name]</h4>
<pre><code>-n, --name &lt;value&gt;
</code></pre>
<p>The name of the application, which will affect strings in titles and the icon.</p>
<p><strong>For Linux Users:</strong> Do not put spaces if you define the app name yourself with <code>--name</code>, as this will cause problems (tested on Ubuntu 14.04) when pinning a packaged app to the launcher.</p>
<h4>
<a id="platform" class="anchor" href="#platform" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[platform]</h4>
<pre><code>-p, --platform &lt;value&gt;
</code></pre>
<p>Automatically determined based on the current OS. Can be overwritten by specifying either <code>linux</code>, <code>win32</code>, or <code>darwin</code>.</p>
<h4>
<a id="arch" class="anchor" href="#arch" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[arch]</h4>
<pre><code>-a, --arch &lt;value&gt;
</code></pre>
<p>Processor architecture, automatically determined based on the current OS. Can be overwritten by specifying either <code>ia32</code> or <code>x64</code>.</p>
<h4>
<a id="electron-version" class="anchor" href="#electron-version" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[electron-version]</h4>
<pre><code>-e, --electron-version &lt;value&gt;
</code></pre>
<p>Electron version without the <code>v</code>, see <a href="https://github.com/atom/electron/releases">https://github.com/atom/electron/releases</a>.</p>
<h4>
<a id="overwrite" class="anchor" href="#overwrite" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[overwrite]</h4>
<pre><code>-o, --overwrite
</code></pre>
<p>Specifies if the destination directory should be overwritten.</p>
<h4>
<a id="conceal" class="anchor" href="#conceal" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[conceal]</h4>
<pre><code>-c, --conceal
</code></pre>
<p>Specifies if the source code within the nativefied app should be packaged into an archive, defaults to false, <a href="http://electron.atom.io/docs/v0.36.0/tutorial/application-packaging/">read more</a>.</p>
<h4>
<a id="icon" class="anchor" href="#icon" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[icon]</h4>
<pre><code>-i, --icon &lt;path&gt;
</code></pre>
<h5>
<a id="packaging-for-windows-and-linux" class="anchor" href="#packaging-for-windows-and-linux" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Packaging for Windows and Linux</h5>
<p>The icon parameter should be a path to a <code>.png</code> file.</p>
<h5>
<a id="packaging-for-osx" class="anchor" href="#packaging-for-osx" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Packaging for OSX</h5>
<p>The icon parameter can either be a <code>.icns</code> or a <code>.png</code> file if the optional dependencies listed <a href="#optional-dependencies">above</a> are installed.</p>
<p>With the <code>sips</code>, <code>iconutil</code> and <code>imagemagick convert</code> optional dependencies in your <code>PATH</code>, Nativefier will automatically convert the <code>.png</code> to a <code>.icns</code> for you.</p>
<h6>
<a id="manually-converting-icns" class="anchor" href="#manually-converting-icns" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Manually Converting <code>.icns</code>
</h6>
<p><a href="https://iconverticons.com/online/">iConvertIcons</a> can be used to convert <code>.pngs</code>, though it can be quite cumbersome.</p>
<p>To retrieve the <code>.icns</code> file from the downloaded file, extract it first and press File &gt; Get Info. Then select the icon in the top left corner of the info window and press <code>⌘-C</code>. Open Preview and press File &gt; New from clipboard and save the <code>.icns</code> file. It took me a while to figure out how to do that and question why a <code>.icns</code> file was not simply provided in the downloaded archive.</p>
<h4>
<a id="counter" class="anchor" href="#counter" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[counter]</h4>
<pre><code>--counter
</code></pre>
<p>Use a counter that persists even with window focus for the application badge for sites that use an "(X)" format counter in the page title (i.e. Gmail). Same limitations as the badge option (above).</p>
<h4>
<a id="width" class="anchor" href="#width" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[width]</h4>
<pre><code>--width &lt;value&gt;
</code></pre>
<p>Width of the packaged application, defaults to <code>1280px</code>.</p>
<h4>
<a id="height" class="anchor" href="#height" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[height]</h4>
<pre><code>--height &lt;value&gt;
</code></pre>
<p>Height of the packaged application, defaults to <code>800px</code>.</p>
<h4>
<a id="show-menu-bar" class="anchor" href="#show-menu-bar" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[show-menu-bar]</h4>
<pre><code>-m, --show-menu-bar
</code></pre>
<p>Specifies if the menu bar should be shown.</p>
<h4>
<a id="user-agent" class="anchor" href="#user-agent" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[user-agent]</h4>
<pre><code>-u, --user-agent &lt;value&gt;
</code></pre>
<p>Set the user agent to run the created app with.</p>
<h4>
<a id="honest" class="anchor" href="#honest" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[honest]</h4>
<pre><code>--honest
</code></pre>
<p>By default, nativefier uses a preset user agent string for your OS and masquerades as a regular Google Chrome browser, so that sites like WhatsApp Web will not say that the current browser is unsupported.</p>
<p>If this flag is passed, it will not override the user agent.</p>
<h4>
<a id="ignore-certificate" class="anchor" href="#ignore-certificate" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[ignore-certificate]</h4>
<pre><code>--ignore-certificate
</code></pre>
<p>Forces the packaged app to ignore certificate errors.</p>
<h4>
<a id="insecure" class="anchor" href="#insecure" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[insecure]</h4>
<pre><code>--insecure
</code></pre>
<p>Forces the packaged app to ignore web security errors.</p>
<h4>
<a id="flash" class="anchor" href="#flash" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[flash]</h4>
<pre><code>--flash &lt;value&gt;
</code></pre>
<p>By default, nativefier will automatically try to determine the location of your Google Chrome flash binary. In the event that Flash does not appear to work, you can specify it directly with this command line flag, by retrieving the location of the Flash path from chrome://plugins, under <code>Adobe Flash Player</code> &gt; <code>Location</code>.</p>
<p>From my experience, it might be helpful to pass the <code>--insecure</code> flag if you are using nativefied flash apps, as some <code>https</code> websites tend to serve flash insecurely.</p>
<h4>
<a id="inject" class="anchor" href="#inject" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[inject]</h4>
<pre><code>--inject &lt;value&gt;
</code></pre>
<p>Allows you to inject a javascript or css file. This command can be run multiple times to inject the files.</p>
<p>Example:</p>
<div class="highlight highlight-source-shell"><pre>$ nativefier http://google.com --inject ./some-js-injection.js --inject ./some-css-injection.css <span class="pl-k">~</span>/Desktop</pre></div>
<h4>
<a id="full-screen" class="anchor" href="#full-screen" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>[full-screen]</h4>
<pre><code>--full-screen
</code></pre>
<p>Makes the packaged app start in full screen.</p>
<h2>
<a id="programmatic-api" class="anchor" href="#programmatic-api" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Programmatic API</h2>
<p>You can use the Nativefier programmatic API as well.</p>
<div class="highlight highlight-source-shell"><pre>$ npm install --save nativefier</pre></div>
<p>In your <code>.js</code> file:</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> nativefier <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>nativefier<span class="pl-pds">'</span></span>).<span class="pl-smi">default</span>;
<span class="pl-c">// possible options</span>
<span class="pl-k">var</span> options <span class="pl-k">=</span> {
name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Web WhatsApp<span class="pl-pds">'</span></span>,
targetUrl<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>http://web.whatsapp.com<span class="pl-pds">'</span></span>, <span class="pl-c">// required</span>
platform<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>darwin<span class="pl-pds">'</span></span>,
arch<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>x64<span class="pl-pds">'</span></span>,
version<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>0.36.4<span class="pl-pds">'</span></span>,
out<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>~/Desktop<span class="pl-pds">'</span></span>,
overwrite<span class="pl-k">:</span> <span class="pl-c1">true</span>,
asar<span class="pl-k">:</span> <span class="pl-c1">false</span>, <span class="pl-c">// see conceal</span>
icon<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>~/Desktop/icon.png<span class="pl-pds">'</span></span>,
counter<span class="pl-k">:</span> <span class="pl-c1">false</span>,
width<span class="pl-k">:</span> <span class="pl-c1">1280</span>,
height<span class="pl-k">:</span> <span class="pl-c1">800</span>,
showMenuBar<span class="pl-k">:</span> <span class="pl-c1">false</span>,
userAgent<span class="pl-k">:</span> <span class="pl-c1">null</span>,
ignoreCertificate<span class="pl-k">:</span> <span class="pl-c1">false</span>,
insecure<span class="pl-k">:</span> <span class="pl-c1">false</span>,
honest<span class="pl-k">:</span> <span class="pl-c1">false</span>
};
<span class="pl-en">nativefier</span>(options, <span class="pl-k">function</span>(<span class="pl-smi">error</span>, <span class="pl-smi">appPath</span>) {
<span class="pl-k">if</span> (error) {
<span class="pl-en">console</span>.<span class="pl-c1">error</span>(error);
<span class="pl-k">return</span>;
}
<span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">'</span>App has been nativefied to<span class="pl-pds">'</span></span>, appPath);
});</pre></div>
<p>More description about the <code>options</code> for <code>nativefier</code> can be found at the section on <a href="#command-line-options">command line flags</a>.</p>
<h2>
<a id="how-it-works" class="anchor" href="#how-it-works" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>How It Works</h2>
<p>A template app with the appropriate event listeners and callbacks set up is included in the <code>./app</code> folder. When the <code>nativefier</code> command is executed, this folder is copied to a temporary directory with the appropriate parameters in a configuration file, and is packaged into an app with <a href="https://github.com/maxogden/electron-packager">Electron Packager</a>.</p>
<p>Automatic retrieval of icons is possible thanks to <a href="https://github.com/mat/besticon">besticon</a>.</p>
<h2>
<a id="development" class="anchor" href="#development" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Development</h2>
<p>Setting up the project</p>
<div class="highlight highlight-source-shell"><pre>$ git clone https://github.com/jiahaog/nativefier.git
$ <span class="pl-c1">cd</span> nativefier
<span class="pl-c"># Set up dependencies for the cli tool and the placeholder app</span>
$ npm run dev-up
<span class="pl-c"># Set up symlinks so that you can run `$ nativefier` for your local changes</span>
$ npm link</pre></div>
<p>After doing so, you can then run nativefier with your test parameters</p>
<div class="highlight highlight-source-shell"><pre>$ nativefier <span class="pl-k">&lt;</span>...<span class="pl-k">&gt;</span></pre></div>
<p>Don't forget to compile source files (after making changes):</p>
<div class="highlight highlight-source-shell"><pre>$ npm run build</pre></div>
<p>Or you can automatically watch the files for changes with:</p>
<div class="highlight highlight-source-shell"><pre>$ npm run watch</pre></div>
<h2>
<a id="notes" class="anchor" href="#notes" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Notes</h2>
<p>Tested mostly on OSX, but should work for Windows and Linux.</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/jiahaog/nativefier">Nativefier</a> is maintained by <a href="https://github.com/jiahaog">jiahaog</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>

1
params.json Normal file
View File

File diff suppressed because one or more lines are too long

116
stylesheets/github-light.css Normal file
View File

@ -0,0 +1,116 @@
/*
Copyright 2014 GitHub Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.pl-c /* comment */ {
color: #969896;
}
.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
.pl-s .pl-v /* string variable */ {
color: #0086b3;
}
.pl-e /* entity */,
.pl-en /* entity.name */ {
color: #795da3;
}
.pl-s .pl-s1 /* string source */,
.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
color: #333;
}
.pl-ent /* entity.name.tag */ {
color: #63a35c;
}
.pl-k /* keyword, storage, storage.type */ {
color: #a71d5d;
}
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
.pl-s /* string */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
color: #183691;
}
.pl-v /* variable */ {
color: #ed6a43;
}
.pl-id /* invalid.deprecated */ {
color: #b52a1d;
}
.pl-ii /* invalid.illegal */ {
background-color: #b52a1d;
color: #f8f8f8;
}
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
color: #63a35c;
font-weight: bold;
}
.pl-ml /* markup.list */ {
color: #693a17;
}
.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
color: #1d3e81;
font-weight: bold;
}
.pl-mq /* markup.quote */ {
color: #008080;
}
.pl-mi /* markup.italic */ {
color: #333;
font-style: italic;
}
.pl-mb /* markup.bold */ {
color: #333;
font-weight: bold;
}
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
background-color: #ffecec;
color: #bd2c00;
}
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
background-color: #eaffea;
color: #55a532;
}
.pl-mdr /* meta.diff.range */ {
color: #795da3;
font-weight: bold;
}
.pl-mo /* meta.output */ {
color: #1d3e81;
}

424
stylesheets/normalize.css vendored Normal file
View File

@ -0,0 +1,424 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */ /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

245
stylesheets/stylesheet.css Normal file
View File

@ -0,0 +1,245 @@
* {
box-sizing: border-box; }
body {
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71; }
a {
color: #1e6bb8;
text-decoration: none; }
a:hover {
text-decoration: underline; }
.btn {
display: inline-block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn + .btn {
margin-left: 1rem; }
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3); }
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem; } }
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem; }
.btn + .btn {
margin-top: 1rem;
margin-left: 0; } }
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
@media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
@media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem; } }
.main-content :first-child {
margin-top: 0; }
.main-content img {
max-width: 100%; }
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: normal;
color: #159957; }
.main-content p {
margin-bottom: 1em; }
.main-content code {
padding: 2px 4px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9rem;
color: #383e41;
background-color: #f3f6fa;
border-radius: 0.3rem; }
.main-content pre {
padding: 0.8rem;
margin-top: 0;
margin-bottom: 1rem;
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius: 0.3rem; }
.main-content pre > code {
padding: 0;
margin: 0;
font-size: 0.9rem;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0; }
.main-content .highlight {
margin-bottom: 1rem; }
.main-content .highlight pre {
margin-bottom: 0;
word-break: normal; }
.main-content .highlight pre, .main-content pre {
padding: 0.8rem;
overflow: auto;
font-size: 0.9rem;
line-height: 1.45;
border-radius: 0.3rem; }
.main-content pre code, .main-content pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0; }
.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
content: normal; }
.main-content ul, .main-content ol {
margin-top: 0; }
.main-content blockquote {
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left: 0.3rem solid #dce6f0; }
.main-content blockquote > :first-child {
margin-top: 0; }
.main-content blockquote > :last-child {
margin-bottom: 0; }
.main-content table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all; }
.main-content table th {
font-weight: bold; }
.main-content table th, .main-content table td {
padding: 0.5rem 1rem;
border: 1px solid #e9ebec; }
.main-content dl {
padding: 0; }
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight: bold; }
.main-content dl dd {
padding: 0;
margin-bottom: 1rem; }
.main-content hr {
height: 2px;
padding: 0;
margin: 1rem 0;
background-color: #eff0f1;
border: 0; }
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding: 2rem 4rem;
font-size: 1.1rem; } }
@media screen and (max-width: 42em) {
.main-content {
padding: 2rem 1rem;
font-size: 1rem; } }
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px #eff0f1; }
.site-footer-owner {
display: block;
font-weight: bold; }
.site-footer-credits {
color: #819198; }
@media screen and (min-width: 64em) {
.site-footer {
font-size: 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size: 1rem; } }
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem; } }