merged in bitmask_net files

7 files changed, 220 insertions, 41 deletions

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'}.