Merge branch 'master' into django-upgrade-1116335

kuma/landing/templates/landing/homepage.html

@@ -119,7 +119,7 @@ <h2 class="offscreen">{{ _('Open Web and Mobile') }}</h2>
       <a href="{{ wiki_url('Learn') }}"><span>{{ _('Learn Web Development') }}</span></a>
     </div>
     <div class="column-callout callout-deved">
-      <a href="https://www.mozilla.org/firefox/developer/"><span>{{ _('Get The Browser For Developers Like You') }}</span></a>
+      <a href="https://www.mozilla.org/firefox/developer/?utm_source=developer.mozilla.org&utm_medium=referral&utm_campaign=mdn-front-pg-promo"><span>{{ _('Get The Browser For Developers Like You') }}</span></a>
     </div>
     <div class="column-callout callout-apps">
       <a href="{{ wiki_url('Apps') }}"><span>{{ _('Build Open Web Apps') }}</span></a>

media/stylus/base/elements/typography.styl

@@ -12,14 +12,16 @@ Headings
 
 h1, h2, h3, h4 {
     margin-bottom: ($content-block-margin / 2);
+    word-wrap: break-word; /* keep for browsers & locales that don't support hyphens */
+    vendorize(hyphens, auto);
 
     font-family: $heading-font-family;
     font-weight: $light-font-weight;
-    line-height: 1.5;
+    line-height: 1;
     {$selector-heading-font-fallback} {
         font-family: $heading-font-family-fallback;
         letter-spacing: -0.04em;
-        line-height: 1.515;
+        line-height: 1;
         word-spacing: 0.01em;
     }
 }
@@ -28,21 +30,17 @@ h2, h3 {
     font-family: $site-font-family;
     {$selector-site-font-fallback} {
         font-family: $site-font-family-fallback;
-        line-height: 1.515;
-    }
-}
-
-h2, h3, h4 {
-    line-height: 100%;
-
-    {$selector-site-font-fallback} {
-        line-height: 1;
     }
 }
 
 h1 {
     heading-1();
     margin-bottom: $grid-spacing;
+
+    line-height: 1.5;
+    {$selector-heading-font-fallback} {
+        line-height: 1.515;
+    }
 }
 
 h2 {
@@ -148,9 +146,9 @@ blockquote {
 pre/code/kbd
 ====================================================================== */
 
-pre,
 code {
-    font-family: Consolas, Monaco, 'Andale Mono', monospace; /* match Prism */
+    font-family: $code-inline-font-family;
+    font-weight: bold;
 }
 
 /* pre is a block element so it gets a bit more fancy styling */
@@ -163,10 +161,11 @@ pre {
     padding: $code-block-padding;
     overflow: auto;
     margin: 0 0 $grid-spacing 0;
+    font-family: $code-block-font-family;
 }
 
-/* code may appear inline in headings, we want to match the font weight of the element its nested in */
-code {
+pre code {
+    font-family: inherit;
     font-weight: inherit;
 }
 
@@ -184,9 +183,10 @@ kbd {
     border: 1px solid #b4b4b4;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 2px 0px 0px rgba(255, 255, 255, 0.7) inset;
     display: inline-block;
-    font-family: inherit;
+    font-family: $code-inline-font-family;
     font-size: 0.85em;
-    line-height: 1.2;
+    font-weight: bold;
+    line-height: inherit;
     padding: 2px 4px;
     white-space:nowrap;
 }

media/stylus/components/wiki/document-head.styl

@@ -3,6 +3,12 @@
     clear: both;
 
     h1 {
-        margin-bottom: 20px;
+        margin-top: $grid-spacing;
+        margin-bottom: ($grid-spacing * 1.5);
+
+        line-height: 1;
+        {$selector-site-font-fallback} {
+            line-height: 1.005;
+        }
     }
 }

media/stylus/diff.styl

@@ -34,7 +34,7 @@ table.diff {
     clear: both;
     margin: 5px 0 15px;
     width: 100%;
-    font-family: 'Courier New', 'Andale Mono', monospace;
+    font-family: $code-inline-font-family;
 }
 
 td.diff_header {

media/stylus/includes/mixins.styl

@@ -546,6 +546,8 @@ $code-block {
     background-position: top center;
     background-repeat: repeat;
     color: $text-color;
+    font-family: $code-block-font-family;
+    font-weight: normal;
 
     vendorize(tab-size, 4);
     vendorize(hyphens, none);

media/stylus/includes/vars.styl

@@ -1,4 +1,6 @@
-/* vendors */
+/*
+vendors
+====================================================================== */
 /* - this is a global variable set by stylus to 'moz webkit o ms official' by default
    - as far as I can tell it only uses it for @keyframes
    - and they're going to remove it in 1.0
@@ -10,7 +12,10 @@ VENDOR-PREFIXES = '-webkit-' '-moz-' '-ms-';
 /* custom list of properties and their valid prefixes for vendors we support */
 @require 'prefixes';
 
-/* colors */
+
+/*
+colors
+====================================================================== */
 $text-color = #4d4e53;
 $link-color = #0095dd;
 $menu-link-color = $text-color;
@@ -40,27 +45,41 @@ $default = $grey;
 $text-dark = $text-color;
 $text-light = #fff;
 
-/* typography */
+
+/*
+typography
+====================================================================== */
 $light-font-weight = 200;
 $site-font-family = 'Open Sans', Arial, sans-serif;
 $site-font-family-fallback = Arial, sans-serif;
 $heading-font-family = 'Open Sans Light', 'Helvetica', Arial, sans-serif;
 $heading-font-family-fallback = 'Helvetica', Arial, sans-serif;
+$code-inline-font-family = 'Courier New', 'Andale Mono', monospace; /* inline */
+$code-block-font-family = Consolas, Monaco, 'Andale Mono', monospace; /* prism */
+$diff-font-family = 'Courier New', 'Andale Mono', monospace;
 
-/* sizes */
+/*
+sizes
+====================================================================== */
 $larger-font-size = 20px;
 $base-font-size = 14px;
 $smaller-font-size = 12px;
 
 $small-bump-font-size = 13px;
 $base-bump-font-size = 16px;
 
-/* buttons */
+
+/*
+buttons
+====================================================================== */
 $button-background = #eaeff2;
 $button-color = $menu-link-color;
 $button-shadow-color = #bbbfc2;
 
-/* grid and site dimensions */
+
+/*
+grid and site dimensions
+====================================================================== */
 $grid-spacing = 20px;
 $grid-margin = 3%;
 $grid-column-selector = '> [class^="column-"]';
@@ -76,30 +95,48 @@ $media-query-small-mobile = 'all and (max-width : 480px)';
 $media-query-navigation-break = 'all and (max-width: 970px)'; /* Moves nav items all the way to the left, moves logo above */
 $media-query-navigation-block = 'all and (max-width: 660px)'; /* Moves nav menu items to block, its own line */
 
-/* animation */
+
+/*
+animation
+====================================================================== */
 $default-animation-duration = .5s;
 $slide-timing-function = cubic-bezier(0, 1, 0.5, 1);
 
-/* dimensions */
+
+/*
+dimensions
+====================================================================== */
 $gutter-width = 24px;
 $first-content-top-padding = ($grid-spacing * 1.5);
 $list-item-spacing = 8px;
 $content-block-margin = $gutter-width;
 $icon-margin = 10px;
 
-/* forms */
+
+/*
+forms
+====================================================================== */
 $input-padding = 6px 8px;
 
-/* selectors */
+
+/*
+selectors
+====================================================================== */
 $selector-icon = 'i[class^="icon-"]';
 $selector-site-font-fallback = 'html[data-ffo-opensans="false"]:not(.no-js) &';
 $selector-heading-font-fallback = 'html[data-ffo-opensanslight="false"]:not(.no-js) &';
 
-/* paths */
+
+/*
+paths
+====================================================================== */
 $media-url-dir = '/media/img/';
 $logo-sprite-url = $media-url-dir + 'logo_sprite.svg?2014-01';
 
-/* grid - 12 columns assuming a 3% margin */
+
+/*
+grid - 12 columns assuming a 3% margin
+====================================================================== */
 $calc-col-width($col-span) {
     $grid-margin-numb = unit($grid-margin, '');
     $col-percent = (100 - $grid-margin-numb * 11) / 12 * $col-span + $grid-margin-numb * ($col-span - 1);

media/stylus/wiki-wysiwyg.styl

@@ -67,7 +67,6 @@ pre:before {
 
 pre {
     @extend $code-block;
-    font-family: Consolas,Monaco,"Andale Mono",monospace;
     direction: ltr;
     text-align: left;
     white-space: pre;