emberjs · mixonic · Mar 9, 2016 · Mar 4, 2016 · Mar 4, 2016 · Mar 7, 2016
diff --git a/config.rb b/config.rb
@@ -114,9 +114,16 @@ def link_to_page name, url
     "<li#{class_name}><a href=\"#{url}\">#{name}</a></li>"
   end
 
-  def page_classes
+  def page_classes(page)
     classes = super
     return 'not-found' if classes == '404'
+
+    if page.responsive
+      classes += ' responsive'
+    else
+      classes += ' not-responsive'
+    end
+
     classes
   end
 

diff --git a/images/header.svg b/images/header.svg
diff --git a/source/_footer.html.erb b/source/_footer.html.erb
@@ -0,0 +1,33 @@
+<div class="footer">
+  <div class="container">
+    <div class="footer-info">
+      Copyright <%= Time.now.strftime('%Y') %>
+      <a href="http://tilde.io">Tilde Inc.</a>
+      <br>
+      <a href="http://emberjs.com/team">Core Team</a> |
+      <a href="http://emberjs.com/sponsors">Sponsors</a>
+      <br>
+      <a href="http://emberjs.com/security">Security</a> |
+      <a href="http://emberjs.com/legal">Legal</a> |
+      <a href="http://emberjs.com/logos">Logos</a>
+      <br>
+      <a href="http://emberjs.com/guidelines">Community Guidelines</a>
+    </div>
+
+    <div class="footer-statement">
+      Ember.js is free, open source and always will be.
+    </div>
+
+    <div class="footer-social">
+      <a href="http://twitter.com/emberjs" title="Twitter">
+        <i class="icon-twitter"></i>
+      </a>
+      <a href="https://github.com/emberjs/ember.js" title="GitHub">
+        <i class="icon-github"></i>
+      </a>
+      <a href="https://plus.google.com/communities/106387049790387471205" title="Google+">
+        <i class="icon-gplus"></i>
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/source/_header.html.erb b/source/_header.html.erb
@@ -0,0 +1,20 @@
+<header class="header">
+  <nav role="navigation" aria-label="main">
+    <ul class="header-nav container">
+      <li class="header-logo">
+        <a href="http://emberjs.com/"><span class="visually-hidden">Ember homepage</span></a>
+      <%= link_to_page "About", "/about" %>
+      <%= link_to_page "Guides", "http://guides.emberjs.com" %>
+      <%= link_to_page "API", "/api" %>
+      <%= link_to_page "Community", "/community" %>
+      <%= link_to_page "Blog", "/blog" %>
+      <%= link_to_page "Builds", "/builds" %>
+      <li class="header-search">
+        <form>
+          <input type="text" id="st-search-input" placeholder="" class="st-search-input" />
+        </form>
+        <div id="st-results-container"></div>
+      </li>
+    </ul>
+  </nav>
+</header>
diff --git a/source/ember-community-survey-2016.html.erb b/source/ember-community-survey-2016.html.erb
@@ -1,11 +1,7 @@
 ---
 title: "Ember Community Survey 2016"
+responsive: true
 ---
-
-<% content_for :head do %>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-<% end %>
-
 <% content_for :outside_wrapper do %>
 <div class="survey-wrapper survey-wrapper-header">
   <div class="survey-header survey-container">

diff --git a/source/images/ember-logo.svg b/source/images/ember-logo.svg
diff --git a/source/images/header.svg b/source/images/header.svg
diff --git a/source/images/search-icon.svg b/source/images/search-icon.svg
diff --git a/source/layout.erb b/source/layout.erb
@@ -15,11 +15,13 @@
     <!--[if lte IE 7 ]><%= stylesheet_link_tag "fonts/fontello-ie7" %><![endif]-->
     <%= stylesheet_link_tag "site" %>
     <link href="/blog/feed.xml" rel="alternate" type="application/atom+xml" title="Ember.js - Blog" />
+    <% if current_page.data.responsive.eql? true %>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+    <% end %>
     <%= yield_content :head %>
   </head>
 
-  <body class="<%= page_classes %>">
-
+  <body class="<%= page_classes current_page.data %>">
 
     <!--[if lt IE 9]>
       <script type="text/javascript" src="/javascripts/common-old-ie.js"></script>
@@ -28,29 +30,7 @@
       <script type="text/javascript" src="/javascripts/common-modern.js"></script>
     <!--<![endif]-->
 
-    <div id="header">
-      <div id="wrapper">
-        <a id="logo" href="/">&nbsp;</a>
-        <ul id="nav">
-          <%= link_to_page "about", "/about" %>
-          <%= link_to_page "guides", "http://guides.emberjs.com" %>
-          <%= link_to_page "api", "/api" %>
-          <%= link_to_page "community", "/community" %>
-          <%= link_to_page "blog", "/blog" %>
-          <%= link_to_page "builds", "/builds" %>
-          <li id="search">
-            <form>
-              <input type="text" id="st-search-input" class="st-search-input" />
-            </form>
-            <div id="st-results-container"></div>
-          </li>
-        </ul>
-
-        <div id="github">
-          <a href="https://github.com/emberjs/ember.js"><i class="icon-fork"></i>Fork Us!</a>
-        </div>
-      </div>
-    </div>
+    <%= partial "header" %>
 
     <%= yield_content :outside_wrapper %>
 
@@ -67,28 +47,7 @@
       </div>
     </div>
 
-    <div id="footer">
-      <div id="footer-wrapper">
-        <div class="info">
-          Copyright <%= Time.now.strftime('%Y') %> <a href="http://tilde.io">Tilde Inc.</a><br>
-          <a href="/team">Core Team</a> | <a href="/sponsors">Sponsors</a><br>
-            <a href="/security">Security</a> | <a href="/legal">Legal</a> | <a href="/logos">Logos</a><br>
-            <a href="/guidelines">Community Guidelines</a>
-        </div>
-        <div class="statement">Ember.js is free, open source and always will be.</div>
-        <div class="links">
-          <a class="twitter" href="http://twitter.com/emberjs">
-            <i class="icon-twitter"></i><span>Twitter</span>
-          </a>
-          <a class="github" href="https://github.com/emberjs/ember.js">
-            <i class="icon-github"></i><span>GitHub</span>
-          </a>
-          <a class="googleplus" href="https://plus.google.com/communities/106387049790387471205">
-            <i class="icon-gplus"></i><span>Google+</span>
-          </a>
-        </div>
-      </div>
-    </div>
+    <%= partial "footer" %>
 
     <%= yield_content :foot %>
     <script type="text/javascript">

diff --git a/source/stylesheets/_footer.scss b/source/stylesheets/_footer.scss
@@ -0,0 +1,109 @@
+.footer > .container {
+  max-width: 960px;
+  margin: auto;
+}
+
+.not-responsive .footer > .container {
+  width: 960px;
+}
+.not-responsive .footer {
+  min-width: 960px;
+}
+
+.footer a:link {
+  font-family: 'Maven Pro';
+}
+
+.footer a:hover {
+  border-bottom: none;
+}
+
+// The styles bellow were ported from the compiled sass from
+// https://guides.emberjs.com/v2.3.0/
+
+// Ideally we will install bourbon / bittters / neat
+// and reuse the same _base_ stylesheets as the guides.
+// Since that will affect many default styles hence
+// the overall visual aesthetics of the site, this is an intentional
+// intermediate step to quickly port the responsive footer.
+
+.footer {
+  background-color: #f2ece9;
+  border-top: 1px solid #f9e7e4;
+  border-top: 1px solid #e5dbd6;
+  text-align: left;
+  margin-top: 60px;
+}
+
+.footer .container {
+  padding: 2rem 1rem
+}
+
+.footer .container {
+  align-items:center;
+  display: flex
+}
+
+@media screen and (max-width: 53.75rem) {
+  .responsive .footer .container {
+    text-align: center;
+    display: block;
+  }
+}
+
+.footer .footer-info {
+  color: #999;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 2;
+  margin: 0.625rem 0;
+  text-transform: uppercase
+}
+
+.footer .footer-info {
+  flex:0 0 18em;
+  text-align: left
+}
+
+@media screen and (max-width: 53.75rem) {
+  .responsive .footer .footer-info {
+    text-align: center;
+  }
+}
+
+.footer .footer-info a {
+  color: #dd6a58
+}
+
+.footer .footer-statement {
+  color: #999;
+  flex: 1;
+  font-size: 1.1rem;
+  margin: 1rem 0
+}
+
+.footer .footer-social {
+  margin: 1rem 0
+}
+
+@media screen and (min-width: 53.75rem) {
+  .footer .footer-social {
+    flex:0 0 11em;
+    text-align: right
+  }
+}
+
+.footer .footer-social a {
+  -webkit-transition: opacity 200ms, color 200ms;
+  -moz-transition: opacity 200ms, color 200ms;
+  transition: opacity 200ms, color 200ms;
+  color: #999;
+  font-size: 1.5rem;
+  margin-left: 0.5rem;
+  opacity: 0.7
+}
+
+.footer .footer-social a:hover {
+  color: #dd6a58;
+  opacity: 1
+}