first push

.gitignore

@@ -0,0 +1,5 @@
+# automatically generated with jekyll serve
+_site/
+
+# vim sessions
+*.ses

404.html

@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>

Gemfile

@@ -0,0 +1,29 @@
+source "https://rubygems.org"
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 3.7.3"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+gem 'github-pages', group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.6"
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.0" if Gem.win_platform?

Gemfile.lock

@@ -0,0 +1,254 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.9)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.9)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.0.5)
+    dnsruby (1.60.2)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.11.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.6)
+    execjs (2.7.0)
+    faraday (0.15.0)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.23)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.0)
+    github-pages (183)
+      activesupport (= 4.2.9)
+      github-pages-health-check (= 1.7.3)
+      jekyll (= 3.7.3)
+      jekyll-avatar (= 0.5.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.5)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.9.3)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.9.4)
+      jekyll-mentions (= 1.3.0)
+      jekyll-optional-front-matter (= 0.3.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.2.0)
+      jekyll-redirect-from (= 0.13.0)
+      jekyll-relative-links (= 0.5.3)
+      jekyll-remote-theme (= 0.2.3)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.4.0)
+      jekyll-sitemap (= 1.2.0)
+      jekyll-swiss (= 0.4.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.3)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.1)
+      jemoji (= 0.9.0)
+      kramdown (= 1.16.2)
+      liquid (= 4.0.0)
+      listen (= 3.1.5)
+      mercenary (~> 0.3)
+      minima (= 2.4.1)
+      nokogiri (>= 1.8.1, < 2.0)
+      rouge (= 2.2.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.7.3)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 2.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.8.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.3)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.5.0)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.2.0)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.0, < 4.0)
+    jekyll-commonmark-ghpages (0.1.5)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1)
+      rouge (~> 2)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.9.3)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.9.4)
+      jekyll (~> 3.1)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.3.0)
+      activesupport (~> 4.0)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-optional-front-matter (0.3.0)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.2.0)
+      jekyll (~> 3.0)
+    jekyll-redirect-from (0.13.0)
+      jekyll (~> 3.3)
+    jekyll-relative-links (0.5.3)
+      jekyll (~> 3.3)
+    jekyll-remote-theme (0.2.3)
+      jekyll (~> 3.5)
+      rubyzip (>= 1.2.1, < 3.0)
+      typhoeus (>= 0.7, < 2.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.4.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.3)
+      jekyll (~> 3.5)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.1)
+      jekyll (~> 3.3)
+    jekyll-watch (2.0.0)
+      listen (~> 3.0)
+    jemoji (0.9.0)
+      activesupport (~> 4.0, >= 4.2.9)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (~> 3.0)
+    kramdown (1.16.2)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.3.0)
+    minima (2.4.1)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
+    multipart-post (2.0.0)
+    nokogiri (1.8.4)
+      mini_portile2 (~> 2.3.0)
+    octokit (4.8.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.1)
+      forwardable-extended (~> 2.6)
+    public_suffix (2.0.5)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (2.2.1)
+    ruby-enum (0.7.2)
+      i18n
+    ruby_dep (1.5.0)
+    rubyzip (1.2.1)
+    safe_yaml (1.0.4)
+    sass (3.5.6)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.3.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+  jekyll (~> 3.7.3)
+  jekyll-feed (~> 0.6)
+  minima (~> 2.0)
+  tzinfo-data
+
+BUNDLED WITH
+   1.16.1

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ura Design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,21 @@
+### Note
+The official repo has been moved to Debian Infrastructure: https://salsa.debian.org/reproducible-builds/reproducible-styleguide
+For comments, issues, Pull/Merge Requests please head over there.
+
+# About
+
+Reproducible builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.
+This guide aims to provide standards, principles and components to design consistent views related to the Reproducible Builds project. These pages are a living document and we welcome contributions, feedback and suggestions.
+
+
+# Getting started
+
+The Reproducible Builds styleguide is based on Bootstrap, an open-source toolkit for developing with HTML, CSS, and JS. We are currently on v4.1.0.
+
+To use the Reproducible Builds styleguide, you can download our scss style (components.scss) and import it in your project with bootstrap included. SASS is a CSS extension language.
+
+If you want to use SASS you can download the complete archive for the styleguide. The scss folder under assets contains all the sass files. Since we use bootstrap, we only add a few styles without modifying bootstrap core or defining new elements whenever possible.
+
+Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript, so that only few elements are affected if you disable JavaScript.
+
+This styleguide has been built using Jekyll. Jekyll is a simple, blog-aware, static site generator. You can build this yourself by installing Jekyll.

_config.yml

@@ -0,0 +1,51 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: SecureDrop
+logo: "/assets/images/horizontal_color.png"
+
+description: >- # this means to ignore newlines until "baseurl:"
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description.
+baseurl: "/i2p" # the subpath of your site, e.g. /blog
+url: "https://uracreative.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username: jekyllrb
+github_username:  jekyll
+
+current_url: window.location
+
+# Build settings
+markdown: kramdown
+theme: minima
+plugins:
+  - jekyll-feed
+
+sass:
+  sass_dir: /assets/styles
+  # style: compressed
+
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+# exclude:
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/

_includes/components/alerts.html

@@ -0,0 +1,18 @@
+<div class="page-header mb-4 mt-5">
+    <h2 id="alerts" class="b-border">Alerts</h2>
+    <p class="text-muted">Some Description about alerts.</p>
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12 alert alert-primary" role="alert">
+        This is a primary alert—check it out!
+    </div>
+    <div class="col-12 alert alert-success" role="alert">
+        This is a success alert—check it out!
+    </div>
+    <div class="col-12 alert alert-danger" role="alert">
+        This is a danger alert—check it out!
+    </div>
+    <div class="col-12 alert alert-warning" role="alert">
+        This is a warning alert—check it out!
+    </div>
+</div>

_includes/components/badges.html

@@ -0,0 +1,15 @@
+<div class="page-header mb-4 mt-5">
+    <h2 id="badges" class="b-border">Badges</h2>
+    <!--p class="text-muted">Some Description about badges.</p-->
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12">
+        <h2>Example heading <span class="badge badge-primary">New</span></h2>
+    </div>
+    <div class="col-12">
+        <h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
+    </div>
+    <div class="col-12">
+        <h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
+    </div>
+</div>

_includes/components/buttons.html

@@ -0,0 +1,26 @@
+<div id="buttons" class="mb-4">
+    <h2 class="b-border">Buttons</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="row bg-light p-5">
+    <div class="col-xs-12 col-sm-6 col-md-6 p-1">
+        <p class="text-black small text-muted m-0 pb-2">Primary</p>
+        <button type="button" class="btn btn-lg btn-primary btn-pill mr-2">Primary</button>
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Ghost</p>
+        <button type="button" class="btn btn-lg btn-outline-primary btn-pill mr-2">How to Contribute</button>
+        <p class="text-black small text-muted m-0 pt-2">Link</p>
+        <button type="button" class="btn btn-lg btn-link mr-2">Learn more</button>
+    </div>
+    <div class="col-xs-12 col-sm-6 col-md-6 p-1">
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Medium</p>
+        <button type="button" class="btn btn-medium btn-pill mr-2">Medium</button>
+        <button type="button" class="btn btn-outline-medium btn-pill mr-2">Ghost</button>
+        <button type="button" class="btn btn-link mr-2">Link</button>
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Small</p>
+        <button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button>
+        <button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button>
+        <button type="button" class="btn btn-sm btn-link mr-2">Link</button>
+        <p class="text-black small text-muted m-0 pt-5">Scroller</p>
+        <button type="button" class="btn btn-scroller mr-2 mt-2">Back to Top <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 256.1" class="faq__chevron-up"><path d="M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z"></path></svg></button>
+    </div>
+</div>

_includes/components/cards.html

@@ -0,0 +1,54 @@
+<div class="mt-5" id="cards">
+    <h2 class="b-border">Cards</h2>
+    <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
+                </div>
+            </div>
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="rb-link" onclick="return false;">Apply</a>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card">
+                <img class="card-img-top"
+                     src="{{site.baseurl}}/assets/images/placeholder.jpg" alt="Card image cap">
+                <div class="card-body">
+                    <h4 class="card-title">A few things everyone can do now</h4>
+                    <p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
+                </div>
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
+                        <mark>contributing</mark>
+                    </a> to help the I2P project grow.
+                    </li>
+                    <li class="list-group-item">Take a moment to
+                        <mark>donate</mark>
+                        to support further development.
+                    </li>
+                    <li class="list-group-item">Help
+                        <mark>translate</mark>
+                        the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
+                    </li>
+                </ul>
+                <div class="card-body">
+                    <a href="#" class="rb-link" onclick="return false;">View All</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

_includes/components/forms.html

@@ -0,0 +1,23 @@
+<h1 id="forms"> </h1>
+<div class="page-header mb-4 mt-5">
+    <h2 class="b-border">Forms</h2>
+    <!--p class="text-muted">Some Description about Forms.</p-->
+</div>
+<div class="row">
+    <form class="bg-light p-5 col-sm-6">
+        <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+        </div>
+        <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+        </div>
+        <div class="form-check">
+						<input type="checkbox" class="form-check-input" id="check_me_out">
+            <label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
+        </div>
+        <button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
+    </form>
+</div>

_includes/components/paginate.html

@@ -0,0 +1,24 @@
+<h1 id="pagination"></h1>
+<div class="page-header mb-4 mt-5">
+    <h2 class="b-border">Pagination</h2>
+    <!--p class="text-muted">Some Description about pagination.</p-->
+</div>
+<div class="row bg-light p-5">
+    <nav aria-label="...">
+        <ul class="pagination m-0">
+            <li class="page-item disabled">
+                <span class="page-link">Previous</span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
+            <li class="page-item">
+                <span class="page-link rb-paginate-active">
+	                2<span class="sr-only">(current)</span>
+                </span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="return false;">Next</a>
+            </li>
+        </ul>
+    </nav>
+</div>

_includes/components/tables.html

@@ -0,0 +1,71 @@
+<div class="mt-5" id="tables">
+    <h2 class="b-border">Tables</h2>
+    <div class="row mt-5">
+        <span>Default</span>
+        <br />
+        <table class="table">
+            <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">First</th>
+                <th scope="col">Last</th>
+                <th scope="col">Handle</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+            </tr>
+            <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+            </tr>
+            <tr>
+                <th scope="row">3</th>
+                <td>Larry</td>
+                <td>the Bird</td>
+                <td>@twitter</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="row mt-5">
+        <span>Striped</span>
+        <br />
+        <table class="table table-striped">
+            <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">First</th>
+                <th scope="col">Last</th>
+                <th scope="col">Handle</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+            </tr>
+            <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+            </tr>
+            <tr>
+                <th scope="row">3</th>
+                <td>Larry</td>
+                <td>the Bird</td>
+                <td>@twitter</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

_includes/copywriting/goals.html

@@ -0,0 +1,23 @@
+<h1 id="goals"></h1>
+<div class="page-header mb-4 mt-3">
+    <h3>Writing Goals and Principles</h3>
+</div>
+<div class="row">
+    <div class="col-12 p-0">
+        <p>With every piece of content we publish, we aim to:</p>
+        <ul>
+          <li><b>Empower.</b> Help people understand Ura Design by using language that informs them and encourages them to make the most of our products.</li>
+          <li><b>Respect.</b> Treat readers with the respect they deserve. Put yourself in their shoes, and don’t patronize them. Remember that they have other things to do. Be considerate and inclusive. Don’t market at people; communicate with them.</li>
+          <li><b>Educate.</b> Tell readers what they need to know, not just what we want to say. Give them the exact information they need, along with opportunities to learn more. Remember that you’re the expert, and readers don’t have access to everything you know.</li>
+          <li><b>Guide</b> Think of yourself as a tour guide for our readers. Whether you’re leading them through our website, apps, or educational materials, communicate in a friendly and helpful way.</li>
+          <li><b>Speak truth.</b> Understand Ura's place in our customers’ lives. Avoid dramatic storytelling and grandiose claims. Focus on our real strengths.</li>
+        </ul>
+        <p>In order to achieve those goals, we make sure our content is:</p>
+        <ul>
+          <li><b>Clear.</b> Understand the topic you’re writing about. Use simple words and sentences.</li>
+          <li><b>Useful.</b> Before you start writing, ask yourself: What purpose does this serve? Who is going to read it? What do they need to know?</li>
+          <li><b>Friendly.</b> Write like a human. Don’t be afraid to break a few rules if it makes your writing more relatable. All of our content, from splashy homepage copy to system alerts, should be warm and human.</li>
+          <li><b>Appropriate.</b> Write in a way that suits the situation. Just like you do in face-to-face conversations, adapt your tone depending on who you’re writing to and what you’re writing about.</li>
+        </ul>
+        </div>
+    </div>

_includes/head.html

@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf-8">
+  <title>{{site.title}}</title>
+  <link rel="stylesheet" href="{{'/assets/static/open-iconic-bootstrap.css' | prepend: site.baseurl}}" />
+  <link rel="stylesheet" href="{{'/assets/static/bootstrap.min.css' | prepend: site.baseurl}}">
+  <link rel="stylesheet" href="{{'/assets/styles/main.css' | prepend: site.baseurl}}">
+  <link rel="shortcut icon" type="image/png" href="{{'/assets/images/favicon.png' | prepend: site.baseurl}}"/>
+  <link href="{{'/assets/fonts/sourcesans.css' | prepend: site.baseurl}}" rel="stylesheet">
+  <link href="{{'/assets/fonts/sourcecode.css' | prepend: site.baseurl}}" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>

_includes/navbar.html

@@ -0,0 +1,27 @@
+<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="{{site.baseurl}}/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{site.baseurl}}/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{site.baseurl}}/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{site.baseurl}}/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{site.baseurl}}/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>

_includes/navbar_side.html

@@ -0,0 +1,23 @@
+<div class="sidebar {{include.sidebarClassName}}" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="{{site.baseurl}}/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="{{site.baseurl}}/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="{{site.baseurl}}/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>

_includes/scripts.html

@@ -0,0 +1,6 @@
+<script src="{{'/assets/javascript/modernizr.min.js' | prepend: site.baseurl}}"></script>
+<script src="{{'/assets/javascript/jquery-3.3.1.slim.min.js' | prepend: site.baseurl}}"></script>
+<script src="{{'/assets/javascript/popper.min.js' | prepend: site.baseurl}}"></script>
+<script src="{{'/assets/javascript/bootstrap.min.js' | prepend: site.baseurl}}"></script>
+<!-- <script src="{{'/assets/javascript/run_prettify.js' | prepend: site.baseurl}}"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>

_includes/scrollspy.html

@@ -0,0 +1,34 @@
+<h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>

_includes/sidebar.html

@@ -0,0 +1,11 @@
+<div class="sidebar {{ include.sidebarClassName }}" id="sidebar">
+  <ul class="p-0 list-group pt-3 sidebar-fill">
+    {% for sidebar_hash in page.sidebar %}
+      {% for link in sidebar_hash %}
+        <a href="#{{ link[0] }}"><li class="list-group-item rb-sidebar">
+          {{ link[1] }}
+        </li></a>
+      {% endfor %}
+    {% endfor %}
+  </ul>
+</div>

_includes/visuals/assets.html

@@ -0,0 +1,112 @@
+<div id="assets" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Identity Assets</h2>
+    <p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p>
+</div>
+<div class="row">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_62.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5 bg-dark">
+            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_6.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_63.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5 bg-dark">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_9.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_1.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image bg-dark border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_3.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-md-6">
+        <div class="bg-box p-5 mb-3">
+            <h6>I2P repo</h6>
+            <p class="m-0">Download SVG and PNG files</p>
+            <a class="btn btn-lg btn-link p-0" title="SecureDrop Repo"
+               href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div>
+    </div>
+    <div class="col-md-6">
+        <div class="bg-box p-5 text-left">
+            <h6>Styleguide Mirror on Identihub</h6>
+            <p class="m-0">Identihub Project</p>
+            <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop"
+               target="_blank">Visit Project Page</a>
+        </div>
+    </div>
+</div>

_includes/visuals/colors.html

@@ -0,0 +1,40 @@
+<div id="colors" class="page-header mb-4">
+  <h2 class="b-border">Colors</h2>
+  <p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
+</div>
+<div class="row">
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div>
+    <h6 class="pt2 text-left">Primary Color</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
+    <h6 class="pt2 text-left">Secondary color</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div>
+    <h6 class="pt2 text-left">Warning</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div>
+    <h6 class="pt2 text-left">Danger</h6>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-white text-black small">#ffffff</div>
+    <h6 class="pt2 text-left">White</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#95989A</div>
+    <h6 class="pt2 text-left">Gray 1</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-white small">#181818</div>
+    <h6 class="pt2 text-left">Gray 2</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-black text-white small">#000000</div>
+    <h6 class="pt2 text-left">Black</h6>
+  </div>
+</div>

_includes/visuals/grid.html

@@ -0,0 +1,134 @@
+<div id="grid" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Grid</h2>
+    <p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
+</div>
+<div class="container bg-light p-5">
+    <div class="row mb-1">
+        <div class="col-12">
+            <p class="background-primary p-3 text-white small">
+                12
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-8">
+            <p class="background-primary p-3 text-white small">
+                8
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-9">
+            <p class="background-primary p-3 text-white small">
+                9
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-6">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+        <div class="col-6">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-8 offset-2">
+            <p class="background-primary p-3 text-white small">
+                8
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-6 offset-3">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+    </div>
+</div>

_includes/visuals/icons.html

@@ -0,0 +1,25 @@
+<div class="mt-5" id="icons">
+    <h2 class="b-border">Icons</h2>
+    <div class="">
+        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
+    </div>
+    <div class="mt-3">
+        <div class="mt-3">
+            <div class="row">
+                {% for icons_hash in page.icons %}
+                {% for icon in icons_hash %}
+                <div class="col-md-1 col-sm-1 col-xs-1 ">
+                    <div class="">
+                        <span class="{{ icon[1] }} icon"></span>
+                    </div>
+                    <div class="mb-5 text-center">
+                        <span>{{icon[0]}}</span>
+                    </div>
+                </div>
+                {% endfor %}
+                {% endfor %}
+
+            </div>
+        </div>
+    </div>
+</div>

_includes/visuals/typography.html

@@ -0,0 +1,53 @@
+<div id="typography" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Typography</h2>
+    <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
+</div>
+<div class="row">
+    <div class="col-12">
+        <p class="text-black small text-muted">H1</p>
+        <h1>Protect communications from monitoring</h1>
+        <p class="text-black small text-muted">H2</p>
+        <h2>Protect communications from monitoring</h2>
+        <p class="text-black small text-muted">H3</p>
+        <h3>Protect communications from monitoring</h3>
+        <p class="text-black small text-muted">H4</p>
+        <h4>Protect communications from monitoring</h4>
+        <p class="text-black small text-muted">H5</p>
+        <h5>Protect communications from monitoring</h5>
+        <p class="text-black small text-muted">H6</p>
+        <h6>Protect communications from monitoring</h6>
+
+        <p class="text-black small pt-5 text-muted">H1 display</p>
+        <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
+        <p class="text-black small text-muted">H2 display</p>
+        <h2 class="header-display color-secondary">I2P Anonymous Network</h2>
+        <p class="text-black small text-muted">H3 display</p>
+        <h3 class="header-display color-secondary">I2P Anonymous Network</h3>
+        <p class="text-black small text-muted">H4 display</p>
+        <h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+    </div>
+</div>
+<div class="row pt-5">
+    <div class="col-md-5">
+        <p class="text-black small">
+            <span class="text-left color-gray-2 rb-isBold">Paragraph</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Regular</span>
+        </p>
+        <p>
+            I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
+        </p>
+    </div>
+    <div class="col-md-1"></div>
+    <div class="col-md-6">
+        <p class="text-black small">
+            <span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">Source Code</span>
+        </p>
+        <pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
+          $('.rb-sidebar').on('click', 'a',function() {
+              $('.rb-sidebar a.active').removeClass('active');
+              $(this).addClass('active');
+          });
+        </pre>
+    </div>
+</div>

_layouts/components.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+{% include head.html %}
+<body>
+{% include navbar.html %}
+<div class="row">
+    <div class="col-md-3 hidden-sm p-0">
+        <div class="row" style="height: 100%">
+            <div class="col-md-6 col-sm-16 col-xs-12 p-0">
+                {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
+            </div>
+            <div class="col-md-6 col-sm-12 col-xs-3 p-0">
+                {% include sidebar.html sidebarClassName="rb-sidebar__2" %}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+        <!--{{ content }}-->
+        {% include components/buttons.html %}
+        {% include components/badges.html %}
+        {% include components/forms.html %}
+        {% include components/tables.html %}
+        {% include components/cards.html %}
+        {% include components/paginate.html %}
+        {% include components/alerts.html %}
+        {% include scrollspy.html %}
+    </div>
+</div>
+{% include scripts.html %}
+</body>
+</html>

_layouts/copywriting.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+{% include head.html %}
+<body>
+{% include navbar.html %}
+<div class="row">
+    <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+        <div class="row" style="height: 100%">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
+                {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
+            </div>
+            <div class="col-md-6 col-sm-12 col-xs-2 p-0">
+                {% include sidebar.html sidebarClassName="rb-sidebar__2" %}
+            </div>
+        </div>
+    </div>
+    <div class="col-md-9 col-sm-8 col-xs-8 container-wrapper">
+        <!--{{ content }}-->
+        {% include copywriting/goals.html %}
+        {% include copywriting/voice.html %}
+        {% include copywriting/grammar.html %}
+        {% include copywriting/mechanics.html %}
+        {% include copywriting/people.html %}
+        {% include copywriting/blog-posts.html %}
+        {% include copywriting/newsletter.html %}
+        {% include copywriting/social-media.html %}
+        {% include copywriting/copyright.html %}
+        {% include copywriting/word-list.html %}
+    {% include scrollspy.html %}
+    </div>
+</div>
+{% include scripts.html %}
+</body>
+</html>

_layouts/default.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  {% include head.html %}
+  <body>
+    {% include navbar.html %}
+    {{content}}
+    {% include scripts.html %}
+  </body>
+</html>

_layouts/getting-started.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+{% include head.html %}
+<body>
+{% include navbar.html %}
+<div class="row" style="height: 100%">
+      <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+          <div class="row" style="height: 100%">
+              <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
+                  {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
+              </div>
+            </div>
+          </div>
+    <div class="col-md-7 col-xs-12 col-sm-12 p-0">
+        <main role="main" class="content-scroll p-5" data-spy="scroll"
+              data-target="#components-nav" data-offset="0">
+            <div class="row">
+                <div class="col-12 p-0">
+                    <div class="page-header mb-4">
+                        <h3>Getting started</h3>
+                        <p class="text-muted">We are making I2P usable for everyone.</p>
+                    </div>
+                    <p>The I2P styleguide is based on <a href="https://getbootstrap.com/">Bootstrap</a>, an open-source
+                        toolkit for developing with HTML, CSS, and JS. We are currently on
+                        <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">v4.1.0</a>.
+                    </p>
+                    <p>
+                        To use the I2P styleguide, you can download our scss style (components.scss) and
+                        import it in your project with bootstrap included. <a href="http://sass-lang.com/">SASS</a> is a CSS extension language.
+                    </p>
+                    <p class="purple">
+                        If you want to use SASS you can download the complete archive for the styleguide. The scss folder under
+                        assets contains all the sass files. Since we use bootstrap, we only add a few styles without
+                        modifying bootstrap core or defining new elements whenever possible.
+                    </p>
+                    <p>Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these
+                        libraries but do not add extra JavaScript, so that only few elements are affected if you disable JavaScript.
+                    </p>
+                    <p>This styleguide has been built using <a href="https://jekyllrb.com/">Jekyll</a>.
+                        Jekyll is a simple, blog-aware, static site generator. You can build this yourself by
+                        <a href="https://jekyllrb.com/docs/continuous-integration/buddyworks/#1-getting-started">
+                            installing Jekyll</a>.</p>
+                        <div class="bg-box p-5 mb-3">
+                            <h6>Use the I2P Styleguide</h6>
+                            <p class="m-0">This package includes .scss files</p>
+                            <a class="btn btn-lg btn-link p-0" title="I2P Repo"
+                               href="https://github.com/uracreative/securedrop-styleguide/tree/master/assets/styles" target="_blank">Visit Repo</a></div>
+                        <div>
+                    </div>
+
+                    {% include scrollspy.html %}
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
+{% include scripts.html %}
+</body>
+</html>

_layouts/home.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+{% include head.html %}
+
+<body>
+  {% include navbar.html %}
+  <div class="row">
+      <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+          <div class="row" style="height: 100%">
+              <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill">
+                  {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
+              </div>
+            </div>
+          </div>
+    <div class="col-md-7 col-xs-12 col-sm-12 p-0">
+      <main role="main" class="content-scroll p-5" data-spy="scroll" data-target="#components-nav" data-offset="0">
+
+        <div class="row">
+          <div class="col-12 p-0">
+            <div class="page-header mb-4">
+              <h3>About</h3>
+              <p class="text-muted">I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other. The network itself is strictly message based (a la IP), but there is a library available to allow reliable streaming communication on top of it (a la TCP).</p>
+            </div>
+            <p>This guide aims to provide standards, principles and components to design consistent views related to the I2P. These pages are a living document and we welcome contributions, feedback and suggestions.</p>
+            </p>
+            <br>
+            <h5>Contact</h5>
+            <div class="row mt-5">
+              <div class="col-md-6 p-0">
+                <div class="bg-box p-5 mb-3">
+                  <h6>I2P</h6>
+                  <a class="btn btn-lg btn-link p-0" title="SecureDrop Repo" href="https://lists.reproducible-builds.org/listinfo/rb-general" target="_blank">Mailing List</a></div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 p-0">
+            <div class="page-header mb-4 mt-5">
+              <h5>Identihub</h5>
+              <p class="text-muted">The I2P brand assets are included in this Identihub project page.</p>
+            </div>
+            <div class="row mt-5">
+              <div class="col-md-6 p-0">
+                <div class="bg-box p-5 mb-3 text-left">
+                  <h6>Styleguide Mirror on Identihub</h6>
+                  <p class="m-0"></p>
+                  <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop" target="_blank">Project Page</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {% include scrollspy.html %}
+
+      </main>
+    </div>
+  </div>
+  {% include scripts.html %}
+
+</body>
+
+</html>

_layouts/visuals.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  {% include head.html %}
+  <body>
+    {% include navbar.html %}
+    <div class="row">
+      <div class="col-md-3 col-sm-5 hidden-sm p-0">
+        <div class="row" style="height: 100%">
+          <div class="col-md-6 col-sm-6 col-xs-6 p-0">
+            {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
+          </div>
+          <div class="col-md-6 col-sm-6 col-xs-6 p-0">
+            {% include sidebar.html sidebarClassName="rb-sidebar__2" %}
+          </div>
+        </div>
+      </div>
+        <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+          {{ content }}
+          {% include /visuals/colors.html participants=site.data.profiles %}
+          {% include /visuals/grid.html participants=site.data.profiles %}
+          {% include /visuals/typography.html participants=site.data.profiles %}
+          {% include /visuals/assets.html participants=site.data.profiles %}
+          {% include scrollspy.html %}
+          {% include scripts.html %}
+      </div>
+    </div>
+  </body>
+</html>

_posts/2018-05-06-welcome-to-jekyll.markdown

@@ -0,0 +1,25 @@
+---
+layout: post
+title:  "Reproducible Builds Styleguide"
+date:   2018-05-06 12:24:53 +0200
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: https://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/

_site/404.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+    <style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>
+
+    <script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+  </body>
+</html>

_site/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ura Design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

_site/README.md

@@ -0,0 +1,21 @@
+### Note
+The official repo has been moved to Debian Infrastructure: https://salsa.debian.org/reproducible-builds/reproducible-styleguide
+For comments, issues, Pull/Merge Requests please head over there.
+
+# About
+
+Reproducible builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.
+This guide aims to provide standards, principles and components to design consistent views related to the Reproducible Builds project. These pages are a living document and we welcome contributions, feedback and suggestions.
+
+
+# Getting started
+
+The Reproducible Builds styleguide is based on Bootstrap, an open-source toolkit for developing with HTML, CSS, and JS. We are currently on v4.1.0.
+
+To use the Reproducible Builds styleguide, you can download our scss style (components.scss) and import it in your project with bootstrap included. SASS is a CSS extension language.
+
+If you want to use SASS you can download the complete archive for the styleguide. The scss folder under assets contains all the sass files. Since we use bootstrap, we only add a few styles without modifying bootstrap core or defining new elements whenever possible.
+
+Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these libraries but do not add extra JavaScript, so that only few elements are affected if you disable JavaScript.
+
+This styleguide has been built using Jekyll. Jekyll is a simple, blog-aware, static site generator. You can build this yourself by installing Jekyll.

_site/assets/fonts/sourcecode.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'),
+        url('SourceCodePro-Bold.ttf'), url('../fonts/SourceCodePro-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'),
+        url('SourceCodePro-SemiBold.ttf'), url('../fonts/SourceCodePro-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'),
+        url('SourceCodePro-Regular.ttf'), url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}

_site/assets/fonts/sourcesans.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+        url('SourceSansPro-Bold.ttf'), url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
+        url('SourceSansPro-SemiBold.ttf'), url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url('SourceSansPro-Regular.ttf'), url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}

_site/assets/javascript/index.js

@@ -0,0 +1,49 @@
+// $(function(){
+//     var current = location.href;
+//     $('.list-group-item a').each(function(){
+//         var $this = $(this);
+// 				var route = $this[0].href.split("/").pop();
+//
+// 				var location = current.split("/").indexOf(route);
+// 				console.log(current);
+// 				console.log(route);
+// 				console.log(location);
+//
+// 				if(location >= 0) {
+// 					$('.list-group-item a').addClass('active');
+// 				}
+//     })
+// });
+
+$(document).ready(function () {
+  var listItems = $('.rb-main-sidebar');
+  $.each(listItems, function (key, litem) {
+      var aElement = $(this).children(litem)[0];
+
+      if(aElement.href == document.URL.split('#')[0]) {
+          $(litem).addClass('active');
+      }
+	$("#sidebar-left li").click(function() {
+  // Reset them
+  $("#sidebar-left li").removeClass("active");
+  // Add to the clicked one only
+  $(this).addClass("active");
+});
+  });
+});
+
+// $(function() {
+	// var listItems = $('.rb-main-sidebar');
+	// $.each(listItems, function (key, litem) {
+	// 		var aElement = $(this).children(litem)[0];
+	// 		console.log(aElement.href, document.URL.split('#')[0].slice(0, -1));
+	// 		if(aElement.href == document.URL.split('#')[0].slice(0, -1)) {
+	// 				$(litem).addClass('active');
+	// 		}
+	// });
+// })
+
+$('.rb-sidebar').on('click',function() {
+    $('.rb-sidebar.active').removeClass('active');
+    $(this).addClass('active');
+});

_site/assets/javascript/run_prettify.js

@@ -0,0 +1,64 @@
+!function(){/*
+
+ Copyright (C) 2013 Google 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.
+
+ Copyright (C) 2006 Google 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.
+*/
+(function(){function aa(g){function r(){try{L.doScroll("left")}catch(ba){k.setTimeout(r,50);return}x("poll")}function x(r){if("readystatechange"!=r.type||"complete"==z.readyState)("load"==r.type?k:z)[B](n+r.type,x,!1),!l&&(l=!0)&&g.call(k,r.type||r)}var X=z.addEventListener,l=!1,E=!0,v=X?"addEventListener":"attachEvent",B=X?"removeEventListener":"detachEvent",n=X?"":"on";if("complete"==z.readyState)g.call(k,"lazy");else{if(z.createEventObject&&L.doScroll){try{E=!k.frameElement}catch(ba){}E&&r()}z[v](n+
+"DOMContentLoaded",x,!1);z[v](n+"readystatechange",x,!1);k[v](n+"load",x,!1)}}function T(){U&&aa(function(){var g=M.length;ca(g?function(){for(var r=0;r<g;++r)(function(g){k.setTimeout(function(){k.exports[M[g]].apply(k,arguments)},0)})(r)}:void 0)})}for(var k=window,z=document,L=z.documentElement,N=z.head||z.getElementsByTagName("head")[0]||L,B="",F=z.getElementsByTagName("script"),l=F.length;0<=--l;){var O=F[l],Y=O.src.match(/^[^?#]*\/run_prettify\.js(\?[^#]*)?(?:#.*)?$/);if(Y){B=Y[1]||"";O.parentNode.removeChild(O);
+break}}var U=!0,H=[],P=[],M=[];B.replace(/[?&]([^&=]+)=([^&]+)/g,function(g,r,x){x=decodeURIComponent(x);r=decodeURIComponent(r);"autorun"==r?U=!/^[0fn]/i.test(x):"lang"==r?H.push(x):"skin"==r?P.push(x):"callback"==r&&M.push(x)});l=0;for(B=H.length;l<B;++l)(function(){var g=z.createElement("script");g.onload=g.onerror=g.onreadystatechange=function(){!g||g.readyState&&!/loaded|complete/.test(g.readyState)||(g.onerror=g.onload=g.onreadystatechange=null,--S,S||k.setTimeout(T,0),g.parentNode&&g.parentNode.removeChild(g),
+g=null)};g.type="text/javascript";g.src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-"+encodeURIComponent(H[l])+".js";N.insertBefore(g,N.firstChild)})(H[l]);for(var S=H.length,F=[],l=0,B=P.length;l<B;++l)F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/skins/"+encodeURIComponent(P[l])+".css");F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css");(function(g){function r(l){if(l!==x){var k=z.createElement("link");k.rel="stylesheet";k.type=
+"text/css";l+1<x&&(k.error=k.onerror=function(){r(l+1)});k.href=g[l];N.appendChild(k)}}var x=g.length;r(0)})(F);var ca=function(){"undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0);var g;(function(){function r(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=k[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);
+return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,h=c.length;a<h;++a){var m=c[a];if(/\\[bdsw]/i.test(m))b.push(m);else{var m=d(m),p;a+2<h&&"-"===c[a+1]?(p=d(c[a+2]),a+=2):p=m;e.push([m,p]);65>p||122<m||(65>p||90<m||e.push([Math.max(65,m)|32,Math.min(p,90)|32]),97>p||122<m||
+e.push([Math.max(97,m)&-33,Math.min(p,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});c=[];h=[];for(a=0;a<e.length;++a)m=e[a],m[0]<=h[1]+1?h[1]=Math.max(h[1],m[1]):c.push(h=m);for(a=0;a<c.length;++a)m=c[a],b.push(f(m[0])),m[1]>m[0]&&(m[1]+1>m[0]&&b.push("-"),b.push(f(m[1])));b.push("]");return b.join("")}function g(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)",
+"g")),b=a.length,d=[],h=0,m=0;h<b;++h){var p=a[h];"("===p?++m:"\\"===p.charAt(0)&&(p=+p.substring(1))&&(p<=m?d[p]=-1:a[h]=f(p))}for(h=1;h<d.length;++h)-1===d[h]&&(d[h]=++r);for(m=h=0;h<b;++h)p=a[h],"("===p?(++m,d[m]||(a[h]="(?:")):"\\"===p.charAt(0)&&(p=+p.substring(1))&&p<=m&&(a[h]="\\"+d[p]);for(h=0;h<b;++h)"^"===a[h]&&"^"!==a[h+1]&&(a[h]="");if(e.ignoreCase&&A)for(h=0;h<b;++h)p=a[h],e=p.charAt(0),2<=p.length&&"["===e?a[h]=c(p):"\\"!==e&&(a[h]=p.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);
+return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var r=0,A=!1,q=!1,I=0,b=a.length;I<b;++I){var t=a[I];if(t.ignoreCase)q=!0;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){A=!0;q=!1;break}}for(var k={b:8,t:9,n:10,v:11,f:12,r:13},u=[],I=0,b=a.length;I<b;++I){t=a[I];if(t.global||t.multiline)throw Error(""+t);u.push("(?:"+g(t)+")")}return new RegExp(u.join("|"),q?"gi":"g")}function l(a,d){function f(a){var b=a.nodeType;if(1==b){if(!c.test(a.className)){for(b=
+a.firstChild;b;b=b.nextSibling)f(b);b=a.nodeName.toLowerCase();if("br"===b||"li"===b)g[q]="\n",A[q<<1]=r++,A[q++<<1|1]=a}}else if(3==b||4==b)b=a.nodeValue,b.length&&(b=d?b.replace(/\r\n?/g,"\n"):b.replace(/[ \t\r\n]+/g," "),g[q]=b,A[q<<1]=r,r+=b.length,A[q++<<1|1]=a)}var c=/(?:^|\s)nocode(?:\s|$)/,g=[],r=0,A=[],q=0;f(a);return{a:g.join("").replace(/\n$/,""),c:A}}function k(a,d,f,c,g){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},c(a),g.push.apply(g,a.g))}function z(a){for(var d=void 0,f=a.firstChild;f;f=
+f.nextSibling)var c=f.nodeType,d=1===c?d?a:f:3===c?S.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function E(a,d){function f(a){for(var q=a.i,r=a.h,b=[q,"pln"],t=0,A=a.a.match(g)||[],u={},e=0,l=A.length;e<l;++e){var D=A[e],w=u[D],h=void 0,m;if("string"===typeof w)m=!1;else{var p=c[D.charAt(0)];if(p)h=D.match(p[1]),w=p[0];else{for(m=0;m<n;++m)if(p=d[m],h=D.match(p[1])){w=p[0];break}h||(w="pln")}!(m=5<=w.length&&"lang-"===w.substring(0,5))||h&&"string"===typeof h[1]||(m=!1,w="src");m||(u[D]=w)}p=t;
+t+=D.length;if(m){m=h[1];var C=D.indexOf(m),G=C+m.length;h[2]&&(G=D.length-h[2].length,C=G-m.length);w=w.substring(5);k(r,q+p,D.substring(0,C),f,b);k(r,q+p+C,m,F(w,m),b);k(r,q+p+G,D.substring(G),f,b)}else b.push(q+p,w)}a.g=b}var c={},g;(function(){for(var f=a.concat(d),q=[],k={},b=0,t=f.length;b<t;++b){var n=f[b],u=n[3];if(u)for(var e=u.length;0<=--e;)c[u.charAt(e)]=n;n=n[1];u=""+n;k.hasOwnProperty(u)||(q.push(n),k[u]=null)}q.push(/[\0-\uffff]/);g=r(q)})();var n=d.length;return f}function v(a){var d=
+[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&
+f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var c=a.hashComments;c&&(a.cStyleComments?(1<c?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,
+null]));if(c=a.regexLiterals){var g=(c=1<c?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+g+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+g+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",
+new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return E(d,f)}function B(a,d,f){function c(a){var b=
+a.nodeType;if(1==b&&!r.test(a.className))if("br"===a.nodeName.toLowerCase())g(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(n);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+d[0].length))&&a.parentNode.insertBefore(q.createTextNode(e),a.nextSibling),g(a),b||a.parentNode.removeChild(a))}}function g(a){function c(a,b){var e=b?a.cloneNode(!1):a,p=a.parentNode;if(p){var p=c(p,1),d=a.nextSibling;
+p.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,p.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var r=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,q=a.ownerDocument,k=q.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var b=[k],t=0;t<b.length;++t)c(b[t]);d===(d|0)&&b[0].setAttribute("value",d);var l=q.createElement("ol");l.className="linenums";d=Math.max(0,d-1|0)||0;for(var t=
+0,u=b.length;t<u;++t)k=b[t],k.className="L"+(t+d)%10,k.firstChild||k.appendChild(q.createTextNode("\u00a0")),l.appendChild(k);a.appendChild(l)}function n(a,d){for(var f=d.length;0<=--f;){var c=d[f];V.hasOwnProperty(c)?Q.console&&console.warn("cannot override language handler %s",c):V[c]=a}}function F(a,d){a&&V.hasOwnProperty(a)||(a=/^\s*</.test(d)?"default-markup":"default-code");return V[a]}function H(a){var d=a.j;try{var f=l(a.h,a.l),c=f.a;a.a=c;a.c=f.c;a.i=0;F(d,c)(a);var g=/\bMSIE\s(\d+)/.exec(navigator.userAgent),
+g=g&&8>=+g[1],d=/\n/g,r=a.a,k=r.length,f=0,q=a.c,n=q.length,c=0,b=a.g,t=b.length,v=0;b[t]=k;var u,e;for(e=u=0;e<t;)b[e]!==b[e+2]?(b[u++]=b[e++],b[u++]=b[e++]):e+=2;t=u;for(e=u=0;e<t;){for(var x=b[e],z=b[e+1],w=e+2;w+2<=t&&b[w+1]===z;)w+=2;b[u++]=x;b[u++]=z;e=w}b.length=u;var h=a.h;a="";h&&(a=h.style.display,h.style.display="none");try{for(;c<n;){var m=q[c+2]||k,p=b[v+2]||k,w=Math.min(m,p),C=q[c+1],G;if(1!==C.nodeType&&(G=r.substring(f,w))){g&&(G=G.replace(d,"\r"));C.nodeValue=G;var Z=C.ownerDocument,
+W=Z.createElement("span");W.className=b[v+1];var B=C.parentNode;B.replaceChild(W,C);W.appendChild(C);f<m&&(q[c+1]=C=Z.createTextNode(r.substring(w,m)),B.insertBefore(C,W.nextSibling))}f=w;f>=m&&(c+=2);f>=p&&(v+=2)}}finally{h&&(h.style.display=a)}}catch(y){Q.console&&console.log(y&&y.stack||y)}}var Q="undefined"!==typeof window?window:{},J=["break,continue,do,else,for,if,return,while"],K=[[J,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],R=[K,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],L=[K,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
+M=[K,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],K=[K,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],
+N=[J,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],O=[J,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],J=[J,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],P=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
+S=/\S/,T=v({keywords:[R,M,L,K,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",N,O,J],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),V={};n(T,["default-code"]);n(E([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
+/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));n(E([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);n(E([],[["atv",/^[\s\S]+/]]),["uq.val"]);n(v({keywords:R,hashComments:!0,cStyleComments:!0,types:P}),"c cc cpp cxx cyc m".split(" "));n(v({keywords:"null,true,false"}),["json"]);n(v({keywords:M,hashComments:!0,cStyleComments:!0,
+verbatimStrings:!0,types:P}),["cs"]);n(v({keywords:L,cStyleComments:!0}),["java"]);n(v({keywords:J,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);n(v({keywords:N,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);n(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),
+["perl","pl","pm"]);n(v({keywords:O,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);n(v({keywords:K,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);n(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);n(E([],[["str",/^[\s\S]+/]]),
+["regex"]);var U=Q.PR={createSimpleLexer:E,registerLangHandler:n,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="<pre>"+a+"</pre>";c=c.firstChild;f&&B(c,f,!0);H({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});
+return c.innerHTML},prettyPrint:g=function(a,d){function f(){for(var c=Q.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;t<r.length&&b.now()<c;t++){for(var d=r[t],k=h,n=d;n=n.previousSibling;){var q=n.nodeType,l=(7===q||8===q)&&n.nodeValue;if(l?!/^\??prettify\b/.test(l):3!==q||/\S/.test(n.nodeValue))break;if(l){k={};l.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){k[b]=c});break}}n=d.className;if((k!==h||u.test(n))&&!e.test(n)){q=!1;for(l=d.parentNode;l;l=l.parentNode)if(w.test(l.tagName)&&l.className&&
+u.test(l.className)){q=!0;break}if(!q){d.className+=" prettyprinted";q=k.lang;if(!q){var q=n.match(v),A;!q&&(A=z(d))&&D.test(A.tagName)&&(q=A.className.match(v));q&&(q=q[1])}if(x.test(d.tagName))l=1;else var l=d.currentStyle,y=g.defaultView,l=(l=l?l.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===l.substring(0,3);y=k.linenums;(y="true"===y||+y)||(y=(y=n.match(/\blinenums\b(?::(\d+))?/))?y[1]&&y[1].length?+y[1]:!0:!1);y&&B(d,y,l);H({j:q,h:d,m:y,
+l:l,a:null,i:null,c:null,g:null})}}}t<r.length?Q.setTimeout(f,250):"function"===typeof a&&a()}for(var c=d||document.body,g=c.ownerDocument||document,c=[c.getElementsByTagName("pre"),c.getElementsByTagName("code"),c.getElementsByTagName("xmp")],r=[],k=0;k<c.length;++k)for(var n=0,l=c[k].length;n<l;++n)r.push(c[k][n]);var c=null,b=Date;b.now||(b={now:function(){return+new Date}});var t=0,v=/\blang(?:uage)?-([\w.]+)(?!\S)/,u=/\bprettyprint\b/,e=/\bprettyprinted\b/,x=/pre|xmp/i,D=/^code$/i,w=/^(?:pre|code|xmp)$/i,
+h={};f()}},R=Q.define;"function"===typeof R&&R.amd&&R("google-code-prettify",[],function(){return U})})();return g}();S||k.setTimeout(T,0)})();}()

_site/assets/main.css

@@ -0,0 +1,196 @@
+/** Reset some basic elements */
+body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
+
+/** Basic styling */
+body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }
+
+/** Set `margin-bottom` to maintain vertical rhythm */
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
+
+/** `main` element */
+main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
+
+/** Images */
+img { max-width: 100%; vertical-align: middle; }
+
+/** Figures */
+figure > img { display: block; }
+
+figcaption { font-size: 14px; }
+
+/** Lists */
+ul, ol { margin-left: 30px; }
+
+li > ul, li > ol { margin-bottom: 0; }
+
+/** Headings */
+h1, h2, h3, h4, h5, h6 { font-weight: 400; }
+
+/** Links */
+a { color: #2a7ae2; text-decoration: none; }
+a:visited { color: #1756a9; }
+a:hover { color: #111; text-decoration: underline; }
+.social-media-list a:hover { text-decoration: none; }
+.social-media-list a:hover .username { text-decoration: underline; }
+
+/** Blockquotes */
+blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
+blockquote > :last-child { margin-bottom: 0; }
+
+/** Code formatting */
+pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
+
+code { padding: 1px 5px; }
+
+pre { padding: 8px 12px; overflow-x: auto; }
+pre > code { border: 0; padding-right: 0; padding-left: 0; }
+
+/** Wrapper */
+.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
+@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }
+
+/** Clearfix */
+.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
+
+/** Icons */
+.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }
+
+.social-media-list li + li { padding-top: 5px; }
+
+/** Tables */
+table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
+table tr:nth-child(even) { background-color: #f7f7f7; }
+table th, table td { padding: 10px 15px; }
+table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
+table td { border: 1px solid #e8e8e8; }
+
+/** Site header */
+.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }
+
+.site-title { font-size: 26px; font-weight: 300; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; float: left; }
+.site-title, .site-title:visited { color: #424242; }
+
+.site-nav { float: right; line-height: 54px; }
+.site-nav .nav-trigger { display: none; }
+.site-nav .menu-icon { display: none; }
+.site-nav .page-link { color: #111; line-height: 1.5; }
+.site-nav .page-link:not(:last-child) { margin-right: 20px; }
+@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
+  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
+  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
+  .site-nav .menu-icon > svg path { fill: #424242; }
+  .site-nav input ~ .trigger { clear: both; display: none; }
+  .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
+  .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
+  .site-nav .page-link:not(:last-child) { margin-right: 0; } }
+
+/** Site footer */
+.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; }
+
+.footer-heading { font-size: 18px; margin-bottom: 15px; }
+
+.contact-list, .social-media-list { list-style: none; margin-left: 0; }
+
+.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; }
+
+.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }
+
+.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }
+
+.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }
+
+.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }
+
+@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); }
+  .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
+@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
+/** Page content */
+.page-content { padding: 30px 0; }
+
+.page-heading { font-size: 32px; }
+
+.post-list-heading { font-size: 28px; }
+
+.post-list { margin-left: 0; list-style: none; }
+.post-list > li { margin-bottom: 30px; }
+
+.post-meta { font-size: 14px; color: #828282; }
+
+.post-link { display: block; font-size: 24px; }
+
+/** Posts */
+.post-header { margin-bottom: 30px; }
+
+.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
+@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }
+
+.post-content { margin-bottom: 30px; }
+.post-content h2 { font-size: 32px; }
+@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }
+.post-content h3 { font-size: 26px; }
+@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }
+.post-content h4 { font-size: 20px; }
+@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }
+
+/** Syntax highlighting styles */
+.highlight { background: #fff; }
+.highlighter-rouge .highlight { background: #eef; }
+.highlight .c { color: #998; font-style: italic; }
+.highlight .err { color: #a61717; background-color: #e3d2d2; }
+.highlight .k { font-weight: bold; }
+.highlight .o { font-weight: bold; }
+.highlight .cm { color: #998; font-style: italic; }
+.highlight .cp { color: #999; font-weight: bold; }
+.highlight .c1 { color: #998; font-style: italic; }
+.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
+.highlight .gd { color: #000; background-color: #fdd; }
+.highlight .gd .x { color: #000; background-color: #faa; }
+.highlight .ge { font-style: italic; }
+.highlight .gr { color: #a00; }
+.highlight .gh { color: #999; }
+.highlight .gi { color: #000; background-color: #dfd; }
+.highlight .gi .x { color: #000; background-color: #afa; }
+.highlight .go { color: #888; }
+.highlight .gp { color: #555; }
+.highlight .gs { font-weight: bold; }
+.highlight .gu { color: #aaa; }
+.highlight .gt { color: #a00; }
+.highlight .kc { font-weight: bold; }
+.highlight .kd { font-weight: bold; }
+.highlight .kp { font-weight: bold; }
+.highlight .kr { font-weight: bold; }
+.highlight .kt { color: #458; font-weight: bold; }
+.highlight .m { color: #099; }
+.highlight .s { color: #d14; }
+.highlight .na { color: #008080; }
+.highlight .nb { color: #0086B3; }
+.highlight .nc { color: #458; font-weight: bold; }
+.highlight .no { color: #008080; }
+.highlight .ni { color: #800080; }
+.highlight .ne { color: #900; font-weight: bold; }
+.highlight .nf { color: #900; font-weight: bold; }
+.highlight .nn { color: #555; }
+.highlight .nt { color: #000080; }
+.highlight .nv { color: #008080; }
+.highlight .ow { font-weight: bold; }
+.highlight .w { color: #bbb; }
+.highlight .mf { color: #099; }
+.highlight .mh { color: #099; }
+.highlight .mi { color: #099; }
+.highlight .mo { color: #099; }
+.highlight .sb { color: #d14; }
+.highlight .sc { color: #d14; }
+.highlight .sd { color: #d14; }
+.highlight .s2 { color: #d14; }
+.highlight .se { color: #d14; }
+.highlight .sh { color: #d14; }
+.highlight .si { color: #d14; }
+.highlight .sx { color: #d14; }
+.highlight .sr { color: #009926; }
+.highlight .s1 { color: #d14; }
+.highlight .ss { color: #990073; }
+.highlight .bp { color: #999; }
+.highlight .vc { color: #008080; }
+.highlight .vg { color: #008080; }
+.highlight .vi { color: #008080; }
+.highlight .il { color: #099; }

_site/assets/minima-social-icons.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<symbol id="dribbble" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.747-6.905c-.234-.074-2.115-.635-4.257-.292.894 2.456 1.258 4.456 1.328 4.872 1.533-1.037 2.624-2.68 2.93-4.58zM10.67 14.3c-.102-.6-.5-2.688-1.46-5.18l-.044.014C5.312 10.477 3.93 13.15 3.806 13.4c1.158.905 2.614 1.444 4.194 1.444.947 0 1.85-.194 2.67-.543zm-7.747-1.72c.155-.266 2.03-3.37 5.555-4.51.09-.03.18-.056.27-.08-.173-.39-.36-.778-.555-1.16-3.413 1.02-6.723.977-7.023.97l-.003.208c0 1.755.665 3.358 1.756 4.57zM1.31 6.61c.307.005 3.122.017 6.318-.832-1.132-2.012-2.353-3.705-2.533-3.952-1.912.902-3.34 2.664-3.784 4.785zM6.4 1.368c.188.253 1.43 1.943 2.548 4 2.43-.91 3.46-2.293 3.582-2.468C11.323 1.827 9.736 1.176 8 1.176c-.55 0-1.087.066-1.6.19zm6.89 2.322c-.145.194-1.29 1.662-3.816 2.694.16.325.31.656.453.99.05.117.1.235.147.352 2.274-.286 4.533.172 4.758.22-.015-1.613-.59-3.094-1.543-4.257z"/></symbol>
+
+<symbol id="facebook" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></symbol>
+
+<symbol id="flickr" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 8c0 2.05 1.662 3.71 3.71 3.71 2.05 0 3.713-1.66 3.713-3.71S5.76 4.29 3.71 4.29C1.663 4.29 0 5.95 0 8zm8.577 0c0 2.05 1.662 3.71 3.712 3.71C14.33 11.71 16 10.05 16 8s-1.662-3.71-3.71-3.71c-2.05 0-3.713 1.66-3.713 3.71z"/></symbol>
+
+<symbol id="github" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8"/></symbol>
+
+<symbol id="googleplus" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M5.09 7.273v1.745h2.89c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.19 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zm10.91 0h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.46V8.727H16"/></symbol>
+
+<symbol id="instagram" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></symbol>
+
+<symbol id="linkedin" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51v1.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></symbol>
+
+<symbol id="pinterest" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></symbol>
+
+<symbol id="rss" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/></symbol>
+
+<symbol id="stackoverflow" class="svg-icon" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693h1.42v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.46.3-1.38L4.55 8.54l-.302 1.38zm.906-3.37l6.47 3.02.602-1.3-6.47-3.02-.602 1.29zm1.81-3.19l5.478 4.57.906-1.08L7.87 2.28l-.9 1.078zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></symbol>
+
+<symbol id="twitter" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></symbol>
+
+<symbol id="youtube" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24z"/></symbol>
+
+<symbol id="mastodon" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
+  <path transform="scale(0.07)" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
+  <path transform="scale(0.07)" fill="#FFF" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
+</symbol>
+
+
+</svg>

_site/assets/static/open-iconic-bootstrap.css

@@ -0,0 +1,950 @@
+/* Bootstrap */
+
+@font-face {
+  font-family: 'Icons';
+  src: url('../fonts/open-iconic.eot');
+  src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.oi {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  speak: none;
+  font-family: 'Icons';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.oi:empty:before {
+  width: 1em;
+  text-align: center;
+  box-sizing: content-box;
+}
+
+.oi.oi-align-center:before {
+  text-align: center;
+}
+
+.oi.oi-align-left:before {
+  text-align: left;
+}
+
+.oi.oi-align-right:before {
+  text-align: right;
+}
+
+.oi.oi-flip-horizontal:before {
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.oi.oi-flip-vertical:before {
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(1, -1);
+}
+
+.oi.oi-flip-horizontal-vertical:before {
+  -webkit-transform: scale(-1, -1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, -1);
+}
+
+.oi-account-login:before {
+  content: '\e000';
+}
+
+.oi-account-logout:before {
+  content: '\e001';
+}
+
+.oi-action-redo:before {
+  content: '\e002';
+}
+
+.oi-action-undo:before {
+  content: '\e003';
+}
+
+.oi-align-center:before {
+  content: '\e004';
+}
+
+.oi-align-left:before {
+  content: '\e005';
+}
+
+.oi-align-right:before {
+  content: '\e006';
+}
+
+.oi-aperture:before {
+  content: '\e007';
+}
+
+.oi-arrow-bottom:before {
+  content: '\e008';
+}
+
+.oi-arrow-circle-bottom:before {
+  content: '\e009';
+}
+
+.oi-arrow-circle-left:before {
+  content: '\e00a';
+}
+
+.oi-arrow-circle-right:before {
+  content: '\e00b';
+}
+
+.oi-arrow-circle-top:before {
+  content: '\e00c';
+}
+
+.oi-arrow-left:before {
+  content: '\e00d';
+}
+
+.oi-arrow-right:before {
+  content: '\e00e';
+}
+
+.oi-arrow-thick-bottom:before {
+  content: '\e00f';
+}
+
+.oi-arrow-thick-left:before {
+  content: '\e010';
+}
+
+.oi-arrow-thick-right:before {
+  content: '\e011';
+}
+
+.oi-arrow-thick-top:before {
+  content: '\e012';
+}
+
+.oi-arrow-top:before {
+  content: '\e013';
+}
+
+.oi-audio-spectrum:before {
+  content: '\e014';
+}
+
+.oi-audio:before {
+  content: '\e015';
+}
+
+.oi-badge:before {
+  content: '\e016';
+}
+
+.oi-ban:before {
+  content: '\e017';
+}
+
+.oi-bar-chart:before {
+  content: '\e018';
+}
+
+.oi-basket:before {
+  content: '\e019';
+}
+
+.oi-battery-empty:before {
+  content: '\e01a';
+}
+
+.oi-battery-full:before {
+  content: '\e01b';
+}
+
+.oi-beaker:before {
+  content: '\e01c';
+}
+
+.oi-bell:before {
+  content: '\e01d';
+}
+
+.oi-bluetooth:before {
+  content: '\e01e';
+}
+
+.oi-bold:before {
+  content: '\e01f';
+}
+
+.oi-bolt:before {
+  content: '\e020';
+}
+
+.oi-book:before {
+  content: '\e021';
+}
+
+.oi-bookmark:before {
+  content: '\e022';
+}
+
+.oi-box:before {
+  content: '\e023';
+}
+
+.oi-briefcase:before {
+  content: '\e024';
+}
+
+.oi-british-pound:before {
+  content: '\e025';
+}
+
+.oi-browser:before {
+  content: '\e026';
+}
+
+.oi-brush:before {
+  content: '\e027';
+}
+
+.oi-bug:before {
+  content: '\e028';
+}
+
+.oi-bullhorn:before {
+  content: '\e029';
+}
+
+.oi-calculator:before {
+  content: '\e02a';
+}
+
+.oi-calendar:before {
+  content: '\e02b';
+}
+
+.oi-camera-slr:before {
+  content: '\e02c';
+}
+
+.oi-caret-bottom:before {
+  content: '\e02d';
+}
+
+.oi-caret-left:before {
+  content: '\e02e';
+}
+
+.oi-caret-right:before {
+  content: '\e02f';
+}
+
+.oi-caret-top:before {
+  content: '\e030';
+}
+
+.oi-cart:before {
+  content: '\e031';
+}
+
+.oi-chat:before {
+  content: '\e032';
+}
+
+.oi-check:before {
+  content: '\e033';
+}
+
+.oi-chevron-bottom:before {
+  content: '\e034';
+}
+
+.oi-chevron-left:before {
+  content: '\e035';
+}
+
+.oi-chevron-right:before {
+  content: '\e036';
+}
+
+.oi-chevron-top:before {
+  content: '\e037';
+}
+
+.oi-circle-check:before {
+  content: '\e038';
+}
+
+.oi-circle-x:before {
+  content: '\e039';
+}
+
+.oi-clipboard:before {
+  content: '\e03a';
+}
+
+.oi-clock:before {
+  content: '\e03b';
+}
+
+.oi-cloud-download:before {
+  content: '\e03c';
+}
+
+.oi-cloud-upload:before {
+  content: '\e03d';
+}
+
+.oi-cloud:before {
+  content: '\e03e';
+}
+
+.oi-cloudy:before {
+  content: '\e03f';
+}
+
+.oi-code:before {
+  content: '\e040';
+}
+
+.oi-cog:before {
+  content: '\e041';
+}
+
+.oi-collapse-down:before {
+  content: '\e042';
+}
+
+.oi-collapse-left:before {
+  content: '\e043';
+}
+
+.oi-collapse-right:before {
+  content: '\e044';
+}
+
+.oi-collapse-up:before {
+  content: '\e045';
+}
+
+.oi-command:before {
+  content: '\e046';
+}
+
+.oi-comment-square:before {
+  content: '\e047';
+}
+
+.oi-compass:before {
+  content: '\e048';
+}
+
+.oi-contrast:before {
+  content: '\e049';
+}
+
+.oi-copywriting:before {
+  content: '\e04a';
+}
+
+.oi-credit-card:before {
+  content: '\e04b';
+}
+
+.oi-crop:before {
+  content: '\e04c';
+}
+
+.oi-dashboard:before {
+  content: '\e04d';
+}
+
+.oi-data-transfer-download:before {
+  content: '\e04e';
+}
+
+.oi-data-transfer-upload:before {
+  content: '\e04f';
+}
+
+.oi-delete:before {
+  content: '\e050';
+}
+
+.oi-dial:before {
+  content: '\e051';
+}
+
+.oi-document:before {
+  content: '\e052';
+}
+
+.oi-dollar:before {
+  content: '\e053';
+}
+
+.oi-double-quote-sans-left:before {
+  content: '\e054';
+}
+
+.oi-double-quote-sans-right:before {
+  content: '\e055';
+}
+
+.oi-double-quote-serif-left:before {
+  content: '\e056';
+}
+
+.oi-double-quote-serif-right:before {
+  content: '\e057';
+}
+
+.oi-droplet:before {
+  content: '\e058';
+}
+
+.oi-eject:before {
+  content: '\e059';
+}
+
+.oi-elevator:before {
+  content: '\e05a';
+}
+
+.oi-ellipses:before {
+  content: '\e05b';
+}
+
+.oi-envelope-closed:before {
+  content: '\e05c';
+}
+
+.oi-envelope-open:before {
+  content: '\e05d';
+}
+
+.oi-euro:before {
+  content: '\e05e';
+}
+
+.oi-excerpt:before {
+  content: '\e05f';
+}
+
+.oi-expand-down:before {
+  content: '\e060';
+}
+
+.oi-expand-left:before {
+  content: '\e061';
+}
+
+.oi-expand-right:before {
+  content: '\e062';
+}
+
+.oi-expand-up:before {
+  content: '\e063';
+}
+
+.oi-external-link:before {
+  content: '\e064';
+}
+
+.oi-eye:before {
+  content: '\e065';
+}
+
+.oi-eyedropper:before {
+  content: '\e066';
+}
+
+.oi-file:before {
+  content: '\e067';
+}
+
+.oi-fire:before {
+  content: '\e068';
+}
+
+.oi-flag:before {
+  content: '\e069';
+}
+
+.oi-flash:before {
+  content: '\e06a';
+}
+
+.oi-folder:before {
+  content: '\e06b';
+}
+
+.oi-fork:before {
+  content: '\e06c';
+}
+
+.oi-fullscreen-enter:before {
+  content: '\e06d';
+}
+
+.oi-fullscreen-exit:before {
+  content: '\e06e';
+}
+
+.oi-globe:before {
+  content: '\e06f';
+}
+
+.oi-graph:before {
+  content: '\e070';
+}
+
+.oi-grid-four-up:before {
+  content: '\e071';
+}
+
+.oi-grid-three-up:before {
+  content: '\e072';
+}
+
+.oi-grid-two-up:before {
+  content: '\e073';
+}
+
+.oi-hard-drive:before {
+  content: '\e074';
+}
+
+.oi-header:before {
+  content: '\e075';
+}
+
+.oi-headphones:before {
+  content: '\e076';
+}
+
+.oi-heart:before {
+  content: '\e077';
+}
+
+.oi-home:before {
+  content: '\e078';
+}
+
+.oi-image:before {
+  content: '\e079';
+}
+
+.oi-inbox:before {
+  content: '\e07a';
+}
+
+.oi-infinity:before {
+  content: '\e07b';
+}
+
+.oi-info:before {
+  content: '\e07c';
+}
+
+.oi-italic:before {
+  content: '\e07d';
+}
+
+.oi-justify-center:before {
+  content: '\e07e';
+}
+
+.oi-justify-left:before {
+  content: '\e07f';
+}
+
+.oi-justify-right:before {
+  content: '\e080';
+}
+
+.oi-key:before {
+  content: '\e081';
+}
+
+.oi-laptop:before {
+  content: '\e082';
+}
+
+.oi-layers:before {
+  content: '\e083';
+}
+
+.oi-lightbulb:before {
+  content: '\e084';
+}
+
+.oi-link-broken:before {
+  content: '\e085';
+}
+
+.oi-link-intact:before {
+  content: '\e086';
+}
+
+.oi-list-rich:before {
+  content: '\e087';
+}
+
+.oi-list:before {
+  content: '\e088';
+}
+
+.oi-location:before {
+  content: '\e089';
+}
+
+.oi-lock-locked:before {
+  content: '\e08a';
+}
+
+.oi-lock-unlocked:before {
+  content: '\e08b';
+}
+
+.oi-loop-circular:before {
+  content: '\e08c';
+}
+
+.oi-loop-square:before {
+  content: '\e08d';
+}
+
+.oi-loop:before {
+  content: '\e08e';
+}
+
+.oi-magnifying-glass:before {
+  content: '\e08f';
+}
+
+.oi-map-marker:before {
+  content: '\e090';
+}
+
+.oi-map:before {
+  content: '\e091';
+}
+
+.oi-media-pause:before {
+  content: '\e092';
+}
+
+.oi-media-play:before {
+  content: '\e093';
+}
+
+.oi-media-record:before {
+  content: '\e094';
+}
+
+.oi-media-skip-backward:before {
+  content: '\e095';
+}
+
+.oi-media-skip-forward:before {
+  content: '\e096';
+}
+
+.oi-media-step-backward:before {
+  content: '\e097';
+}
+
+.oi-media-step-forward:before {
+  content: '\e098';
+}
+
+.oi-media-stop:before {
+  content: '\e099';
+}
+
+.oi-medical-cross:before {
+  content: '\e09a';
+}
+
+.oi-menu:before {
+  content: '\e09b';
+}
+
+.oi-microphone:before {
+  content: '\e09c';
+}
+
+.oi-minus:before {
+  content: '\e09d';
+}
+
+.oi-monitor:before {
+  content: '\e09e';
+}
+
+.oi-moon:before {
+  content: '\e09f';
+}
+
+.oi-move:before {
+  content: '\e0a0';
+}
+
+.oi-musical-note:before {
+  content: '\e0a1';
+}
+
+.oi-paperclip:before {
+  content: '\e0a2';
+}
+
+.oi-pencil:before {
+  content: '\e0a3';
+}
+
+.oi-people:before {
+  content: '\e0a4';
+}
+
+.oi-person:before {
+  content: '\e0a5';
+}
+
+.oi-phone:before {
+  content: '\e0a6';
+}
+
+.oi-pie-chart:before {
+  content: '\e0a7';
+}
+
+.oi-pin:before {
+  content: '\e0a8';
+}
+
+.oi-play-circle:before {
+  content: '\e0a9';
+}
+
+.oi-plus:before {
+  content: '\e0aa';
+}
+
+.oi-power-standby:before {
+  content: '\e0ab';
+}
+
+.oi-print:before {
+  content: '\e0ac';
+}
+
+.oi-project:before {
+  content: '\e0ad';
+}
+
+.oi-pulse:before {
+  content: '\e0ae';
+}
+
+.oi-puzzle-piece:before {
+  content: '\e0af';
+}
+
+.oi-question-mark:before {
+  content: '\e0b0';
+}
+
+.oi-rain:before {
+  content: '\e0b1';
+}
+
+.oi-random:before {
+  content: '\e0b2';
+}
+
+.oi-reload:before {
+  content: '\e0b3';
+}
+
+.oi-resize-both:before {
+  content: '\e0b4';
+}
+
+.oi-resize-height:before {
+  content: '\e0b5';
+}
+
+.oi-resize-width:before {
+  content: '\e0b6';
+}
+
+.oi-rss-alt:before {
+  content: '\e0b7';
+}
+
+.oi-rss:before {
+  content: '\e0b8';
+}
+
+.oi-script:before {
+  content: '\e0b9';
+}
+
+.oi-share-boxed:before {
+  content: '\e0ba';
+}
+
+.oi-share:before {
+  content: '\e0bb';
+}
+
+.oi-shield:before {
+  content: '\e0bc';
+}
+
+.oi-signal:before {
+  content: '\e0bd';
+}
+
+.oi-signpost:before {
+  content: '\e0be';
+}
+
+.oi-sort-ascending:before {
+  content: '\e0bf';
+}
+
+.oi-sort-descending:before {
+  content: '\e0c0';
+}
+
+.oi-spreadsheet:before {
+  content: '\e0c1';
+}
+
+.oi-star:before {
+  content: '\e0c2';
+}
+
+.oi-sun:before {
+  content: '\e0c3';
+}
+
+.oi-tablet:before {
+  content: '\e0c4';
+}
+
+.oi-tag:before {
+  content: '\e0c5';
+}
+
+.oi-tags:before {
+  content: '\e0c6';
+}
+
+.oi-target:before {
+  content: '\e0c7';
+}
+
+.oi-task:before {
+  content: '\e0c8';
+}
+
+.oi-terminal:before {
+  content: '\e0c9';
+}
+
+.oi-text:before {
+  content: '\e0ca';
+}
+
+.oi-thumb-down:before {
+  content: '\e0cb';
+}
+
+.oi-thumb-up:before {
+  content: '\e0cc';
+}
+
+.oi-timer:before {
+  content: '\e0cd';
+}
+
+.oi-transfer:before {
+  content: '\e0ce';
+}
+
+.oi-trash:before {
+  content: '\e0cf';
+}
+
+.oi-underline:before {
+  content: '\e0d0';
+}
+
+.oi-vertical-align-bottom:before {
+  content: '\e0d1';
+}
+
+.oi-vertical-align-center:before {
+  content: '\e0d2';
+}
+
+.oi-vertical-align-top:before {
+  content: '\e0d3';
+}
+
+.oi-video:before {
+  content: '\e0d4';
+}
+
+.oi-volume-high:before {
+  content: '\e0d5';
+}
+
+.oi-volume-low:before {
+  content: '\e0d6';
+}
+
+.oi-volume-off:before {
+  content: '\e0d7';
+}
+
+.oi-warning:before {
+  content: '\e0d8';
+}
+
+.oi-wifi:before {
+  content: '\e0d9';
+}
+
+.oi-wrench:before {
+  content: '\e0da';
+}
+
+.oi-x:before {
+  content: '\e0db';
+}
+
+.oi-yen:before {
+  content: '\e0dc';
+}
+
+.oi-zoom-in:before {
+  content: '\e0dd';
+}
+
+.oi-zoom-out:before {
+  content: '\e0de';
+}

_site/assets/styles/components.scss

@@ -0,0 +1,229 @@
+.navbar {
+  // background-color: $oc-white !important;
+}
+
+.background-primary {
+  background-color: $primary;
+}
+
+.background-secondary {
+  background-color: $secondary;
+}
+
+.background-warning {
+  background-color: $warning;
+}
+
+.background-danger {
+  background-color: $danger;
+}
+
+
+.background-gray-1 {
+  background-color: $oc-gray-1;
+}
+
+.background-gray-2 {
+  background-color: $oc-gray-2;
+}
+
+.background-black {
+  background-color: $oc-black;
+}
+
+.color-primary {
+  color: $primary
+}
+
+.color-secondary {
+  color: $secondary;
+}
+
+.color-gray-2 {
+  color: $oc-gray-1;
+}
+
+.rb-code {
+  font-family: 'Source Code', monospace !important;
+}
+
+.rb-isBold {
+  font-weight: bold;
+}
+
+.btn-primary {
+  background-color: $primary !important;
+  border-color: transparent !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+  &:hover {
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
+.btn-small {
+  background-color: $primary !important;
+  border-color: transparent !important;
+  padding: .08rem .4rem 0 !important;
+  font-size: .8rem;
+  color: $oc-white;
+  &:hover {
+    background-color: $secondary !important;
+    border-color: transparent !important;
+  }
+}
+
+.btn-medium {
+  background-color: $primary !important;
+  border-color: transparent !important;
+  padding: .5rem 1rem !important;
+  font-size: 1rem !important;
+  color: $oc-white;
+  &:hover {
+    background-color: $secondary !important;
+    border-color: transparent !important;
+    color: $oc-white;
+  }
+}
+
+.btn-large {
+  border-radius: .3rem;
+  background-color: $primary !important;
+  border-color: transparent !important;
+	border-radius: 2em;
+  padding: .5rem 1rem !important;
+  font-size: 1.25rem !important;
+  line-height: 1.5;
+  color: $oc-white;
+  &:hover {
+    background-color: $secondary !important;
+    border-color: transparent !important;
+    color: $oc-white;
+  }
+
+}
+.btn-outline-medium {
+  border-color: $primary !important;
+  color: $primary !important;
+  padding: .5rem 1rem !important;
+  font-size: 1rem !important;
+  background-color: transparent !important;
+
+  &:hover {
+    color: white !important;
+    background-color: $primary !important;
+    border-color: transparent !important;
+  }
+}
+
+.btn-outline-small {
+  border-color: $primary !important;
+  color: $primary !important;
+  padding: .08rem .4rem 0 !important;
+  font-size: .8rem;
+  background-color: transparent !important;
+
+  &:hover {
+    color: white !important;
+    background-color: $primary !important;
+    border-color: transparent !important;
+  }
+}
+
+.btn-outline-primary {
+  border-color: $primary !important;
+  color: $primary !important;
+  padding: 1rem 1.5rem !important;
+  font-size: 1rem;
+
+  &:hover {
+    color: white !important;
+    background-color: $primary !important;
+    border-color: transparent !important;
+  }
+}
+
+.btn-link {
+  color: $primary !important;
+
+  &:hover {
+    color: $secondary !important;
+  }
+}
+
+.btn-scroller {
+  border-radius: .25rem;
+  text-align: center;
+  display: inline-block;
+  -webkit-transition-duration: .1s;
+  -o-transition-duration: .1s;
+  -webkit-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  -webkit-transition-property: background-color,color,border-color;
+  -o-transition-property: background-color,color,border-color;
+  padding: .5rem 1rem;
+  transition-duration: .1s;
+  transition-timing-function: linear;
+  transition-property: background-color,color,border-color;
+  color: #00000b;
+  background-color: #dddde0;
+  border: 0;
+}
+
+.btn-scroller:active, .btn-scroller:focus, .btn-scroller:hover {
+  color: #00000b;
+  background-color: #aaaab0;
+}
+
+.btn-pill {
+	border-radius: 300px; //make it huge so  itis alwas in pill shape
+}
+
+.faq__chevron-up {
+  height: .8em;
+  vertical-align: -.06em;
+  fill: currentColor;
+  margin-left: .5em;
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.badge-primary {
+  background-color: $primary !important;
+}
+
+.badge-secondary {
+  background-color: $secondary !important;
+}
+
+.rb-link {
+  color: $primary !important;
+  &:hover {
+    color: $secondary !important;
+  }
+}
+
+.rb-paginate-active {
+  background-color: $primary !important;
+  color: white !important;
+
+  &:hover {
+    background-color: $secondary !important;
+  }
+}
+ 
+.pagination .page-link {
+	color: $oc-gray-2;
+}
+
+.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
+  background-color: $oc-gray-1 !important;
+}
+
+.mark, mark {
+  background-color: $oc-gray-1 !important;
+  padding: .2em !important;
+}

_site/assets/styles/layout.scss

@@ -0,0 +1,175 @@
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+    font-weight: 400 !important;
+}
+
+.border-left-right {
+    // z-index: 99;
+    border-left: 1px solid $oc-gray-1 !important;
+    border-right: 1px solid $oc-gray-1 !important;
+}
+
+.sidebar {
+  min-height: 100vh;
+  height: 100%;
+  width: 100%;
+
+  // position: fixed;
+
+  & .list-group {
+    position: fixed;
+    // width: 23vw;
+  }
+
+  & .list-group-item {
+    background-color: transparent;
+    border: 0;
+    border-radius: 0 !important;
+    font-size: 0.95rem;
+    // border-color: $oc-gray-4;
+  }
+
+  & .list-group-item{
+    border-radius: 0 !important;
+    font-weight: normal !important;
+    padding-left: 0.95rem !important;
+    // border-color: $oc-gray-4;
+  }
+}
+
+.rb-sidebar__2 {
+	
+	& .list-group-item {
+		color: $oc-gray-2 !important;
+	}
+}
+.sidebar-wrapper {
+  background-color: $oc-gray-1;
+}
+
+.sidebar__link__light {
+  color: $oc-white !important;
+
+  &:hover {
+    // color: $secondary !important;
+    // color: $oc-gray-2 !important;
+  }
+}
+
+
+.row {
+  margin: auto !important;
+}
+
+.active {
+  background-color: transparent !important;
+	box-shadow: inset 5px 0 $oc-white;
+  color: $secondary !important;
+  font-weight: bold;
+
+  & * {
+    color: $oc-white !important;
+  }
+}
+
+.rb-sidebar__2 .active {
+	box-shadow: inset 5px 0 $primary;
+	color: $oc-gray-2 !important;
+}
+
+.rp-navbar__top {
+  background-color: $oc-white;
+}
+
+// bootstrap navbar-light class is not working, overwriting classes to fix this
+//TODO fix this issue
+
+.navbar-light .navbar-toggler {
+	border-color: rgba(0,0,0,.5);
+}
+
+.navbar-light .navbar-toggler-icon {
+ 	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.navbar-light .navbar-nav .nav-link {
+	color: rgba(0,0,0,.5);
+	
+	&:hover {
+		color: $oc-black;
+	}
+}
+
+.rb-sidebar__1 {
+  background-color: $primary;
+}
+
+.rb-sidebar__2 {
+  background-color: $oc-white;
+}
+
+.rb-contain {
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+}
+
+.max-width-150 {
+  max-width: 150px;
+}
+
+.padding-top-35 {
+  padding-top: 35px !important;
+}
+
+.padding-top-18 {
+  padding-top: 18px;
+}
+
+.align-horizontally {
+  display: flex;
+  align-items: center;
+}
+
+.flex-space-between {
+  justify-content: space-between;
+}
+
+
+.hidden-sm {
+  display: block;
+}
+
+@media screen and (max-width: 991px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+
+.sidebar-fill {
+  width: 12.45%;
+}
+
+.list-group-item:focus, .list-group-item:hover {
+  // background-color: $oc-gray-1 !important;
+	box-shadow: inset 5px 0 $oc-white;
+}
+
+.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
+  // background-color: $oc-gray-1 !important;
+	box-shadow: inset 5px 0 $primary;
+}
+.sidebar .list-group-item {
+  width: 74.6%;
+}
+
+.rb-sidebar__2 .list-group-item {
+  width: 100%;
+}
+
+.bg-box {
+  background-color: #f1f3f5 !important;
+}
+
+.b-border {
+  border-bottom: 2px solid lightgrey !important;
+}

_site/assets/styles/main.css

@@ -0,0 +1,162 @@
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400 !important; }
+
+.border-left-right { border-left: 1px solid #adb5bd !important; border-right: 1px solid #adb5bd !important; }
+
+.sidebar { min-height: 100vh; height: 100%; width: 100%; }
+.sidebar .list-group { position: fixed; }
+.sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 0.95rem; }
+.sidebar .list-group-item { border-radius: 0 !important; font-weight: normal !important; padding-left: 0.95rem !important; }
+
+.rb-sidebar__2 .list-group-item { color: #181818 !important; }
+
+.sidebar-wrapper { background-color: #adb5bd; }
+
+.sidebar__link__light { color: #ffffff !important; }
+
+.row { margin: auto !important; }
+
+.active { background-color: transparent !important; box-shadow: inset 5px 0 #ffffff; color: #60AB60 !important; font-weight: bold; }
+.active * { color: #ffffff !important; }
+
+.rb-sidebar__2 .active { box-shadow: inset 5px 0 #4661A9; color: #181818 !important; }
+
+.rp-navbar__top { background-color: #ffffff; }
+
+.navbar-light .navbar-toggler { border-color: rgba(0, 0, 0, 0.5); }
+
+.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
+
+.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }
+.navbar-light .navbar-nav .nav-link:hover { color: #000000; }
+
+.rb-sidebar__1 { background-color: #4661A9; }
+
+.rb-sidebar__2 { background-color: #ffffff; }
+
+.rb-contain { width: 100%; height: auto; max-height: 100%; }
+
+.max-width-150 { max-width: 150px; }
+
+.padding-top-35 { padding-top: 35px !important; }
+
+.padding-top-18 { padding-top: 18px; }
+
+.align-horizontally { display: flex; align-items: center; }
+
+.flex-space-between { justify-content: space-between; }
+
+.hidden-sm { display: block; }
+
+@media screen and (max-width: 991px) { .hidden-sm { display: none !important; } }
+.sidebar-fill { width: 12.45%; }
+
+.list-group-item:focus, .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; }
+
+.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { box-shadow: inset 5px 0 #4661A9; }
+
+.sidebar .list-group-item { width: 74.6%; }
+
+.rb-sidebar__2 .list-group-item { width: 100%; }
+
+.bg-box { background-color: #f1f3f5 !important; }
+
+.b-border { border-bottom: 2px solid lightgrey !important; }
+
+p { color: #181818; }
+
+.color { height: 100px; }
+
+.grid { height: 100px; background-color: #4661A9; border-radius: 7px; }
+.grid span { margin: 10px 10px 10px 10px; color: white; }
+
+.header-display::before { background: #60AB60; content: " "; display: inline-block; width: 7px; }
+
+h1.header-display::before { height: 3.75rem; transform: translate(-15px, 0.9375rem); }
+
+h2.header-display::before { height: 3rem; transform: translate(-15px, 0.75rem); }
+
+h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0.65625rem); }
+
+h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625rem); }
+
+.icon { font-size: 20px; background-color: #181818; padding: 20px; }
+
+.background-primary { background-color: #4661A9; }
+
+.background-secondary { background-color: #60AB60; }
+
+.background-warning { background-color: #FFC434; }
+
+.background-danger { background-color: #E15647; }
+
+.background-gray-1 { background-color: #adb5bd; }
+
+.background-gray-2 { background-color: #181818; }
+
+.background-black { background-color: #000000; }
+
+.color-primary { color: #4661A9; }
+
+.color-secondary { color: #60AB60; }
+
+.color-gray-2 { color: #adb5bd; }
+
+.rb-code { font-family: 'Source Code', monospace !important; }
+
+.rb-isBold { font-weight: bold; }
+
+.btn-primary { background-color: #4661A9 !important; border-color: transparent !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
+.btn-primary:hover { background-color: #60AB60 !important; border-color: transparent !important; }
+
+.btn-small { background-color: #4661A9 !important; border-color: transparent !important; padding: .08rem .4rem 0 !important; font-size: .8rem; color: #ffffff; }
+.btn-small:hover { background-color: #60AB60 !important; border-color: transparent !important; }
+
+.btn-medium { background-color: #4661A9 !important; border-color: transparent !important; padding: .5rem 1rem !important; font-size: 1rem !important; color: #ffffff; }
+.btn-medium:hover { background-color: #60AB60 !important; border-color: transparent !important; color: #ffffff; }
+
+.btn-large { border-radius: .3rem; background-color: #4661A9 !important; border-color: transparent !important; border-radius: 2em; padding: .5rem 1rem !important; font-size: 1.25rem !important; line-height: 1.5; color: #ffffff; }
+.btn-large:hover { background-color: #60AB60 !important; border-color: transparent !important; color: #ffffff; }
+
+.btn-outline-medium { border-color: #4661A9 !important; color: #4661A9 !important; padding: .5rem 1rem !important; font-size: 1rem !important; background-color: transparent !important; }
+.btn-outline-medium:hover { color: white !important; background-color: #4661A9 !important; border-color: transparent !important; }
+
+.btn-outline-small { border-color: #4661A9 !important; color: #4661A9 !important; padding: .08rem .4rem 0 !important; font-size: .8rem; background-color: transparent !important; }
+.btn-outline-small:hover { color: white !important; background-color: #4661A9 !important; border-color: transparent !important; }
+
+.btn-outline-primary { border-color: #4661A9 !important; color: #4661A9 !important; padding: 1rem 1.5rem !important; font-size: 1rem; }
+.btn-outline-primary:hover { color: white !important; background-color: #4661A9 !important; border-color: transparent !important; }
+
+.btn-link { color: #4661A9 !important; }
+.btn-link:hover { color: #60AB60 !important; }
+
+.btn-scroller { border-radius: .25rem; text-align: center; display: inline-block; -webkit-transition-duration: .1s; -o-transition-duration: .1s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; -webkit-transition-property: background-color,color,border-color; -o-transition-property: background-color,color,border-color; padding: .5rem 1rem; transition-duration: .1s; transition-timing-function: linear; transition-property: background-color,color,border-color; color: #00000b; background-color: #dddde0; border: 0; }
+
+.btn-scroller:active, .btn-scroller:focus, .btn-scroller:hover { color: #00000b; background-color: #aaaab0; }
+
+.btn-pill { border-radius: 300px; }
+
+.faq__chevron-up { height: .8em; vertical-align: -.06em; fill: currentColor; margin-left: .5em; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }
+
+.badge-primary { background-color: #4661A9 !important; }
+
+.badge-secondary { background-color: #60AB60 !important; }
+
+.rb-link { color: #4661A9 !important; }
+.rb-link:hover { color: #60AB60 !important; }
+
+.rb-paginate-active { background-color: #4661A9 !important; color: white !important; }
+.rb-paginate-active:hover { background-color: #60AB60 !important; }
+
+.pagination .page-link { color: #181818; }
+
+.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #adb5bd !important; }
+
+.mark, mark { background-color: #adb5bd !important; padding: .2em !important; }
+
+@media (min-width: 992px) { .display-xs { display: none !important; } }
+@media (max-width: 992px) { .display-md { display: none !important; } }
+.display-md { display: unset; }
+
+body { font-family: "Source Sans", sans-serif !important; }
+
+a { text-decoration: none !important; }

_site/assets/styles/state.scss

@@ -0,0 +1,15 @@
+@media (min-width: 992px) {
+   .display-xs {
+     display: none !important;
+   }
+ }
+
+ @media (max-width: 992px) {
+    .display-md {
+      display: none !important;
+    }
+  }
+
+.display-md {
+  display: unset;
+}

_site/assets/styles/vars.scss

@@ -0,0 +1,32 @@
+$primary: #4661A9;
+$secondary: #60AB60;
+$warning: #FFC434;
+$danger: #E15647;
+$font: 'Source Sans', sans-serif !important;
+
+// Open color
+//
+//
+//  𝗖 𝗢 𝗟 𝗢 𝗥
+//  v 1.6.2
+//
+//  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+
+//  General
+//  ───────────────────────────────────
+
+$oc-white:         #ffffff;
+$oc-black:         #000000;
+
+
+//  Gray
+//  ───────────────────────────────────
+
+$oc-gray-list: (
+        "1": #adb5bd,
+        "2": #181818
+);
+
+$oc-gray-1: map-get($oc-gray-list, "1");
+$oc-gray-2: map-get($oc-gray-list, "2");

_site/assets/styles/visuals.scss

@@ -0,0 +1,61 @@
+p {
+	color: $oc-gray-2;
+}
+
+.color {
+  height: 100px;
+}
+
+.grid {
+  height: 100px;
+  background-color: $primary;
+  border-radius: 7px;
+
+  & span {
+    margin: 10px 10px 10px 10px;
+    color: white;
+  }
+}
+
+.header-display {
+	&::before {
+		background: $secondary;
+		content: " ";
+		display: inline-block;
+		width: 7px;
+	}
+}
+
+h1.header-display {
+	&::before {
+		height: 3.75rem; // 150% of text-size
+		transform: translate(-15px, 0.9375rem); // 25% of height
+	}
+}
+
+h2.header-display {
+	&::before {
+		height: 3rem;
+		transform: translate(-15px, 0.75rem);
+	}
+}
+
+h3.header-display {
+	&::before {
+		height: 2.625rem;
+		transform: translate(-15px, 0.65625rem);
+	}
+}
+
+h4.header-display {
+	&::before {
+		height: 2.25rem;
+		transform: translate(-15px, 0.5625rem);
+	}
+}
+
+.icon {
+  font-size: 20px;
+  background-color: $oc-gray-2;
+  padding: 20px;
+}

_site/components/index.html

@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+<div class="row">
+    <div class="col-md-3 hidden-sm p-0">
+        <div class="row" style="height: 100%">
+            <div class="col-md-6 col-sm-16 col-xs-12 p-0">
+                <div class="sidebar rb-sidebar__1" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>
+
+            </div>
+            <div class="col-md-6 col-sm-12 col-xs-3 p-0">
+                <div class="sidebar rb-sidebar__2" id="sidebar">
+  <ul class="p-0 list-group pt-3 sidebar-fill">
+    
+      
+        <a href="#buttons"><li class="list-group-item rb-sidebar">
+          Buttons
+        </li></a>
+      
+    
+      
+        <a href="#badges"><li class="list-group-item rb-sidebar">
+          Badges
+        </li></a>
+      
+    
+      
+        <a href="#forms"><li class="list-group-item rb-sidebar">
+          Forms
+        </li></a>
+      
+    
+      
+        <a href="#tables"><li class="list-group-item rb-sidebar">
+          Tables
+        </li></a>
+      
+    
+      
+        <a href="#cards"><li class="list-group-item rb-sidebar">
+          Cards
+        </li></a>
+      
+    
+      
+        <a href="#scrollspy"><li class="list-group-item rb-sidebar">
+          Scrollspy
+        </li></a>
+      
+    
+  </ul>
+</div>
+
+            </div>
+        </div>
+    </div>
+    <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+        <!--<p>This is the components page</p>
+-->
+        <div id="buttons" class="mb-4">
+    <h2 class="b-border">Buttons</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="row bg-light p-5">
+    <div class="col-xs-12 col-sm-6 col-md-6 p-1">
+        <p class="text-black small text-muted m-0 pb-2">Primary</p>
+        <button type="button" class="btn btn-lg btn-primary btn-pill mr-2">Primary</button>
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Ghost</p>
+        <button type="button" class="btn btn-lg btn-outline-primary btn-pill mr-2">How to Contribute</button>
+        <p class="text-black small text-muted m-0 pt-2">Link</p>
+        <button type="button" class="btn btn-lg btn-link mr-2">Learn more</button>
+    </div>
+    <div class="col-xs-12 col-sm-6 col-md-6 p-1">
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Medium</p>
+        <button type="button" class="btn btn-medium btn-pill mr-2">Medium</button>
+        <button type="button" class="btn btn-outline-medium btn-pill mr-2">Ghost</button>
+        <button type="button" class="btn btn-link mr-2">Link</button>
+        <p class="text-black small text-muted m-0 pt-2 pb-2">Small</p>
+        <button type="button" class="btn btn-sm btn-small btn-pill mr-2">Small</button>
+        <button type="button" class="btn btn-sm btn-outline-small btn-pill mr-2">Ghost</button>
+        <button type="button" class="btn btn-sm btn-link mr-2">Link</button>
+        <p class="text-black small text-muted m-0 pt-5">Scroller</p>
+        <button type="button" class="btn btn-scroller mr-2 mt-2">Back to Top <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 256.1" class="faq__chevron-up"><path d="M145.4,136.5l-117.8,116c-4.7,4.7-12.3,4.7-17,0l-7.1-7.1c-4.7-4.7-4.7-12.3,0-17L105.8,128L3.6,27.6c-4.7-4.7-4.7-12.3,0-17l7.1-7.1c4.7-4.7,12.3-4.7,17,0l117.8,116C150.1,124.2,150.1,131.8,145.4,136.5L145.4,136.5z"></path></svg></button>
+    </div>
+</div>
+
+        <div class="page-header mb-4 mt-5">
+    <h2 id="badges" class="b-border">Badges</h2>
+    <!--p class="text-muted">Some Description about badges.</p-->
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12">
+        <h2>Example heading <span class="badge badge-primary">New</span></h2>
+    </div>
+    <div class="col-12">
+        <h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
+    </div>
+    <div class="col-12">
+        <h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
+    </div>
+</div>
+
+        <h1 id="forms"> </h1>
+<div class="page-header mb-4 mt-5">
+    <h2 class="b-border">Forms</h2>
+    <!--p class="text-muted">Some Description about Forms.</p-->
+</div>
+<div class="row">
+    <form class="bg-light p-5 col-sm-6">
+        <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+        </div>
+        <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+        </div>
+        <div class="form-check">
+						<input type="checkbox" class="form-check-input" id="check_me_out">
+            <label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
+        </div>
+        <button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
+    </form>
+</div>
+
+        <div class="mt-5" id="tables">
+    <h2 class="b-border">Tables</h2>
+    <div class="row mt-5">
+        <span>Default</span>
+        <br />
+        <table class="table">
+            <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">First</th>
+                <th scope="col">Last</th>
+                <th scope="col">Handle</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+            </tr>
+            <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+            </tr>
+            <tr>
+                <th scope="row">3</th>
+                <td>Larry</td>
+                <td>the Bird</td>
+                <td>@twitter</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="row mt-5">
+        <span>Striped</span>
+        <br />
+        <table class="table table-striped">
+            <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">First</th>
+                <th scope="col">Last</th>
+                <th scope="col">Handle</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+                <td>@mdo</td>
+            </tr>
+            <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+                <td>@fat</td>
+            </tr>
+            <tr>
+                <th scope="row">3</th>
+                <td>Larry</td>
+                <td>the Bird</td>
+                <td>@twitter</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+        <div class="mt-5" id="cards">
+    <h2 class="b-border">Cards</h2>
+    <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
+                </div>
+            </div>
+            <div class="card mb-2">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                    <a href="#" class="rb-link" onclick="return false;">Apply</a>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-body">
+                    <h4 class="card-title">I2P</h4>
+                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-sm-12 col-xs-12">
+            <div class="card">
+                <img class="card-img-top"
+                     src="/i2p/assets/images/placeholder.jpg" alt="Card image cap">
+                <div class="card-body">
+                    <h4 class="card-title">A few things everyone can do now</h4>
+                    <p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
+                </div>
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
+                        <mark>contributing</mark>
+                    </a> to help the I2P project grow.
+                    </li>
+                    <li class="list-group-item">Take a moment to
+                        <mark>donate</mark>
+                        to support further development.
+                    </li>
+                    <li class="list-group-item">Help
+                        <mark>translate</mark>
+                        the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
+                    </li>
+                </ul>
+                <div class="card-body">
+                    <a href="#" class="rb-link" onclick="return false;">View All</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+        <h1 id="pagination"></h1>
+<div class="page-header mb-4 mt-5">
+    <h2 class="b-border">Pagination</h2>
+    <!--p class="text-muted">Some Description about pagination.</p-->
+</div>
+<div class="row bg-light p-5">
+    <nav aria-label="...">
+        <ul class="pagination m-0">
+            <li class="page-item disabled">
+                <span class="page-link">Previous</span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
+            <li class="page-item">
+                <span class="page-link rb-paginate-active">
+	                2<span class="sr-only">(current)</span>
+                </span>
+            </li>
+            <li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
+            <li class="page-item">
+                <a class="page-link" href="#" onclick="return false;">Next</a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+        <div class="page-header mb-4 mt-5">
+    <h2 id="alerts" class="b-border">Alerts</h2>
+    <p class="text-muted">Some Description about alerts.</p>
+</div>
+<div class="row p-5 bg-light">
+    <div class="col-12 alert alert-primary" role="alert">
+        This is a primary alert—check it out!
+    </div>
+    <div class="col-12 alert alert-success" role="alert">
+        This is a success alert—check it out!
+    </div>
+    <div class="col-12 alert alert-danger" role="alert">
+        This is a danger alert—check it out!
+    </div>
+    <div class="col-12 alert alert-warning" role="alert">
+        This is a warning alert—check it out!
+    </div>
+</div>
+
+        <h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+    </div>
+</div>
+<script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+</body>
+</html>

_site/copywriting/index.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+<div class="row">
+    <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+        <div class="row" style="height: 100%">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
+                <div class="sidebar rb-sidebar__1" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>
+
+            </div>
+            <div class="col-md-6 col-sm-12 col-xs-2 p-0">
+                <div class="sidebar rb-sidebar__2" id="sidebar">
+  <ul class="p-0 list-group pt-3 sidebar-fill">
+    
+      
+        <a href="#goals"><li class="list-group-item rb-sidebar">
+          Goals & Principles
+        </li></a>
+      
+    
+      
+        <a href="#voice"><li class="list-group-item rb-sidebar">
+          Voice & Tone
+        </li></a>
+      
+    
+      
+        <a href="#grammar"><li class="list-group-item rb-sidebar">
+          Grammar
+        </li></a>
+      
+    
+      
+        <a href="#mechanics"><li class="list-group-item rb-sidebar">
+          Mechanics
+        </li></a>
+      
+    
+      
+        <a href="#people"><li class="list-group-item rb-sidebar">
+          People & Design
+        </li></a>
+      
+    
+      
+        <a href="#blog-posts"><li class="list-group-item rb-sidebar">
+          Blog Posts
+        </li></a>
+      
+    
+      
+        <a href="#newsletter"><li class="list-group-item rb-sidebar">
+          Newsletter
+        </li></a>
+      
+    
+      
+        <a href="#social-media"><li class="list-group-item rb-sidebar">
+          Social Media
+        </li></a>
+      
+    
+      
+        <a href="#copyright"><li class="list-group-item rb-sidebar">
+          Copyright
+        </li></a>
+      
+    
+      
+        <a href="#word-list"><li class="list-group-item rb-sidebar">
+          Word List
+        </li></a>
+      
+    
+  </ul>
+</div>
+
+            </div>
+        </div>
+    </div>
+    <div class="col-md-9 col-sm-8 col-xs-8 container-wrapper">
+        <!--<p>This is the Copywriting page!</p>
+-->
+        <h1 id="goals"></h1>
+<div class="page-header mb-4 mt-3">
+    <h3>Writing Goals and Principles</h3>
+</div>
+<div class="row">
+    <div class="col-12 p-0">
+        <p>With every piece of content we publish, we aim to:</p>
+        <ul>
+          <li><b>Empower.</b> Help people understand Ura Design by using language that informs them and encourages them to make the most of our products.</li>
+          <li><b>Respect.</b> Treat readers with the respect they deserve. Put yourself in their shoes, and don’t patronize them. Remember that they have other things to do. Be considerate and inclusive. Don’t market at people; communicate with them.</li>
+          <li><b>Educate.</b> Tell readers what they need to know, not just what we want to say. Give them the exact information they need, along with opportunities to learn more. Remember that you’re the expert, and readers don’t have access to everything you know.</li>
+          <li><b>Guide</b> Think of yourself as a tour guide for our readers. Whether you’re leading them through our website, apps, or educational materials, communicate in a friendly and helpful way.</li>
+          <li><b>Speak truth.</b> Understand Ura's place in our customers’ lives. Avoid dramatic storytelling and grandiose claims. Focus on our real strengths.</li>
+        </ul>
+        <p>In order to achieve those goals, we make sure our content is:</p>
+        <ul>
+          <li><b>Clear.</b> Understand the topic you’re writing about. Use simple words and sentences.</li>
+          <li><b>Useful.</b> Before you start writing, ask yourself: What purpose does this serve? Who is going to read it? What do they need to know?</li>
+          <li><b>Friendly.</b> Write like a human. Don’t be afraid to break a few rules if it makes your writing more relatable. All of our content, from splashy homepage copy to system alerts, should be warm and human.</li>
+          <li><b>Appropriate.</b> Write in a way that suits the situation. Just like you do in face-to-face conversations, adapt your tone depending on who you’re writing to and what you’re writing about.</li>
+        </ul>
+        </div>
+    </div>
+
+        
+        
+        
+        
+        
+        
+        
+        
+        
+    <h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+    </div>
+</div>
+<script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+</body>
+</html>

_site/feed.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.7.3">Jekyll</generator><link href="http://localhost:4000/i2p/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/i2p/" rel="alternate" type="text/html" /><updated>2018-07-27T22:04:02-03:00</updated><id>http://localhost:4000/i2p/</id><title type="html">SecureDrop</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><entry><title type="html">Reproducible Builds Styleguide</title><link href="http://localhost:4000/i2p/jekyll/update/2018/05/06/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Reproducible Builds Styleguide" /><published>2018-05-06T07:24:53-03:00</published><updated>2018-05-06T07:24:53-03:00</updated><id>http://localhost:4000/i2p/jekyll/update/2018/05/06/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/i2p/jekyll/update/2018/05/06/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
+
+&lt;p&gt;To add new posts, simply add a file in the &lt;code class=&quot;highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory that follows the convention &lt;code class=&quot;highlighter-rouge&quot;&gt;YYYY-MM-DD-name-of-post.ext&lt;/code&gt; and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.&lt;/p&gt;
+
+&lt;p&gt;Jekyll also offers powerful support for code snippets:&lt;/p&gt;
+
+&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;k&quot;&gt;def&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;print_hi&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+  &lt;span class=&quot;nb&quot;&gt;puts&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;Hi, &lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;
+&lt;span class=&quot;k&quot;&gt;end&lt;/span&gt;
+&lt;span class=&quot;n&quot;&gt;print_hi&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;'Tom'&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
+&lt;span class=&quot;c1&quot;&gt;#=&amp;gt; prints 'Hi, Tom' to STDOUT.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;
+
+&lt;p&gt;Check out the &lt;a href=&quot;https://jekyllrb.com/docs/home&quot;&gt;Jekyll docs&lt;/a&gt; for more info on how to get the most out of Jekyll. File all bugs/feature requests at &lt;a href=&quot;https://github.com/jekyll/jekyll&quot;&gt;Jekyll’s GitHub repo&lt;/a&gt;. If you have questions, you can ask them on &lt;a href=&quot;https://talk.jekyllrb.com/&quot;&gt;Jekyll Talk&lt;/a&gt;.&lt;/p&gt;</content><author><name></name></author><summary type="html">You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.</summary></entry></feed>

_site/getting-started/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+<div class="row" style="height: 100%">
+      <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+          <div class="row" style="height: 100%">
+              <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
+                  <div class="sidebar rb-sidebar__1" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>
+
+              </div>
+            </div>
+          </div>
+    <div class="col-md-7 col-xs-12 col-sm-12 p-0">
+        <main role="main" class="content-scroll p-5" data-spy="scroll"
+              data-target="#components-nav" data-offset="0">
+            <div class="row">
+                <div class="col-12 p-0">
+                    <div class="page-header mb-4">
+                        <h3>Getting started</h3>
+                        <p class="text-muted">We are making I2P usable for everyone.</p>
+                    </div>
+                    <p>The I2P styleguide is based on <a href="https://getbootstrap.com/">Bootstrap</a>, an open-source
+                        toolkit for developing with HTML, CSS, and JS. We are currently on
+                        <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">v4.1.0</a>.
+                    </p>
+                    <p>
+                        To use the I2P styleguide, you can download our scss style (components.scss) and
+                        import it in your project with bootstrap included. <a href="http://sass-lang.com/">SASS</a> is a CSS extension language.
+                    </p>
+                    <p class="purple">
+                        If you want to use SASS you can download the complete archive for the styleguide. The scss folder under
+                        assets contains all the sass files. Since we use bootstrap, we only add a few styles without
+                        modifying bootstrap core or defining new elements whenever possible.
+                    </p>
+                    <p>Bootstrap contains a few JavaScript libraries for extra interaction with the DOM. We use these
+                        libraries but do not add extra JavaScript, so that only few elements are affected if you disable JavaScript.
+                    </p>
+                    <p>This styleguide has been built using <a href="https://jekyllrb.com/">Jekyll</a>.
+                        Jekyll is a simple, blog-aware, static site generator. You can build this yourself by
+                        <a href="https://jekyllrb.com/docs/continuous-integration/buddyworks/#1-getting-started">
+                            installing Jekyll</a>.</p>
+                        <div class="bg-box p-5 mb-3">
+                            <h6>Use the I2P Styleguide</h6>
+                            <p class="m-0">This package includes .scss files</p>
+                            <a class="btn btn-lg btn-link p-0" title="I2P Repo"
+                               href="https://github.com/uracreative/securedrop-styleguide/tree/master/assets/styles" target="_blank">Visit Repo</a></div>
+                        <div>
+                    </div>
+
+                    <h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
+<script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+</body>
+</html>

_site/i2p.ses

@@ -0,0 +1,521 @@
+let SessionLoad = 1
+if &cp | set nocp | endif
+let s:cpo_save=&cpo
+set cpo&vim
+imap <S-Tab> <Plug>SuperTabBackward
+inoremap <C-Tab> 	
+map <silent>  :call ToggleVExplorer()
+vmap "" c""P
+vmap '' c''P
+vmap () c()P
+vmap <> c<>P
+vmap [% [%m'gv``
+vmap [] c[]P
+vmap ]% ]%m'gv``
+vmap a% [%v]%
+vmap gx <Plug>NetrwBrowseXVis
+nmap gx <Plug>NetrwBrowseX
+vmap n'' c'PO'
+vmap n"" c"PO"
+vmap n<> c>PO<
+vmap n() c)PO(
+vmap n[] c]PO[
+vmap n{} c}PO{
+vmap {} c{}P
+vnoremap <silent> <Plug>NetrwBrowseXVis :call netrw#BrowseXVis()
+nnoremap <silent> <Plug>NetrwBrowseX :call netrw#BrowseX(expand((exists("g:netrw_gx")? g:netrw_gx : '<cfile>')),netrw#CheckIfRemote())
+map <F6> :setlocal spell! spelllang=pt_br
+imap 	 <Plug>SuperTabForward
+inoremap    /<++>
"_c4l
+imap ;html <!DOCTYPE html>
<head>
<title><++></title>
<link rel="stylesheet" type="text/css" href="<++>.css">
<++>
</head>

<body>
<++>
</body>
</html>ggi
+let &cpo=s:cpo_save
+unlet s:cpo_save
+set autoindent
+set background=dark
+set backspace=indent,eol,start
+set fileencodings=ucs-bom,utf-8,default,latin1
+set helplang=pt
+set hlsearch
+set incsearch
+set nomodeline
+set printoptions=paper:a4
+set ruler
+set runtimepath=~/.vim,~/.vim/bundle/matchit,~/.vim/bundle/supertab-master,~/.vim/bundle/wal-vim,/var/lib/vim/addons,/usr/share/vim/vimfiles,/usr/share/vim/vim80,/usr/share/vim/vim80/pack/dist/opt/matchit,/usr/share/vim/vimfiles/after,/var/lib/vim/addons/after,~/.vim/after
+set scrolloff=5
+set shiftwidth=2
+set showmatch
+set suffixes=.bak,~,.swp,.o,.info,.aux,.log,.dvi,.bbl,.blg,.brf,.cb,.ind,.idx,.ilg,.inx,.out,.toc
+set noswapfile
+set tabstop=2
+set wildmenu
+set wildmode=list:longest
+set window=57
+set nowritebackup
+let s:so_save = &so | let s:siso_save = &siso | set so=0 siso=0
+let v:this_session=expand("<sfile>:p")
+silent only
+cd ~/prj/freelas/UraTest/securedrop-styleguide
+if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
+  let s:wipebuf = bufnr('%')
+endif
+set shortmess=aoO
+badd +1 ~/prj/freelas/UraTest/securedrop-styleguide
+badd +1 ~/prj/freelas/UraTest/logs.txt
+badd +2 assets/fonts/sourcesans.css
+badd +8 assets/fonts/sourcecode.css
+badd +7 _layouts/default.html
+badd +4 _includes/head.html
+badd +1 assets/styles/vars.scss
+badd +42 _includes/visuals/typography.html
+badd +31 _includes/scrollspy.html
+badd +4 assets/styles/visuals.scss
+badd +1 ~/prj/freelas/UraTest/logs
+badd +1 assets/styles/main.scss
+badd +183 assets/styles/components.scss
+badd +18 _includes/components/buttons.html
+badd +18 assets/styles/layout.scss
+badd +1 assets/styles/state.scss
+badd +2 _includes/navbar.html
+badd +3 _includes/visuals/colors.html
+badd +1 assets/styles/navbar_side.html
+badd +19 _includes/navbar_side.html
+badd +1 components.md
+badd +1 components.scss
+badd +5 _includes/sidebar.html
+badd +1 _includes/_config.yml
+badd +29 _config.yml
+badd +1 assets/styles/navbar.html
+badd +1 _includes/layout.scss
+badd +1 assets/styles/head.html
+badd +1 ...logs
+badd +75 _includes/visuals/assets.html
+badd +31 _includes/components/cards.html
+badd +19 _includes/components/forms.html
+badd +1 _includes/components/components.md
+argglobal
+silent! argdel *
+$argadd ~/prj/freelas/UraTest/securedrop-styleguide
+edit NetrwTreeListing\ 61
+set splitbelow splitright
+wincmd _ | wincmd |
+vsplit
+1wincmd h
+wincmd _ | wincmd |
+split
+1wincmd k
+wincmd w
+wincmd w
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+exe '1resize ' . ((&lines * 28 + 29) / 58)
+exe 'vert 1resize ' . ((&columns * 34 + 73) / 146)
+exe '2resize ' . ((&lines * 27 + 29) / 58)
+exe 'vert 2resize ' . ((&columns * 34 + 73) / 146)
+exe 'vert 3resize ' . ((&columns * 111 + 73) / 146)
+argglobal
+let s:cpo_save=&cpo
+set cpo&vim
+nmap <buffer>  <Plug>NetrwHideEdit
+nmap <buffer>  <Plug>NetrwRefresh
+nnoremap <buffer> <F1> :he netrw-quickhelp
+nmap <buffer> <nowait> <silent> <S-CR> <Plug>NetrwTreeSqueeze
+nnoremap <buffer> <silent> <S-Up> :Pexplore
+nnoremap <buffer> <silent> <S-Down> :Nexplore
+let &cpo=s:cpo_save
+unlet s:cpo_save
+setlocal keymap=
+setlocal noarabic
+setlocal autoindent
+setlocal backupcopy=
+setlocal balloonexpr=
+setlocal nobinary
+setlocal nobreakindent
+setlocal breakindentopt=
+setlocal bufhidden=hide
+setlocal nobuflisted
+setlocal buftype=
+setlocal nocindent
+setlocal cinkeys=0{,0},0),:,0#,!^F,o,O,e
+setlocal cinoptions=
+setlocal cinwords=if,else,while,do,for,switch
+setlocal colorcolumn=
+setlocal comments=s1:/*,mb:*,ex:*/,://,b:#,:%,:XCOMM,n:>,fb:-
+setlocal commentstring=/*%s*/
+setlocal complete=.,w,b,u,t,i
+setlocal concealcursor=
+setlocal conceallevel=0
+setlocal completefunc=
+setlocal nocopyindent
+setlocal cryptmethod=
+setlocal nocursorbind
+setlocal nocursorcolumn
+setlocal cursorline
+setlocal define=
+setlocal dictionary=
+setlocal nodiff
+setlocal equalprg=
+setlocal errorformat=
+setlocal noexpandtab
+if &filetype != 'netrw'
+setlocal filetype=netrw
+endif
+setlocal fixendofline
+setlocal foldcolumn=0
+setlocal foldenable
+setlocal foldexpr=0
+setlocal foldignore=#
+setlocal foldlevel=0
+setlocal foldmarker={{{,}}}
+setlocal foldmethod=manual
+setlocal foldminlines=1
+setlocal foldnestmax=20
+setlocal foldtext=foldtext()
+setlocal formatexpr=
+setlocal formatoptions=tcq
+setlocal formatlistpat=^\\s*\\d\\+[\\]:.)}\\t\ ]\\s*
+setlocal formatprg=
+setlocal grepprg=
+setlocal iminsert=0
+setlocal imsearch=-1
+setlocal include=
+setlocal includeexpr=
+setlocal indentexpr=
+setlocal indentkeys=0{,0},:,0#,!^F,o,O,e
+setlocal noinfercase
+setlocal iskeyword=@,48-57,_,192-255
+setlocal keywordprg=
+setlocal nolinebreak
+setlocal nolisp
+setlocal lispwords=
+setlocal nolist
+setlocal makeencoding=
+setlocal makeprg=
+setlocal matchpairs=(:),{:},[:]
+setlocal nomodeline
+setlocal nomodifiable
+setlocal nrformats=bin,octal,hex
+set number
+setlocal nonumber
+setlocal numberwidth=4
+setlocal omnifunc=
+setlocal path=
+setlocal nopreserveindent
+setlocal nopreviewwindow
+setlocal quoteescape=\\
+setlocal readonly
+set relativenumber
+setlocal norelativenumber
+setlocal norightleft
+setlocal rightleftcmd=search
+setlocal noscrollbind
+setlocal shiftwidth=2
+setlocal noshortname
+setlocal signcolumn=auto
+setlocal nosmartindent
+setlocal softtabstop=0
+setlocal nospell
+setlocal spellcapcheck=[.?!]\\_[\\])'\"\	\ ]\\+
+setlocal spellfile=
+setlocal spelllang=en
+setlocal statusline=
+setlocal suffixesadd=
+setlocal noswapfile
+setlocal synmaxcol=3000
+if &syntax != 'netrw'
+setlocal syntax=netrw
+endif
+setlocal tabstop=33
+setlocal tagcase=
+setlocal tags=
+setlocal termkey=
+setlocal termsize=
+setlocal textwidth=0
+setlocal thesaurus=
+setlocal noundofile
+setlocal undolevels=-123456
+setlocal nowinfixheight
+setlocal nowinfixwidth
+setlocal nowrap
+setlocal wrapmargin=0
+silent! normal! zE
+let s:l = 30 - ((20 * winheight(0) + 14) / 28)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+30
+normal! 02|
+lcd ~/prj/freelas/UraTest/securedrop-styleguide
+wincmd w
+argglobal
+if bufexists('~/prj/freelas/UraTest/logs.txt') | buffer ~/prj/freelas/UraTest/logs.txt | else | edit ~/prj/freelas/UraTest/logs.txt | endif
+setlocal keymap=
+setlocal noarabic
+setlocal autoindent
+setlocal backupcopy=
+setlocal balloonexpr=
+setlocal nobinary
+setlocal nobreakindent
+setlocal breakindentopt=
+setlocal bufhidden=
+setlocal buflisted
+setlocal buftype=
+setlocal nocindent
+setlocal cinkeys=0{,0},0),:,0#,!^F,o,O,e
+setlocal cinoptions=
+setlocal cinwords=if,else,while,do,for,switch
+setlocal colorcolumn=
+setlocal comments=fb:-,fb:*
+setlocal commentstring=
+setlocal complete=.,w,b,u,t,i
+setlocal concealcursor=
+setlocal conceallevel=0
+setlocal completefunc=
+setlocal nocopyindent
+setlocal cryptmethod=
+setlocal nocursorbind
+setlocal nocursorcolumn
+setlocal nocursorline
+setlocal define=
+setlocal dictionary=
+setlocal nodiff
+setlocal equalprg=
+setlocal errorformat=
+setlocal noexpandtab
+if &filetype != 'text'
+setlocal filetype=text
+endif
+setlocal fixendofline
+setlocal foldcolumn=0
+setlocal foldenable
+setlocal foldexpr=0
+setlocal foldignore=#
+setlocal foldlevel=0
+setlocal foldmarker={{{,}}}
+setlocal foldmethod=manual
+setlocal foldminlines=1
+setlocal foldnestmax=20
+setlocal foldtext=foldtext()
+setlocal formatexpr=
+setlocal formatoptions=tcq
+setlocal formatlistpat=^\\s*\\d\\+[\\]:.)}\\t\ ]\\s*
+setlocal formatprg=
+setlocal grepprg=
+setlocal iminsert=0
+setlocal imsearch=-1
+setlocal include=
+setlocal includeexpr=
+setlocal indentexpr=
+setlocal indentkeys=0{,0},:,0#,!^F,o,O,e
+setlocal noinfercase
+setlocal iskeyword=@,48-57,_,192-255
+setlocal keywordprg=
+setlocal nolinebreak
+setlocal nolisp
+setlocal lispwords=
+setlocal nolist
+setlocal makeencoding=
+setlocal makeprg=
+setlocal matchpairs=(:),{:},[:]
+setlocal nomodeline
+setlocal modifiable
+setlocal nrformats=bin,octal,hex
+set number
+setlocal number
+setlocal numberwidth=4
+setlocal omnifunc=
+setlocal path=
+setlocal nopreserveindent
+setlocal nopreviewwindow
+setlocal quoteescape=\\
+setlocal noreadonly
+set relativenumber
+setlocal relativenumber
+setlocal norightleft
+setlocal rightleftcmd=search
+setlocal noscrollbind
+setlocal shiftwidth=2
+setlocal noshortname
+setlocal signcolumn=auto
+setlocal nosmartindent
+setlocal softtabstop=0
+setlocal nospell
+setlocal spellcapcheck=[.?!]\\_[\\])'\"\	\ ]\\+
+setlocal spellfile=
+setlocal spelllang=en
+setlocal statusline=
+setlocal suffixesadd=
+setlocal noswapfile
+setlocal synmaxcol=3000
+if &syntax != 'text'
+setlocal syntax=text
+endif
+setlocal tabstop=2
+setlocal tagcase=
+setlocal tags=
+setlocal termkey=
+setlocal termsize=
+setlocal textwidth=0
+setlocal thesaurus=
+setlocal noundofile
+setlocal undolevels=-123456
+setlocal nowinfixheight
+setlocal nowinfixwidth
+setlocal wrap
+setlocal wrapmargin=0
+silent! normal! zE
+let s:l = 51 - ((20 * winheight(0) + 13) / 27)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+51
+normal! 050|
+lcd ~/prj/freelas/UraTest/securedrop-styleguide
+wincmd w
+argglobal
+if bufexists('~/prj/freelas/UraTest/securedrop-styleguide/assets/styles/components.scss') | buffer ~/prj/freelas/UraTest/securedrop-styleguide/assets/styles/components.scss | else | edit ~/prj/freelas/UraTest/securedrop-styleguide/assets/styles/components.scss | endif
+setlocal keymap=
+setlocal noarabic
+setlocal autoindent
+setlocal backupcopy=
+setlocal balloonexpr=
+setlocal nobinary
+setlocal nobreakindent
+setlocal breakindentopt=
+setlocal bufhidden=
+setlocal buflisted
+setlocal buftype=
+setlocal nocindent
+setlocal cinkeys=0{,0},0),:,0#,!^F,o,O,e
+setlocal cinoptions=
+setlocal cinwords=if,else,while,do,for,switch
+setlocal colorcolumn=
+setlocal comments=s1:/*,mb:*,ex:*/,://
+setlocal commentstring=//\ %s
+setlocal complete=.,w,b,u,t,i
+setlocal concealcursor=
+setlocal conceallevel=0
+setlocal completefunc=
+setlocal nocopyindent
+setlocal cryptmethod=
+setlocal nocursorbind
+setlocal nocursorcolumn
+setlocal nocursorline
+setlocal define=^\\s*\\%(@mixin\\|=\\)
+setlocal dictionary=
+setlocal nodiff
+setlocal equalprg=
+setlocal errorformat=
+setlocal noexpandtab
+if &filetype != 'scss'
+setlocal filetype=scss
+endif
+setlocal fixendofline
+setlocal foldcolumn=0
+setlocal foldenable
+setlocal foldexpr=0
+setlocal foldignore=#
+setlocal foldlevel=0
+setlocal foldmarker={{{,}}}
+setlocal foldmethod=manual
+setlocal foldminlines=1
+setlocal foldnestmax=20
+setlocal foldtext=foldtext()
+setlocal formatexpr=
+setlocal formatoptions=tcq
+setlocal formatlistpat=^\\s*\\d\\+[\\]:.)}\\t\ ]\\s*
+setlocal formatprg=
+setlocal grepprg=
+setlocal iminsert=0
+setlocal imsearch=-1
+setlocal include=^\\s*@import\\s\\+\\%(url(\\)\\=[\"']\\=
+setlocal includeexpr=substitute(v:fname,'\\%(.*/\\|^\\)\\zs','_','')
+setlocal indentexpr=
+setlocal indentkeys=0{,0},:,0#,!^F,o,O,e
+setlocal noinfercase
+setlocal iskeyword=@,48-57,_,192-255
+setlocal keywordprg=
+setlocal nolinebreak
+setlocal nolisp
+setlocal lispwords=
+setlocal nolist
+setlocal makeencoding=
+setlocal makeprg=
+setlocal matchpairs=(:),{:},[:]
+setlocal nomodeline
+setlocal modifiable
+setlocal nrformats=bin,octal,hex
+set number
+setlocal number
+setlocal numberwidth=4
+setlocal omnifunc=csscomplete#CompleteCSS
+setlocal path=
+setlocal nopreserveindent
+setlocal nopreviewwindow
+setlocal quoteescape=\\
+setlocal noreadonly
+set relativenumber
+setlocal relativenumber
+setlocal norightleft
+setlocal rightleftcmd=search
+setlocal noscrollbind
+setlocal shiftwidth=2
+setlocal noshortname
+setlocal signcolumn=auto
+setlocal nosmartindent
+setlocal softtabstop=0
+setlocal nospell
+setlocal spellcapcheck=[.?!]\\_[\\])'\"\	\ ]\\+
+setlocal spellfile=
+setlocal spelllang=en
+setlocal statusline=
+setlocal suffixesadd=.sass,.scss,.css
+setlocal noswapfile
+setlocal synmaxcol=3000
+if &syntax != 'scss'
+setlocal syntax=scss
+endif
+setlocal tabstop=2
+setlocal tagcase=
+setlocal tags=
+setlocal termkey=
+setlocal termsize=
+setlocal textwidth=0
+setlocal thesaurus=
+setlocal noundofile
+setlocal undolevels=-123456
+setlocal nowinfixheight
+setlocal nowinfixwidth
+setlocal wrap
+setlocal wrapmargin=0
+silent! normal! zE
+let s:l = 218 - ((47 * winheight(0) + 28) / 56)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+218
+normal! 013|
+lcd ~/prj/freelas/UraTest/securedrop-styleguide
+wincmd w
+3wincmd w
+exe '1resize ' . ((&lines * 28 + 29) / 58)
+exe 'vert 1resize ' . ((&columns * 34 + 73) / 146)
+exe '2resize ' . ((&lines * 27 + 29) / 58)
+exe 'vert 2resize ' . ((&columns * 34 + 73) / 146)
+exe 'vert 3resize ' . ((&columns * 111 + 73) / 146)
+tabnext 1
+if exists('s:wipebuf')
+  silent exe 'bwipe ' . s:wipebuf
+endif
+unlet! s:wipebuf
+set winheight=1 winwidth=20 shortmess=filnxtToO
+set winminheight=1 winminwidth=1
+let s:sx = expand("<sfile>:p:r")."x.vim"
+if file_readable(s:sx)
+  exe "source " . fnameescape(s:sx)
+endif
+let &so = s:so_save | let &siso = s:siso_save
+doautoall SessionLoadPost
+unlet SessionLoad
+" vim: set ft=vim :

_site/index.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+  <div class="row">
+      <div class="col-md-3 col-sm-4 col-xs-4 p-0">
+          <div class="row" style="height: 100%">
+              <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill">
+                  <div class="sidebar rb-sidebar__1" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>
+
+              </div>
+            </div>
+          </div>
+    <div class="col-md-7 col-xs-12 col-sm-12 p-0">
+      <main role="main" class="content-scroll p-5" data-spy="scroll" data-target="#components-nav" data-offset="0">
+
+        <div class="row">
+          <div class="col-12 p-0">
+            <div class="page-header mb-4">
+              <h3>About</h3>
+              <p class="text-muted">I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other. The network itself is strictly message based (a la IP), but there is a library available to allow reliable streaming communication on top of it (a la TCP).</p>
+            </div>
+            <p>This guide aims to provide standards, principles and components to design consistent views related to the I2P. These pages are a living document and we welcome contributions, feedback and suggestions.</p>
+            </p>
+            <br>
+            <h5>Contact</h5>
+            <div class="row mt-5">
+              <div class="col-md-6 p-0">
+                <div class="bg-box p-5 mb-3">
+                  <h6>I2P</h6>
+                  <a class="btn btn-lg btn-link p-0" title="SecureDrop Repo" href="https://lists.reproducible-builds.org/listinfo/rb-general" target="_blank">Mailing List</a></div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 p-0">
+            <div class="page-header mb-4 mt-5">
+              <h5>Identihub</h5>
+              <p class="text-muted">The I2P brand assets are included in this Identihub project page.</p>
+            </div>
+            <div class="row mt-5">
+              <div class="col-md-6 p-0">
+                <div class="bg-box p-5 mb-3 text-left">
+                  <h6>Styleguide Mirror on Identihub</h6>
+                  <p class="m-0"></p>
+                  <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop" target="_blank">Project Page</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+
+      </main>
+    </div>
+  </div>
+  <script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+
+</body>
+
+</html>

_site/jekyll/update/2018/05/06/welcome-to-jekyll.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+    <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">Reproducible Builds Styleguide</h1>
+    <p class="post-meta">
+      <time class="dt-published" datetime="2018-05-06T07:24:53-03:00" itemprop="datePublished">May 6, 2018
+      </time></p>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    <p>You’ll find this post in your <code class="highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
+
+<p>To add new posts, simply add a file in the <code class="highlighter-rouge">_posts</code> directory that follows the convention <code class="highlighter-rouge">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>
+
+<p>Jekyll also offers powerful support for code snippets:</p>
+
+<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
+  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
+<span class="k">end</span>
+<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
+<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>
+
+<p>Check out the <a href="https://jekyllrb.com/docs/home">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href="https://talk.jekyllrb.com/">Jekyll Talk</a>.</p>
+
+
+  </div><a class="u-url" href="/i2p/jekyll/update/2018/05/06/welcome-to-jekyll.html" hidden></a>
+</article>
+
+    <script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+  </body>
+</html>

_site/visuals/index.html

@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+  <meta charset="utf-8">
+  <title>SecureDrop</title>
+  <link rel="stylesheet" href="/i2p/assets/static/open-iconic-bootstrap.css" />
+  <link rel="stylesheet" href="/i2p/assets/static/bootstrap.min.css">
+  <link rel="stylesheet" href="/i2p/assets/styles/main.css">
+  <link rel="shortcut icon" type="image/png" href="/i2p/assets/images/favicon.png"/>
+  <link href="/i2p/assets/fonts/sourcesans.css" rel="stylesheet">
+  <link href="/i2p/assets/fonts/sourcecode.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <a class="navbar-brand" href="https://geti2p.net/">
+    <img src="/i2p/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+    <div class="collapse navbar-collapse " id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto display-xs">
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/getting-started">Getting Started</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/visuals/">Visuals</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/components/">Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/i2p/copywriting/">Copywriting</a>
+        </li>
+      </ul>
+    </div>
+</nav>
+
+    <div class="row">
+      <div class="col-md-3 col-sm-5 hidden-sm p-0">
+        <div class="row" style="height: 100%">
+          <div class="col-md-6 col-sm-6 col-xs-6 p-0">
+            <div class="sidebar rb-sidebar__1" id="sidebar1">
+  <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/" class="sidebar__link__light">About</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/getting-started/" class="sidebar__link__light">Getting Started</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/visuals/" class="sidebar__link__light">Visuals</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/components/" class="sidebar__link__light">Components</a>
+    </li>
+
+    <li class="list-group-item rb-main-sidebar">
+        <a href="/i2p/copywriting/" class="sidebar__link__light">Copywriting</a>
+    </li>
+  </ul>
+</div>
+
+          </div>
+          <div class="col-md-6 col-sm-6 col-xs-6 p-0">
+            <div class="sidebar rb-sidebar__2" id="sidebar">
+  <ul class="p-0 list-group pt-3 sidebar-fill">
+    
+      
+        <a href="#colors"><li class="list-group-item rb-sidebar">
+          Colors
+        </li></a>
+      
+    
+      
+        <a href="#grid"><li class="list-group-item rb-sidebar">
+          Grid
+        </li></a>
+      
+    
+      
+        <a href="#typography"><li class="list-group-item rb-sidebar">
+          Typography
+        </li></a>
+      
+    
+      
+        <a href="#assets"><li class="list-group-item rb-sidebar">
+          Assets
+        </li></a>
+      
+    
+  </ul>
+</div>
+
+          </div>
+        </div>
+      </div>
+        <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+          
+
+          <div id="colors" class="page-header mb-4">
+  <h2 class="b-border">Colors</h2>
+  <p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
+</div>
+<div class="row">
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div>
+    <h6 class="pt2 text-left">Primary Color</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
+    <h6 class="pt2 text-left">Secondary color</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div>
+    <h6 class="pt2 text-left">Warning</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div>
+    <h6 class="pt2 text-left">Danger</h6>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-white text-black small">#ffffff</div>
+    <h6 class="pt2 text-left">White</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#95989A</div>
+    <h6 class="pt2 text-left">Gray 1</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-white small">#181818</div>
+    <h6 class="pt2 text-left">Gray 2</h6>
+  </div>
+  <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-black text-white small">#000000</div>
+    <h6 class="pt2 text-left">Black</h6>
+  </div>
+</div>
+
+          <div id="grid" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Grid</h2>
+    <p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
+</div>
+<div class="container bg-light p-5">
+    <div class="row mb-1">
+        <div class="col-12">
+            <p class="background-primary p-3 text-white small">
+                12
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-8">
+            <p class="background-primary p-3 text-white small">
+                8
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-9">
+            <p class="background-primary p-3 text-white small">
+                9
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+        <div class="col-2">
+            <p class="background-primary p-3 text-white small">
+                2
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+        <div class="col-3">
+            <p class="background-primary p-3 text-white small">
+                3
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+        <div class="col-4">
+            <p class="background-primary p-3 text-white small">
+                4
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-6">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+        <div class="col-6">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-8 offset-2">
+            <p class="background-primary p-3 text-white small">
+                8
+            </p>
+        </div>
+    </div>
+    <div class="row mb-1">
+        <div class="col-6 offset-3">
+            <p class="background-primary p-3 text-white small">
+                6
+            </p>
+        </div>
+    </div>
+</div>
+
+          <div id="typography" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Typography</h2>
+    <p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
+</div>
+<div class="row">
+    <div class="col-12">
+        <p class="text-black small text-muted">H1</p>
+        <h1>Protect communications from monitoring</h1>
+        <p class="text-black small text-muted">H2</p>
+        <h2>Protect communications from monitoring</h2>
+        <p class="text-black small text-muted">H3</p>
+        <h3>Protect communications from monitoring</h3>
+        <p class="text-black small text-muted">H4</p>
+        <h4>Protect communications from monitoring</h4>
+        <p class="text-black small text-muted">H5</p>
+        <h5>Protect communications from monitoring</h5>
+        <p class="text-black small text-muted">H6</p>
+        <h6>Protect communications from monitoring</h6>
+
+        <p class="text-black small pt-5 text-muted">H1 display</p>
+        <h1 class="header-display color-secondary">I2P Anonymous Network</h1>
+        <p class="text-black small text-muted">H2 display</p>
+        <h2 class="header-display color-secondary">I2P Anonymous Network</h2>
+        <p class="text-black small text-muted">H3 display</p>
+        <h3 class="header-display color-secondary">I2P Anonymous Network</h3>
+        <p class="text-black small text-muted">H4 display</p>
+        <h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+    </div>
+</div>
+<div class="row pt-5">
+    <div class="col-md-5">
+        <p class="text-black small">
+            <span class="text-left color-gray-2 rb-isBold">Paragraph</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Regular</span>
+        </p>
+        <p>
+            I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
+        </p>
+    </div>
+    <div class="col-md-1"></div>
+    <div class="col-md-6">
+        <p class="text-black small">
+            <span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">Source Code</span>
+        </p>
+        <pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
+          $('.rb-sidebar').on('click', 'a',function() {
+              $('.rb-sidebar a.active').removeClass('active');
+              $(this).addClass('active');
+          });
+        </pre>
+    </div>
+</div>
+
+          <div id="assets" class="page-header mb-4 mt-5">
+    <h2 class="b-border">Identity Assets</h2>
+    <p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p>
+</div>
+<div class="row">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_62.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5 bg-dark">
+            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_6.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_63.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5 bg-dark">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_9.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_color.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">Default</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_1.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+
+    <div class="col-xs-12 col-md-5 col-sm-6">
+        <div class="image bg-dark border p-5">
+            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_white.png" class="rb-contain">
+        </div>
+        <p class="text-black pt-3 align-horizontally flex-space-between">
+            <span class="text-left color-gray-2 rb-isBold">White</span>
+            <span class="text-right color-primary rb-isBold" style="float: right;">
+              <a target="_blank"
+                 href="https://demo.identihub.co/assets/SecureDrop_ICONS_3.svg"
+                 class="button btn btn-sm btn-outline-medium">Download SVG</a>
+            </span>
+        </p>
+    </div>
+</div>
+
+<div class="row mt-5">
+    <div class="col-md-6">
+        <div class="bg-box p-5 mb-3">
+            <h6>I2P repo</h6>
+            <p class="m-0">Download SVG and PNG files</p>
+            <a class="btn btn-lg btn-link p-0" title="SecureDrop Repo"
+               href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div>
+    </div>
+    <div class="col-md-6">
+        <div class="bg-box p-5 text-left">
+            <h6>Styleguide Mirror on Identihub</h6>
+            <p class="m-0">Identihub Project</p>
+            <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop"
+               target="_blank">Visit Project Page</a>
+        </div>
+    </div>
+</div>
+
+          <h1 id="scrollspy"> </h1>
+<div class="page-header mb-4 mt-5 d-none d-sm-none">
+    <h3>Scrollspy</h3>
+    <!--p class="text-muted">Some Description about scrollspy.</p-->
+</div>
+<div class="row p-0 pt-5 bg-light d-none d-sm-none">
+    <div class="bd-example">
+        <div class="row">
+            <div class="col-4">
+                <div id="list-example" class="list-group">
+                    <a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
+                    <a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
+                </div>
+            </div>
+            <div class="col-8">
+                <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="dropdown-divider mt-5 wi"></div>
+
+<div class="row">
+    <div class="col-12 p-0">
+        <p class="mt-5 mb-5">
+            <span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
+        </p>
+    </div>
+</div>
+
+          <script src="/i2p/assets/javascript/modernizr.min.js"></script>
+<script src="/i2p/assets/javascript/jquery-3.3.1.slim.min.js"></script>
+<script src="/i2p/assets/javascript/popper.min.js"></script>
+<script src="/i2p/assets/javascript/bootstrap.min.js"></script>
+<!-- <script src="/i2p/assets/javascript/run_prettify.js"></script> /* -->
+<script type="text/javascript" src="/securedrop-styleguide/assets/javascript/index.js"></script>
+
+      </div>
+    </div>
+  </body>
+</html>

assets/fonts/sourcecode.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'),
+        url('SourceCodePro-Bold.ttf'), url('../fonts/SourceCodePro-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'),
+        url('SourceCodePro-SemiBold.ttf'), url('../fonts/SourceCodePro-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'),
+        url('SourceCodePro-Regular.ttf'), url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}

assets/fonts/sourcesans.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+        url('SourceSansPro-Bold.ttf'), url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
+        url('SourceSansPro-SemiBold.ttf'), url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+        url('SourceSansPro-Regular.ttf'), url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}