From 981251b2b815d1e3a69071b9239dd92094ecfe6d Mon Sep 17 00:00:00 2001
From: danij <danij@dengine.net>
Date: Tue, 2 Jul 2013 19:25:59 +0100
Subject: [PATCH] Homepage: Front page built by the client; switched to two
 column layout

The front page is now produced by the client which stitches together
the content items served up from various RSS/Atom news feeds. Basic
semantic markup has been applied.

Also switched to an easier to read / more space efficient two column
layout (with responsive one column and page gutter collapsing).

Note that at present the content items will appear in a somewhat odd
order as the mechanism used for sorting and splitting to two columns
is a temporary placeholder.
---
 web/classes/frontcontroller.class.php        | 458 +++++++------------
 web/html/validatoricons.html                 |   7 -
 web/plugins/masterbrowser/masterbrowser.php  |   2 +-
 web/plugins/z#home/home.php                  | 125 ++++-
 web/plugins/z#home/html/getitnow.html        |   2 +-
 web/plugins/z#home/html/latestversion.html   |  11 +-
 web/plugins/z#home/html/socialbookmarks.html |  22 +-
 web/style.css                                | 248 +++-------
 8 files changed, 359 insertions(+), 516 deletions(-)
 delete mode 100644 web/html/validatoricons.html

diff --git a/web/classes/frontcontroller.class.php b/web/classes/frontcontroller.class.php
index ee4a97cd20..042724ecbf 100644
--- a/web/classes/frontcontroller.class.php
+++ b/web/classes/frontcontroller.class.php
@@ -221,105 +221,192 @@ public function enqueueAction($actioner, $args=NULL)
         }
     }
 
-    /**
-     * Feed item HTML generator for formatting the customised output used
-     * with feeds on the homepage.
-     */
-    static public function generateFeedItemHtml(&$item, $params = NULL)
+    public function interpretRequest()
     {
-        assert('$item instanceof FeedItem /*$item argument is not a FeedItem */');
-        assert('(is_null($params) || is_array($params)) /*$params argument is not an array */');
-
-        $patterns     = array('/{title}/', '/{timestamp}/');
-        $replacements = array($item->title, date("m/d/y", $item->timestamp));
-
-        if(is_array($params) && isset($params['titleTemplate']))
-        {
-            $title = preg_replace($patterns, $replacements, $params['titleTemplate']);
-        }
-        else
+        // Determine action:
+        try
         {
-            $title = $item->title;
-        }
+            // Maybe a plugin?
+            $this->plugins()->interpretRequest($this->_request);
 
-        if(is_array($params) && isset($params['labelTemplate']))
-        {
-            $label = preg_replace($patterns, $replacements, $params['labelTemplate']);
+            foreach($this->_actions as $ActionRecord)
+            {
+                try
+                {
+                    $ActionRecord['actioner']->execute($ActionRecord['args']);
+                }
+                catch(Exception $e)
+                {
+                    throw $e; // Lets simply re-throw and abort for now.
+                }
+            }
         }
-        else
+        catch(Exception $e)
         {
-            $label = $item->title;
+            // We'll show the homepage.
+            $this->enqueueAction($this->findPlugin('home'), NULL);
         }
+    }
 
-        $html = '<a href="'. preg_replace('/(&)/', '&amp;', $item->link)
-               .'" title="'. htmlspecialchars($label)
-                       .'">'. htmlspecialchars($title) .'</a>';
-
-        if(time() < strtotime('+2 days', $item->timestamp))
+    private function &getContentCache()
+    {
+        if(!is_object($this->_contentCache))
         {
-            $html .= '<span class="new-label">&nbsp;NEW</span>';
+            $this->_contentCache = new ContentCache(DIR_CACHE);
         }
 
-        return $html;
+        return $this->_contentCache;
+    }
+
+    public static function &contentCache()
+    {
+        return self::fc()->getContentCache();
     }
 
-    /**
-     * Generate an HTML news time line, aggregating content from all feeds.
-     * @attention This mechanism will be replaced entirely in the near future.
-     * Doing this on server side makes no sense at all.
-     */
-    private function outputNewsFeed()
+    public static function ErrorHandler($errno, $errmsg, $filename, $linenum, $vars)
     {
-        require_once(DIR_CLASSES.'/feed.class.php');
+        $errortype = array (
+                    E_ERROR              => 'Error',
+                    E_WARNING            => 'Warning',
+                    E_PARSE              => 'Parsing Error',
+                    E_NOTICE             => 'Notice',
+                    E_CORE_ERROR         => 'Core Error',
+                    E_CORE_WARNING       => 'Core Warning',
+                    E_COMPILE_ERROR      => 'Compile Error',
+                    E_COMPILE_WARNING    => 'Compile Warning',
+                    E_USER_ERROR         => 'User Error',
+                    E_USER_WARNING       => 'User Warning',
+                    E_USER_NOTICE        => 'User Notice',
+                    E_STRICT             => 'Runtime Notice'
+                    );
 
-        $newsContent = array();
+        // Log it?
+        if(ini_get('log_errors'))
         {
-            $maxItems = 3;
-            $feed = new Feed('http://dengine.net/forums/rss.php?mode=news');
-            $n = (int) 0;
-            foreach($feed as $item)
-            {
-                $newsContent[$item->timestamp] = $this->generateFeedItemHtml($item);
-                if(++$n >= $maxItems) break;
-            }
+            error_log(sprintf("PHP %s:  %s in %s on line %d",
+                              isset($errortype[$errno])? $errortype[$errno] : "$errno", $errmsg, $filename, $linenum));
         }
+
+        // Display it?
+        if(ini_get('display_errors'))
         {
-            $maxItems = 3;
-            $params = array('titleTemplate'=>'{title} complete',
-                            'labelTemplate'=>'Read more about {title}, completed on {timestamp}');
+            printf("<br />\n<b>%s</b>: %s in <b>%s</b> on line <b>%d</b><br /><br />\n",
+                   $errortype[$errno], $errmsg, $filename, $linenum);
 
-            $feed = new Feed('http://dl.dropboxusercontent.com/u/11948701/builds/events.rss');
-            $n = (int) 0;
-            foreach($feed as $item)
-            {
-                $newsContent[$item->timestamp] = $this->generateFeedItemHtml($item, $params);
-                if(++$n >= $maxItems) break;
-            }
+            return true;
         }
+
+        switch($errno)
         {
-            $maxItems = 3;
-            $params = array('labelTemplate'=>'Read more about {title}, posted on {timestamp}');
+        case E_NOTICE:
+        case E_USER_NOTICE:
+        case E_USER_WARNING:
+        case E_STRICT:
+            return true;
 
-            $feed = new Feed('http://dengine.net/forums/rss.php?f=24');
-            $n = (int) 0;
-            foreach($feed as $item)
-            {
-                $newsContent[$item->timestamp] = $this->generateFeedItemHtml($item, $params);
-                if(++$n >= $maxItems) break;
-            }
+        default:
+            exit(); // Get out of here!
         }
+    }
 
-?><span class="projectnews-label">Latest news</span>
-<ul><?php
+    public function outputHeader($mainHeading='')
+    {
+        $siteTitle = $this->siteTitle();
+        if(strlen($mainHeading) > 0)
+            $siteTitle = "$mainHeading &bull; $siteTitle";
 
-        krsort($newsContent, SORT_NUMERIC);
-        foreach($newsContent as &$contentItemHtml)
-        {
-?><li><?php echo $contentItemHtml; ?></li><?php
-        }
+        header('X-Frame-Options: SAMEORIGIN');
+
+?><!DOCTYPE html>
+<html dir="ltr" lang="en-GB">
+<head>
+    <title><?=$siteTitle?></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="author" content="<?=$this->siteAuthor()?>" />
+    <meta name="keywords" content="<?php { $keywords = $this->defaultPageKeywords(); foreach($keywords as $keyword) echo $keyword.','; } ?>" />
+    <meta name="description" content="<?=$this->siteDescription()?>" />
+    <meta name="robots" content="index, follow" />
+    <meta name="revisit-after" content="<?=$this->robotRevisitDays()?> DAYS" />
+    <meta name="rating" content="GENERAL" />
+    <meta name="generator" content="<?=$this->homeURL()?>" />
+    <link rel="icon" href="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/favicon.png" type="image/png" />
+    <link rel="shortcut icon" href="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/favicon.png" type="image/png" />
+    <link rel="alternate" type="application/rss+xml" title="Doomsday Engine RSS News Feed" href="http://dengine.net/forums/rss.php?mode=news" />
+
+    <!-- jQuery -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
+
+    <link rel="stylesheet" media="all" href="/style.css" />
+</head>
+<?php
+    }
+
+    public function beginPage($mainHeading='', $page=null)
+    {
+?>
+<body>
+<div id="mainouter">
+    <div id="main">
+<?php
+
+        $this->outputMainMenu($page);
+
+?>
+        <div id="maininner">
+            <div id="framepanel_bottom" role="main">
+                <div id="pageheading">
+                    <h1><?php
+
+        if(strlen($mainHeading) > 0)
+            echo htmlspecialchars($mainHeading);
+        else
+            echo $this->siteTitle();
+
+?></h1>
+                </div>
+<?php
+    }
+
+    public function endPage()
+    {
+?>
+            </div>
+            <div class="framepanel" id="framepanel_top">
+<?php
+
+        $this->outputTopPanel();
+
+?>              <div id="servers"><?php
+
+        $this->outputMasterStatus();
+
+?>              </div><?php
+
+?>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="libicons">
+<?php
+
+        // Output the lib icons (OpenGL, SDL etc).
+        includeHTML('libraryicons');
+
+?>
+</div>
+<footer id="footer" role="contentinfo">
+<?php
 
-?></ul><?php
+        $this->outputFooter();
 
+?>
+</footer>
+</body>
+</html>
+<?php
     }
 
     /**
@@ -432,28 +519,6 @@ private function outputMasterStatus()
         echo $content;
     }
 
-    private function outputTopPanel()
-    {
-?>
-    <div id="panorama">
-    </div>
-<?php
-    }
-
-    private function outputFooter()
-    {
-?>
-<p class="disclaimer"><a href="mailto:webmaster@dengine.net" title="Contact Webmaster">Webmaster</a> - Site design &copy; <?php echo date('Y'); ?> <a href="mailto:<?php echo $this->siteDesignerEmail(); ?>" title="Contact <?php echo $this->siteDesigner(); ?>"><?php echo $this->siteDesigner(); ?></a> - Built by <a href="mailto:<?php echo $this->siteDesignerEmail(); ?>" title="Contact <?php echo $this->siteDesigner(); ?>"><?php echo $this->siteDesigner(); ?></a> / <a href="mailto:<?php echo $this->siteAuthorEmail(); ?>" title="Contact <?php echo $this->siteAuthor(); ?>"><?php echo $this->siteAuthor(); ?></a></p><?php
-
-        includeHTML('validatoricons');
-
-?><p class="disclaimer">The Doomsday Engine is licensed under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" rel="nofollow">GNU/GPL License ver 2</a>. The Doomsday Engine logo is Copyright &copy; 2005-<?php echo date('Y'); ?>, the deng team.</p>
-<hr />
-<?php
-
-        includeHTML('legal');
-    }
-
     private function buildTabs($tabs, $page=NULL, $normalClassName=NULL, $selectClassName=NULL)
     {
         $result = "";
@@ -500,7 +565,7 @@ private function outputMainMenu($page=NULL)
         $rightTabs[] = array('page'=>'/masterserver', 'label'=>'Servers', 'tooltip'=>'Doomsday Engine Master Server');
 
 ?>
-        <div id="menuouter"><div id="menu" class="hnav">
+        <div id="menuouter"><nav id="menu" class="hnav">
         <div id="divider"></div>
             <ul><section class="left">
 <?php
@@ -512,209 +577,26 @@ private function outputMainMenu($page=NULL)
 ?></section>
             </ul>
         <div id="divider2"></div>
-        </div></div>
-<?php
-    }
-
-    public function beginPage($mainHeading='', $page=null)
-    {
-?>
-<body>
-<div id="mainouter">
-    <div id="main">
-<?php
-
-        $this->outputMainMenu($page);
-
-?>
-        <div id="maininner">
-            <div id="framepanel_bottom">
-                <div id="pageheading">
-                    <h1><?php
-
-        if(strlen($mainHeading) > 0)
-            echo htmlspecialchars($mainHeading);
-        else
-            echo $this->siteTitle();
-
-?></h1>
-                </div>
+        </nav></div>
 <?php
     }
 
-    public function endPage()
+    private function outputTopPanel()
     {
 ?>
-            </div>
-            <div class="framepanel" id="framepanel_top">
-<?php
-
-        $this->outputTopPanel();
-
-?>              <div id="projectnews"><?php
-
-        $this->outputNewsFeed();
-
-?>              </div><?php
-
-?>              <div id="servers"><?php
-
-        $this->outputMasterStatus();
-
-?>              </div><?php
-
-?>
-            </div>
-        </div>
+    <div id="panorama">
     </div>
-</div>
-<div id="libicons">
-<?php
-
-        // Output the lib icons (OpenGL, SDL etc).
-        includeHTML('libraryicons');
-
-?>
-</div>
-<footer id="footer" role="contentinfo">
-<?php
-
-        $this->outputFooter();
-
-?>
-</footer>
-</body>
-</html>
 <?php
     }
 
-    public function outputHeader($mainHeading='')
+    private function outputFooter()
     {
-        $siteTitle = $this->siteTitle();
-        if(strlen($mainHeading) > 0)
-            $siteTitle = "$mainHeading &bull; $siteTitle";
-
-        header('Content-type: text/html; charset=utf-8');
-        header('X-Frame-Options: SAMEORIGIN');
-
-?><!DOCTYPE html>
-<html dir="ltr" lang="en-GB">
-<head>
-    <title><?=$siteTitle?></title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="author" content="<?=$this->siteAuthor()?>" />
-    <meta name="keywords" content="<?php { $keywords = $this->defaultPageKeywords(); foreach($keywords as $keyword) echo $keyword.','; } ?>" />
-    <meta name="description" content="<?=$this->siteDescription()?>" />
-    <meta name="robots" content="index, follow" />
-    <meta name="revisit-after" content="<?=$this->robotRevisitDays()?> DAYS" />
-    <meta name="rating" content="GENERAL" />
-    <meta name="generator" content="<?=$this->homeURL()?>" />
-    <link rel="icon" href="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/favicon.png" type="image/png" />
-    <link rel="shortcut icon" href="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/favicon.png" type="image/png" />
-    <link rel="alternate" type="application/rss+xml" title="Doomsday Engine RSS News Feed" href="http://dengine.net/forums/rss.php?mode=news" />
-
-    <!-- jQuery -->
-    <script src="/external/jquery/js/jquery-1.6.2.min.js"></script>
-
-    <!-- jCarousel -->
-    <script src="/external/jquery.jcarousel/js/jquery.jcarousel.min.js"></script>
-    <link rel="stylesheet" media="screen" href="/external/jquery.jcarousel/skin.css" />
-
-    <!-- Thickbox 3 -->
-    <script src="/external/thickbox/js/thickbox.js"></script>
-    <link rel="stylesheet" media="screen" href="/external/thickbox/thickbox.css" />
-
-    <link rel="stylesheet" media="all" href="/style.css" />
-</head>
+?>
+<p class="disclaimer"><a href="mailto:webmaster@dengine.net" title="Contact Webmaster">Webmaster</a> - Site design &copy; <?php echo date('Y'); ?> <a href="mailto:<?php echo $this->siteDesignerEmail(); ?>" title="Contact <?php echo $this->siteDesigner(); ?>"><?php echo $this->siteDesigner(); ?></a> - Built by <a href="mailto:<?php echo $this->siteDesignerEmail(); ?>" title="Contact <?php echo $this->siteDesigner(); ?>"><?php echo $this->siteDesigner(); ?></a> / <a href="mailto:<?php echo $this->siteAuthorEmail(); ?>" title="Contact <?php echo $this->siteAuthor(); ?>"><?php echo $this->siteAuthor(); ?></a></p>
+<p class="disclaimer">The Doomsday Engine is licensed under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" rel="nofollow">GNU/GPL License ver 2</a>. The Doomsday Engine logo is Copyright &copy; 2005-<?php echo date('Y'); ?>, the deng team.</p>
+<hr />
 <?php
-    }
-
-    public function interpretRequest()
-    {
-        // Determine action:
-        try
-        {
-            // Maybe a plugin?
-            $this->plugins()->interpretRequest($this->_request);
-
-            foreach($this->_actions as $ActionRecord)
-            {
-                try
-                {
-                    $ActionRecord['actioner']->execute($ActionRecord['args']);
-                }
-                catch(Exception $e)
-                {
-                    throw $e; // Lets simply re-throw and abort for now.
-                }
-            }
-        }
-        catch(Exception $e)
-        {
-            // We'll show the homepage.
-            $this->enqueueAction($this->findPlugin('home'), NULL);
-        }
-    }
-
-    private function &getContentCache()
-    {
-        if(!is_object($this->_contentCache))
-        {
-            $this->_contentCache = new ContentCache(DIR_CACHE);
-        }
 
-        return $this->_contentCache;
-    }
-
-    public static function &contentCache()
-    {
-        return self::fc()->getContentCache();
-    }
-
-    public static function ErrorHandler($errno, $errmsg, $filename, $linenum, $vars)
-    {
-        $errortype = array (
-                    E_ERROR              => 'Error',
-                    E_WARNING            => 'Warning',
-                    E_PARSE              => 'Parsing Error',
-                    E_NOTICE             => 'Notice',
-                    E_CORE_ERROR         => 'Core Error',
-                    E_CORE_WARNING       => 'Core Warning',
-                    E_COMPILE_ERROR      => 'Compile Error',
-                    E_COMPILE_WARNING    => 'Compile Warning',
-                    E_USER_ERROR         => 'User Error',
-                    E_USER_WARNING       => 'User Warning',
-                    E_USER_NOTICE        => 'User Notice',
-                    E_STRICT             => 'Runtime Notice'
-                    );
-
-        // Log it?
-        if(ini_get('log_errors'))
-        {
-            error_log(sprintf("PHP %s:  %s in %s on line %d",
-                              isset($errortype[$errno])? $errortype[$errno] : "$errno", $errmsg, $filename, $linenum));
-        }
-
-        // Display it?
-        if(ini_get('display_errors'))
-        {
-            printf("<br />\n<b>%s</b>: %s in <b>%s</b> on line <b>%d</b><br /><br />\n",
-                   $errortype[$errno], $errmsg, $filename, $linenum);
-
-            return true;
-        }
-
-        switch($errno)
-        {
-        case E_NOTICE:
-        case E_USER_NOTICE:
-        case E_USER_WARNING:
-        case E_STRICT:
-            return true;
-
-        default:
-            exit(); // Get out of here!
-        }
+        includeHTML('legal');
     }
 }
diff --git a/web/html/validatoricons.html b/web/html/validatoricons.html
deleted file mode 100644
index e57c5fe4c9..0000000000
--- a/web/html/validatoricons.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="hnav">
-    <ul>
-        <li><a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0" rel="nofollow"><img src="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/button-xhtml.png" alt="Valid XHTML 1.0 Strict" /></a></li>
-        <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS level 2.1" rel="nofollow"><img src="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/button-css.png" alt="Valid CSS!" /></a></li>
-        <li><a href="http://www.anybrowser.org/campaign/" title="Any browser campaign" rel="nofollow"><img src="http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/anybrowser_80x15.png" alt="Any Browser" /></a></li>
-    </ul>
-</div>
\ No newline at end of file
diff --git a/web/plugins/masterbrowser/masterbrowser.php b/web/plugins/masterbrowser/masterbrowser.php
index ca53575cba..283d699a2a 100644
--- a/web/plugins/masterbrowser/masterbrowser.php
+++ b/web/plugins/masterbrowser/masterbrowser.php
@@ -108,7 +108,7 @@ private function mustUpdateServerSummaryHtml()
         $this->db = new MasterServer();
 
         $cacheInfo = new ContentInfo();
-        FrontContrller::contentCache()->info(self::$serverSummaryCacheName, $cacheInfo);
+        FrontController::contentCache()->info(self::$serverSummaryCacheName, $cacheInfo);
         return ($this->db->lastUpdate > $cacheInfo->modifiedTime);
     }
 
diff --git a/web/plugins/z#home/home.php b/web/plugins/z#home/home.php
index cd9824418f..a963556c98 100644
--- a/web/plugins/z#home/home.php
+++ b/web/plugins/z#home/home.php
@@ -58,23 +58,130 @@ public function execute($args=NULL)
 
         includeHTML('latestversion', 'z#home');
 
-?><div class="asideboxgroup"><div id="downloadbox" class="asidebox"><?php
+?><div id="contentbox"><?php
 
-        includeHTML('getitnow', 'z#home');
+        //includeHTML('introduction', 'z#home');
+
+?><script type="text/javascript" >
+(function (e) {
+    e.fn.interpretFeed = function (t) {
+        var n = {
+            feedUri: "http://rss.cnn.com/rss/edition.rss",
+            maxItems: 5,
+            maxContentChars: 0,
+            showContent: true,
+            showPubDate: true,
+            generateItemHtml: 0
+        };
+        if (t) {
+            e.extend(n, t);
+        }
+        var r = e(this).attr("id");
+        var i;
+        //e("#" + r).empty().append('<div style="padding:3px;"><img src="images/loader.gif" /></div>');
+        e.ajax({
+            url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + n.maxItems + "&output=json&q=" + encodeURIComponent(n.feedUri) + "&hl=en&callback=?",
+            dataType: "json",
+            success: function (t) {
+                //e("#" + r).empty();
+                var html = "";
+                e.each(t.responseData.feed.entries, function (e, t) {
+                    html += '<li>' + n.generateItemHtml(n, t) + '</li>';
+                });
+                e("#" + r).append('<ol style="list-style-type: none;">' + html + "</ol>");
+            }
+        })
+    }
+})(jQuery)
+
+$(document).ready(function () {
+    $('#column1').interpretFeed({
+        feedUri: 'http://dengine.net/forums/rss.php?mode=news',
+        maxItems: 3,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block newspost"><header><h1><a href="' + t.link + '" title="Discuss &#39;' + t.title + '&#39; in the user forum">' + t.title + '</a></h1>';
+            if (n.showPubDate) {
+                var d = new Date(t.publishedDate);
+                var niceDate = $.datepicker.formatDate('MM d, yy', d);
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                /*if (n.DescCharacterLimit > 0 && t.content.length > n.DescCharacterLimit) {
+                    html += '<div>' + t.content.substr(0, n.DescCharacterLimit) + "...</div>";
+                }
+                else*/ {
+                    html += t.content;
+                }
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+
+    $('#column1').interpretFeed({
+        feedUri: 'http://dl.dropboxusercontent.com/u/11948701/builds/events.rss',
+        maxItems: 3,
+        showContent: true,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block buildevent"><header><h1><a href="' + t.link + '" title="Read more about ' + t.title + ' in the repository">' + t.title + '</a></h1>';
+            var d = new Date(t.publishedDate);
+            var niceDate = $.datepicker.formatDate('MM d, yy', d);
+            if (n.showPubDate) {
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                html += 'Build report for ' + t.title.toLowerCase() + ' started on ' + niceDate + '.';
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+
+    $('#column2').interpretFeed({
+        feedUri: 'http://dengine.net/forums/rss.php?f=24',
+        maxItems: 3,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block blogpost"><header><h1><a href="' + t.link + '" title="Discuss &#39;' + t.title + '&#39; in the user forum">' + t.title + '</a></h1>';
+            if (n.showPubDate) {
+                var d = new Date(t.publishedDate);
+                var niceDate = $.datepicker.formatDate('MM d, yy', d);
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                /*if (n.DescCharacterLimit > 0 && t.content.length > n.DescCharacterLimit) {
+                    html += '<div>' + t.content.substr(0, n.DescCharacterLimit) + "...</div>";
+                }
+                else*/ {
+                    html += t.content;
+                }
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+});
+
+</script>
+<div id="column1" class="twocolumn"></div>
+<div id="column2" class="twocolumn"></div>
+<div class="clear"></div>
+</div>
+<?php
 
-?></div><?php
+?><div><div id="downloadbox" class="asidebox"><?php
 
-?><div id="socialbookmarkbox" class="asidebox"><?php
-
-        includeHTML('socialbookmarks', 'z#home');
+        includeHTML('getitnow', 'z#home');
 
 ?></div><?php
 
-?><div id="contentbox"><?php
+?><div id="socialbookmarkbox" class="asidebox"><?php
 
-        includeHTML('introduction', 'z#home');
+       includeHTML('socialbookmarks', 'z#home');
 
-?></div><?php
+?></div></div><?php
 
         $fc->endPage();
     }
diff --git a/web/plugins/z#home/html/getitnow.html b/web/plugins/z#home/html/getitnow.html
index 199513f7ed..9df7a192b6 100644
--- a/web/plugins/z#home/html/getitnow.html
+++ b/web/plugins/z#home/html/getitnow.html
@@ -4,7 +4,7 @@
 <li><a href="/windows" class="platform_icon windows_icon" title="Doomsday for Windows"><span class="hidden">Download Doomsday Engine for Windows</span></a></li><li><a href="/mac_os" class="platform_icon macos_icon" title="Doomsday for Mac OS X"><span class="hidden">Download Doomsday Engine for Mac OS</span></a></li><li><a href="/ubuntu" class="platform_icon ubuntu_icon" title="Doomsday for Ubuntu"><span class="hidden">Download Doomsday Engine for Ubuntu</span></a></li><li><a href="/linux" class="platform_icon linux_icon" title="Doomsday for Linux"><span class="hidden">Download Doomsday Engine for Linux</span></a></li>
 </ul>
 </div>
-<div class="project_links">
+<div class="project_links hnav">
 <ul>
 <li><a href="/builds" title="Browse the Build Repository (automated builds)">Build Repository</a></li>
 <li><a href="http://sourceforge.net/tracker/?group_id=74815&amp;atid=542099" title="Deng project bug tracker: sourceforge.net">Report Bugs</a></li>
diff --git a/web/plugins/z#home/html/latestversion.html b/web/plugins/z#home/html/latestversion.html
index e7efd5d944..ef5fc7ccb7 100644
--- a/web/plugins/z#home/html/latestversion.html
+++ b/web/plugins/z#home/html/latestversion.html
@@ -1,4 +1,4 @@
-<div id="latestversion"><h1></h1></div>
+<div id="latestversion"></div>
 <script type="text/javascript">
 // We'll take the version info from the latest stable Doomsday for Windows package.
 task = new Array();
@@ -12,11 +12,12 @@
     url: task['request'],
     data: task['data'],
     success: function(json){
-        var element = document.getElementById('latestversion');
-        if(element)
+        var ob = $('#latestversion');
+        if(ob)
         {
-            element = element.firstChild; // Move to the heading.
-            element.textContent = json.version;
+            ob.empty();
+            var html = '<h1><a href="http://sourceforge.net/project/platformdownload.php?group_id=74815" title="Download Doomsday Engine ' + json.version + ' (latest stable) for my platform">' + json.version + '</a></h1>';
+            ob.append(html);
         }
     }
 });
diff --git a/web/plugins/z#home/html/socialbookmarks.html b/web/plugins/z#home/html/socialbookmarks.html
index 220a7ce608..7e16540f48 100644
--- a/web/plugins/z#home/html/socialbookmarks.html
+++ b/web/plugins/z#home/html/socialbookmarks.html
@@ -1,5 +1,8 @@
-<div class="socialbookmark_buttons">
-<!--<div id="fb-root"></div>-->
+<div class="socialbookmark_buttons hnav">
+<ul>
+<li><div><a href="https://twitter.com/dengteam" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @dengteam</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></li>
+<li><!--<div id="fb-root"></div>-->
 <script type="text/javascript">(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
@@ -7,22 +10,17 @@
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
-<div class="fb-like" data-href="http://www.facebook.com/doomsday.engine" data-send="false" data-width="268" data-show-faces="false" data-font="verdana"></div>
-</div>
-<div class="google-plusone">
+<div class="fb-like" data-href="http://www.facebook.com/doomsday.engine" data-send="false" data-width="300" data-show-faces="false" data-font="verdana"></div>
+</li>
+<li><div class="ohloh-button"><script type="text/javascript" src="http://www.ohloh.net/p/7201/widgets/project_users_logo.js"></script></div></li>
+<li><div class="google-plusone">
 <!-- Place this tag in your head or just before your close body tag -->
 <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
   {lang: 'en-GB', parsetags: 'explicit'}
 </script>
 <div class="g-plusone" data-size="medium" data-annotation="inline" data-href="http://dengine.net"></div>
 <script type="text/javascript">gapi.plusone.go();</script>
-</div>
-<div class="hnav">
-<ul>
-<li><div><a href="https://twitter.com/dengteam" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @dengteam</a>
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></li>
+</div></li>
 <li><div class="sf-button"><a href="http://sourceforge.net/projects/deng" title="Explore the Deng project at SourceForge"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=74815&amp;type=9" width="80" height="15" alt="Get Doomsday Engine at SourceForge.net. Fast, secure and Free Open Source software downloads" /></a></div></li>
 </ul>
-</div>
-<div class="ohloh-button"><script type="text/javascript" src="http://www.ohloh.net/p/7201/widgets/project_users_logo.js"></script></div>
 </div>
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
index e9b25c2d83..647b21e907 100644
--- a/web/style.css
+++ b/web/style.css
@@ -3,8 +3,8 @@ body {
     font-size: 100%;
     margin-top: 0;
     margin-bottom: 0;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 1.2em;
+    margin-right: 1.2em;
     color: #807970;
     background: #EDEFEF;
     background: #EDEFEF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmZiYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) repeat-x;
@@ -16,6 +16,10 @@ body {
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7ccc9', endColorstr='#edefef',GradientType=0 );
 }
 
+@media only screen and (max-width: 767px) {
+body { margin-left: 0px; margin-right: 0px; }
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     margin-top: .4em;
@@ -194,17 +198,17 @@ div.game-sprite {
 
 /* Horizontally aligned lists (used for navigation bars mainly). */
 
-div.hnav {
+.hnav {
     white-space: nowrap;
     text-align:center;
 }
 
-div.hnav ul {
+.hnav ul {
     margin-left: 0;
     padding-left: 0;
 }
 
-div.hnav li {
+.hnav li {
     display: inline-block;
 }
 
@@ -311,20 +315,6 @@ ol.jumplist li {
     text-align: left;
 }
 
-#main {
-    border: 2px solid #A6B9AA;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    -o-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -khtml-border-radius: 10px;
-    border-radius: 10px;
-    -moz-box-shadow: 0 0 20px 10px rgba(0, 0, 0, .1);
-    -webkit-box-shadow: 0 0 20px 10px rgba(0, 0, 0, .1);
-    -o-box-shadow: 0 0 20px 10px rgba(0, 0, 0, .1);
-    box-shadow: 0 0 20px 10px rgba(0, 0, 0, .1);
-}
-
 #maininner {
     width: 100%;
     position: relative;
@@ -353,20 +343,6 @@ ol.jumplist li {
     -webkit-box-shadow: 0 16px 8px 0 rgb(199, 220, 215) inset;
     -o-box-shadow: 0 16px 8px 0 rgb(199, 220, 215) inset;
     box-shadow: 0 16px 8px 0 rgb(199, 220, 215) inset;
-
-    -moz-border-top-left-radius: 8px;
-    -webkit-border-top-left-radius: 8px;
-    -o-border-top-left-radius: 8px;
-    -ms-border-top-left-radius: 8px;
-    -khtml-border-top-left-radius: 8px;
-    border-top-left-radius: 8px;
-
-    -moz-border-top-right-radius: 8px;
-    -webkit-border-top-right-radius: 8px;
-    -o-border-top-right-radius: 8px;
-    -ms-border-top-right-radius: 8px;
-    -khtml-border-top-right-radius: 8px;
-    border-top-right-radius: 8px;
 }
 
 #menu ul {
@@ -410,8 +386,8 @@ ol.jumplist li {
     text-shadow: #A7B6AC 0px -1px 0px;
     padding-top: 8px;
     padding-bottom: 8px;
-    padding-left: 5px;
-    padding-right: 4px;
+    padding-left: .6em;
+    padding-right: .6em;
     color: white;
 }
 
@@ -422,18 +398,6 @@ ol.jumplist li {
     padding-top: 7px;
 }
 
-#menu li.logo a {
-    border: 0;
-}
-
-#menu a.paddle_left, span.paddle_left_select {
-    border-left: solid 2px #A6B9AA;
-}
-
-#menu a.paddle_right, span.paddle_right_select {
-    border-right: solid 2px #A6B9AA;
-}
-
 #menu span.paddle_left_select,
       span.paddle_right_select,
       a[class = "paddle_left"]:hover,
@@ -453,19 +417,6 @@ ol.jumplist li {
     margin: 0;
     padding: 0;
     border: 0;
-    -moz-border-top-left-radius: 10px;
-    -webkit-border-top-left-radius: 10px;
-    -o-border-top-left-radius: 10px;
-    -ms-border-top-left-radius: 10px;
-    -khtml-border-top-left-radius: 10px;
-    border-top-left-radius: 10px;
-
-    -moz-border-top-right-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -o-border-top-right-radius: 10px;
-    -ms-border-top-right-radius: 10px;
-    -khtml-border-top-right-radius: 10px;
-    border-top-right-radius: 10px;
 
     -moz-box-shadow: 0 4px 6px 0 rgba(186, 196, 189, 260) inset;
     -webkit-box-shadow: 0 4px 6px 0 rgba(186, 196, 189, 260) inset;
@@ -491,19 +442,6 @@ ol.jumplist li {
     height: 300px;
     padding: 0;
     margin: 0;
-    -moz-border-top-left-radius: 10px;
-    -webkit-border-top-left-radius: 10px;
-    -o-border-top-left-radius: 10px;
-    -ms-border-top-left-radius: 10px;
-    -khtml-border-top-left-radius: 10px;
-    border-top-left-radius: 10px;
-
-    -moz-border-top-right-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -o-border-top-right-radius: 10px;
-    -ms-border-top-right-radius: 10px;
-    -khtml-border-top-right-radius: 10px;
-    border-top-right-radius: 10px;
 }
 
 #panorama {
@@ -520,20 +458,6 @@ ol.jumplist li {
     -webkit-box-shadow: 0 -20px 10px 0 rgba(250, 250, 250, 1) inset;
     -o-box-shadow: 0 -20px 10px 0 rgba(250, 250, 250, 1) inset;
     box-shadow: 0 -20px 10px 0 rgba(250, 250, 250, 1) inset;
-
-    -moz-border-top-left-radius: 10px;
-    -webkit-border-top-left-radius: 10px;
-    -o-border-top-left-radius: 10px;
-    -ms-border-top-left-radius: 10px;
-    -khtml-border-top-left-radius: 10px;
-    border-top-left-radius: 10px;
-
-    -moz-border-top-right-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -o-border-top-right-radius: 10px;
-    -ms-border-top-right-radius: 10px;
-    -khtml-border-top-right-radius: 10px;
-    border-top-right-radius: 10px;
 }
 
 /*------------------- Bottom Panel -----------------*/
@@ -547,19 +471,7 @@ ol.jumplist li {
     margin-bottom: 0;
     width: 100%;
     background: #FAFAFA;
-    -moz-border-bottom-left-radius: 10px;
-    -webkit-border-bottom-left-radius: 10px;
-    -o-border-bottom-left-radius: 10px;
-    -ms-border-bottom-left-radius: 10px;
-    -khtml-border-bottom-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-
-    -moz-border-bottom-right-radius: 10px;
-    -webkit-border-bottom-right-radius: 10px;
-    -o-border-bottom-right-radius: 10px;
-    -ms-border-bottom-right-radius: 10px;
-    -khtml-border-bottom-right-radius: 10px;
-    border-bottom-right-radius: 10px;
+    text-align: center;
 }
 
 #pageheading,
@@ -590,31 +502,31 @@ ol.jumplist li {
 }
 
 #latestversion h1 {
-    margin-right: .25em;
+    margin-right: .4em;
+}
+
+#latestversion a {
+    color: white;
+}
+
+#latestversion a:hover {
+    color: #FFCB0F;
 }
 
 #contentbox, #contentbox2 {
-    padding-left: .6em;
-    padding-right: .4em;
-    padding-top: .2em;
-    padding-bottom: .6em;
-    -moz-border-bottom-left-radius: 10px;
-    -webkit-border-bottom-left-radius: 10px;
-    -o-border-bottom-left-radius: 10px;
-    -ms-border-bottom-left-radius: 10px;
-    -khtml-border-bottom-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-
-    -moz-border-bottom-right-radius: 10px;
-    -webkit-border-bottom-right-radius: 10px;
-    -o-border-bottom-right-radius: 10px;
-    -ms-border-bottom-right-radius: 10px;
-    -khtml-border-bottom-right-radius: 10px;
-    border-bottom-right-radius: 10px;
+    padding: .6em;
+    top: -1.3em;
+    position: relative;
 
+    text-align: left;
     line-height: 160%;
 }
 
+div.clear {
+    clear: both;
+    width: 100%;
+}
+
 /*----------------------- Footer ----------------------*/
 
 #footer {
@@ -642,54 +554,27 @@ p.legal a {
 
 /*---------------------- NewsFeed ---------------------*/
 
-#projectnews {
-    position: relative;
-    top: -275px; /* minus (image height - divider height) */
-    min-width: 201px;
-    padding-left: 1.3em;
-    padding-top: .5em;
+.twocolumn {
+    width: 50%;
     float: left;
-    text-align: left;
-    color: #FFCB0F;
-    font-size: xx-small;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-    min-height: 139px;
-    background: url(http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/shadow.png) no-repeat;
-}
-
-#projectnews ul {
-    padding: 0;
-    margin-top: .4em;
-}
-
-#projectnews ul li {
-    list-style-type: none;
-    min-height: 1.6em;
 }
 
-#projectnews ul li.feed-error {
-    color: grey;
+.twocolumn ol {
+    padding:0;
+    margin:0;
 }
 
-#projectnews a {
-    color: #FFCB0F;
+@media only screen and (max-width: 767px) {
+.twocolumn {width: 100%; float: left; }
+.twocolumn:nth-child(n+1) { clear: left; }
 }
 
-#projectnews .new-label {
-    color: white;
-    font-weight: bold;
+.block {
+    padding: .6em;
 }
 
-#projectnews ul li a:hover, #projectnews ul li a:visited:hover {
-    color: #ffffff;
-    font-size: x-small;
-}
-
-.projectnews-label {
-    color: white;
-    font-weight: bold;
-    min-height: 139px;
+.block header {
+    margin-bottom: .6em;
 }
 
 /*-------------------- GameServers -------------------*/
@@ -715,8 +600,6 @@ p.legal a {
     font-size: xx-small;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     min-height: 139px;
-    background: url(http://dl.dropboxusercontent.com/u/11948701/dengine.net/images/shadow2.png) no-repeat;
-    background-position: top right;
 }
 
 #servers ul {
@@ -752,34 +635,15 @@ p.legal a {
 
 /*----------------- Get It Now Panel ---------------*/
 
-.asideboxgroup {
-    float: right;
-}
-
 .asidebox {
-    width: 16.5em;
-    background: #F6F9F8;
-    padding: 0.8em;
     display: block;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     margin:.8em;
-    border: 2px solid #E0EBE7;
-
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    -o-border-radius: 10px;
-    -ms-border-radius: 10px;
-    -khtml-border-radius: 10px;
-    border-radius: 10px;
-
-    -moz-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1);
-    -webkit-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1);
-    -o-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1);
-    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1);
 }
 
 #downloadbox, #socialbookmarkbox {
     text-align: center;
+    margin-bottom: 2.4em;
 }
 
 #downloadbox div.hnav ul {
@@ -788,7 +652,8 @@ p.legal a {
 
 #downloadbox div.hnav ul li, div.platform_buttons ul li {
     padding: 0;
-    margin: 0;
+    margin-left: .6em;
+    margin-right: .6em;
     list-style-type: none;
 }
 
@@ -827,12 +692,6 @@ p.legal a {
     background-position: 0 0;
 }
 
-#downloadbox div.project_links {
-    margin-top: 1.8em;
-    padding-left: 1.5em;
-    text-align: left;
-}
-
 .getitnow-label {
     font-size: x-large;
     text-align:center;
@@ -847,12 +706,16 @@ p.legal a {
     font-size: medium;
 }
 
-#socialbookmarkbox div.hnav ul {
+#socialbookmarkbox .hnav {
+    white-space: normal;
+}
+
+#socialbookmarkbox .hnav ul {
     margin-top: .4em;
     margin-bottom: 0;
 }
 
-#socialbookmarkbox div.hnav ul li {
+#socialbookmarkbox .hnav ul li {
     padding-left: .2em;
     padding-right: .2em;
     margin-bottom: 0;
@@ -870,19 +733,16 @@ p.legal a {
     margin-right: -14px;
 }
 
-.fb-like {
-    padding-left: .1em;
-}
-
 .google-plusone {
     margin-top: 1em;
-    padding-left: 1em;
+    width: 200px;
 }
 
 /*-------------------- Addons ---------------------*/
 
 #addons {
     padding:.5em 1em;
+    text-align:left;
 }
 
 .addons_list {
@@ -953,6 +813,7 @@ p.legal a {
 /* Panel */
 #builds {
     padding:.5em 1em;
+    text-align:left;
 }
 
 /* Stream navigation widget */
@@ -1367,6 +1228,7 @@ span.metadata {
 
 #masterbrowser {
     padding:.5em 1em;
+    text-align:left;
 }
 
 #masterbrowser #pubDate, #summary {