Rework the layout for small screens.

From the live site: local Noto Sans, a flexible layout up to 1000px, and
a slide-out sidebar menu on small screens. Remove the unused Genericons
font and logo images.

index.php

@@ -3,13 +3,13 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>x.x.x</title>
     <link rel="icon" href="favicon.png" />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="stylesheet" type="text/css" href="style.css" />
-    <link rel="alternate" type="application/rss+xml" title="xxx.org.za RSS feed" href="/feed" />
     <script type="text/javascript" src="utilities.js"></script>
+    <link rel="alternate" type="application/rss+xml" title="xxx.org.za RSS feed" href="/feed" />
   </head>
 <? 
   flush();
@@ -22,10 +22,10 @@
 <body>
 <div id="container">
 <? include_once("./sidebar.inc.php"); ?>
-<div id="main">
+<main id="main">
 <div id="maintext">
 
-<div class="logo"><img src="graphics/xxx.png" alt="x.x.x" /></div>
+<h1 class="logo">x&middot;x&middot;x</h1>
 
 <p>
 Welcome to <span class="xxx">x.x.x</span>. No, not hardcore pornography. Nor is it
@@ -41,10 +41,10 @@ encouraged!
 echo display_stories();
 
 ?>
-</div> <!-- maintext  -->
-</div> <!-- main      -->
+</div> <!-- .maintext  -->
+</main> <!-- .main      -->
+</div> <!-- .container -->
 <? include_once("./bottombar.inc.php"); ?>
-</div> <!-- container -->
 
 <? open_db('close'); ?>