inline code style fixes

content/test.md

@@ -7,7 +7,7 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
 
 ## Table of Contents
 
-- [Headers](#headers)
+- [Headers](#header)
 - [Emphasis](#emphasis)
 - [Lists](#lists)
 - [Links](#links)
@@ -20,6 +20,8 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
 - [Line Breaks](#line-breaks)
 - [Videos](#videos)
 - [React Components in Markdown](#react-components-in-markdown)
+- [Repository Component](#repository-component)
+- [Embedding File Contents from GitHub](#embedding-file-contents-from-github)
 
 ## Headers
 
@@ -345,20 +347,18 @@ Or, in pure Markdown, but losing the image sizing and border:
 [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
 ```
 
-## React Components in Markdown
+### Repository Component
 
 In all Markdown docs you can use some select React Components. This magic is done with [gatsby-remark-component](https://www.gatsbyjs.org/packages/gatsby-remark-component/).
 
-Note that the component name in Markdown needs to be always in lowercase, and have a closing tag.
-
-### Repository
-
 The `Repository` component fetching and displaying information about a GitHub repo. Component can be used in Markdown as `<repo>`, it requires a `name` to be passed:
 
 ```html
 <repo name="pleuston"></repo>
 ```
 
+Note that the component name in Markdown needs to be always in lowercase, and have a closing tag.
+
 Resulting in:
 
 <repo name="pleuston"></repo>
@@ -373,7 +373,7 @@ Resulting in:
 
 <repo name="aquarius" readme="true"></repo>
 
-### Embedding File Contents from GitHub
+## Embedding File Contents from GitHub
 
 You can embed any file contents like so, note that the language needs to be defined manually to get proper syntax highlighting:
 

src/styles/global.scss

@@ -247,15 +247,23 @@ samp {
     // lots of !important to overwrite prims.js theme
     font-family: $font-family-monospace !important;
     font-size: $font-size-small !important;
-    background: $brand-black !important;
-    color: $brand-grey-lighter !important;
     border-radius: $border-radius !important;
+    text-shadow: none !important;
+}
+
+:not(pre) > code {
+    background: darken($brand-white, 5%) !important;
+    color: $brand-grey-dark !important;
+    display: inline-block;
+    padding-left: .3rem !important;
+    padding-right: .3rem !important;
 }
 
 pre {
     display: block;
     margin-bottom: $spacer !important;
     padding: 0 !important;
+    background: $brand-black !important;
 
     // make 'em scrollable
     overflow: auto;
@@ -265,7 +273,7 @@ pre {
         padding: $spacer;
         white-space: pre;
         display: block;
-        color: inherit;
+        color: $brand-grey-lighter !important;
         overflow-wrap: normal;
         word-wrap: normal;
         word-break: normal;