diff options
| -rw-r--r-- | amber/config.rb | 1 | ||||
| -rw-r--r-- | amber/layouts/_masthead.html.haml | 4 | ||||
| -rw-r--r-- | amber/layouts/_masthead_large.html.haml | 13 | ||||
| -rw-r--r-- | amber/layouts/default.html.haml | 2 | ||||
| -rw-r--r-- | amber/layouts/home.html.haml | 20 | ||||
| -rw-r--r-- | amber/locales/en.yml | 5 | ||||
| -rw-r--r-- | amber/menu.txt | 1 | ||||
| -rw-r--r-- | pages/assets/images/leap-small.png | bin | 0 -> 10100 bytes | |||
| -rw-r--r-- | pages/assets/rainbow-masthead-large.png | bin | 0 -> 35946 bytes | |||
| -rw-r--r-- | pages/assets/style.scss | 137 | ||||
| -rw-r--r-- | pages/en.haml | 18 | ||||
| -rw-r--r-- | pages/en.text | 4 | ||||
| -rw-r--r-- | pages/home/_intro.text | 1 | ||||
| -rw-r--r-- | pages/home/_text.haml | 101 |
14 files changed, 260 insertions, 47 deletions
diff --git a/amber/config.rb b/amber/config.rb index 0bdbcc0..8201bf7 100644 --- a/amber/config.rb +++ b/amber/config.rb @@ -1,2 +1 @@ @title = 'Bitmask Help' -@path_prefix = '/help'
\ No newline at end of file diff --git a/amber/layouts/_masthead.html.haml b/amber/layouts/_masthead.html.haml index 71892f5..aad0bbd 100644 --- a/amber/layouts/_masthead.html.haml +++ b/amber/layouts/_masthead.html.haml @@ -3,9 +3,9 @@ .col-sm-12 .masthead-inner .text.top - Bitmask + =t :banner_top .text.bottom - Help + =t :banner_bottom %ul.list-unstyled#top-menu - top_navigation_items(include_home:true) do |item| %li{:class => item[:class]} diff --git a/amber/layouts/_masthead_large.html.haml b/amber/layouts/_masthead_large.html.haml new file mode 100644 index 0000000..e9fd9ec --- /dev/null +++ b/amber/layouts/_masthead_large.html.haml @@ -0,0 +1,13 @@ +.container + .row + .col-sm-12 + .masthead-inner + .text.top + =t :banner_top + .text.bottom + %span + = t(:banner_motto).gsub('<br>', ' <br> ') + %ul.list-unstyled#top-menu + - top_navigation_items(include_home:true) do |item| + %li{:class => item[:class]} + %a{:href => item[:href], :class => item[:class]}= item[:label]
\ No newline at end of file diff --git a/amber/layouts/default.html.haml b/amber/layouts/default.html.haml index 0ee9b0f..6521333 100644 --- a/amber/layouts/default.html.haml +++ b/amber/layouts/default.html.haml @@ -2,7 +2,7 @@ %html{:lang => @locals[:locale].to_s} %head %title - = @page.nav_title + ' - ' + @site.title + = @page.nav_title + ' - ' + t(:site_title) %meta(name="viewport" content="width=device-width, initial-scale=1.0") %meta(charset="UTF-8") %link(rel="stylesheet" href="/assets/bootstrap.min.css") diff --git a/amber/layouts/home.html.haml b/amber/layouts/home.html.haml new file mode 100644 index 0000000..bd84141 --- /dev/null +++ b/amber/layouts/home.html.haml @@ -0,0 +1,20 @@ +!!! +%html{:lang => @locals[:locale].to_s} + %head + %title + = t(:site_title) + %meta(name="viewport" content="width=device-width, initial-scale=1.0") + %meta(charset="UTF-8") + %link(rel="stylesheet" href="/assets/bootstrap.min.css") + %link(rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css") + %link(rel="stylesheet" href="/assets/style.css") + %link(rel="icon" href="/assets/images/favicon.png" type="image/x-icon") + = html_head_base + %body.home + #wrap + #masthead.large + = render 'layouts/masthead_large' + #main + = yield :content + #footer + = render 'layouts/footer' diff --git a/amber/locales/en.yml b/amber/locales/en.yml index 659a337..962d948 100644 --- a/amber/locales/en.yml +++ b/amber/locales/en.yml @@ -1,5 +1,8 @@ en: - site_title: 'Bitmask Help' + site_title: "Bitmask Help" + banner_top: "Bitmask" + banner_bottom: "Help" + banner_motto: "Encrypted communication for mere mortals<br>(superheroes welcome, too)." contribute_to_help: 'Contribute to these help pages' download_bitmask: 'Download Bitmask' downloads: Downloads diff --git a/amber/menu.txt b/amber/menu.txt index b3b56b6..c36b7cd 100644 --- a/amber/menu.txt +++ b/amber/menu.txt @@ -1,7 +1,6 @@ install android linux - mac eip android desktop diff --git a/pages/assets/images/leap-small.png b/pages/assets/images/leap-small.png Binary files differnew file mode 100644 index 0000000..bc9d4e7 --- /dev/null +++ b/pages/assets/images/leap-small.png diff --git a/pages/assets/rainbow-masthead-large.png b/pages/assets/rainbow-masthead-large.png Binary files differnew file mode 100644 index 0000000..2724cec --- /dev/null +++ b/pages/assets/rainbow-masthead-large.png diff --git a/pages/assets/style.scss b/pages/assets/style.scss index 0ba7bb4..e03b21b 100644 --- a/pages/assets/style.scss +++ b/pages/assets/style.scss @@ -2,9 +2,12 @@ $masthead-img: '/assets/rainbow-masthead-medium.png'; $masthead-background-color: #5e9ee3; $masthead-height: 128px; +$masthead-large-img: '/assets/rainbow-masthead-large.png'; +$masthead-large-height: 190px; $gutter: 15px; $background-color: #333; $menu-text-color: #fff; +$menu-padding: 8px 18px; //$menu-shadow-size: 1px; //$menu-shadow-blur: 2px; //$menu-shadow-color: #000; @@ -34,6 +37,12 @@ $navigation-shadow: 1px 1px 4px #111; $link-color: darken($masthead-background-color, 15%); $link-visited-color: darken($masthead-background-color, 25%); +$home-light-color: #333; +$home-light-background-color: #eee; + +$home-dark-color: #fff; +$home-dark-background-color: $background-color; + // // TYPOGRAPHY // @@ -55,6 +64,22 @@ h2.hidey { z-index: -1000; } +.h1 { + @extend h1; + margin: 0; +} + +.h2 { + @extend h2; + margin: 0; +} + +//.h3 { +// @extend h3; +// margin: 0; +//} + + // // DESIGN ELEMENTS // @@ -86,14 +111,13 @@ h2.hidey { .masthead-inner { height: $masthead-height; .text { - //outline: 1px solid red; color: black; margin-left: 50%; width: 50%; font-size: 40px; font-weight: bold; font-family: Helvetica,Arial,sans-serif; - height: 64px; + height: $masthead-height / 2; &.top { line-height: 100px; } @@ -104,6 +128,31 @@ h2.hidey { } } +#masthead.large { + background: $masthead-background-color url(#{$masthead-large-img}) 50% 50%; + height: $masthead-large-height; + .masthead-inner { + height: $masthead-large-height; + .text { + height: $masthead-large-height / 2; + padding-left: 4px; + &.top { + font-size: 70px; + line-height: 130px; + } + &.bottom { + font-size: 18px; + line-height: 28px; + font-weight: normal; + span { + background: rgba(255,255,255,0.5); + padding: 4px; + } + } + } + } +} + #top-menu { position: absolute; bottom: 0px; @@ -113,11 +162,11 @@ h2.hidey { } a { display: block; - padding: 5px 14px; + padding: $menu-padding; color: $menu-text-color; font-size: 14px; line-height: 20px; - background-color: rgba(0,0,0,0.15); + background-color: rgba(0,0,0,0.25); } a.active { background-color: $background-color; @@ -270,46 +319,60 @@ html, body { } // -// FRONT PAGE +// HOME PAGE // -.logo { - min-height: 87px; - padding-left: 280px; - padding-top: 10px; - background: url(images/riseup-rainbow.png) no-repeat; -} -@media only screen and (max-width: 590px) { - .logo { - padding-left: 94px; - padding-top: 65px; +body.home { + .download a { + color: white !important; + font-size: 16px; + i, span { + line-height: 35px; + vertical-align: middle; + display: inline-block; + } } -} - -.feed { - border: 1px dotted #ccc; - - .item { - border-top: 1px dotted #ccc; - padding: $gutter; - .label { - font-size: 1em; + .pad { + margin: 8px 0; + } + .light, .dark, .lighter, .darker { + padding-top: 15px; + padding-bottom: 15px; + ul { + padding-left: 15px; } - .date { - font-style: italic; - line-height: 2em; + } + .dark, .darker { + color: $home-dark-color; + background-color: $home-dark-background-color; + a { + color: lighten($link-color, 30%); } - .text { - + a:visited { + color: lighten($link-visited-color, 30%); } } - - h2 { + .dark { + //color: darken($home-dark-color, 20%); + background-color: lighten($home-dark-background-color, 10%); + } + .light, .lighter { + color: $home-light-color; + background-color: $home-light-background-color; + .h2 span { + //background: red; + //color: white; + //padding: 4px; + } + } + .light { + //color: darken($home-light-color, 20%); + background-color: lighten($home-light-background-color, 20%); + } + .b { font-weight: bold; - font-size: 1.1em; - line-height: 1.5em; - padding: $gutter; - margin: 0; - background: #f9f9f9; + } + .introtext { + font-size: 1.5em; } } diff --git a/pages/en.haml b/pages/en.haml new file mode 100644 index 0000000..43f22e5 --- /dev/null +++ b/pages/en.haml @@ -0,0 +1,18 @@ +- @toc = false +- @title = 'Home' +- @this.layout = 'home' + +.darker + .container + .row + .col-sm-9 + .introtext + = render 'home/intro' + .col-sm-3 + .download.text-left + %a.btn.btn-large.btn-primary{:href => 'install'} + %i.fa.fa-cloud-download.fa-2x + %span + = t :download_bitmask + += render 'home/text' diff --git a/pages/en.text b/pages/en.text deleted file mode 100644 index ffabf41..0000000 --- a/pages/en.text +++ /dev/null @@ -1,4 +0,0 @@ -@title = 'Home' - -Bitmask help pages to go here. - diff --git a/pages/home/_intro.text b/pages/home/_intro.text new file mode 100644 index 0000000..b1f6379 --- /dev/null +++ b/pages/home/_intro.text @@ -0,0 +1 @@ +*Bitmask* is an open source application to provide easy and secure encrypted communication. You can choose among "several different service providers":#providers or "start your own":https://leap.se/en/doc/platform. Currently, Bitmask supports encrypted internet and encrypted email (with more services in the works).
\ No newline at end of file diff --git a/pages/home/_text.haml b/pages/home/_text.haml new file mode 100644 index 0000000..ce27db7 --- /dev/null +++ b/pages/home/_text.haml @@ -0,0 +1,101 @@ +.lighter + .container + .row + .col-sm-12 + %h1#features Features + + %p The <b>Bitmask</b> application is designed to have a <b>friendly</b> interface with <b>automatic</b> configuration. You simply start the application, register with the compatible service provider of your choice, and away you go. + +.lighter + .container + .row + .col-sm-2.text-right + .h2 + %i.fa.fa-shield.fa-3x + .col-sm-10.text-left + .h2 + %span< Encrypted Internet Proxy + %p.pad With Encrypted Internet Proxy (EIP) all your traffic is encrypted and routed through your provider before it is decrypted and sent on to the open internet. + %ul + %li <b>Block Monitoring</b>: EIP is very effective at bypassing most censorship and network surveillance by your ISP or country. + %li <b>Anonymous IP</b>: EIP also hides your IP address, keeping your physical location safe from nefarious websites. + %li <b>Extra Security</b>: We take extra security measures to prevent problems common to VPN, such as DNS leakage and IPv6 leakage. + +.lighter + .container + .row + .col-sm-2.text-right + .h2 + %i.fa.fa-envelope.fa-2x + .col-sm-10.text-left + .h2 + %span Encrypted Email + %p.pad Bitmask Encrypted Email is easy to use while still being backward compatible with the existing OpenPGP protocol for secure email. + %ul + %li <b>Secure Email Storage</b>: All incoming email is automatically encrypted so only you can read it (including meta-data). + %li <b>Automatic Key Management</b>: If possible, outgoing email is automatically encrypted so that only the recipient can read it (if a valid OpenPGP public key can be automatically discovered and validated for the recipient). + +.dark + .container + .row + .col-sm-12 + %h1#security Security + %ul + %li + <b>Client encrypted storage</b>: + All data storage is encrypted, including local data and cloud backups. This encryption always [[takes place on your device => https://leap.se/en/soledad]], so the service provider cannot read your stored data. + %li *Availability*: Your data is always available and [[synchronized to the devices => https://leap.se/en/soledad]] you choose. + %li *Passwords, Improved*: Although you specify a username and password to login, your [[password is never communicated to the provider => https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol]]. + %li *Up to date*: The Bitmask application is always kept up to date with the latest security patches (coming soon). + %li *Don't trust the provider*: If you download the Bitmask application from [[dl.bitmask.net => https://dl.bitmask.net]], your service provider cannot add a backdoor to compromise your security. + %p As with any security system, Bitmask has [[known limitations => https://leap.se/en/limitations]]. For technical details, see our [[design documentation' => 'https://leap.se/en/design]]. + +.light + .container + .row + .col-sm-12 + %h1#providers Supported providers + + %p The following service providers are compatible with the Bitmask application: + + %ul + %li= link 'demo.bitmask.net' => 'https://demo.bitmask.net' + %li + = link 'calyx.net' => 'https://calyx.net' + %li + = link 'oblivia.vc' => 'https://oblivia.vc' + (coming soon) + %li + = link 'riseup.net' => 'https://riseup.net' + + + %p Start your own compatible service provider with the free software #{link 'LEAP platform' => 'https://leap.se/en/platform'}. + +.darker + .container + .row + .col-sm-6 + %h1#code Fork our code + + %p <b>Hey, you! We could use a hand here</b>. You want communication free of surveillance, based on open protocols, and that gives users control over their own data? Well, grab a keyboard and #{link 'pitch in' => 'https://leap.se/en/get-involved'}—the code is not going to write itself. + + %p In particular, if you have finely honed skill in Python, Android Java, Ruby, C, CouchDB, Windows, Mac, Puppet, Qt, or you really love crypto, we could sure use your help. + + %ol + %li #{link 'Fork our code' => 'https://leap.se/en/source'}. + %li Create a new branch from develop called feature/x or bugfix/x. + %li Hack away. + %li Issue a pull request on github from your feature or bugfix branch to the upstream develop branch. + %li Discuss and wait for request to be merged. + %li Repeat. + + %p Currently, we release a new version of the Bitmask application every two weeks, and other components as necessary. + + .col-sm-6 + %h1#about-us About us + + %img{src:'/assets/images/leap-small.png', align:'right'} + + %p The <b>Bitmask</b> application is lovingly hand-crafted by a team of paid and volunteer programmers from seven different countries. Development is principally sponsored by the #{link 'LEAP Encryption Access Project' => 'https://leap.se'}, an non-profit organization dedicated to defending democracy by <b>protecting the right to whisper</b>. + + %p The service provider <b>bitmask.net</b> is operated by LEAP in order to demonstrate usage of the <b>Bitmask</b> application. However, we actively encourage other organizations to start their own compatible service providers by using our free software #{link 'platform for server automation' => 'https://leap.se/en/platform'}. |
