style: tweak style of code titles (gatsbyjs#7923)

This PR improves the style of code titles per @fk :) High-level changes: - Reduce font size - Reduce padding - Co-locate some shared code styling (e.g. font family, font size, ligatures, etc.) with other code blocks Additionally, I _could_ modify gatsby-remark-code-titles to use a nested code block for the title, but this works for now. ![screen shot 2018-09-06 at 10 09 41 am](https://user-images.githubusercontent.com/3924690/45166576-feb45800-b1bc-11e8-9a1b-151e2e2afa9e.png)
gold356 · Sep 7, 2018 · 8652f7b · 8652f7b
1 parent 32214a5
commit 8652f7b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js
@@ -78,6 +78,9 @@ const colors = {
     light: gray(80, 270),
   },
   code: {
+    bg: '#fdfaf6',
+    border: '#faede5',
+    text: '#866c5b',
     remove: `#e45c5c`,
     add: `#4a9c59`,
   },

diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js
@@ -1,7 +1,7 @@
 const colors = require(`./colors`).default
 
 module.exports = {
-  colors: colors,
+  colors,
   mobile: `(min-width: 400px)`,
   Mobile: `@media (min-width: 400px)`,
   phablet: `(min-width: 550px)`,

diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js
@@ -94,23 +94,25 @@ const _options = {
       hr: {
         backgroundColor: colors.ui.light,
       },
-      "tt,code,kbd": {
+      "tt, code, kbd": {
         // background: `hsla(23, 60%, 97%, 1)`,
         background: colors.a[0],
+        paddingTop: `0.1em`,
+        paddingBottom: `0.1em`,
+      },
+      "tt, code, kbd, .gatsby-code-title": {
         fontFamily: options.monospaceFontFamily.join(`,`),
         fontSize: `80%`,
         // Disable ligatures as they look funny w/ Space Mono as code.
         fontVariant: `none`,
         WebkitFontFeatureSettings: `"clig" 0, "calt" 0`,
         fontFeatureSettings: `"clig" 0, "calt" 0`,
-        paddingTop: `0.1em`,
-        paddingBottom: `0.1em`,
       },
       ".gatsby-highlight": {
         //background: colors.a[0],
-        background: `#fdfaf6`,
+        background: colors.code.bg,
         //boxShadow: `inset 0 0 0 1px ${colors.a[1]}`,
-        boxShadow: `inset 0 0 0 1px #faede5`,
+        boxShadow: `inset 0 0 0 1px ${colors.code.border}`,
         borderRadius: `${presets.radius}px`,
         padding: rhythm(options.blockMarginBottom),
         marginBottom: rhythm(options.blockMarginBottom),
@@ -135,7 +137,7 @@ const _options = {
       },
       ".gatsby-highlight-code-line": {
         //background: colors.a[1],
-        background: `#faede5`,
+        background: colors.code.border,
         marginRight: `${rhythm(-options.blockMarginBottom)}`,
         marginLeft: `${rhythm(-options.blockMarginBottom)}`,
         paddingRight: rhythm(options.blockMarginBottom),
@@ -154,7 +156,7 @@ const _options = {
       },
       ".gatsby-highlight::-webkit-scrollbar-track": {
         //background: colors.a[1],
-        background: `#faede5`,
+        background: colors.code.border,
         borderRadius: `0 0 ${presets.radiusLg}px ${presets.radiusLg}px`,
       },
       // Target image captions. This is kind of a fragile selector...
@@ -233,12 +235,10 @@ const _options = {
         overflow: `hidden`,
       },
       ".gatsby-code-title": {
-        backgroundColor: colors.gatsby,
-        borderTopLeftRadius: `${presets.radiusLg}px`,
-        borderTopRightRadius: `${presets.radiusLg}px`,
-        color: `white`,
-        fontFamily: options.monospaceFontFamily.join(`,`),
-        ...scale(-1 / 5),
+        background: colors.code.bg,
+        border: `1px solid ${colors.code.border}`,
+        borderBottomWidth: 0,
+        color: colors.code.text,
         marginLeft: rhythm(-options.blockMarginBottom),
         marginRight: rhythm(-options.blockMarginBottom),
         padding: `${rhythm(options.blockMarginBottom / 2)} ${rhythm(
@@ -253,7 +253,7 @@ const _options = {
         },
         ".gatsby-highlight": {
           //boxShadow: `inset 0 1px 0 0 ${colors.a[1]}, inset 0 -1px 0 0 ${colors.a[1]}`,
-          boxShadow: `inset 0 1px 0 0 #faede5, inset 0 -1px 0 0 #faede5`,
+          boxShadow: `inset 0 1px 0 0 ${colors.code.border}, inset 0 -1px 0 0 ${colors.code.border}`,
         },
       },
       video: {
@@ -298,10 +298,8 @@ const _options = {
           )}`,
         },
         ".gatsby-code-title": {
-          padding: `${rhythm(options.blockMarginBottom)} ${rhythm(
-            options.blockMarginBottom * 1.5
-          )}`,
-        },
+          padding: `${rhythm(options.blockMarginBottom / 2)} ${rhythm(options.blockMarginBottom * 1.5)}`,
+        }
       },
       [MIN_LARGER_DISPLAY_MEDIA_QUERY]: {
         html: {