diff mbox

[ovs-dev,3/4] Make Open vSwitch mobile-compatible

Message ID 20161213175724.17447-4-stephen@that.guru
State Accepted
Headers show

Commit Message

Stephen Finucane Dec. 13, 2016, 5:57 p.m. UTC
There are a couple of changes needed:

- Use a responsive-style grid
- Remove unnecessary <br> tags
- Use semantic HTML5 tags
- Reorder CSS into logical sections
- Scroll on overflow of pre tags

Signed-off-by: Stephen Finucane <stephen@that.guru>
---
 _includes/footer.html           |   4 +-
 _includes/header.html           |  38 +++--
 _includes/mailinglist-link.html |  22 ++-
 _includes/side-widgets.html     | 103 +++++++-----
 _layouts/page.html              |  14 +-
 _layouts/skel.html              |  29 ++--
 assets/style.css                | 346 ++++++++++++++++++++++++++--------------
 development/index.html          |  30 ++--
 faq/index.html                  |   2 +-
 index.html                      |  32 ++--
 mlists/index.html               |   6 +-
 11 files changed, 392 insertions(+), 234 deletions(-)
diff mbox

Patch

diff --git a/_includes/footer.html b/_includes/footer.html
index 7261e42..56e750e 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,4 +1,4 @@ 
-<div class="footer">
+<footer role="contentinfo">
   <div class="cp--footer collaborative-projects">
     <div class="gray-diagonal">
       <div class="container">
@@ -8,4 +8,4 @@ 
       </div>
     </div>
   </div>
-</div>
+</footer>
diff --git a/_includes/header.html b/_includes/header.html
index 3125fec..612ec54 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,21 +1,25 @@ 
-<div id="header">
-  <header>
-    <div class="cp--header collaborative-projects">
-      <div class="gray-diagonal">
-        <div class="container">
-          <a id="cp--logo" href="http://collabprojects.linuxfoundation.org">
-            <img src="{{site.url}}/assets/lf/lfcollabprojects_logo_gray.png" alt="Linux Foundation Collaborative Projects" />
-          </a>
-        </div>
+<header role="banner">
+  <div class="cp--header collaborative-projects">
+    <div class="gray-diagonal">
+      <div class="container">
+        <a id="cp--logo" href="http://collabprojects.linuxfoundation.org">
+          <img src="{{site.url}}/assets/lf/lfcollabprojects_logo_gray.png" alt="Linux Foundation Collaborative Projects"/>
+        </a>
       </div>
     </div>
-    <div id="logo">
+  </div>
+  <div id="logo">
+    <div class="container">
       <a href="{{site.url}}/"><img src="{{site.url}}/assets/vswitch.png" alt="Open vSwitch" height="100" width="154"></a>
     </div>
-    <nav>
-      <ul class="menu">
-        {% include menulist.html menu=site.data.nav url=site.url %}
-      </ul>
-    </nav>
-  </header>
-</div>
+  </div>
+  <div class="subnav">
+    <div class="container">
+      <nav>
+        <ul class="menu">
+          {% include menulist.html menu=site.data.nav url=site.url %}
+        </ul>
+      </nav>
+    </div>
+  </div>
+</header>
diff --git a/_includes/mailinglist-link.html b/_includes/mailinglist-link.html
index 1f84821..981c848 100644
--- a/_includes/mailinglist-link.html
+++ b/_includes/mailinglist-link.html
@@ -1,6 +1,18 @@ 
 <!--TODO mailinglist links-->
-<a href="https://mail.openvswitch.org/pipermail/ovs-announce/">announce</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-announce">subscribe</a> )</span><br>
-<a href="https://mail.openvswitch.org/pipermail/ovs-discuss/">discuss</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-discuss">subscribe</a> )</span><br>
-<a href="https://mail.openvswitch.org/pipermail/ovs-dev/">dev</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-dev">subscribe</a> )</span><br>
-<a href="https://mail.openvswitch.org/pipermail/ovs-git/">git</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-git">subscribe</a> )</span><br>
-<a href="https://mail.openvswitch.org/pipermail/ovs-build/">build</a>  <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-build">subscribe</a> )</span><br>
+<ul>
+  <li>
+    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/">announce</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-announce">subscribe</a> )</span>
+  </li>
+  <li>
+    <a href="https://mail.openvswitch.org/pipermail/ovs-discuss/">discuss</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-discuss">subscribe</a> )</span>
+  </li>
+  <li>
+    <a href="https://mail.openvswitch.org/pipermail/ovs-dev/">dev</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-dev">subscribe</a> )</span>
+  </li>
+  <li>
+    <a href="https://mail.openvswitch.org/pipermail/ovs-git/">git</a> <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-git">subscribe</a> )</span>
+  </li>
+  <li>
+    <a href="https://mail.openvswitch.org/pipermail/ovs-build/">build</a>  <span style="font-size:x-small;"> ( <a href="https://mail.openvswitch.org/mailman/listinfo/ovs-build">subscribe</a> )</span>
+  </li>
+</ul>
diff --git a/_includes/side-widgets.html b/_includes/side-widgets.html
index 8db5c69..4c35c16 100644
--- a/_includes/side-widgets.html
+++ b/_includes/side-widgets.html
@@ -2,50 +2,73 @@ 
   <div class="widget-title">
     Updates
   </div>
-  <div class="textwidget">
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-November/000093.html>Nov 02 2016: Open vSwitch 2.6.1 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-November/000092.html>Nov 01 2016: Final Reminder for OVS Fall 2016 Conference</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-September/000087.html>Sep 28 2016: Open vSwitch 2.6.0 and 2.5.1 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-September/000086.html>Sep 19 2016: Registration Open for OVS Fall 2016 Conference</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-August/000085.html>Aug 31 2016: Open vSwitch Fall 2016 Conference: Call for  Participation</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-March/000083.html>Mar 29 2016: Open vSwitch 2.4.1 and 2.3.3 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-March/000082.html>Mar 29 2016: CVE-2016-2074: MPLS buffer overflow vulnerabilities in Open vSwitch</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-February/000081.html>Feb 27 2016: Open vSwitch 2.5.0 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-August/000078.html>Aug 21 2015: Open vSwitch 2.4.0 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-August/000076.html>Aug 05 2015: Open vSwitch Fall 2015 Conference: Call for Participation</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-June/000075.html>Jun 18 2015: Open vSwitch 2.3.2 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2014-December/000071.html>Dec 03 2014: Open vSwitch 2.3.1 Available</a>
-    <br>
-    <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2014-August/000067.html>Aug 14 2014: Open vSwitch 2.3.0, 2.1.3, and 2.0.2 Available</a>
-    <br>
-    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-May/000066.html">May 15 2014: OpenStack: "Open vSwitch and the Intelligent Edge" Slides</a>
-    <br>
-    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-May/000065.html">May 01 2014: Open vSwitch 2.1.2 Available</a>
-    <br><a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-April/000064.html">Apr 29 2014: Open vSwitch 2.1.1 Available</a>
-    <br>
-    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-April/000063.html">Apr 8 2014: Open vSwitch repository moves to Github</a>
-    <br>
-    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-March/000061.html">Mar 19 2014: Open vSwitch 2.1.0 Available</a>
-    <br>
-    <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-March/000060.html">Mar 04 2014: Announcing an Open vSwitch Hackathon March 26-27</a>
+  <div class="widget-body">
+    <ul>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-November/000093.html>Nov 02 2016: Open vSwitch 2.6.1 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-November/000092.html>Nov 01 2016: Final Reminder for OVS Fall 2016 Conference</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-September/000087.html>Sep 28 2016: Open vSwitch 2.6.0 and 2.5.1 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-September/000086.html>Sep 19 2016: Registration Open for OVS Fall 2016 Conference</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-August/000085.html>Aug 31 2016: Open vSwitch Fall 2016 Conference: Call for  Participation</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-March/000083.html>Mar 29 2016: Open vSwitch 2.4.1 and 2.3.3 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-March/000082.html>Mar 29 2016: CVE-2016-2074: MPLS buffer overflow vulnerabilities in Open vSwitch</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2016-February/000081.html>Feb 27 2016: Open vSwitch 2.5.0 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-August/000078.html>Aug 21 2015: Open vSwitch 2.4.0 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-August/000076.html>Aug 05 2015: Open vSwitch Fall 2015 Conference: Call for Participation</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2015-June/000075.html>Jun 18 2015: Open vSwitch 2.3.2 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2014-December/000071.html>Dec 03 2014: Open vSwitch 2.3.1 Available</a>
+      </li>
+      <li>
+        <a href=https://mail.openvswitch.org/pipermail/ovs-announce/2014-August/000067.html>Aug 14 2014: Open vSwitch 2.3.0, 2.1.3, and 2.0.2 Available</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-May/000066.html">May 15 2014: OpenStack: "Open vSwitch and the Intelligent Edge" Slides</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-May/000065.html">May 01 2014: Open vSwitch 2.1.2 Available</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-April/000064.html">Apr 29 2014: Open vSwitch 2.1.1 Available</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-April/000063.html">Apr 8 2014: Open vSwitch repository moves to Github</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-March/000061.html">Mar 19 2014: Open vSwitch 2.1.0 Available</a>
+      </li>
+      <li>
+        <a href="https://mail.openvswitch.org/pipermail/ovs-announce/2014-March/000060.html">Mar 04 2014: Announcing an Open vSwitch Hackathon March 26-27</a>
+      </li>
+    </ul>
   </div>
 </div>
 <div class="widget">
   <div class="widget-title">
     Recent Releases
   </div>
-  <div class="textwidget">
+  <div class="widget-body">
     Current release: <a href="http://openvswitch.org/releases/openvswitch-2.6.1.tar.gz">2.6.1</a><br>
     Current LTS series: <a href="http://openvswitch.org/releases/openvswitch-2.5.1.tar.gz">2.5.1</a><br>
   </div>
@@ -54,7 +77,7 @@ 
   <div class="widget-title">
     Mailing List Archives
   </div>
-  <div class="textwidget">
+  <div class="widget-body">
     {% include mailinglist-link.html %}
   </div>
 </div>
@@ -62,7 +85,7 @@ 
   <div class="widget-title">
     IRC
   </div>
-  <div class="textwidget">
+  <div class="widget-body">
     Visit #openvswitch on irc.<a href="http://freenode.net">freenode.net</a>.
   </div>
 </div>
diff --git a/_layouts/page.html b/_layouts/page.html
index ca0c19a..e032a27 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,10 +1,12 @@ 
 ---
 layout: skel
 ---
-<div class="main-content">
-  <h1>{{page.title}}</h1>
-  {{ content }}
-</div>
-<div class="side-widgets">
-  {% include side-widgets.html %}
+<div class="section group">
+  <div class="col-2-3">
+    <h1>{{page.title}}</h1>
+    {{ content }}
+  </div>
+  <div class="col-1-3">
+    {% include side-widgets.html %}
+  </div>
 </div>
diff --git a/_layouts/skel.html b/_layouts/skel.html
index 2a8e0bf..53c513d 100644
--- a/_layouts/skel.html
+++ b/_layouts/skel.html
@@ -1,16 +1,19 @@ 
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="{{site.url}}/assets/style.css">
-    <link rel="shortcut icon" href="{{site.url}}/assets/vswitch.ico">
-    <title>{{ page.title }}</title>
-  </head>
-  <body {% if page.body_class %}class="{{ page.body_class }}"{% endif %}>
-    {% include header.html %}
-    <div class="page">
-      {{ content }}
-    </div>
-    {% include footer.html %}
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/assets/style.css">
+  <link rel="shortcut icon" href="/assets/vswitch.ico">
+  <title>{{ page.title }}</title>
+</head>
+<body {% if page.body_class %}class="{{ page.body_class }}"{% endif %}>
+{% include header.html %}
+<main id="content" role="main">
+<div class="container">
+{{ content }}
+</div>
+</main>
+{% include footer.html %}
+</body>
 </html>
diff --git a/assets/style.css b/assets/style.css
index d4b31d6..36af48c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,219 +1,328 @@ 
 ---
 ---
+
+/* General */
+
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
 div {
     vertical-align:top;
 }
+
+h1::after {
+    width: 100px;
+    height: 6px;
+    background-color: #4f8a49;
+    content: '';
+    margin-top: 20px;
+    margin-bottom: 20px;
+    display: block;
+}
+
 p {
     vertical-align:baseline;
 }
+
 a {
     text-decoration: none;
     font-weight: 700;
 }
+
+img {
+    max-width:100%;
+    max-height:100%;
+}
+
+pre {
+    overflow: auto;
+}
+
 a:hover {
     color:#444;
 }
+
 a:visited {
     color:#447099;
 }
+
 a:link {
     color:#447099;
 }
 
-
 body {
     font-family: Arial,Helvetica,sans-serif;
     font-size: 14px;
     line-height: 1.5em;
-    color: #444;
-    background-color:#f5f5f5;
+    margin: 0;
 }
 
-.widget-title {
-    background-color:#f5f5f5;
-    font-weight:bold;
-    text-align:center;
-    padding-top:3px;
-    padding-bottom:3px;
-}
-.widget {
-    margin:8px;
-    border:1px solid #f5f5f5;
-}
-.textwidget {
-    padding:2px;
+.container {
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
-.page {
-    background-color:#fff;
-    padding: 20px;
+@media only screen and (min-width: 768px) {
+    .container {
+        width: 750px;
+    }
 }
 
-.footer {
-    background: #404042;
-    overflow:auto;
-    padding:10px;
-}
-.footer-piece {
-    display:inline-block;
-}
-.left {
-    text-align:left;
-    float:left;
-}
-.center {
-    text-align:center;
-    margin:0px auto;
-}
-.right {
-    text-align:right;
-    float:right;
+@media only screen and (min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
 }
 
-#wholepage {
-    width:980px;
-    overflow-x:hidden;
-    margin:0px auto;
-}
+/* Navbar */
 
-.mainpage-top {
-    margin-bottom: 20px;
-}
-.main-content {
-    display:inline-block;
-    width:620px;
-    vertical-align:top;
-}
-.main-content-no-side-widget {
-    display:inline-block;
-    width:940px;
-    vertical-align:top;
-}
-.side-widgets {
-    margin-top:36px;
-    display:inline-block;
-    width:300px;
-    vertical-align:top;
-}
-.halfcolumn {
-    display:inline-block;
-    width:460px;
-}
-.columncontainer {
-    white-space: nowrap;
-}
-.onethirdcolumn {
-    display:inline-block;
-    white-space: normal;
-    width:292px;
-}
-.featured-button {
-    background: url('{{site.url}}/assets/featured-button.png') no-repeat scroll 0px 0px transparent;
-    cursor: pointer;
-    color: #444;
-    height: 61px;
-    width: 230px;
-    text-align: center;
-    text-shadow: 0px 1px #FFF;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 18px;
-    display: table-cell;
-    vertical-align: middle;
-}
-.featured-button:hover {
-    background-position: 0px -61px;
-}
-.size-full {
-    max-width:98%;
-    height: auto;
-}
-.codeclass {
-    font-family:monospace;
-}
-/*Navbar*/
-.menu {
-    background-color: #23241F;
-    margin:0px;
+.subnav {
+    background-color: #23241f;
+    margin: 0px;
 }
+
 .menu a {
     color: #FFF;
     font-size: 12px;
 }
+
 .menu div {
     margin:0px;
     padding: 13px 10px;
     padding-left: 10px;
 }
+
 .menu li {
     background-color: #23241F;
 }
+
 .menu li:hover {
     background-color: #333;
 }
+
 .menu li>ul>li {
     background-color: #888;
 }
+
 .menu li>ul>li:hover {
     background-color: #999;
 }
 
-.footer-links {
-  list-style: none;
-}
-
-.footer-links li {
-  display: inline-block;
-}
-
-.footer-links li+li {
-  margin-left: 10px;
-}
-
 .menu {
     width: 100%;
     padding-left:0px;
 }
+
 .menu li {
     list-style: none;
     text-align: left;
     display: inline-block;
     white-space: nowrap;
 }
+
 .menu li>ul {
     position: absolute;
     display: none;
 }
+
 .menu li ul {
     padding-left:0;
 }
+
 .menu li:hover>ul {
     display: block;
 }
+
 .menu li>ul>li {
     display: block;
 }
+
 .menu li>ul>li {
     position: relative;
     border-left: 0px solid black;
     border-right: 0px solid black;
     border-bottom: 0px solid black;
 }
+
 /* Displays 2+ level submenus next to (not under) the parent */
 .menu a.l2submenu {
     display:inline-block;
 }
+
 .menu li ul li:hover > ul {
     display:inline-block;
 }
 
+/* Footer */
+
+footer[role="contentinfo"] {
+    background: #404042;
+    overflow:auto;
+    padding:10px;
+}
+
+.footer-piece {
+    display:inline-block;
+}
+
+.footer-links {
+  list-style: none;
+}
+
+.footer-links li {
+  display: inline-block;
+}
+
+.footer-links li+li {
+  margin-left: 10px;
+}
+
+/* Grid */
+
+.section {
+    clear: both;
+    padding: 0px;
+    margin: 0px;
+}
+
+.group:before,
+.group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear: both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 */
+}
+
+.col-1-1,
+.col-1-2,
+.col-1-3,
+.col-2-3 {
+    display: block;
+    float:left;
+    margin: 1% 0 1% 1.6%;
+}
+
+.col-1-1:first-child,
+.col-1-2:first-child,
+.col-1-3:first-child,
+.col-2-3:first-child{
+    margin-left: 0;
+}
+
+.col-1-1 {
+    width: 100%;
+}
+
+.col-1-2 {
+    width: 49.2%;
+}
+
+.col-1-3 {
+    width: 32.26%;
+}
+
+.col-2-3 {
+    width: 66.13%;
+}
+
+@media only screen and (max-width: 480px) {
+    .col-1-1,
+    .col-1-2,
+    .col-1-3,
+    .col-2-3{
+        width: 100%;
+    }
+}
+
+/* Tables */
+
+.left {
+    text-align:left;
+    float:left;
+}
+
+.center {
+    text-align:center;
+    margin:0px auto;
+}
+
+.right {
+    text-align:right;
+    float:right;
+}
+
+/* Widgets */
+
+.side-widgets {
+    margin-top: 36px;
+    display: inline-block;
+    width: 300px;
+    vertical-align: top;
+}
+
+.widget-title {
+    background-color: #f5f5f5;
+    font-weight: bold;
+    text-align: center;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.widget-body {
+    padding: 2px;
+}
+
+.widget-body ul {
+    list-style:none;
+    padding:0;
+    margin:0;
+}
+
+/* Other */
+
+.featured-button {
+    background: url('{{site.url}}/assets/featured-button.png') no-repeat scroll 0px 0px transparent;
+    cursor: pointer;
+    color: #444;
+    height: 61px;
+    width: 230px;
+    text-align: center;
+    text-shadow: 0px 1px #FFF;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 18px;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.featured-button:hover {
+    background-position: 0px -61px;
+}
+
+.codeclass {
+    font-family:monospace;
+}
+
+/* Linux Collaborative Projects header */
 
 .collaborative-projects .gray-diagonal {
     background: url({{site.url}}/assets/lf/di_dark_gray.png) repeat 0 0;
 }
+
 #cp--logo {
     display:block;
 }
+
 .cp--header {
     background: #404042;
     background-image: linear-gradient(to right,#404042 0%,#3b393b 69%);
@@ -225,16 +334,9 @@  body {
 .cp--header .container {
     padding-top:7px;
 }
-.container {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1200px;
-    padding-left: 20px;
-    padding-right: 20px;
-}
+
 .cp--footer p {
     font-size: 0.75rem;
     color: #ABABAB;
     margin: 0px;
 }
- 
diff --git a/development/index.html b/development/index.html
index 31aed02..d6e1663 100644
--- a/development/index.html
+++ b/development/index.html
@@ -22,28 +22,34 @@  tags: []
 comments: []
 ---
 <p>Open vSwitch is developed as an open source project primarily under the <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2</a> license.</p>
-<h2>Using Git</h2><br />
+
+<h2>Using Git</h2>
+
 <p> If you intend to do a substantial amount of development, or to contribute patches upstream, we recommend installing <a href="http://git-scm.com/">Git</a>. &nbsp;Once you have Git installed, you may clone the Git repository for Open vSwitch with:</p>
-<pre>git clone https://github.com/openvswitch/ovs.git</pre><br />
+<pre><code>$ git clone https://github.com/openvswitch/ovs.git</code></pre>
 <span style="font-size: 1.5em; line-height: 1.5em;">Code Snapshots</span>
 <p>If you do not want to use Git, you can download a snapshot in <code>.zip</code>&nbsp;format. Start from <a href="https://github.com/openvswitch/ovs">the repository webpage at github</a>, then click on the "Download ZIP" button on the right side of the page.</p>
-<h2>How to Contribute</h2><br />
+
+<h2>How to Contribute</h2>
+
 <p>Contributions should be based on the latest development version of Open vSwitch. &nbsp;More information about Open vSwitch development is right in the source tree or on this site:</p>
 <ul>
-<li><a href="{{site.gitfileviewerurl}}CodingStyle.rst">Coding style</a></li>
-<li><a href="{{site.gitfileviewerurl}}REPORTING-BUGS.rst">Guidelines for reporting bugs</a></li>
-<li><a href="{{site.gitfileviewerurl}}CONTRIBUTING.rst">How to submit patches</a></li>
-<li><a href="{{site.url}}/development/committer-responsibilities">Committer Responsibilities</a></li>
-<li><a href="{{site.url}}/development/committer-grant-revocation">Committer Grant/Revocation</a></li>
-</ul><br />
+  <li><a href="{{site.gitfileviewerurl}}CodingStyle.rst">Coding style</a></li>
+  <li><a href="{{site.gitfileviewerurl}}REPORTING-BUGS.rst">Guidelines for reporting bugs</a></li>
+  <li><a href="{{site.gitfileviewerurl}}CONTRIBUTING.rst">How to submit patches</a></li>
+  <li><a href="{{site.url}}/development/committer-responsibilities">Committer Responsibilities</a></li>
+  <li><a href="{{site.url}}/development/committer-grant-revocation">Committer Grant/Revocation</a></li>
+</ul>
 <p>Before beginning work on a contribution, please review the Developer's Certificate of Origin in <a href="{{site.gitfileviewerurl}}CONTRIBUTING.rst">How to submit patches</a>. All submitted patches are required to have a "Signed-off-by:" record in the commit message recording the developer's agreement with this certificate of origin.</p>
+
 <h2>Online Resources</h2>
+
 <ul>
 <li><a href="https://patchwork.ozlabs.org/project/openvswitch/list/">Patch tracking system</a></li>
 <li><a href="https://github.com/openvswitch/ovs">Repository webpage at github</a></li>
-</ul><br />
+</ul>
 <h2>Language Bindings</h2>
 <ul>
-	<li><a href="https://github.com/wiladams/LJIT2ovs">Lua binding</a> - Using LuaJIT FFI to support various Open vSwitch operations</li>
-</ul><br />
+  <li><a href="https://github.com/wiladams/LJIT2ovs">Lua binding</a> - Using LuaJIT FFI to support various Open vSwitch operations</li>
+</ul>
 <p>Questions about Open vSwitch development are welcome on the mailing list, at <a href="mailto:dev@openvswitch.org">dev@openvswitch.org</a>.</p>
diff --git a/faq/index.html b/faq/index.html
index 8fd4b7c..211831c 100644
--- a/faq/index.html
+++ b/faq/index.html
@@ -2,7 +2,7 @@ 
 layout: page
 status: publish
 published: true
-title: FAQ
+title: Frequest Asked Questions (FAQ)
 author:
   display_name: admin
   login: admin
diff --git a/index.html b/index.html
index e5f2de2..72bb5bb 100644
--- a/index.html
+++ b/index.html
@@ -22,12 +22,18 @@  tags: []
 comments: []
 ---
 <!--TODO mailing list links-->
-<div class="mainpage-top">
-  <h1 style="display:inline-block;">Production Quality, Multilayer Open Virtual Switch</h1>
-  <div class="halfcolumn">
+
+<div class="section group">
+  <div class="col-1-1">
+    <h1 style="display:inline-block;">Production Quality, Multilayer Open Virtual Switch</h1>
+  </div>
+</div>
+
+<div class="section group">
+  <div class="col-1-2">
     <img width="440" height="300" src="{{site.url}}/assets/featured-image.jpg" alt="">
   </div>
-  <div class="halfcolumn">
+  <div class="col-1-2">
     <h2><strong>What is Open vSwitch?</strong></h2>
     <p>Open vSwitch is a production quality, multilayer virtual switch licensed under the open source <a href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache 2.0</a> license.&nbsp; It is designed to enable massive network automation through programmatic extension, while still supporting standard management interfaces and protocols (e.g. NetFlow, sFlow, IPFIX, RSPAN,&nbsp;CLI, LACP, 802.1ag).&nbsp; In addition, it is designed to support distribution across multiple physical servers similar to VMware's vNetwork distributed vswitch or Cisco's Nexus 1000V. See full feature list <a href="{{site.url}}/features">here</a></p>
     <a href="{{site.url}}/download">
@@ -38,36 +44,36 @@  comments: []
   </div>
 </div>
 
-<div class="columncontainer">
-  <div class="onethirdcolumn widget">
+<div class="section group">
+  <div class="col-1-3 widget">
     <div class="widget-title">
       Introducing Open vSwitch
     </div>
-    <div class="textwidget">
+    <div class="widget-body">
       <p>To understand why virtualized environments require a new approach to switching, read the <a href="{{site.gitfileviewerurl}}WHY-OVS.rst">WHY-OVS</a> document that is distributed with the source code.</p>
       <p>Open vSwitch is used in multiple products and runs in many large production environments (some very, very large). Each stable release is run through a regression suite of hundreds of system-level tests and over a thousand unit tests.</p>
     </div>
   </div>
 
-  <div class="onethirdcolumn widget">
+  <div class="col-1-3 widget">
     <div class="widget-title">News</div>
-    <div class="textwidget">
+    <div class="widget-body">
       <p>Open vSwitch 2016 Fall Conference was held Nov. 7 and 8 in San Jose, CA.  <a href="support/ovscon2016">Slides and videos</a> are available.</p>
     </div>
     <div class="widget-title">
       <p>Join Open vSwitch Community</p>
     </div>
-    <div class="textwidget">
+    <div class="widget-body">
       <p>{% include mailinglist-link.html %}</p>
     </div>
   </div>
 
-  <div class="onethirdcolumn widget">
+  <div class="col-1-3 widget">
     <div class="widget-title">
       Supported Platform
     </div>
-    <div class="textwidget">
-      <p>Open vSwitch can operate both as a soft switch running within the hypervisor, and as the control stack for switching silicon. It has been ported to multiple virtualization platforms and switching chipsets. It is the default switch in <a href="http://support.citrix.com/article/CTX130418">XenServer 6.0</a>, the <a href="http://xen.org/products/cloudxen.html">Xen Cloud Platform</a> and also supports <a href="http://www.xen.org">Xen</a>, <a href="http://www.linux-kvm.org">KVM</a>, <a href="http://pve.proxmox.com/wiki/Main_Page"> Proxmox VE </a> and <a href="http://www.virtualbox.org/">VirtualBox</a>. It has also been integrated into many virtual management systems including <a href="http://www.openstack.org/">OpenStack</a>, <a href="http://www.openqrm.com/">openQRM</a>, <a href="http://opennebula.org/">OpenNebula</a> and <a href="http://ovirt.org/">oVirt</a>. The kernel datapath is distributed with <a href="http://kernel.org/">Linux</a>,  and packages are available for 
 <a href=
 "http://www.ubuntu.com/">Ubuntu</a>, <a href="http://www.debian.org/">Debian</a>, <a href="http://fedoraproject.org//">Fedora</a> and <a href="https://www.opensuse.org/">openSUSE</a>. Open vSwitch is also supported on <a href="http://freebsd.org">FreeBSD</a> and <a href="http://netbsd.org">NetBSD</a>.  The Open vSwitch release in development has been ported to <a href="http://dpdk.org">DPDK</a>.<br><br></p>
+    <div class="widget-body">
+      <p>Open vSwitch can operate both as a soft switch running within the hypervisor, and as the control stack for switching silicon. It has been ported to multiple virtualization platforms and switching chipsets. It is the default switch in <a href="http://support.citrix.com/article/CTX130418">XenServer 6.0</a>, the <a href="http://xen.org/products/cloudxen.html">Xen Cloud Platform</a> and also supports <a href="http://www.xen.org">Xen</a>, <a href="http://www.linux-kvm.org">KVM</a>, <a href="http://pve.proxmox.com/wiki/Main_Page"> Proxmox VE </a> and <a href="http://www.virtualbox.org/">VirtualBox</a>. It has also been integrated into many virtual management systems including <a href="http://www.openstack.org/">OpenStack</a>, <a href="http://www.openqrm.com/">openQRM</a>, <a href="http://opennebula.org/">OpenNebula</a> and <a href="http://ovirt.org/">oVirt</a>. The kernel datapath is distributed with <a href="http://kernel.org/">Linux</a>,  and packages are available for 
 <a href=
 "http://www.ubuntu.com/">Ubuntu</a>, <a href="http://www.debian.org/">Debian</a>, <a href="http://fedoraproject.org//">Fedora</a> and <a href="https://www.opensuse.org/">openSUSE</a>. Open vSwitch is also supported on <a href="http://freebsd.org">FreeBSD</a> and <a href="http://netbsd.org">NetBSD</a>.  The Open vSwitch release in development has been ported to <a href="http://dpdk.org">DPDK</a>.</p>
       <p>The bulk of the code is written in platform-independent C and is easily ported to other environments.</p>
     </div>
   </div>
diff --git a/mlists/index.html b/mlists/index.html
index 095002a..40422ba 100644
--- a/mlists/index.html
+++ b/mlists/index.html
@@ -28,7 +28,7 @@  comments: []
 <li><a href="https://mail.openvswitch.org/mailman/listinfo/ovs-dev">dev</a>: The <em>dev</em> mailing list is used to discuss development and review code before being committed. (<a href="https://mail.openvswitch.org/pipermail/ovs-dev/">archives</a>)</li>
 <li><a href="https://mail.openvswitch.org/mailman/listinfo/ovs-git">git</a>: The <em>git</em> mailing list hooks into Open vSwitch's version control system to receive commits. (<a href="https://mail.openvswitch.org/pipermail/ovs-git/">archives</a>)</li>
 <li><a href="https://mail.openvswitch.org/mailman/listinfo/ovs-build">build</a>: The <em>build</em> mailing list hooks into Open vSwitch's continuous integration system to receive build reports. (<a href="https://mail.openvswitch.org/pipermail/ovs-build/">archives</a>)</li>
-<li><a href="mailto:bugs@openvswitch.org">bugs@openvswitch.org</a> is an alias for the&nbsp;<em>discuss</em> mailing list.</li>
-<li><a href="mailto:security@openvswitch.org">security@openvswitch.org</a>: The <em>security</em> mailing list is for submitting security vulnerabilities to the security team.</li>
-</ul><br />
+<li><a href="mailto:bugs@openvswitch.org">bugs</a> is an alias for the&nbsp;<em>discuss</em> mailing list.</li>
+<li><a href="mailto:security@openvswitch.org">security</a>: The <em>security</em> mailing list is for submitting security vulnerabilities to the security team.</li>
+</ul>
 <p>The list subscription form and archive pages can be found by following the above links.</p>