first presentable version

14 files changed, 188 insertions, 96 deletions

diff --git a/pages/assets/content.scss b/pages/assets/content.scss
new file mode 100644
index 0000000..59dd01c
--- /dev/null
+++ b/pages/assets/content.scss
@@ -0,0 +1,55 @@
+//
+// These styles are helpers for better formatting content
+//
+
+//
+// VPN Status Icons
+//
+
+li.status-icon {
+  padding-left: 32px;
+  background-repeat: no-repeat;
+  background-position: 0 -2px;
+  list-style-type: none;
+  margin: 1em;
+  & li {
+    list-style-type: none;
+  }
+  & ul {
+    margin-top: 1em
+  }
+}
+
+li.android-on {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/vpn_connected.png);
+}
+li.android-wait {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/vpn_progress.png);
+}
+li.android-off {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/vpn_disconnected.png);
+}
+
+li.desktop-on {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/on.png);
+}
+li.desktop-wait {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/wait.png);
+}
+li.desktop-off {
+  @extend li.status-icon;
+  background-image: url(/assets/icons/22/off.png);
+}
+
+//
+// GENERAL UTILITY
+//
+
+ul.spaced li {
+  margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/pages/assets/icons/22/off.png b/pages/assets/icons/22/off.png
new file mode 100644
index 0000000..65afeef
--- /dev/null
+++ b/pages/assets/icons/22/off.png
diff --git a/pages/assets/icons/22/on.png b/pages/assets/icons/22/on.png
new file mode 100644
index 0000000..229140a
--- /dev/null
+++ b/pages/assets/icons/22/on.png
diff --git a/pages/assets/icons/22/question.png b/pages/assets/icons/22/question.png
new file mode 100644
index 0000000..bb259fa
--- /dev/null
+++ b/pages/assets/icons/22/question.png
diff --git a/pages/assets/icons/22/vpn_connected.png b/pages/assets/icons/22/vpn_connected.png
new file mode 100644
index 0000000..3428947
--- /dev/null
+++ b/pages/assets/icons/22/vpn_connected.png
diff --git a/pages/assets/icons/22/vpn_disconnected.png b/pages/assets/icons/22/vpn_disconnected.png
new file mode 100644
index 0000000..c524307
--- /dev/null
+++ b/pages/assets/icons/22/vpn_disconnected.png
diff --git a/pages/assets/icons/22/vpn_progress.png b/pages/assets/icons/22/vpn_progress.png
new file mode 100644
index 0000000..2a7ad45
--- /dev/null
+++ b/pages/assets/icons/22/vpn_progress.png
diff --git a/pages/assets/icons/22/wait.png b/pages/assets/icons/22/wait.png
new file mode 100644
index 0000000..c267363
--- /dev/null
+++ b/pages/assets/icons/22/wait.png
diff --git a/pages/assets/providers/calyx.net.png b/pages/assets/providers/calyx.net.png
new file mode 100644
index 0000000..7d682c4
--- /dev/null
+++ b/pages/assets/providers/calyx.net.png
diff --git a/pages/assets/providers/demo.bitmask.net.png b/pages/assets/providers/demo.bitmask.net.png
new file mode 100644
index 0000000..580bbac
--- /dev/null
+++ b/pages/assets/providers/demo.bitmask.net.png
diff --git a/pages/assets/providers/oblivia.svg b/pages/assets/providers/oblivia.svg
new file mode 100644
index 0000000..4190b78
--- /dev/null
+++ b/pages/assets/providers/oblivia.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="256"
+   height="256"
+   sodipodi:docname="0.png"
+   inkscape:export-filename="/home/elijah/dev/leap/bitmask_help/pages/assets/providers/oblivia.vc.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1374"
+     inkscape:window-height="840"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="1.2040816"
+     inkscape:cx="88.774975"
+     inkscape:cy="199.49038"
+     inkscape:window-x="53"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <rect
+     style="fill:#fcfbeb;fill-opacity:1;stroke:none;stroke-width:1.50000000000000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+     id="rect3764"
+     width="256"
+     height="256"
+     x="0"
+     y="1.0338984" />
+  <path
+     style="fill:#2983de;fill-opacity:1"
+     d="m 125.3735,26.556148 c -13.39021,0.009 -26.821483,1.183338 -30.519163,3.525316 -1.334415,0.845175 -3.988643,1.849077 -5.909102,2.249488 -1.920458,0.40041 -3.491742,1.176268 -3.491742,1.712296 0,0.53603 -1.571283,1.613997 -3.491742,2.41736 -7.796469,3.261405 -25.349757,23.675489 -27.262447,31.694277 -0.376378,1.577924 -1.193284,3.486467 -1.779445,4.23038 -0.586151,0.743902 -1.986478,4.611678 -3.122423,8.595057 -1.135933,3.983369 -2.923726,9.119958 -3.290295,11.549608 -4.029513,26.70821 -4.875654,48.10023 0,71.9836 0.491476,2.4075 2.154362,7.56624 3.290295,11.54961 1.152288,4.43987 3.664363,8.38997 5.317122,12.37661 7.455036,15.341 31.314969,38.7415 49.476362,41.0739 16.30012,2.09336 45.97226,0.6112 50.96602,-2.55166 1.33441,-0.84518 3.96233,-1.85805 5.84195,-2.24949 1.87963,-0.39144 3.99633,-1.4011 4.70042,-2.24948 0.7041,-0.84839 1.73566,-1.54443 2.31664,-1.54443 2.91964,0 16.62555,-13.33135 22.09198,-21.48764 4.33586,-6.46939 8.4412,-15.39018 10.03876,-21.89054 0.56341,-2.29245 1.47657,-5.04273 2.04804,-6.11055 5.83485,-10.90243 5.86228,-74.891657 0.0335,-85.78269 -0.58469,-1.092507 -1.51821,-3.851671 -2.08161,-6.144123 -4.75272,-19.33842 -25.19892,-43.755599 -39.61785,-47.306393 -1.62161,-0.399339 -3.9722,-1.351941 -5.20403,-2.148764 -3.6129,-2.337046 -16.9611,-3.500777 -30.35131,-3.491742 z m -1.74587,19.909644 c 4.38002,-0.06957 8.9449,0.420751 13.73195,1.443701 34.51484,7.375521 52.19619,54.037857 42.13593,111.232127 -1.60986,9.15234 -4.8811,19.21739 -6.88276,21.21905 -0.66769,0.66769 -1.20868,1.7674 -1.20868,2.41735 0,0.64995 -2.13982,4.1444 -4.76757,7.7557 -6.76816,9.30145 -18.03938,16.49663 -29.07547,18.60024 -9.70086,1.84909 -7.88846,2.29879 -18.73454,1.14153 -7.06675,-1.70605 -14.17754,-3.41612 -19.070284,-6.54701 -3.654135,0 -16.429495,-15.44005 -21.319771,-25.78517 C 64.370505,148.18757 66.530422,87.970016 82.33107,68.960672 94.743644,54.027431 107.98469,46.714231 123.62763,46.465792 z"
+     id="path2993"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="csssssssssccssssssssssssccsssssssccsss" />
+  <path
+     style="fill:#000000"
+     d="m 113.77558,172.94719 c -2.2321,-1.954 -2.25024,-2.25189 -0.93908,-15.42226 3.31135,-33.26172 3.3518,-32.49989 -2.04876,-38.58062 -13.354563,-15.03653 -4.11591,-36.054456 15.78588,-35.912831 19.30559,0.137381 27.46353,22.551931 13.45978,36.981821 -4.94633,5.09686 -4.8679,2.79208 -1.21405,35.67722 1.35944,12.23501 1.47331,16.18545 0.49477,17.164 -2.35855,2.35854 -22.86517,2.43297 -25.53854,0.0927 z"
+     id="path2987"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/pages/assets/providers/oblivia.vc.png b/pages/assets/providers/oblivia.vc.png
new file mode 100644
index 0000000..e9bd97a
--- /dev/null
+++ b/pages/assets/providers/oblivia.vc.png
diff --git a/pages/assets/providers/riseup.net.png b/pages/assets/providers/riseup.net.png
new file mode 100644
index 0000000..2772a3f
--- /dev/null
+++ b/pages/assets/providers/riseup.net.png
diff --git a/pages/assets/style.scss b/pages/assets/style.scss
index b1618ae..c4a7091 100644
--- a/pages/assets/style.scss
+++ b/pages/assets/style.scss
@@ -1,52 +1,5 @@
-// note: css paths are always relative to the css file
-
-
-$masthead-large-img: '/assets/images/rainbow-masthead-large.png';
-$masthead-large-height: 200px;
-$masthead-medium-img: '/assets/images/rainbow-masthead-medium.png';
-$masthead-medium-height: 130px;
-$masthead-small-img: '/assets/images/rainbow-masthead-small.png';
-$masthead-small-height: 80px;
-$masthead-background-color: #5e9ee3;
-
-$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;
-$content-border-color: #000;
-$content-background-color: #fff;
-$content-shadow-color: #000;
-$content-shadow-size: 1px;
-$content-shadow-blur: 8px;
-$title-background-color: #efefef;
-$title-divider-color: #ccc;
-$footer-height: 50px;
-$footer-gutter: 20px;
-$footer-background-color: #666;
-$footer-color: #ddd;
-$footer-border-width: 1px;
-$footer-border-color: darken($background-color, 5%);
-$footer-shadow: true;
-$footer-shadow-color: #333;
-$footer-shadow-size: 1px;
-$footer-shadow-blur: 6px;
-$navigation-item-active-background-color: #999;
-$navigation-item-active-color: #000;
-$navigation-item-background-color: #ccc;
-$navigation-item-color: #666;
-$navigation-border: 1px solid #333;
-$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;
+@import "variables.scss";
+@import "content.scss";
 
 //
 // TYPOGRAPHY
@@ -87,6 +40,10 @@ h2.hidey {
   margin: 0;
 }
 
+h4 {
+  margin-top: 20px;
+}
+
 //.h3 {
 //  @extend h3;
 //  margin: 0;
@@ -171,14 +128,14 @@ body.home #masthead .text {
 body.home #masthead .text {
   height: $masthead-large-height/2;
   &.bottom {
-    font-size: 20px;
-    line-height: 30px !important;
+    font-size: 18px;
+    line-height: 28px !important;
   }
 }
 
 // medium masthead
 
-@media (max-width: 992px) {
+@media (max-width: 767px) {
   #masthead {
     background: $masthead-background-color url(#{$masthead-medium-img}) 50% 50%;
     .masthead-inner {
@@ -193,8 +150,8 @@ body.home #masthead .text {
   body.home #masthead .text {
     height: $masthead-medium-height/2;
     &.bottom {
-      font-size: 14px;
-      line-height: 24px !important;
+      font-size: 10px;
+      line-height: 19px !important;
     }
   }
 }
@@ -202,29 +159,29 @@ body.home #masthead .text {
 
 // small masthead
 
-@media (max-width: 767px) {
-  #masthead {
-    background: $masthead-background-color url(#{$masthead-small-img}) 50% 50%;
-    .masthead-inner {
-      height: $masthead-small-height;
-      .text {
-        padding-left: 1px;
-        font-size: 30px;
-        line-height: $masthead-small-height;
-      }
-    }
-  }
-  body.home #masthead .text {
-    height: $masthead-small-height/2;
-    &.bottom {
-      font-size: 9px;
-      line-height: 14px !important;
-      span {
-        padding: 2px;
-      }
-    }
-  }
-}
+// @media (max-width: 767px) {
+//   #masthead {
+//     background: $masthead-background-color url(#{$masthead-small-img}) 50% 50%;
+//     .masthead-inner {
+//       height: $masthead-small-height;
+//       .text {
+//         padding-left: 1px;
+//         font-size: 30px;
+//         line-height: $masthead-small-height;
+//       }
+//     }
+//   }
+//   body.home #masthead .text {
+//     height: $masthead-small-height/2;
+//     &.bottom {
+//       font-size: 9px;
+//       line-height: 14px !important;
+//       span {
+//         padding: 2px;
+//       }
+//     }
+//   }
+// }
 
 #top-menu {
   position: absolute;
@@ -239,7 +196,7 @@ body.home #masthead .text {
     color: $menu-text-color;
     font-size: 14px;
     line-height: 20px;
-    background-color: rgba(0,0,0,0.25);
+    background-color: $menu-background-color;
   }
   a.active {
     background-color: $background-color;
@@ -250,7 +207,7 @@ body.home #masthead .text {
 
 @media only screen and (max-width: 767px) {
   #top-menu a {
-    padding: 5px 6px;
+    padding: 2px 6px;
     font-size: 12px;
   }
 }
@@ -396,6 +353,28 @@ html, body {
 //
 
 body.home {
+  .content-box {
+    padding: 20px;
+  }
+  .heading {
+    i {
+      padding-right: 10px;
+    }
+    span {
+      color: #003;
+    }
+    margin: 20px 0 15px 0;
+    font-size: 26px;
+  }
+  .thumbnail {
+    word-break: break-all;
+    .b {
+      font-size: 16px;
+    }
+  }
+  p.big {
+    font-size: 16px;
+  }
   .download a {
     color: white !important;
     font-size: 16px;
@@ -405,15 +384,9 @@ body.home {
       display: inline-block;
     }
   }
-  .pad {
-    margin: 15px 0;
-  }
   .light, .dark, .lighter, .darker {
     padding-top: 15px;
     padding-bottom: 15px;
-    //ul {
-    //  padding-left: 15px;
-    //}
   }
   .dark, .darker {
     color: $home-dark-color;
@@ -426,20 +399,13 @@ body.home {
     }
   }
   .dark {
-    //color: darken($home-dark-color, 20%);
-    background-color: lighten($home-dark-background-color, 10%);
+    background-color: lighten($home-dark-background-color, 5%);
   }
   .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 {
@@ -451,7 +417,5 @@ body.home {
   ul.fa-ul {
     margin-left: 22px;
   }
-  ul.spaced li {
-    margin-bottom: 15px;
-  }
 }
+