emberjs · wifelette · Jun 4, 2018 · Dec 5, 2017 · Dec 6, 2017 · Dec 9, 2017
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -170,16 +170,6 @@ GEM
       coderay (~> 1.0)
       method_source (~> 0.8)
       slop (~> 3.4)
-    pry (0.9.12.6-i386-mingw32)
-      coderay (~> 1.0)
-      method_source (~> 0.8)
-      slop (~> 3.4)
-      win32console (~> 1.3)
-    pry (0.9.12.6-i386-mswin32)
-      coderay (~> 1.0)
-      method_source (~> 0.8)
-      slop (~> 3.4)
-      win32console (~> 1.3)
     pry (0.9.12.6-x86-mingw32)
       coderay (~> 1.0)
       method_source (~> 0.8)

diff --git a/config.rb b/config.rb
@@ -28,7 +28,6 @@
 activate :highlighter
 activate :column_balancer
 activate :versions
-
 ###
 # Build
 ###

diff --git a/source/_footer.html.erb b/source/_footer.html.erb
@@ -9,7 +9,7 @@
       <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>
+      <a href="http://emberjs.com/logos">Branding</a>
       <br>
       <a href="http://emberjs.com/guidelines">Community Guidelines</a>
     </div>

diff --git a/source/_header.html.erb b/source/_header.html.erb
@@ -55,30 +55,30 @@
 				<li role="separator" class="divider"></li> %>
        <li><a href="/team">The Team</a></li>
        <li role="separator" class="divider"></li>
-       <li><a href="/logos">Logos</a></li>
+       <li><a href="/logos">Branding</a></li>
        <li><a href="/mascots">Mascots</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="/ember-users">Who Uses Ember</a></li>
        <li><a href="/sponsors">Sponsors</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="/legal">Legal</a></li>
-       <li><a href="/security">Security</a></li>       
+       <li><a href="/security">Security</a></li>
       </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-right searchbox">
     <div class="input-group">
       <label for="search-input" class="control-label sr-only">Search</label>
-        <input type="text" 
-        class="form-control search input ds-input" 
-        placeholder="Search..." 
-        id="search-input" 
-        role="combobox" 
-        aria-expanded="false" 
-        aria-owns="algolia-autocomplete-listbox-0" 
+        <input type="text"
+        class="form-control search input ds-input"
+        placeholder="Search..."
+        id="search-input"
+        role="combobox"
+        aria-expanded="false"
+        aria-owns="algolia-autocomplete-listbox-0"
         autocorrect="off"
         autocapitalize="none"
-        spellcheck="false" 
+        spellcheck="false"
         />
         <span></span>
     </div>

diff --git a/source/about.html.erb b/source/about.html.erb
@@ -2,46 +2,43 @@
 title: "Homepage"
 responsive: true
 ---
-
 <% content_for :foot do %>
-<script type="text/javascript">
-$(function() {
-  $('#slider').bxSlider({
-    displaySlideQty: 4,
-    moveSlideQty: 4,
-    auto: true,
-    pager: true,
-    speed: 700,
-    pause: 5000
-  });
+  <script type="text/javascript">
+    $(function() {
+      $('#slider').bxSlider({
+        displaySlideQty: 4,
+        moveSlideQty: 4,
+        auto: true,
+        pager: true,
+        speed: 700,
+        pause: 5000
+      });
 
-  // Hack to force proper sizing
-  $('.bx-wrapper, .bx-window').css('width', 940);
-});
-</script>
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+      // Hack to force proper sizing
+      $('.bx-wrapper, .bx-window').css('width', 940);
+    });
+  </script>
+  <script>
+    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+  </script>
 <% end %>
-
 <% content_for :outside_wrapper do %>
-<div class="job-board">
-  <a href="http://jobs.emberjs.com"><span class="text-yellow"> new</span> Job Board!<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/icon-tomster.png" alt="" role="presentation" /></a>
-</div>
-<a href="http://jobs.emberjs.com" class="job-board-banner">Post and find jobs on the Ember job board</a>
+  <div class="job-board">
+    <a href="http://jobs.emberjs.com"><span class="text-yellow"> new</span> Job Board!<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/icon-tomster.png" alt="" role="presentation" /></a>
+  </div>
+  <a href="http://jobs.emberjs.com" class="job-board-banner">Post and find jobs on the Ember job board</a>
 <% end %>
-
 <div class="about-page--header">
   A framework for<br/>
   <span class="bold">ambitious</span> web developers.
 </div>
-
 <div class="call-to-action">
   <div class="call-to-action__box">
     <div class="call-to-action__top">
       <h1>Get Started</h1>
       <div class="cta-copy">
         <p>Build your first Ember application with our 5 minute tutorial.</p>
       </div>
-
       <a href="https://guides.emberjs.com/current/getting-started/quick-start/">View Quick Start guide</a>
     </div>
     <div class="call-to-action__bottom">
@@ -56,6 +53,15 @@ $(function() {
   <div class="feature">
     <div class="handlebars feature-img"></div>
     <p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.
+    </div>
+    <div class="feature">
+      <div class="structure feature-img"></div>
+      <p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
+    </div>
+    <div class="feature">
+      <div class="productivity feature-img"></div>
+      <p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done&mdash;fast.</p>
+    </div>
   </div>
   <div class="feature">
     <div class="structure feature-img"></div>
@@ -81,14 +87,12 @@ $(function() {
       <% end %>
     </ul>
   </div>
-
   <div class="about__listing-button">
     <a class="ember-button ember-button--centered" href="/ember-users">
       Meet More Users
     </a>
   </div>
 </div>
-
 <div class="gears section">
 <h2 class="text-center">Buy Ember.js Gear and Support Development</h2>
   <div class="gear">
@@ -106,7 +110,6 @@ $(function() {
     </a>
   </div>
 </div>
-
 <div class="about__listing-button">
   <a class="ember-button ember-button--centered" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QRRZTQ5GM7PSY">
     Donate

diff --git a/source/images/brand/Ember-Brand-Guidelines.pdf b/source/images/brand/Ember-Brand-Guidelines.pdf
diff --git a/source/images/brand/ember-light-dark.png b/source/images/brand/ember-light-dark.png
diff --git a/source/images/brand/ember_CLI-1c-Dark.png b/source/images/brand/ember_CLI-1c-Dark.png
diff --git a/source/images/brand/ember_CLI-1c-Light.png b/source/images/brand/ember_CLI-1c-Light.png
diff --git a/source/images/brand/ember_CLI-Dark.png b/source/images/brand/ember_CLI-Dark.png
diff --git a/source/images/brand/ember_CLI-Light.png b/source/images/brand/ember_CLI-Light.png
diff --git a/source/images/brand/ember_Data-1c-Dark.png b/source/images/brand/ember_Data-1c-Dark.png
diff --git a/source/images/brand/ember_Data-1c-Light.png b/source/images/brand/ember_Data-1c-Light.png
diff --git a/source/images/brand/ember_Data-Dark.png b/source/images/brand/ember_Data-Dark.png
diff --git a/source/images/brand/ember_Data-Light.png b/source/images/brand/ember_Data-Light.png
diff --git a/source/images/brand/ember_Ember-1c-Dark.png b/source/images/brand/ember_Ember-1c-Dark.png
diff --git a/source/images/brand/ember_Ember-1c-Light.png b/source/images/brand/ember_Ember-1c-Light.png
diff --git a/source/images/brand/ember_Ember-Dark.png b/source/images/brand/ember_Ember-Dark.png
diff --git a/source/images/brand/ember_Ember-Light.png b/source/images/brand/ember_Ember-Light.png
diff --git a/source/images/brand/ember_Forum-1c-Dark.png b/source/images/brand/ember_Forum-1c-Dark.png
diff --git a/source/images/brand/ember_Forum-1c-Light.png b/source/images/brand/ember_Forum-1c-Light.png
diff --git a/source/images/brand/ember_Forum-Dark.png b/source/images/brand/ember_Forum-Dark.png
diff --git a/source/images/brand/ember_Forum-Light.png b/source/images/brand/ember_Forum-Light.png
diff --git a/source/images/brand/ember_Jobs-1c-Dark.png b/source/images/brand/ember_Jobs-1c-Dark.png
diff --git a/source/images/brand/ember_Jobs-1c-Light.png b/source/images/brand/ember_Jobs-1c-Light.png
diff --git a/source/images/brand/ember_Jobs-Dark.png b/source/images/brand/ember_Jobs-Dark.png
diff --git a/source/images/brand/ember_Jobs-Light.png b/source/images/brand/ember_Jobs-Light.png
diff --git a/source/images/brand/ember_Times-1c-Dark.png b/source/images/brand/ember_Times-1c-Dark.png
diff --git a/source/images/brand/ember_Times-1c-Light.png b/source/images/brand/ember_Times-1c-Light.png
diff --git a/source/images/brand/ember_Times-Dark.png b/source/images/brand/ember_Times-Dark.png
diff --git a/source/images/brand/ember_Times-Light.png b/source/images/brand/ember_Times-Light.png
diff --git a/source/images/brand/ember_Tomster-Lockup.png b/source/images/brand/ember_Tomster-Lockup.png
diff --git a/source/images/brand/logos-ember.zip b/source/images/brand/logos-ember.zip
diff --git a/source/legal.html.erb b/source/legal.html.erb
@@ -18,7 +18,7 @@ responsive: true
   <h2>Non-Legalese TL;DR</h2>
 
   <p>
-      Ember's strong brand and identity are an important part of the project. We're protective of it! Please be respectful and <a href="mailto:[email protected]">reach out</a> if you're unsure if your use is acceptable. Visit <a href="/logos">the Logos page</a> to learn more about what is and isn't permitted, and to download logos.
+      Ember's strong brand and identity are an important part of the project. We're protective of it! Please be respectful and <a href="mailto:[email protected]">reach out</a> if you're unsure if your use is acceptable. Visit the <a href="/logos">branding page</a> to learn more about what is and isn't permitted, and to download logos.
   </p>
   <p>
       We often grant licenses for use of the Ember logo for non-commercial community use cases. If you think you might be one of them, let's talk. We always aim to be reasonable.

diff --git a/source/logos.html.erb b/source/logos.html.erb
@@ -1,72 +1,90 @@
 ---
-title: The Ember Logos
+title: Ember Branding
 responsive: true
 ---
 
-<h1>Ember Logos</h1>
-
-<p>
-  Ember®, the Ember® logo design and the Tomster® designs are exclusive trademarks registered in the United States by Tilde Inc.
-</p>
-
-<p>
-  The Ember brand and associated assets are all part of a carefully curated experience.
-  We take great pride in what our team and community have helped bring to life.
-</p>
-
-<p>
-  When printed, the Ember logo should always be in PMS 7417C. The hex value is <span style="background-color: #E04E39; color: white; font-weight: bolder; padding: 1px 4px; border-radius: 5px;">#E04E39</span>.
-</p>
-
-<h2>The Assets</h2>
-
-<p>
-  The Ember logo is an official project resource that can be used on websites, mobile apps, or in printed materials to indicate use of Ember technologies&mdash;<strong>assuming there is no chance it might imply official status or project/core team endorsement</strong>.
-</p>
-
-<p>
-  It may not be manipulated in any way, may <strong>never</strong> be incorporated into other logos, and is best displayed on a black or very light colored background. The ® symbol must be present.
-</p>
-
-<p>
-  The Ember project has numerous projects under the Ember umbrella. These other logos may be used under the same terms as the primary Ember logo.
-</p>
-
-<p>
-  If you use the logo, please add standard language explicitly indicating unofficial status. For example, "This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc."
-</p>
-
-<div class="brand-logo">
-  <img src="/images/brand/ember_Ember-Light.png">
-  <img src="/images/brand/ember_Ember-Dark.png">
-</div>
-
-<div class="brand-logo">
-  <img src="/images/brand/ember_CLI-Light.png">
-  <img src="/images/brand/ember_CLI-Dark.png">
-</div>
-
-<div class="brand-logo">
-  <img src="/images/brand/ember_Data-Light.png">
-  <img src="/images/brand/ember_Data-Dark.png">
-  <a class="ember-button button-hero" href="/images/brand/logos-ember.zip">Download Logos</a>
-</div>
-
-<h2>The Ember Mascot: The Tomster</h2>
-
-<p>The Ember Tomster is reserved for official Ember project use <em>only</em>.</p>
-<p>
-  We sometimes grant licenses for specific use cases, and certain community initiatives may, with approval, commission the design of custom Tomsters via official channels. For more info on commissioned Tomsters, <a href="../tomster/faq">visit the Tomster FAQ page</a>.
-</p>
-
-<h2>Naming</h2>
-
-<p>
-  Please avoid naming your projects and events anything that implies Ember or Tilde's endorsement. Keep this in mind when selecting domain names as well.
-</p>
-<p>
-  It is alright to use Ember in the name of local meetup groups, which are well understood to be unofficial. It is also alright to use Ember in the name of other events, assuming the official Ember logo is never made part of the name/logo for the unofficial event.
-</p>
-<p>
-  EmberConf and EmberCamp are both used for official purposes and cannot otherwise be used.
-</p>
+<h1>Branding</h1>
+<p>The Ember brand and associated assets are part of a meticulously curated experience. We take great pride in what our team and community have helped bring to life, and ask that you follow our guidelines to ensure consistency across all Ember properties.</p>
+<p><a href="/images/brand/Ember-Brand-Guidelines.pdf">Download brand guidelines (PDF)</a></p>
+
+<section>
+  <h2>The Logos</h2>
+  <p>Our logos are the main identifier of our brand, so we're careful with how we use them. They may not be manipulated in any way, and may <strong>never</strong> be incorporated into other logos.</p>
+  <p>Ember, the Ember logo design and the Tomster designs are exclusive trademarks registered in the United States by Tilde Inc. The ® symbol must be present in these brand marks. If you use the logos, please add standard language explicitly indicating unofficial status. For example, "This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc."</p>
+  <p><a href="/images/brand/logos-ember.zip">Download logos (ZIP)</a></p>
+  <ul>
+    <li>
+      <h3>Primary Logo</h3>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Ember-Dark.png"></li>
+        <li><img src="/images/brand/ember_Ember-Light.png"></li>
+        <li><img src="/images/brand/ember_Ember-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_Ember-1c-Dark.png"></li>
+      </ul>
+      <p>The Ember logo can be used on websites, mobile apps, or in printed materials to indicate use of Ember technologies <strong>assuming there is no chance it might imply official status or project/core team endorsement</strong>.</p>
+      <p>The color mark should only be displayed on a black or very light colored background. In other scenarios, use a solid black or white logo to contrast your background.</p>
+      <p>When printed, the Ember logo should always be in PMS 7417C. The hex value is <span style="background-color: #E04E39; color: white; font-weight: bolder; padding: 1px 4px; border-radius: 5px;">#E04E39</span>.</p>
+    </li>
+    <li>
+      <h3>Tomster Lockup</h3>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Tomster-Lockup.png"></li>
+        <li><img src="/images/brand/ember_Tomster-Lockup.png"></li>
+        <li><img src="/images/brand/ember_Tomster-Lockup.png"></li>
+        <li><img src="/images/brand/ember_Tomster-Lockup.png"></li>
+      </ul>
+      <p>A fun alternative to the primary logotype is the Tomster lockup. It’s designed with a white stroke which allows it to work on all background colors without modification.</p>
+    </li>
+    <li>
+      <h3>Subproject Logos</h3>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_CLI-Dark.png"></li>
+        <li><img src="/images/brand/ember_CLI-Light.png"></li>
+        <li><img src="/images/brand/ember_CLI-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_CLI-1c-Dark.png"></li>
+      </ul>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Data-Dark.png"></li>
+        <li><img src="/images/brand/ember_Data-Light.png"></li>
+        <li><img src="/images/brand/ember_Data-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_Data-1c-Dark.png"></li>
+      </ul>
+      <p>The Ember project has numerous projects under its umbrella. These other logos may be used under the same terms as the primary Ember logo.</p>
+    </li>
+    <li>
+      <h3>Tertiary Logos</h3>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Forum-Dark.png"></li>
+        <li><img src="/images/brand/ember_Forum-Light.png"></li>
+        <li><img src="/images/brand/ember_Forum-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_Forum-1c-Dark.png"></li>
+      </ul>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Times-Dark.png"></li>
+        <li><img src="/images/brand/ember_Times-Light.png"></li>
+        <li><img src="/images/brand/ember_Times-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_Times-1c-Dark.png"></li>
+      </ul>
+      <ul class="brand-logos">
+        <li><img src="/images/brand/ember_Jobs-Dark.png"></li>
+        <li><img src="/images/brand/ember_Jobs-Light.png"></li>
+        <li><img src="/images/brand/ember_Jobs-1c-Light.png"></li>
+        <li><img src="/images/brand/ember_Jobs-1c-Dark.png"></li>
+      </ul>
+      <p>Ember communities and smaller projects have logos based on Ember’s <span class="code">code</span> style. They are only to be used by the project owners themselves the official properties.</p>
+    </li>
+  </ul>
+</section>
+
+<section>
+  <h2>The Ember Mascots</h2>
+  <p>With the exception of the Tomster logo lockup, our mascots are reserved for official Ember project use <em>only</em>.</p>
+  <p>We sometimes grant licenses for specific use cases, and certain community initiatives may, with approval, commission the design of custom Tomsters and Zoeys via official channels. For more info on commissioned mascots, <a href="../tomster/faq">visit the Tomster FAQ page</a>.</p>
+</section>
+
+<section>
+  <h2>Naming</h2>
+  <p>Please avoid naming your projects and events anything that implies Ember or Tilde's endorsement. Keep this in mind when selecting domain names as well.</p>
+  <p>It is all right to use Ember in the name of local meetup groups, which are well understood to be unofficial. It is also OK to use Ember in the name of other events, assuming the official Ember logo is never made part of the name or logo for the unofficial event.</p>
+  <p>EmberConf and EmberCamp are both used for official purposes and cannot otherwise be used.</p>
+</section>
diff --git a/source/stylesheets/base/_typography.scss b/source/stylesheets/base/_typography.scss
@@ -65,6 +65,10 @@ h3 {
   line-height: 1;
   margin-bottom: 0.5em;
   margin-top: 1.25em;
+	@media screen and (min-width: 0) and (max-width: $screen-sm-max) {
+		margin-left: .5rem;
+		margin-right: .5rem;
+	}
   + p {
     margin-top: 0 !important;
     padding-top: 0 !important;
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,6 @@ @@
     activate :highlighter
     activate :column_balancer
     activate :versions
     ###
     # Build
     ###
@@ Expand Down @@