add node interactive section

_includes/footer/footer-en.html

@@ -19,18 +19,26 @@
 </script>
 <a id="top" href="#"><img src="/images/arrow.png"></a>
 <footer>
-    <div id="footer-content">
-        <div id="github">
-            <iframe src="https://ghbtns.com/github-btn.html?user=expressjs&repo=express&type=star&count=true" frameborder="0"
-                scrolling="0" width="200px" height="20px"></iframe>
-        </div>
-        <div id="sponsor"><a href="https://github.com/expressjs/express/">Express</a>
-            is a project of the <a href="http://nodejs.org/foundation"></a>Node.js Foundation</a>.</div>
-        <div id="fork"><a href="https://github.com/expressjs/expressjs.com">Fork the website on GitHub</a>.
-        </div>
-        <div>Copyright &copy; 2016 StrongLoop, IBM, and other expressjs.com contributors.</div>
-    </div>
-    <div id="license">
-        <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/3.0/us/80x15.png" /></a> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-ShareAlike 3.0 United States License</a>.
-    </div>       
+  <section id="doc-langs">
+  Documentation translations provided by <a href="http://strongloop.com">StrongLoop/IBM</a>:
+  <a href="/fr/">French</a>, <a href="/de/">German</a>, <a href="/es/">Spanish</a>, <a href="/it/">Italian</a>, <a href="/ja/">Japanese</a>, <a href="/ru/">Russian</a>, <a href="/zh-cn/">Chinese</a>, <a href="/zh-tw/">Traditional Chinese</a>, <a href="/ko/">Korean</a>, <a href="/pt-br/">Portuguese</a>.
+  <br>
+  Community translation available for: <a href="/sk/">Slovak</a>, <a href="/uk/">Ukrainian</a> and <a href="/uz/">Uzbek</a>.
+  </section>
+
+  <div id="footer-content">
+      <div id="github">
+        <a class="github-button" href="https://github.com/expressjs/expressjs.com" data-icon="octicon-star" aria-label="Star expressjs/expressjs.com on GitHub">Star</a>
+      </div>
+      <div id="sponsor"><a href="https://github.com/expressjs/express/">Express</a>
+          is a project of the <a href="http://nodejs.org/foundation"></a>Node.js Foundation</a>.</div>
+      <div id="fork"><a href="https://github.com/expressjs/expressjs.com">Fork the website on GitHub</a>.
+      </div>
+      <div>Copyright &copy; 2016 StrongLoop, IBM, and other expressjs.com contributors.</div>
+  </div>
+  <div id="license">
+      <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/3.0/us/80x15.png" /></a> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative Commons Attribution-ShareAlike 3.0 United States License</a>.
+  </div>
 </footer>
+
+<script async defer src="https://buttons.github.io/buttons.js"></script>

_includes/head.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;amp;subset=latin,latin-ext">
     <link rel="stylesheet" href="/css/{{ page.lang }}.css">
+    <link rel="stylesheet" href="/css/nodeinteractive.css">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script data-cfasync="false" src="/js/ismobile.js"></script>

css/nodeinteractive.css

@@ -0,0 +1,91 @@
+#nodeinteractive {
+  max-width: 1024px;
+  margin-left: 5%;
+  margin-right: 5%;
+  border-radius: 7px;
+  background-color: rgba(231, 238, 219, 0.6);
+  display: inline-flex;
+  overflow: hidden;
+}
+
+#nodeinteractive h3 {
+  font-weight: 100;
+  font-size: 1.3em;
+  line-height: 1.2em;
+}
+
+#nodeinteractive p {
+  font-weight: normal;
+  font-size: 0.95em;
+  margin: 3px;
+}
+
+#nodeinteractive-details {
+  padding: 15px 20px;
+}
+
+#nodeinteractive-details ul {
+  padding: 0;
+}
+
+#nodeinteractive-details li {
+  display: inline-flex;
+  list-style: none;
+  background: rgba(255, 255, 255, 0.9);
+  margin-bottom: 5px;
+  padding: 3px;
+}
+
+#nodeinteractive-details img {
+  display: block;
+  width: 70px;
+  height: 70px;
+  margin-right: 5px;
+}
+
+#nodeinteractive-details li p {
+  padding-right: 3px;
+}
+
+#nodeinteractive-details h4 {
+  padding: 0;
+  margin: 3px 2px;
+}
+
+#nodeinteractive-img {
+  width: 300px;
+}
+
+.nodeinteractive-div {
+  height: 250px;
+}
+
+/* responsive */
+
+@media all and (max-width: 899px) {
+
+  #nodeinteractive {
+    margin-top: 20px;
+  }
+
+  #nodeinteractive-img {
+    display: none;
+  }
+
+}
+
+@media all and (max-width: 700px) {
+  #nodeinteractive img {
+    display: none;
+  }
+
+  #nodeinteractive-details {
+    height: auto;
+  }
+
+  #nodeinteractive-details h4 {
+    font-weight: bold;
+    margin-bottom: 7px;
+  }
+
+}

css/style.css

@@ -222,10 +222,19 @@ a {
   display: block;
   font: 4.5em "Helvetica Neue", "Open Sans", sans-serif;
   font-weight: 100;
-  color: #353535;
   margin-bottom: .25em;
 }
 
+#description .express a {
+  color: #353535;
+}
+
+#express-version {
+  font-size: 0.2em;
+  margin-left: 0.5em;
+  color: #259dff !important;
+}
+
 #description {
   margin-bottom: 40px;
   -webkit-font-smoothing: antialiased;
@@ -589,12 +598,14 @@ pre, code {
 
 footer {
   font-size: 11px;
-  margin: 70px 10px 30px 10px;
+  margin: 60px 10px 30px 10px;
+  padding-left: 5%;
+  max-width: 1090px;
 }
 
 #footer-content {
   display: table;
-  margin: 0 auto;
+  margin: 20px auto 0;
 }
 
 #footer-content div {
@@ -605,6 +616,19 @@ footer {
   padding-bottom: 4px;
 }
 
+#github {
+  margin-right: 5px !important;
+}
+
+#license {
+  text-align: center;
+  margin-top: -5px;
+}
+
+#license img {
+  position: relative;
+  top: 3px;
+}
 
 #fork {
   background-image: url(/images/fork-icon.png);
@@ -1029,12 +1053,6 @@ h2 a {
 #mw-fig-img {margin: 0px; padding: 0px; width: 410px; height: 308px;}
 .mw-fig-callouts {margin: 0; padding: 0 0 0 5px; border: 0; width: 550px;}
 
-#license {
-  display: block;
-  text-align: center;
-  margin: 0 auto 0 auto;
-}
-
 /* For middleware pages */
 
 /*

index.md

@@ -10,14 +10,42 @@ redirect_from: "/en/index.html"
     <div id="overlay"></div>
 
     <section id="description">
-        <a href="/" class="express">Express</a>
-
+        <div class="express"><a href="/">Express</a><a href="/{{ page.lang }}/changelog/4x.html#4.14.0" id="express-version">4.14.0</a></div>
         <span class="description">Fast, unopinionated, minimalist web framework for <a href='https://nodejs.org/en/'>Node.js</a></span>
     </section>
 
     <div id="install-command">$ npm install express --save</div>
 </section>
 
+<section id="nodeinteractive">
+  <div id="nodeinteractive-details" class="nodeinteractive-div">
+    <h3 markdown="1">Members of the Express Technical Committee are speaking at [Node Interactive North America](http://events.linuxfoundation.org/events/node-interactive/) and attending a [local meetup](https://github.com/expressjs/discussions/issues/44#issuecomment-262078992). See you there!</h3>
+    <ul>
+      <li id="dougwilson">
+        <img src="images/dougwilson.jpg">
+        <div>
+          <h4>Doug Wilson</h4>
+          <p markdown="1">
+            Lead developer for the Express project and related modules, is giving a keynote presentation ["Express State of the Union"](https://nodena2016.sched.org/event/8ptT/keynote-express-state-of-the-union-doug-wilson-express) on Tuesday, November 29 at 9:15am.
+          </p>
+        </div>
+      </li>
+      <li id="crandmck">
+      <img src="images/crandmck.jpg">
+        <div>
+          <h4>Rand McKinney</h4>
+          <p markdown="1">
+            Documentation lead for the Express project, is presenting ["Beyond the README: Creating Effective Documentation for Your Project"](https://nodena2016.sched.org/event/8H6t/beyond-the-readme-creating-effective-documentation-for-your-project-rand-mckinney-ibmstrongloop) on Tuesday, November 29 at 3:40pm.
+          </p>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div id="nodeinteractive-img" class="nodeinteractive-div">
+    <img src="images/node-interactive.png">
+  </div>
+</section>
+
 <section id="intro">
 
   <div id="boxes" class="clearfix">
@@ -40,13 +68,8 @@ redirect_from: "/en/index.html"
 
 </section>
 
+<!--
 <section id="announcements">
   {% include announcement/announcement-{{ page.lang }}.md %}
 </section>
-
-<section id="doc-langs" markdown="1">
-Documentation translations provided by <a href="http://strongloop.com">StrongLoop/IBM</a>:
-[French](/fr/), [German](/de/), [Spanish](/es/), [Italian](/it/), [Japanese](/ja/), [Russian](/ru/), [Chinese](/zh-cn/), [Traditional Chinese](/zh-tw/), [Korean](/ko/), [Portuguese](/pt-br/).
-
-Community translation available for: [Slovak](/sk), [Ukrainian](/uk) and [Uzbek](/uz/).
-</section>
+-->