merged in bitmask_net files

3 files changed, 100 insertions, 37 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;
   }
 }