From a3288fec3d3530bde9199158458ddb32f1939177 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Mon, 1 Jun 2015 15:13:01 -0700 Subject: [PATCH 1/3] Fix Bug 1148752 - CSS break long article titles. Added word-wrap: break-word to auto-break when necessary. Added hyphens: auto to add hyphen at break for supporting browser/locale combos. Moved line height 1 declaration to apply to all headings by default and over ride for h1 (instead of applying to all and being over ridden by all but h1). Decreased line height on document head. Increased margins on document head to account for decreased line height. --- media/stylus/base/elements/typography.styl | 20 +++++++++---------- .../stylus/components/wiki/document-head.styl | 8 +++++++- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/media/stylus/base/elements/typography.styl b/media/stylus/base/elements/typography.styl index cde39ccd22b..ac092c6a106 100644 --- a/media/stylus/base/elements/typography.styl +++ b/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 { diff --git a/media/stylus/components/wiki/document-head.styl b/media/stylus/components/wiki/document-head.styl index 68e884d8ada..d3f7f7e5f20 100644 --- a/media/stylus/components/wiki/document-head.styl +++ b/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; + } } } From b9b17ee1d23fbf1206e150c8481e5ff4d8898a6e Mon Sep 17 00:00:00 2001 From: Radhakrishna Pemmasani Date: Fri, 5 Jun 2015 03:16:15 +0530 Subject: [PATCH 2/3] Bug 1157849 --- kuma/landing/templates/landing/homepage.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kuma/landing/templates/landing/homepage.html b/kuma/landing/templates/landing/homepage.html index 17a77c3bc38..15b8e4de140 100644 --- a/kuma/landing/templates/landing/homepage.html +++ b/kuma/landing/templates/landing/homepage.html @@ -119,7 +119,7 @@

{{ _('Open Web and Mobile') }}

{{ _('Learn Web Development') }}
- {{ _('Get The Browser For Developers Like You') }} + {{ _('Get The Browser For Developers Like You') }}
{{ _('Build Open Web Apps') }} From ec688c32d58177603d75b8f0801244d6ccb9dc47 Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Fri, 5 Jun 2015 12:32:42 -0700 Subject: [PATCH 3/3] Fix Bug 1126320 - Inline Code Blocks Changed and appearing outside of 
 to use courier new instead of Consolas. I tried to standardize on Consolas a while back but it's too hard to pick out from open-sans.

Also increased the weight of Courier New.
---
 media/stylus/base/elements/typography.styl | 14 ++---
 media/stylus/diff.styl                     |  2 +-
 media/stylus/includes/mixins.styl          |  2 +
 media/stylus/includes/vars.styl            | 61 +++++++++++++++++-----
 media/stylus/wiki-wysiwyg.styl             |  1 -
 5 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/media/stylus/base/elements/typography.styl b/media/stylus/base/elements/typography.styl
index cde39ccd22b..08295ae9c5a 100644
--- a/media/stylus/base/elements/typography.styl
+++ b/media/stylus/base/elements/typography.styl
@@ -148,9 +148,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 +163,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 +185,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;
 }
diff --git a/media/stylus/diff.styl b/media/stylus/diff.styl
index 91098e5fa64..7b864c4c247 100644
--- a/media/stylus/diff.styl
+++ b/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 {
diff --git a/media/stylus/includes/mixins.styl b/media/stylus/includes/mixins.styl
index 15470a5e827..9312714112a 100644
--- a/media/stylus/includes/mixins.styl
+++ b/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);
diff --git a/media/stylus/includes/vars.styl b/media/stylus/includes/vars.styl
index 43b65b29cb4..90389ba77ba 100755
--- a/media/stylus/includes/vars.styl
+++ b/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,14 +45,22 @@ $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;
@@ -55,12 +68,18 @@ $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);
diff --git a/media/stylus/wiki-wysiwyg.styl b/media/stylus/wiki-wysiwyg.styl
index 8be6cb4fb45..9f57c769cd4 100644
--- a/media/stylus/wiki-wysiwyg.styl
+++ b/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;