Commit b09bcba5 authored by Anxhelo Lushka's avatar Anxhelo Lushka

First push

parents
---
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>
<div class="no-js-banner global">Your browser doesn't support JavaScript or it has been turned off. Some features might not work as expected!</div>
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.4"
# 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.1', :install_if => Gem.win_platform?
GEM
remote: https://rubygems.org/
specs:
activesupport (4.2.10)
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.13)
ruby-enum (~> 0.5)
concurrent-ruby (1.1.4)
dnsruby (1.61.2)
addressable (~> 2.5)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
ethon (0.12.0)
ffi (>= 1.3.0)
eventmachine (1.2.7-x64-mingw32)
execjs (2.7.0)
faraday (0.15.4)
multipart-post (>= 1.2, < 3)
ffi (1.10.0-x64-mingw32)
forwardable-extended (2.6.0)
gemoji (3.0.0)
github-pages (196)
activesupport (= 4.2.10)
github-pages-health-check (= 1.16.0)
jekyll (= 3.7.4)
jekyll-avatar (= 0.6.0)
jekyll-coffeescript (= 1.1.1)
jekyll-commonmark-ghpages (= 0.1.5)
jekyll-default-layout (= 0.1.4)
jekyll-feed (= 0.11.0)
jekyll-gist (= 1.5.0)
jekyll-github-metadata (= 2.12.1)
jekyll-mentions (= 1.4.1)
jekyll-optional-front-matter (= 0.3.0)
jekyll-paginate (= 1.1.0)
jekyll-readme-index (= 0.2.0)
jekyll-redirect-from (= 0.14.0)
jekyll-relative-links (= 0.6.0)
jekyll-remote-theme (= 0.3.1)
jekyll-sass-converter (= 1.5.2)
jekyll-seo-tag (= 2.5.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.10.2)
kramdown (= 1.17.0)
liquid (= 4.0.0)
listen (= 3.1.5)
mercenary (~> 0.3)
minima (= 2.5.0)
nokogiri (>= 1.8.5, < 2.0)
rouge (= 2.2.1)
terminal-table (~> 1.4)
github-pages-health-check (1.16.0)
addressable (~> 2.3)
dnsruby (~> 1.60)
octokit (~> 4.0)
public_suffix (~> 3.0)
typhoeus (~> 1.3)
html-pipeline (2.10.0)
activesupport (>= 2)
nokogiri (>= 1.4)
http_parser.rb (0.6.0)
i18n (0.9.5)
concurrent-ruby (~> 1.0)
jekyll (3.7.4)
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.6.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.11.0)
jekyll (~> 3.3)
jekyll-gist (1.5.0)
octokit (~> 4.2)
jekyll-github-metadata (2.12.1)
jekyll (~> 3.4)
octokit (~> 4.0, != 4.4.0)
jekyll-mentions (1.4.1)
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.14.0)
jekyll (~> 3.3)
jekyll-relative-links (0.6.0)
jekyll (~> 3.3)
jekyll-remote-theme (0.3.1)
jekyll (~> 3.5)
rubyzip (>= 1.2.1, < 3.0)
jekyll-sass-converter (1.5.2)
sass (~> 3.4)
jekyll-seo-tag (2.5.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.1.2)
listen (~> 3.0)
jemoji (0.10.2)
gemoji (~> 3.0)
html-pipeline (~> 2.2)
jekyll (~> 3.0)
kramdown (1.17.0)
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.4.0)
minima (2.5.0)
jekyll (~> 3.5)
jekyll-feed (~> 0.9)
jekyll-seo-tag (~> 2.1)
minitest (5.11.3)
multipart-post (2.0.0)
nokogiri (1.10.1-x64-mingw32)
mini_portile2 (~> 2.4.0)
octokit (4.13.0)
sawyer (~> 0.8.0, >= 0.5.3)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (3.0.3)
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (~> 1.0)
rouge (2.2.1)
ruby-enum (0.7.2)
i18n
ruby_dep (1.5.0)
rubyzip (1.2.2)
safe_yaml (1.0.5)
sass (3.7.3)
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.1)
ethon (>= 0.9.0)
tzinfo (1.2.5)
thread_safe (~> 0.1)
tzinfo-data (1.2018.9)
tzinfo (>= 1.0.0)
unicode-display_width (1.4.1)
wdm (0.1.1)
PLATFORMS
x64-mingw32
DEPENDENCIES
github-pages
jekyll (~> 3.7.4)
jekyll-feed (~> 0.6)
minima (~> 2.0)
tzinfo-data
wdm (~> 0.1.1)
BUNDLED WITH
2.0.1
MIT License
Copyright (c) 2019 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.
# About
Briar is a messaging app designed for activists, journalists, and anyone else who needs a safe, easy and robust way to communicate. Unlike traditional messaging apps, Briar doesn't rely on a central server - messages are synchronized directly between the users' devices. If the internet's down, Briar can sync via Bluetooth or Wi-Fi, keeping the information flowing in a crisis. If the internet's up, Briar can sync via the Tor network, protecting users and their relationships from surveillance.
This guide aims to provide standards, principles and components to design consistent views related to the Briar Project. These pages are a living document and we welcome contributions, feedback and suggestions.
# Getting started
The Briar style guide 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 Briar style guide, 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 style guide. 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.
# Building
Before you can modify the contents, you need to have Ruby and Jekyll installed.
You can do that by running the following command.
`gem install bundler jekyll`
After you install Jekyll, you need to clone the repo on your system.
You can do that by running the command.
`git clone $REPO`
After you have cloned the repo on your system, start by installing the bundle using the following command.
`bundle install`
Afterwards, execute the following command to build the project and to be able to browse it locally on your browser.
`bundle exec jekyll serve`
That's it! Now you can begin to modify the files and they will be automatically built and displayed on your localhost upon a page refresh.
When you're done with the changes, press Ctrl+C to stop the localhost process.
# 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: Briar
logo: "/assets/images/logo-text-white.png"
description: >- # this means to ignore newlines until "baseurl:"
baseurl: "/briar-styleguide" # 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/
<div class="page-header mb-4">
<h2 id="alerts" class="b-border">Alerts</h2>
<p class="text-muted">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<p class="text-muted toggle">Toggle Snippets
<label class="switch">
<input class="snippets" type="checkbox">
<span class="slider round"></span>
</label></p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
<p class="mb-0">Heads up! This alert needs your attention, but it's not super important.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-primary {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #fff !important;
background-color: #045fb4 !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0">Well done! This alert will show you some extra information.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-info {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-success" role="alert">
<p class="mb-0">Well done! You successfully read this important alert link message.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-success {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-warning" role="alert">
<p class="mb-0">Warning! Better check yourself, you're not looking too good.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-warning {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #786600 !important;
background-color: #fff7c9 !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-danger" role="alert">
<p class="mb-0">This is a danger alert — check it out!</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-danger {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
color: #801f00 !important;
background-color: #ffd8cc !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-success" role="alert">
<button class="btn-close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p class="mb-0">Well done! You successfully read this important alert link message with a close button.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-success {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;}
.btn-close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
opacity: .2;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
color: currentColor;
outline: none;}</pre>
<div class="col-12 alert alert-success global" role="alert">
<p class="mb-0">Well done! You successfully read this important global message.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-success .global {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #e5f8d1 !important;
color: #3f6910 !important;
border-color: transparent !important;
text-align: center;}</pre>
<div class="col-12 alert alert-secondary" role="alert">
<p class="mb-0"><i class="fas fa-exclamation-circle"></i> Well done! You successfully read this message with an icon.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-5 prettyprint rb-code code-snippet" style="border: none;">
.alert-info .icon {
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}</pre>
<div class="col-12 alert alert-secondary" role="alert">
<h4 class="alert-header">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
</div>
<pre class="bg-grey p-2 mt-0 mb-0 prettyprint rb-code code-snippet" style="border: none;">
.alert-secondary .alert-link {
color: #202326;
font-weight: 700;
border-radius: 3px !important;
padding: 15px !important;
margin-bottom: 25px;
position: relative;
background-color: #f0f0f0 !important;
border-color: transparent !important;}</pre>
</div>
<div class="page-header mb-4 mt-5">
<h2 id="badges" class="b-border">Badges</h2>
<p class="text-muted mt-3">Toggle Snippets
<label class="switch">
<input class="snippets" type="checkbox">
<span class="slider round"></span>
</label>
</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>
<pre class="bg-grey p-2 mt-3 mr-5 prettyprint rb-code code-snippet" style="border: none;">
.badge-primary {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
color: #fff;
background-color: #045fb4 !important;}</pre></div>
</div>
<div class="col-12">