new get page, mailchimp integration, staging env, per-os install pages, better flexbox

autoload.php

@@ -18,10 +18,6 @@ class Autoloader
       require_once $path;
       return true;
     }
-    else
-    {
-      throw new InvalidArgumentException('Class "' . $class . '" not found by autoloader');
-    }
 
     return false;
   }

controller/Actions.class.php

@@ -7,101 +7,17 @@
  */
 class Actions
 {
-  /**
-   * @var Session
-   */
-  protected $session;
-
-  public function __construct()
-  {
-    $this->session = new Session();
-  }
-  
-  public function executeHome()
-  {
-    return ['page/home', []];
-  }
-
-  public function executeGet()
-  {
-    if ($this->validateDownloadAccess())
-    {
-      return ['page/get-allowed', []];
-    }
-    $inviteError = $this->session->get('invite_error');
-    $this->session->unsetKey('invite_error');
-    return ['page/get-denied', ['inviteError' => $inviteError]];
-  }
-
-  public function executePostCommit()
-  {
-    $payload = json_decode($_REQUEST['payload'], true);
-    $rawPost = file_get_contents('php://input');
-    $secret = trim(file_get_contents($_SERVER['ROOT_DIR']  . '/data/secret/github-secret'));
-
-    $this->returnErrorIf(!isset($_SERVER['HTTP_X_HUB_SIGNATURE']), "HTTP header 'X-Hub-Signature' is missing.");
-
-    list($algo, $hash) = explode('=', $_SERVER['HTTP_X_HUB_SIGNATURE'], 2) + array('', '');
-    $this->returnErrorIf(!in_array($algo, hash_algos(), TRUE), 'Invalid hash algorithm "' . $algo . '"');
-    $this->returnErrorIf($hash !== hash_hmac($algo, $rawPost, $secret), 'Hash does not match. "' . $secret . '"' . ' algo: ' . $algo . '$');
-
-    if ($payload['ref'] === 'refs/heads/master')
-    {
-      $ret = shell_exec('sudo -u lbry ' . $_SERVER['ROOT_DIR'] . '/update.sh  2>&1');
-      echo "Successful post commit (aka the script executed, so maybe it is successful):\n";
-      echo $ret;
-    }
-
-    return [null, []];
-  }
-
-  protected function validateDownloadAccess()
-  {
-    $seshionKey = 'has-download-access';
-    if ($this->session->get($seshionKey))
-    {
-      return true;
-    }
-
-    if ($_SERVER['REQUEST_METHOD'] === 'POST')
-    {
-      $this->accessCodes = include $_SERVER['ROOT_DIR'] . '/data/secret/access_list.php';
-      $today = date('Y-m-d H:i:s');
-      foreach($this->accessCodes as $code => $date)
-      {
-        if ($_POST['invite'] == $code && $today <= $date)
-        {
-          $this->session->set($seshionKey, true);
-          Controller::redirect('/get', 302);
-        }
-      }
-
-      if ($_POST['invite'])
-      {
-        $this->session->set('invite_error', 'Please provide a valid invite code.');
-      }
-      else
-      {
-        $this->session->set('invite_error', 'Please provide an invite code.');
-      }
-
-      Controller::redirect('/get', 401);
-    }
-
-    return false;
-  }
-
   //this is dumb
-  protected function returnError($error)
+  protected static function returnError($error)
   {
     throw new ErrorException($error);
   }
 
-  protected function returnErrorIf($condition, $error)
+  protected static function returnErrorIf($condition, $error)
   {
     if ($condition)
     {
-      $this->returnError($error);
+      Actions::returnError($error);
     }
   }
 }

controller/Controller.class.php

@@ -35,19 +35,19 @@ class Controller
   
   public static function execute($uri)
   {
-    $action = new Actions();
     switch($uri)
     {
       case '/':
-        return $action->executeHome();
-      case '/get':
-        return $action->executeGet();
+        return ContentActions::executeHome();
       case '/postcommit':
-        return $action->executePostCommit();
+        return OpsActions::executePostCommit();
+      case '/list-subscribe':
+        return MailActions::executeListSubscribe();
       default:
-        if (View::exists('page/' . ltrim($uri, '/')))
+        $noSlashUri = ltrim($uri, '/');
+        if (View::exists('page/' . $noSlashUri))
         {
-          return ['page/' . $uri, []];
+          return ['page/' . $noSlashUri, []];
         }
         else
         {

controller/Session.class.php

@@ -7,22 +7,22 @@
  */
 class Session
 {
-  public function __construct()
+  public static function init()
   {
     session_start();
   }
 
-  public function get($key, $default = null)
+  public static function get($key, $default = null)
   {
     return isset($_SESSION[$key]) ? $_SESSION[$key] : $default;
   }
 
-  public function set($key, $value)
+  public static function set($key, $value)
   {
     $_SESSION[$key] = $value;
   }
 
-  public function unsetKey($key)
+  public static function unsetKey($key)
   {
     unset($_SESSION[$key]);
   }

controller/action/ContentActions.class.php

@@ -0,0 +1,50 @@
+<?php
+
+/**
+ * Description of ContentActions
+ *
+ * @author jeremy
+ */
+class ContentActions extends Actions
+{
+  public static function executeHome()
+  {
+    return ['page/home', []];
+  }
+//
+//  protected static function validateDownloadAccess()
+//  {
+//    $seshionKey = 'has-download-access';
+//    if (Session::get($seshionKey))
+//    {
+//      return true;
+//    }
+//
+//    if ($_SERVER['REQUEST_METHOD'] === 'POST')
+//    {
+//      $accessCodes = include $_SERVER['ROOT_DIR'] . '/data/secret/access_list.php';
+//      $today = date('Y-m-d H:i:s');
+//      foreach($accessCodes as $code => $date)
+//      {
+//        if ($_POST['invite'] == $code && $today <= $date)
+//        {
+//          Session::set($seshionKey, true);
+//          Controller::redirect('/get', 302);
+//        }
+//      }
+//
+//      if ($_POST['invite'])
+//      {
+//        Session::set('invite_error', 'Please provide a valid invite code.');
+//      }
+//      else
+//      {
+//        Session::set('invite_error', 'Please provide an invite code.');
+//      }
+//
+//      Controller::redirect('/get', 401);
+//    }
+//
+//    return false;
+//  }
+}

controller/action/MailActions.class.php

@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * Description of MailActions
+ *
+ * @author jeremy
+ */
+class MailActions extends Actions
+{
+  public static function executeListSubscribe()
+  {
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST')
+    {
+      Controller::redirect('/get');
+    }
+    
+    $email = $_POST['email'];
+    if (!$email|| !filter_var($email, FILTER_VALIDATE_EMAIL))
+    {
+      Session::set('list_error', $email ? __('Please provide a valid email address.') : __('Please provide an email address.'));
+    }
+    elseif (!$_POST['listId'])
+    {
+      Session::set('list_error', __('List not provided.'));
+    }
+    else
+    {
+      $mcApi = new Mailchimp();
+      if ($mcApi->listSubscribe($_POST['listId'], $email, [], 'html', false))
+      {
+        Session::set('list_success', __('Great success! Welcome to LBRY.'));
+      }
+      else
+      {
+        Session::set('list_error', __('Something went wrong adding you to the list.'));
+      }
+    }
+
+    Controller::redirect($_POST['return_url'] ?: '/get');
+  }
+  
+  public static function prepareJoinList(array $vars)
+  {
+    $vars += ['btnClass' => 'btn-primary', 'returnUrl' => $_SERVER['REQUEST_URI']];
+    $vars['error'] = Session::get('list_error');
+    $vars['success'] = Session::get('list_success');
+    Session::unsetKey('list_error');
+    Session::unsetKey('list_success');
+    return $vars;
+  }
+
+}

controller/action/NavActions.class.php

@@ -0,0 +1,27 @@
+<?php
+
+/**
+ * Description of NavActions
+ *
+ * @author jeremy
+ */
+class NavActions extends Actions
+{
+  protected static $navUri;
+
+  public static function setNavUri($uri)
+  {
+    static::$navUri = $uri;
+  }
+
+  public static function getNavUri()
+  {
+    return static::$navUri ?: $_SERVER['REQUEST_URI'];
+  }
+
+  public static function prepareGlobalItems(array $vars)
+  {
+    $vars += ['selectedItem' => static::getNavUri()];
+    return $vars;
+  }
+}

controller/action/OpsActions.class.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * Description of OpsActions
+ *
+ * @author jeremy
+ */
+class OpsActions
+{
+  public static function executePostCommit()
+  {
+    $payload = json_decode($_REQUEST['payload'], true);
+    $rawPost = file_get_contents('php://input');
+    $secret = trim(file_get_contents($_SERVER['ROOT_DIR']  . '/data/secret/github-secret'));
+
+    Actions::returnErrorIf(!isset($_SERVER['HTTP_X_HUB_SIGNATURE']), "HTTP header 'X-Hub-Signature' is missing.");
+
+    list($algo, $hash) = explode('=', $_SERVER['HTTP_X_HUB_SIGNATURE'], 2) + array('', '');
+    Actions::returnErrorIf(!in_array($algo, hash_algos(), TRUE), 'Invalid hash algorithm "' . $algo . '"');
+    Actions::returnErrorIf($hash !== hash_hmac($algo, $rawPost, $secret), 'Hash does not match. "' . $secret . '"' . ' algo: ' . $algo . '$');
+
+    if ($payload['ref'] === 'refs/heads/master')
+    {
+      $ret = shell_exec('sudo -u lbry ' . $_SERVER['ROOT_DIR'] . '/update.sh  2>&1');
+      echo "Successful post commit (aka the script executed, so maybe it is successful):\n";
+      echo $ret;
+    }
+
+    return [null, []];
+  }
+}

css

@@ -0,0 +1,23 @@
+/*
+Errno::ENOENT: No such file or directory - scss
+
+Backtrace:
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:482:in `read'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:482:in `update_stylesheet'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:209:in `each'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin/compiler.rb:293:in `watch'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/plugin.rb:108:in `method_missing'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/exec/sass_scss.rb:381:in `watch_or_update'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/exec/sass_scss.rb:51:in `process_result'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/exec/base.rb:52:in `parse'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/lib/sass/exec/base.rb:19:in `parse!'
+/var/lib/gems/1.9.1/gems/sass-3.4.11/bin/sass:13:in `<top (required)>'
+/usr/local/bin/sass:23:in `load'
+/usr/local/bin/sass:23:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Errno::ENOENT: No such file or directory - scss"; }

lib/i18n.class.php

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * i18n dummy we'll be happy to have later
+ */
+function __($msg)
+{
+  return $msg;
+}
+
+/**
+ * Description of i18n
+ *
+ * @author jeremy
+ */
+class i18n
+{
+  public static function register() /*needed to trigger class include, presumably setup would happen here*/
+  {
+    
+  }
+}

lib/mailchimp/Mailchimp.class.php

@@ -0,0 +1,76 @@
+<?php
+
+class Mailchimp extends MCAPI
+{
+  const LIST_GENERAL_ID = '7b74c90030';
+  
+  protected static $instance = null;
+
+  public function __construct($key = null)
+  {
+    if ($key === null)
+    {
+      $key = trim(file_get_contents($_SERVER['ROOT_DIR'] . '/data/secret/mailchimp-api-key'));
+    }
+    return parent::__construct($key);
+  }
+//
+//  public function listBatchSubscribeUsers($listId, $persons, Site $site)
+//  {
+//    $batch = [];
+//    foreach($persons as $person)
+//    {
+//      $row = $site->isAdmin() ? $this->getMailchimpRowDataAdminSite($person) : $this->getMailchimpRowData($person, $site);
+//      if ($row)
+//      {
+//        $batch[] = $row;
+//      }
+//    }
+//    return $this->listBatchSubscribe($listId, $batch, false, true, false);
+//  }
+//
+//  protected function getMailchimpRowData($person, $site)
+//  {
+//    return [
+//        'EMAIL' => $person['email_address'],
+//        'FNAME' => $person['first_name'],
+//        'LNAME' => $person['last_name'],
+//        'GENDER' => $person['gender'],
+//        'USER_ID' => $person['id'],
+//        'USER_CULTURE' => $person['culture']
+//    ];
+//  }
+//
+//  protected function getMailchimpRowDataAdminSite($person)
+//  {
+//    if (!preg_match('/@(' . implode('|', SiteDomainTable::getAllServiceDomainNames()) . ')$/', $person['email_address'])) //don't add @network addresses
+//    {
+//      $site = SiteTable::guessMostUsedSiteForPersonId($person['id']);
+//      if (!$site)
+//      {
+//        return null;
+//      }
+//      $organization = null;
+//      if ($site->isMultiOrganization())
+//      {
+//        $organization = OrganizationTable::guessForNetworkSiteIdAndPersonId($site, $person['id']);
+//      }
+//      if (!$organization)
+//      {
+//        $organization = $site->Organization;
+//      }
+//      return $this->getMailchimpRowData($person, $site) + [
+//        'ORG_FULL' => $organization->full_name,
+//        'ABBR' => $organization->abbr,
+//        'SITE_NAME' => $site->name,
+//        'IS_ADMIN' => isset($site['is_admin']) && $site['is_admin'] ? 'Yes' : 'No',
+//        'URL' => $site->getPrimaryDomain()->getName(),
+//        'STATUS' => $site->is_public ? 'Public' : 'Private',
+//        'SERVICE' => $site->Service->name,
+//        'CULTURE' => $organization->culture,
+//        'USES_PAYMENTS' => PaymentServiceTable::count(['organization_id' => $organization['id'], 'is_enabled' => 1, 'type' => PaymentService::TYPE_TOPSCORE]) ? 'Yes' : 'No'
+//      ];
+//    }
+//    return false;
+//  }
+}

view/Response.class.php

@@ -0,0 +1,72 @@
+<?php
+
+/**
+ * Description of Response
+ *
+ * @author jeremy
+ */
+class Response
+{
+  protected static $metaDescription = '',
+                   $metaTitle = '',
+//                   $bodyCssClasses = [],
+                   $metaImg = '';
+
+  public static function setMetaDescription($description)
+  {
+    static::$metaDescription = $description;
+  }
+
+  public static function setMetaImage($url)
+  {
+    static::$metaImg = $url;
+  }
+
+  public static function getMetaDescription()
+  {
+    return static::$metaDescription ?: 'A Content Revolution';
+  }
+
+  public static function getMetaImage()
+  {
+    return static::$metaImg ?: 'https://lbry.io/img/lbry-dark-1600x528.png';
+  }
+
+  public static function setMetaTitle($title)
+  {
+    static::$metaTitle = $title;
+  }
+
+  public static function getMetaTitle()
+  {
+    return static::$metaTitle;
+  }
+
+  public static function guessMetaTitle($content)
+  {
+    $title = '';
+    preg_match_all('/<h(1|2)>([^<]+)</', $content, $titleMatches);
+    foreach($titleMatches[1] as $matchIndex => $headerValue)
+    {
+      if ($headerValue == '1' || !$title)
+      {
+        $title = $titleMatches[2][$matchIndex];
+        if ($headerValue == '1')
+        {
+          return $title;
+        }
+      }
+    }
+    return $title;
+  }
+
+//  public static function addBodyCssClass($classOrClasses)
+//  {
+//    static::$bodyCssClasses = array_unique(array_merge(static::$bodyCssClasses, (array)$classOrClasses));
+//  }
+//
+//  public static function getBodyCssClasses()
+//  {
+//    return static::$bodyCssClasses;
+//  }
+}

view/View.class.php

@@ -12,11 +12,21 @@ class View
 
   public static function render($template, array $vars = [])
   {
-    if (!static::exists($template))
+    if (!static::exists($template) || substr_count($template, '/') !== 1)
     {
       throw new InvalidArgumentException(sprintf('The template "%s" does not exist or is unreadable.', $template));
     }
 
+    list($module, $view) = explode('/', $template);
+
+    $actionClass  = ucfirst($module) . 'Actions';
+    $method = 'prepare' . ucfirst($view);
+
+    if (method_exists($actionClass, $method))
+    {
+      $vars = $actionClass::$method($vars);
+    }
+
     extract($vars);
     ob_start();
     ob_implicit_flush(0);

view/get/alphaNotice.php

@@ -0,0 +1,4 @@
+<div class="notice notice-info spacer1">
+  <strong>This is a pre-release, alpha version of LBRY.</strong> It is only designed to show what LBRY makes possible.
+          Future releases will involve a full network reboot.
+</div>

view/get/feedback.php

@@ -0,0 +1,22 @@
+<div class="cover cover-dark cover-dark-grad content content-dark">
+  <h1>Test and Earn</h1>
+  <p>
+    Regardless of whether you got LBRY to run or not, your feedback is immensely valuable.
+    Everyone who made <em>any</em> effort to install and complete the survey below will receive 1,000 LBC*.
+  </p>
+  <div class="meta">
+    *What is this worth? Who knows! But it will be the largest reward we will <strong>ever</strong> offer to early adopters. Alternatively, if you complete our survey we will pay you in hugs.
+  </div>
+  <h3>Test Your Install</h3>
+  <ol>
+    <li>Run <code>lbrynet-console</code> from the command line</li>
+    <li>Enter <code>get wonderfullife</code></li>
+    <li>Continue to play as you desire</li>
+  </ol>
+  <h3>Feedback</h3>
+  <p>
+    Everyone who completes our brief feedback survey will receive 1,000 LBC and your feedback will be personally read by the developers.
+    Completing this survey also helps signal interest in LBRY to investors.
+  </p>
+  <a href="https://docs.google.com/forms/d/1zqa5jBYQMmrZO1utoF2Ok9ka-gXzXLDZKXNNoprufC8/viewform" class="btn-alt">Provide Your Feedback</a>
+</div>

view/get/get-shared.php

@@ -0,0 +1,15 @@
+<?php NavActions::setNavUri('/get') ?>
+<?php echo View::render('nav/header', ['isDark' => false]) ?>
+
+<main class="column-fluid">
+  <div class="span6">
+    <div class="cover cover-light content">
+      <?php echo $installHtml ?>
+    </div>
+  </div>
+  <div class="span6">
+    <?php echo View::render('get/feedback') ?>
+  </div>
+</main>
+
+<?php echo View::render('nav/footer') ?>

view/layout/basic.php

@@ -4,13 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
         
-        <?php preg_match_all('/<h(1|2)>([^<]+)</', $content, $titleMatches) ?>
-        <?php $title = null ?>
-        <?php foreach($titleMatches[1] as $matchIndex => $headerValue): ?>
-          <?php if ($headerValue == '1' || !$title): ?>
-            <?php $title = $titleMatches[2][$matchIndex] ?>
-          <?php endif ?>
-        <?php endforeach ?>
+        <?php $title = Response::getMetaTitle() ?: Response::guessMetaTitle($content) ?>
         <?php $title = $title ? 
                           $title . (strpos($title, 'LBRY') === false ? ' - LBRY' : '') :
                           'LBRY' ?>
@@ -39,12 +33,13 @@
         <!-- Open Graph data -->
         <meta property="og:title" content="<?php echo $title ?>" />
         <meta property="og:type" content="article" />
-        <meta property="og:image" content="<?php echo View::getMetaImage() ?>" />
-        <meta property="og:description" content="<?php echo View::getMetaDescription() ?>"/>
+        <meta property="og:image" content="<?php echo Response::getMetaImage() ?>" />
+        <meta property="og:description" content="<?php echo Response::getMetaDescription() ?>"/>
         <meta property="og:site_name" content="LBRY" />
     </head>
-    <body <?php echo defined('FOOTER_RENDERED') && FOOTER_RENDERED ? 'class="with-footer"' : '' ?>>
+    <body>
       <?php echo $content ?>
+      <div class="hide">
         <div id="js">
           <script src="/js/jquery-2.1.3.min.js"></script>
           <script src="/js/global.js"></script>
@@ -59,5 +54,6 @@
 
           </script>
         </div>
+      </div>
     </body>
 </html>

view/mail/joinGeneralList.php

@@ -1,11 +0,0 @@
-<form action="//lbry.us9.list-manage.com/subscribe/post?u=6dff893a9da0ab62d6704afc9&amp;id=7b74c90030" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate mailchimp-form" target="_blank" novalidate>
-  <div class="mail-submit">
-    <input type="email" value="" name="EMAIL" class="required email standard" id="mce-EMAIL" placeholder="someone@somewhere.com">
-    <input type="submit" value="<?php echo isset($submitLabel) ? $submitLabel : 'Subscribe' ?>" name="subscribe" id="mc-embedded-subscribe" class="btn-primary">
-  </div>
-  <div id="mce-responses" class="clear">
-    <div class="notice notice-error " id="mce-error-response" style="display:none"></div>
-    <div class="notice notice-success" id="mce-success-response" style="display:none"></div>
-  </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-    <div style="position: absolute; left: -5000px;"><input type="text" name="b_6dff893a9da0ab62d6704afc9_7b74c90030" tabindex="-1" value=""></div>
-</form>

view/mail/joinList.php

@@ -0,0 +1,13 @@
+<form action="/list-subscribe" method="post" novalidate>
+  <?php if ($error): ?>
+    <div class="notice notice-error spacer1"><?php echo $error ?></div>
+  <?php elseif ($success): ?>
+    <div class="notice notice-success spacer1"><?php echo $success ?></div>
+  <?php endif ?>
+  <div class="mail-submit">
+    <input type="hidden" name="returnUrl" value="<?php echo $returnUrl ?>"/>
+    <input type="hidden" name="listId" value="<?php echo $listId ?>"/>
+    <input type="email" value="" name="email" class="required email standard" placeholder="someone@somewhere.com">
+    <input type="submit" value="<?php echo isset($submitLabel) ? $submitLabel : 'Subscribe' ?>" name="subscribe" id="mc-embedded-subscribe" class="<?php echo $btnClass ?>">
+  </div>
+</form>

view/nav/globalItems.php

@@ -1,21 +1,21 @@
 <div class="control-item">
-  <a href="/get" <?php echo $_SERVER['REQUEST_URI'] === '/get' ? 'class="nav-active"' : ''?>>Get</a>
+  <a href="/get" <?php echo $selectedItem === '/get' ? 'class="nav-active"' : ''?>>Get</a>
 </div>
 <div class="control-item">
-  <a href="/what" <?php echo $_SERVER['REQUEST_URI'] === '/what' ? 'class="nav-active"' : ''?>>What</a>
+  <a href="/what" <?php echo $selectedItem === '/what' ? 'class="nav-active"' : ''?>>What</a>
 </div>
 <div class="control-item">
-  <a href="/why" <?php echo $_SERVER['REQUEST_URI'] === '/why' ? 'class="nav-active"' : ''?>>Why</a>
+  <a href="/why" <?php echo $selectedItem === '/why' ? 'class="nav-active"' : ''?>>Why</a>
 </div>
 <div class="control-item">
   <a href="//blog.lbry.io">News</a>
 </div>
 <div class="control-item">
-  <a href="/team" <?php echo $_SERVER['REQUEST_URI'] === '/team' ? 'class="nav-active"' : ''?>>Team</a>
+  <a href="/team" <?php echo $selectedItem === '/team' ? 'class="nav-active"' : ''?>>Team</a>
 </div>
 <div class="control-item no-label">
   <a href="http://twitter.com/lbry_io"><span class="icon icon-twitter"></span><span class="btn-label">Twitter</span></a>
 </div>
 <div class="control-item no-label">
-  <a href="https://www.facebook.com/pages/LBRY/1459178271065605"><span class="icon icon-facebook"></span> <span class="btn-label">Facebook</span></a>
+  <a href="https://www.facebook.com/lbryio"><span class="icon icon-facebook"></span> <span class="btn-label">Facebook</span></a>
 </div>

view/page/404.php

@@ -1,5 +1,7 @@
 <?php echo View::render('nav/header', ['isDark' => false]) ?>
-<div class="content">
+<main>
+  <div class="content">
     <h1>Page Not Found</h1>
     <p>One day this will be funnier but today is not that day.</p>
-</div>
+  </div>
+</main>

view/page/cli.php

@@ -0,0 +1,71 @@
+<?php Response::setMetaDescription('Download or install the latest version of LBRY.') ?>
+<?php echo View::render('nav/header', ['isDark' => false]) ?>
+<main>
+  <div class="content spacer1">
+    <h1>LBRY for CLI</h1>
+    <div class="notice notice-info">
+      <strong>This is a pre-release, alpha version of LBRY.</strong> It is only designed to show what LBRY makes possible.
+              Expect future releases to involve a full network reboot of both credits and metadata.
+    </div>
+  </div>
+  <div class="content">
+    <h2>Install</h2>
+    <div class="row-fluid">
+      <div class="span6">
+        <h3><span class="icon-linux"></span> Linux</h3>
+        <div>
+          <h4>The Brave and Lazy</h4>
+          <ol>
+            <li>Make a folder called <code>lbry</code> where you want everything to reside.</li>
+            <li>Download and run <a href="https://raw.githubusercontent.com/lbryio/lbry-setup/master/lbry_setup.sh" class="link-primary">this shell script</a> from that folder.</li>
+          </ol>
+          <h4>The Shrewd and Frivolous</h4>
+          <ol>
+            <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbrycrd" class="link-primary">lbrycrd</a>, a miner for LBRY credits.</li>
+            <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbry"  class="link-primary">lbry</a>, a console based application for using the LBRY protocol.</li>
+          </ol>
+        </div>
+      </div>
+      <div class="span6">
+        <h3><span class="icon-apple"></span> OS X</h3>
+        <div>
+          <h4>OS X Programmers</h4>
+          <p>You can attempt to follow the Linux build instructions.</p>
+          <h4>Everyone Else</h4>
+          <p>Sorry, we do not have an OS X version of LBRY other than source. We promise one will exist sooner rather than later.</p>
+        </div>
+      </div>
+    </div>
+    <h2>Test</h2>
+    <p>To ensure LBRY is installed co:</p>
+    <div class="text-center spacer1">
+      <code>get wonderfullife</code>
+    </div>
+    <p class="meta">In the graphical version, this can accessed by typing "wonderfullife" into the address bar and pressing "Go". In the console version, select "[7] Add a stream from a short name".</p>
+    <div class="spacer2">
+      <h2>Feedback</h2>
+      <p>We've prepared a short form for feedback regarding your LBRY experience, available below.</p>
+      <p>We're providing 10,000 LBC (~$100) to the first 500 people who download LBRY and submit their feedback.</p>
+      <p><a href="https://docs.google.com/forms/d/1zqa5jBYQMmrZO1utoF2Ok9ka-gXzXLDZKXNNoprufC8/viewform" class="btn-primary">Provide Your Feedback</a></p>
+    </div>
+  </div>
+</main>
+
+<?php echo View::render('nav/footer') ?>
+
+
+<?php /*
+ *
+ *  <div class="span4">
+        <h3><span class="icon-windows"></span> Windows</h3>
+        <p class="meta">
+          If you have a standard Windows install, it will insinuate several times that you are an idiot for following the steps below.
+          And perhaps you are, but not because this code is dangerous or will harm your computer in any way. Future releases will involve more reputable install steps.
+        </p>
+        <ol>
+          <li>Download <a href="https://github.com/lbryio/lbry/releases/download/alpha/lbry-windows.zip" class="link-primary">this ZIP</a> file.</li>
+          <li>There is no installer. Extract the ZIP to wherever you want the program to reside, such as <code>Program Files</code>.</li>
+          <li>Run lbry.exe.</li>
+        </ol>
+      </div>
+ */

view/page/get-allowed.php

@@ -1,5 +1,6 @@
-<?php View::setMetaDescription('Download or install the latest version of LBRY.') ?>
+<?php Response::setMetaDescription('Download or install the latest version of LBRY.') ?>
 <?php echo View::render('nav/header', ['isDark' => false]) ?>
+<?php throw new Exception('not used atm') ?>
 <div class="content spacer1">
   <h1>Get LBRY</h1>
   <div class="notice notice-info">

view/page/get-denied.php

@@ -1,41 +0,0 @@
-<?php View::setMetaDescription('Download or install the latest version of LBRY.') ?>
-<?php echo View::render('nav/header', ['isDark' => false]) ?>
-<div class="content spacer1">
-  <h1>Get LBRY</h1>
-</div>
-<div class="hero hero-pattern spacer2">
-  <div class="hero-content content content-dark">
-    <h2 class="hero-title text-center">LBRY is temporarily invite-only.</h2>
-    <div class="row-fluid">
-      <div class="span6">
-        <h3 class="hero-title-small">I Have An Invite Code</h3>
-        <p>Enter your code below.</p>
-        <?php if ($inviteError): ?>
-          <div class="notice notice-error spacer1"><?php echo $inviteError ?></div>
-        <?php endif ?>
-        <form action="/get" method="post" novalidate>
-          <div class="mail-submit">
-            <input type="text" value="" name="invite" placeholder="BANANA">
-            <input type="submit" value="Go" name="submit" class="btn-alt">
-          </div>
-        </form>
-      </div>
-      <div class="span6">
-        <h3 class="hero-title-small">Tell Me When LBRY Is Public</h3>
-        <p>LBRY is launching soon. Be the first to know.</p>
-        <?php echo View::render('mail/joinGeneralList', [
-            'submitLabel' => 'Subscribe'
-        ]) ?>
-      </div>
-    </div>
-  </div>
-</div>
-<?php if ($fullPage): ?>
-  <div class="content">
-    <h3>Want To Know More?</h3>
-    <p>Learn about <a href="/what" class="link-primary">what LBRY does</a>,
-      <a href="/why" class="link-primary">why we made it</a>, or
-      <a href="//blog.lbry.io" class="link-primary">read the latest news</a>.</p>
-  </div>
-<?php endif ?>
-<?php echo View::render('nav/footer') ?>

view/page/get.php

@@ -0,0 +1,39 @@
+<?php Response::setMetaDescription('Download or install the latest version of LBRY.') ?>
+<?php Response::setMetaTitle(__('Get LBRY')) ?>
+<?php echo View::render('nav/header', ['isDark' => false]) ?>
+<main class="column-fluid">
+  <div class="span6">
+    <div class="cover cover-dark cover-dark-grad content content-dark">
+      <div class="meta meta-large">
+        <span class="icon-mobile"></span> <span class="icon-windows"></span> <span class="icon-android"></span>
+      </div>
+      <h1><?php echo __('I want LBRY for mobile, Windows, or shudder at the phrase "command line".') ?></h1>
+      <p class="pflow">LBRY is coming out on your favorite platform soon. Join our list to know when.</p>
+      <?php echo View::render('mail/joinList', [
+        'submitLabel' => 'Go',
+        'listId' => Mailchimp::LIST_GENERAL_ID,
+        'btnClass' => 'btn-alt'
+      ]) ?>
+    </div>
+  </div>
+  <div class="span6">
+    <div class="cover cover-light content">
+      <div class="meta  meta-large">
+        <span class="icon-linux"></span> <span class="icon-apple"></span>
+      </div>
+      <h1><?php echo __('I am a Linux or OSX user comfortable from the command line.') ?></h1>
+      <p class="pflow">Earn early adopter rewards and interact directly with developers via our Alpha client.</p>
+      <div class="content-inset">
+        <ul class="no-style">
+          <li>
+            <a href="/linux" class="link-primary"><span class="icon-linux"></span> Linux</a>
+          </li>
+          <li>
+            <a href="/osx" class="link-primary"><span class="icon-apple"></span> OSX</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</main>
+<?php echo View::render('nav/footer') ?>

view/page/home.php

@@ -1,9 +1,10 @@
 <div class="bg-image-full" style="background-image: url(/img/cover-home2.jpg)"></div>
-<div class="cover-and-header">
-  <?php echo View::render('nav/header', ['isDark' => true]) ?>
-  <div class="cover cover-dark" >
-    <div class="cover-content">
+<?php echo View::render('nav/header', ['isDark' => true]) ?>
+<main class="column-fluid">
+  <div class="span12">
+    <div class="cover cover-dark cover-center">
       <h2 class="cover-title">Watch, Share, Earn.</h2>
+      <div class="text-center">
         <h3 class="cover-subtitle">Join a fully distributed network that makes information open to everyone.</h3>
         <div class="control-group spacer1">
           <div class="control-item">
@@ -13,9 +14,10 @@
             <a href="/what" class="btn-alt">Learn More</a>
           </div>
         </div>
+      </div>
       <div class="video">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/EHljV6Tg24Y" frameborder="0" allowfullscreen></iframe>
       </div>
     </div>
   </div>
-</div>
+</main>

view/page/linux.php

@@ -0,0 +1,23 @@
+<?php Response::setMetaDescription('Download/install the latest version of LBRY for Linux.') ?>
+<?php ob_start() ?>
+  <h1>Install LBRY on Linux <span class="icon-linux"></span></h1>
+  <?php echo View::render('get/alphaNotice') ?>
+  <div class="meta spacer1 text-center">Choose an install option.</div>
+  <div class="row-fluid">
+    <div class="span6">
+      <h3>For the Efficient and Lazy</h3>
+      <ol>
+        <li>Make a folder called <code>lbry</code> where you want everything to reside.</li>
+        <li>Download and run <a href="https://raw.githubusercontent.com/lbryio/lbry-setup/master/lbry_setup.sh" class="link-primary">this script</a> from that folder.</li>
+      </ol>
+    </div>
+    <div class="span6">
+      <h3>For the Shrewd and Frivolous</h3>
+      <ol>
+        <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbrycrd" class="link-primary">lbrycrd</a>, a miner for LBRY credits.</li>
+        <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbry"  class="link-primary">lbry</a>, a console based application for using the LBRY protocol.</li>
+      </ol>
+    </div>
+  </div>
+<?php $html = ob_get_clean() ?>
+<?php echo View::render('get/get-shared', ['installHtml' => $html]) ?>

view/page/osx.php

@@ -0,0 +1,23 @@
+<?php Response::setMetaDescription('Download/install the latest version of LBRY for OSX.') ?>
+<?php ob_start() ?>
+  <h1>Install LBRY on OSX <span class="icon-apple"></span> (command line)</h1>
+  <?php echo View::render('get/alphaNotice') ?>
+  <div class="meta spacer1 text-center">Choose an install option.</div>
+  <div class="row-fluid">
+    <div class="span6">
+      <h3>For the Efficient and Lazy</h3>
+      <ol>
+        <li>Make a folder called <code>lbry</code> where you want everything to reside.</li>
+        <li>Download and run <a href="https://raw.githubusercontent.com/lbryio/lbry-setup/master/lbry_setup.sh" class="link-primary">this script</a> from that folder.</li>
+      </ol>
+    </div>
+    <div class="span6">
+      <h3>For the Shrewd and Frivolous</h3>
+      <ol>
+        <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbrycrd" class="link-primary">lbrycrd</a>, a miner for LBRY credits.</li>
+        <li>Clone and follow the build steps for <a href="https://github.com/lbryio/lbry"  class="link-primary">lbry</a>, a console based application for using the LBRY protocol.</li>
+      </ol>
+    </div>
+  </div>
+<?php $html = ob_get_clean() ?>
+<?php echo View::render('get/get-shared', ['installHtml' => $html]) ?>

view/page/team.php

@@ -1,10 +1,12 @@
-<?php View::setMetaImage('http://lbry.io/img/cover-team.jpg') ?>
-<?php View::setMetaDescription('LBRY is founded by a team passionate about connecting producers and consumers and breaking down broken models. Learn more about them.') ?>
+<?php Response::setMetaImage('http://lbry.io/img/cover-team.jpg') ?>
+<?php Response::setMetaDescription('LBRY is founded by a team passionate about connecting producers and consumers and breaking down broken models. Learn more about them.') ?>
+
 <?php echo View::render('nav/header', ['isDark' => false]) ?>
-<div class="content">
+<main>
+  <div class="content">
     <h1>About Us</h1>
-</div>
-<div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-team.jpg)">
+  </div>
+  <div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-team.jpg)">
     <div class="hero-content-wrapper">
       <div class="hero-content">
         <blockquote class="blockquote-large">
@@ -13,8 +15,8 @@
         <cite>Mike Vine <em>Technology Evangelist</em></cite>
       </div>
     </div>
-</div>
-<div class="content photo-grid spacer2">
+  </div>
+  <div class="content photo-grid spacer2">
     <h2>The Team</h2>
     <div class="row-fluid">
     <div class="span6  spacer2">
@@ -87,12 +89,14 @@
           </p>
       </div>
     </div>
-</div>
-<div class="content text-center spacer2">
+  </div>
+  <div class="content text-center spacer2">
     <h3>Not Ready to Get Serious?</h3>
     <p>Join our mailing list for updates about LBRY.</p>
-    <?php echo View::render('mail/joinGeneralList', [
-        'submitLabel' => 'Subscribe'
+      <?php echo View::render('mail/joinList', [
+          'submitLabel' => 'Subscribe',
+          'listId' => Mailchimp::LIST_GENERAL_ID
       ]) ?>
-</div>
+  </div>
+</main>
 <?php echo View::render('nav/footer') ?>

view/page/what.php

@@ -1,9 +1,11 @@
-<?php View::setMetaDescription('Access information and content in ways you never dreamed possible. Earn credits for your unused bandwidth and diskspace.') ?>
+<?php Response::setMetaDescription('Access information and content in ways you never dreamed possible. Earn credits for your unused bandwidth and diskspace.') ?>
+
 <?php echo View::render('nav/header', ['isDark' => false]) ?>
-<div class="content">
+<main>
+  <div class="content">
     <h1>What is LBRY?</h1>
-</div>
-<div class="hero hero-pattern spacer2">
+  </div>
+  <div class="hero hero-pattern spacer2">
     <div class="hero-content text-center">
       <h2 class="hero-title">A revolution in accessing and publishing information.</h2>
       <div class="row-fluid hero-tile-row">
@@ -33,8 +35,8 @@
         </div>
       </div>
     </div>
-</div>
-<div class="content">
+  </div>
+  <div class="content">
     <div class="spacer2">
       <h3>Tell Me More</h3>
       <p>LBRY allows anyone to publish content to a location like this:</p>
@@ -50,8 +52,8 @@
         <li>Hilary pays Ernest for the decryption key, allowing her to watch the film.</li>
       </ol>
     </div>
-</div>
-<div class="hero hero-pattern spacer2">
+  </div>
+  <div class="hero hero-pattern spacer2">
     <div class="hero-content">
       <h2 class="text-center hero-title">If BitTorrent + BitCoin Had a Baby</h2>
       <div class="row-fluid  hero-tile-row">
@@ -94,10 +96,11 @@
         </div>
       </div>
     </div>
-</div>
-<div class="content spacer2">
+  </div>
+  <div class="content spacer2">
     <h3>How do I use it?</h3>
     <p><a href="/get" class="btn-primary">Get LBRY</a></p>
     <p>Or, learn more about <a href="/why" class="link-primary">why we've created LBRY</a>.</p>
-</div>
+  </div>
+</main>
 <?php echo View::render('nav/footer') ?>

view/page/why.php

@@ -1,8 +1,9 @@
-<?php View::setMetaImage('http://lbry.io/img/xkcd-comic.png') ?>
-<?php View::setMetaDescription('Learn about the inspiration behind LBRY\'s revolutionary content distribution system.') ?>
+<?php Response::setMetaImage('http://lbry.io/img/xkcd-comic.png') ?>
+<?php Response::setMetaDescription('Learn about the inspiration behind LBRY\'s revolutionary content distribution system.') ?>
 <?php echo View::render('nav/header', ['isDark' => false]) ?>
-<div class="content"><h1>Why?</h1></div>
-<div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-jcole.jpg)">
+<main>
+  <div class="content"><h1>Why?</h1></div>
+  <div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-jcole.jpg)">
     <div class="hero-content-wrapper">
       <div class="hero-content">
         <blockquote>
@@ -11,8 +12,8 @@
         <cite>J. Cole, <em><a href="https://www.youtube.com/watch?v=UMCGOAGb4Y0&amp;t=470s">Note to Self</a></em></cite>
       </div>
     </div>
-</div>
-<div class="content spacer2">
+  </div>
+  <div class="content spacer2">
     <h3>The World We Live In</h3>
     <p>Annual internet video traffic is approximately 500 exabytes (500,000,000,000 GB)<sup><a href="http://www.cisco.com/c/en/us/solutions/collateral/service-provider/ip-ngn-ip-next-generation-network/white_paper_c11-481360.html">1</a></sup>.
     Every second, over 10,000 hours of video are streamed.
@@ -37,8 +38,8 @@
     <p>Similar issues of economics and experience exist for consumers and producers of information of all kinds (e.g. news, facts), not just videos.</p>
 
     <p>LBRY solves these problems and throws in some other sweet innovations just for funsies.</p>
-</div>
-<div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-swartz.jpg)">
+  </div>
+  <div class="hero hero-quote hero-img spacer2" style="background-image: url(/img/cover-swartz.jpg)">
     <div class="hero-content-wrapper">
       <div class="hero-content">
         <blockquote>
@@ -48,8 +49,8 @@
         <cite>Aaron Swartz</cite>
       </div>
     </div>
-</div>
-<div class="content spacer2">
+  </div>
+  <div class="content spacer2">
     <h3>An Alternative</h3>
     <p>LBRY avoids the mistakes of centralization and middlemen. It says:</p>
     <ol>
@@ -101,6 +102,7 @@
     <h3>Ready to use LBRY?</h3>
     <p><a href="/get" class="btn-primary">Get LBRY</a></p>
     <p>Or, <a href="/team" class="link-primary">learn about joining the team</a>.</p>
-</div>
+  </div>
+</main>
 <?php echo View::render('nav/footer') ?>
 <?php /* It is inspired by Bitcoin, BitTorrent, and&nbsp;a comment by Julian Assange<sup><a class="link-primary" href="https://wikileaks.org/Transcript-Meeting-Assange-Schmidt.html#731">1</a></sup>.</p> */ ?>

web/bootstrap.php

@@ -1,4 +1,6 @@
 <?php
 include $_SERVER['ROOT_DIR'] . '/autoload.php';
 
+i18n::register();
+Session::init();
 Controller::dispatch($_SERVER['REQUEST_URI']);

web/js/global.js

@@ -59,7 +59,7 @@ $(document).ready(function() {
 
   function resizeVideo(iframe)
   {
-    var maxWidth = Math.min(iframe.closest('.video').width(), iframe.data('maxWidth')),
+    var maxWidth = Math.min(iframe.offsetParent().width(), iframe.data('maxWidth')),
         maxHeight = iframe.data('maxHeight'),
         ratio = iframe.data('aspectRatio');
 

web/scss/_basic.scss

@@ -14,10 +14,6 @@ body
     line-height: 1.3333;
     min-height: 100%;
     position: relative;
-    &.with-footer
-    {
-      padding-bottom: $spacing-vertical * 3;
-    }
 }
 .bg-image-full
 {
@@ -58,6 +54,7 @@ sub { top: 0.4em; }
 .spacer2 { margin-bottom: $spacing-vertical * 2; }
 .text-center { text-align: center; }
 .meta { font-size: 0.8em; }
+.meta-large { font-size: 1.2em; }
 
 .link-primary
 {
@@ -146,3 +143,15 @@ a:hover img
     display: none;
   }
 }
+
+
+body
+{
+  @include display-flex();
+  @include flex-flow(column);
+  min-height: 100vh;
+  main
+  {
+    @include flex(2);
+  }
+}

web/scss/_content.scss

@@ -6,21 +6,28 @@
   max-width: $max-content-width; /*we have more padding than desirable so numbers from ol can exceed container*/
   padding-left: 15px;
   padding-right: 15px;
-  color: #333;
 
   h1, h2, h3, h4, h5, h6
   {
-    color: $color-text-dark;
     &:not(:first-child)
     {
       margin-top: $spacing-vertical * 1.5;
     }
   }
 
+  &:not(.content-dark)
+  {
+    color: #333;
+    h1, h2, h3, h4, h5, h6
+    {
+      color: $color-text-dark;
+    }
+
     .meta
     {
       color: #505050;
     }
+  }
 
   &.content-dark
   {
@@ -31,11 +38,15 @@
 
   p
   {
-      max-width: $max-text-width;
       margin-bottom: $spacing-vertical;
       margin-left: auto;
       margin-right: auto;
   }
+  p.pflow
+  {
+    margin-left: 0;
+    margin-right: 0;
+  }
   ul, ol
   {
     > li
@@ -44,6 +55,11 @@
       margin-left: auto;
       margin-right: auto;
     }
+    &.no-style
+    {
+      list-style: none;
+      > li { list-style: none; }
+    }
   }
   ul
   {
@@ -84,6 +100,15 @@
     margin-right: auto;
   }
 }
+.content-inset
+{
+  margin-left: $spacing-vertical;
+  margin-right: $spacing-vertical;
+}
+main > .content
+{
+  margin-top: $spacing-vertical;
+}
 
 @media(max-width: $max-text-width + 30)
 {

web/scss/_cover.scss

@@ -1,23 +1,25 @@
 @import "global";
-.cover-and-header
-{
-  @include flex();
-  flex-direction: column;
-  min-height: 100vh;
-  .cover
-  {
-    flex: 1 0 auto;
-  }
-  .header
-  {
-    margin-bottom: 0;
-  }
-}
+
 .cover
 {
-  @include absolute-center();
-  text-align: center;
   @box-sizing(border-box);
+  .meta-large [class*="icon"]
+  {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+@media (max-width: $mobile-width-threshold) {
+  .cover { padding: $spacing-vertical; }
+}
+@media (min-width: $mobile-width-threshold) {
+  .cover { padding: $spacing-vertical * 2 $spacing-vertical * 3; }
+}
+
+.cover-center
+{
+  @include flex-direction(column);
+  @include absolute-center();
 }
 .cover-dark
 {
@@ -29,10 +31,11 @@
   color: #333;
   .cover-title { color: black; }
 }
-.cover-content
+.cover-dark-grad
 {
-  padding: 10px;
+  @include linear-gradient(darken($color-primary, 5), lighten($color-primary, 5));
 }
+
 .cover-title
 {
   margin-bottom: $spacing-vertical;
@@ -44,15 +47,3 @@
   margin: $spacing-vertical 0 $spacing-vertical;
   font-size: 1.1em;
 }
-.cover-search
-{
-  margin-bottom: $spacing-vertical * 2;
-  input
-  {
-      font-size: $font-size * 1.5;
-      height: $spacing-vertical * 1.5;
-      margin-bottom: $spacing-vertical * 0.5;
-      width: 520px;
-      max-width: 100%;
-  }
-}

web/scss/_form.scss

@@ -1,12 +1,14 @@
 @import "global";
 
+$input-width: 300px;
+
 input[type="email"], input[type="text"] 
 {    
   border: 0 none;
   border: 1px solid rgba(160,160,160,.5);
   padding-left: 5px;
   padding-right: 5px;
-  width: 300px;
+  width: $input-width;
   height: $spacing-vertical * 1.5;
 }
 
@@ -18,7 +20,7 @@ input[type="email"], input[type="text"]
   }
   input, .btn-primary
   {
-        vertical-align: bottom;
     margin-bottom: $spacing-vertical / 2;
+    vertical-align: bottom;
   }
 }

web/scss/_global.scss

@@ -33,7 +33,7 @@ $max-text-width: 660px;
           border-radius: $radius;
 }
 
-@mixin flex()
+@mixin display-flex()
 {
   display: -webkit-box;
   display: -moz-box;
@@ -42,9 +42,31 @@ $max-text-width: 660px;
   display: flex;
 }
 
+@mixin flex($columns)
+{
+  -webkit-flex: $columns;
+     -moz-flex: $columns;
+      -ms-flex: $columns;
+          flex: $columns;
+}
+
+@mixin flex-flow($flow) {
+  -webkit-flex-flow: $flow;
+     -moz-flex-flow: $flow;
+      -ms-flex-flow: $flow;
+          flex-flow: $flow;
+}
+
+@mixin flex-direction($direction) {
+  -webkit-flex-direction: $direction;
+     -moz-flex-direction: $direction;
+      -ms-flex-direction: $direction;
+          flex-direction: $direction;
+}
+
 @mixin absolute-center()
 {
-  @include flex();
+  @include display-flex();
   -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;

web/scss/_grid.scss

@@ -57,12 +57,23 @@ $gutter_fluid: 4;
   }
 }
 
+.column-fluid {
+  @include display-flex();
+  flex-wrap: wrap;
+  > [class*="span"] {
+    @include display-flex();
+    @include flex(1 0 auto);
+    overflow: hidden;
+    justify-content: center;
+  }
+}
+
 .row-fluid, .tile-fluid {
   @include clearfix();
 }
 
 @media (max-width: $mobile-width-threshold) {
-  .row-fluid, .tile-fluid {
+  .row-fluid, .tile-fluid, .column-fluid {
     width: 100%;
   }
   .pull-left, .pull-right
@@ -73,5 +84,6 @@ $gutter_fluid: 4;
     float: none !important;
     width: 100% !important;
     margin-left: 0 !important;
+    display: block !important;
   }
 }

web/scss/_header.scss

@@ -6,7 +6,6 @@ $color-nav-border: #ddd;
 {
     width: 100%;
     padding: 15px 0;
-    margin-bottom: $spacing-vertical;
     @include clearfix();
     position: relative;
     z-index: 1;
@@ -119,10 +118,7 @@ $color-nav-border: #ddd;
   border-top: 1px $color-nav-border solid;
   border-bottom: 1px $color-nav-border solid;
   padding: $spacing-vertical / 2 0;
-  position: absolute;
   width: 100%;
-  bottom: 0;
-  left: 0;
 }
 .footer-img-link
 {
@@ -131,10 +127,3 @@ $color-nav-border: #ddd;
   img { height: $spacing-vertical * 1.5; }
   vertical-align: middle;
 }
-@media (max-width: $mobile-width-threshold)
-{
-  body.with-footer
-  {
-    padding-bottom: $spacing-vertical * 5;
-  }
-}