Default theme: Add basic support for IE8

Forms still look broken and I definitly will *NOT* fix that. We don't support IE8 officially!

+ some minor improvements

themes/default/index.twig

@@ -17,16 +17,16 @@
 </head>
 <body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}>
 
-    <header>
+    <div id="header">
         <div class="container">
-            <a id="page-menu-toggle" title="Toggle Menu" role="button" aria-controls="page-menu" aria-expanded="false" tabindex="1">
+            <a id="nav-toggle" title="Toggle Menu" role="button" aria-controls="nav" aria-expanded="false" tabindex="1">
                 <span class="icon-menu" aria-hidden="true"></span>
                 <span class="sr-only">Toggle Menu</span>
             </a>
             <h1>
                 <a href="{{ "index"|link }}">{{ site_title }}</a>
             </h1>
-            <nav id="page-menu" role="region" tabindex="-1">
+            <div id="nav" role="region" tabindex="-1">
                 <ul>
                     {% for page in pages if page.title %}
                         <li{% if page.id == current_page.id %} class="active"{% endif %}>
@@ -34,17 +34,17 @@
                         </li>
                     {% endfor %}
                 </ul>
-            </nav>
+            </div>
         </div>
-    </header>
+    </div>
 
-    <main>
+    <div id="main">
         <div class="container">
             {{ content }}
         </div>
-    </main>
+    </div>
 
-    <footer>
+    <div id="footer">
         <div class="container">
             <div class="social">
                 {% for social in meta.social %}
@@ -60,7 +60,7 @@
                 Released under the <a href="https://github.com/picocms/Pico/blob/master/LICENSE.md">MIT license</a>.
             </p>
         </div>
-    </footer>
+    </div>
 
     <script src="{{ theme_url }}/js/modernizr-3.3.1-custom.min.js" type="text/javascript"></script>
     <script src="{{ theme_url }}/js/utils.js" type="text/javascript"></script>

themes/default/js/pico.js

@@ -15,19 +15,20 @@ function main()
     document.documentElement.className = 'js';
 
     // wrap tables
-    utils.forEach(document.querySelectorAll('main table'), function (_, table) {
-        if (!/\btable-responsive\b/.test(table.parentElement.className)) {
+    var tables = document.querySelectorAll('#main > .container > table');
+    for (var i = 0; i < tables.length; i++) {
+        if (!/\btable-responsive\b/.test(tables[i].parentElement.className)) {
             var tableWrapper = document.createElement('div');
             tableWrapper.className = 'table-responsive';
 
-            table.parentElement.insertBefore(tableWrapper, table);
-            tableWrapper.appendChild(table);
+            tables[i].parentElement.insertBefore(tableWrapper, tables[i]);
+            tableWrapper.appendChild(tables[i]);
         }
-    });
+    }
 
     // responsive menu
-    var menu = document.getElementById('page-menu'),
-        menuToggle = document.getElementById('page-menu-toggle'),
+    var menu = document.getElementById('nav'),
+        menuToggle = document.getElementById('nav-toggle'),
         toggleMenuEvent = function (event) {
             if (event.type === 'keydown') {
                 if ((event.keyCode != 13) && (event.keyCode != 32)) {

themes/default/js/utils.js

@@ -11,27 +11,6 @@
 
 utils = {};
 
-/**
- * Iterates through an iterable object (e.g. plain objects, arrays, NodeList)
- *
- * @param  object   object   the object to iterate through
- * @param  function callback function to call on every item; the key is passed
- *     as first, the value as second parameter; the callback may return FALSE
- *     to stop the iteration
- * @return void
- */
-utils.forEach = function (object, callback)
-{
-    var i = 0,
-        keys = Object.keys(object),
-        length = keys.length;
-    for (; i < length; i++) {
-        if (callback(keys[i], object[keys[i]]) === false) {
-            return;
-        }
-    }
-};
-
 /**
  * Checks whether the client's browser is able to slide elements or not
  *

themes/default/style.css

@@ -21,10 +21,6 @@
     padding: 0;
 }
 
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-    display:block
-}
-
 .hidden { display: none !important; }
 .sr-only {
     position: absolute;
@@ -48,10 +44,10 @@ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, s
 html, body { height: 100%; }
 
 body { display: flex; flex-direction: column; }
-main { flex: 1 0 auto; }
-header, footer { flex: 0 0 auto; }
+#main { flex: 1 0 auto; }
+#header, #footer { flex: 0 0 auto; }
 
-main {
+#main {
     padding: 5em 0 4em;
 }
 
@@ -63,93 +59,98 @@ main {
 
 .widescreen .container { max-width: 72em; }
 
-main .container {
-    /* very ugly, avoid this whenever possible! */
-    overflow-x: auto;
-}
+/* very ugly overflow fix, avoid this whenever possible! */
+#main .container { overflow-x: auto; }
 
 /*** BASIC LAYOUT: HEADER ***/
 
-header { background: #2EAE9B; }
+#header { background: #2EAE9B; }
 
-header h1 {
+#header h1 {
     float: left;
     font-size: 2rem;
     margin: 0;
     padding: 1.5em 1em 1.5em 0;
 }
-header h1 a, header h1 a:hover { color: #fff; }
+#header h1 a, #header h1 a:hover { color: #fff; }
 
-header nav {
+#nav {
     text-align: right;
     padding: 3em 0;
 }
-header nav ul {
+#nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
-header nav ul li {
+#nav ul li {
     display: inline-block;
     margin-left: 1em;
     padding: 0;
     font-weight: bold;
 }
 
-header nav a, #page-menu-toggle { color: #afe1da; }
-header nav .active a, header nav a:hover, #page-menu-toggle:hover { color: #fff; }
+#nav a, #nav-toggle { color: #afe1da; }
+#nav .active a, #nav a:hover, #nav-toggle:hover { color: #fff; }
 
-#page-menu-toggle { display: none; }
+#nav-toggle { display: none; }
+
+/* IE8 + IE9 clearfix */
+#header > .container:after {
+    content: '';
+    display: block;
+    clear: both;
+}
 
 /*** BASIC LAYOUT: FOOTER ***/
 
-footer {
+#footer {
     background: #707070;
     color: #C0C0C0;
 }
 
-footer a { color: #ddd; }
-footer a:hover { color: #fff; }
+#footer a { color: #ddd; }
+#footer a:hover { color: #fff; }
 
-footer p {
+#footer p {
     margin: 0;
     padding: 3em 0;
 }
 
-footer .social {
+#footer .social {
     float: right;
-    padding: 1.5em 0 0.5em 1em;
+    padding: 1.5em 0 1.5em 1em;
     font-size: 2rem;
 }
 
 /*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/
 
 @media (max-width: 767px) {
-    main { padding: 2em 0 1em; }
+    #main { padding: 2em 0 1em; }
 
-    header h1 {
+    #header h1 {
         float: none;
         padding: 0.5em 0;
     }
 
-    header nav {
+    #nav {
         clear: right;
         padding: 0;
     }
-    header nav ul {
+    #nav ul {
         padding-bottom: 1em;
     }
-    header nav ul li {
+    #nav ul li {
         display: block;
         margin-left: 0;
         text-align: center;
     }
-    header nav ul li a {
+    #nav ul li a {
         display: block;
         padding: 0.5em 0;
     }
 
-    .js #page-menu-toggle {
+    .js #nav-toggle {
         display: block;
         float: right;
         width: 2em;
@@ -159,13 +160,13 @@ footer .social {
         text-align: center;
         cursor: pointer;
     }
-    .js #page-menu-toggle > * { vertical-align: middle;  }
+    .js #nav-toggle > * { vertical-align: middle;  }
 
-    footer p { padding: 1em 0; }
-    footer .social { padding: 0.5em 0 0.5em 1em; }
+    #footer p { padding: 1em 0; }
+    #footer .social { padding: 0.5em 0 0.5em 1em; }
 }
 
-/*** TEXT ***/
+/*** TYPOGRAPHY ***/
 
 html { font-size: 16px; }
 
@@ -245,6 +246,7 @@ tbody tr:last-child td:last-child {                            border-bottom-rig
 table thead + tbody tr:first-child td {                        border-radius: 0 !important; }
 
 .table-responsive { overflow-x: auto; }
+.table-responsive > table { margin-bottom: 0; }
 
 /*** LISTS ***/
 
@@ -299,11 +301,6 @@ blockquote {
 
 label, fieldset legend { font-weight: bold; }
 
-input::-moz-focus-inner, button::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
 input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
     border: solid 1px #ccc;
     border-radius: 0.3em;
@@ -352,3 +349,9 @@ fieldset label:last-child, fieldset input:last-child, fieldset button:last-child
 fieldset select:last-child, fieldset textarea:last-child {
     margin-right: 0;
 }
+
+/* Firefox input size fix */
+input::-moz-focus-inner, button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}