Merge pull request #131 from alphagov/improve-code-font-sizing

Improve code font sizing

Author: NickColley

example/source/code.html.md

@@ -0,0 +1,35 @@
+---
+title: Code examples
+---
+
+# Code examples
+
+A paragraph with a `code` element within it.
+
+<a href="#"><code>code element within a link</code></a>
+
+An example of a code block with a long line length
+
+```ruby
+RSpec.describe ContentItem do
+  subject { described_class.new(base_path) }
+  let(:base_path) { "/search/news-and-communications" }
+  let(:finder_content_item) { news_and_communications }
+  let(:news_and_communications) {
+    JSON.parse(File.read(Rails.root.join("features", "fixtures", "news_and_communications.json")))
+  }
+
+  RSpec.describe "as_hash" do
+    it "returns a content item as a hash" do
+      expect(subject.as_hash).to eql(finder_content_item)
+    end
+  end
+end
+```
+
+An example of a code block with a short length
+
+```ruby
+RSpec.describe ContentItem do
+end
+```

example/source/index.html.md.erb

@@ -19,5 +19,3 @@ If you want slightly more control, you can always use <strong>HTML</strong>.
 For more detail and troubleshooting, take a look at the `README.md` file in the root of this project.
 
 <%= warning_text "Look out! A warning!" %>
-
-<a href="#"><code>code element within a link</code></a>

lib/assets/stylesheets/modules/_technical-documentation.scss

@@ -111,6 +111,15 @@
     border-left: govuk-spacing(2) solid govuk-colour("mid-grey");
   }
 
+  // http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
+  pre,
+  code {
+    // Restores the normal text size in Mozilla Firefox, Google Chrome, and Safari; this unusual style rule should also be used anywhere where you would otherwise set the font-family property to ‘monospace’.
+    font-family: monospace, monospace;
+    // Restores the normal text size in Internet Explorer and Opera.
+    font-size: 1em;
+  }
+
   pre {
     background: $code-00;
     padding: 15px;