2 files changed, 31 insertions, 34 deletions

diff --git a/pages/assets/style.scss b/pages/assets/style.scss
index ebc7bf3..2a7eb96 100644
--- a/pages/assets/style.scss
+++ b/pages/assets/style.scss
@@ -83,6 +83,8 @@ h4 {
       width: 50%;
       font-weight: bold;
       font-family: Helvetica,Arial,sans-serif;
+      white-space: nowrap;
+      overflow: hidden;
       &.bottom {
         display: none;
       }
@@ -150,38 +152,34 @@ body.home #masthead .text {
   body.home #masthead .text {
     height: $masthead-medium-height/2;
     &.bottom {
-      font-size: 10px;
-      line-height: 19px !important;
+      font-size: 12px;
+      line-height: 22px !important;
     }
   }
 }
 
 
 // small masthead
+// same as medium, but smaller 'bitmask' and hide bottom text.
 
-// @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: 540px) {
+  #masthead {
+    .masthead-inner {
+      .text {
+        padding-left: 1px;
+        font-size: 36px;
+      }
+    }
+  }
+  // no .bottom, make .top fill whole space
+  body.home #masthead .text {
+    height: $masthead-medium-height;
+    line-height: $masthead-medium-height !important;
+    &.bottom {
+      display: none;
+    }
+  }
+}
 
 #top-menu {
   position: absolute;
@@ -207,7 +205,7 @@ body.home #masthead .text {
 
 @media only screen and (max-width: 767px) {
   #top-menu a {
-    padding: 2px 6px;
+    padding: 2px 10px;
     font-size: 12px;
   }
 }
@@ -363,8 +361,8 @@ body.home {
     span {
       color: #333;
     }
-    margin: 20px 0 15px 0;
-    font-size: 36px;
+    margin: 20px 0 0px 0;
+    font-size: 28px;
   }
   .thumbnail {
     word-break: break-all;
@@ -398,14 +396,14 @@ body.home {
       color: lighten($link-visited-color, 30%);
     }
   }
-  .dark {
-    background-color: lighten($home-dark-background-color, 5%);
+  .darker {
+    background-color: darken($home-dark-background-color, 5%);
   }
   .light, .lighter {
     color: $home-light-color;
     background-color: $home-light-background-color;
   }
-  .light {
+  .lighter {
     background-color: lighten($home-light-background-color, 20%);
   }
   .b {
@@ -418,4 +416,3 @@ body.home {
     margin-left: 22px;
   }
 }
-
diff --git a/pages/assets/variables.scss b/pages/assets/variables.scss
index f1ad236..98112dd 100644
--- a/pages/assets/variables.scss
+++ b/pages/assets/variables.scss
@@ -42,8 +42,8 @@ $navigation-shadow: 1px 1px 4px #111;
 $link-color: darken($masthead-background-color, 15%);
 $link-visited-color: darken($masthead-background-color, 25%);
 
-$home-light-color: #fff;
-$home-light-background-color: #111;
+$home-light-color: #000;
+$home-light-background-color: #eee;
 
 $home-dark-color: #fff;
 $home-dark-background-color: $background-color;