merged in bitmask_net files

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>', '&nbsp;<br>&nbsp;')
+        %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
new 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
new 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'}&mdash;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'}.