From 59cb8abc77c117809415facc4d86d72ce0eda543 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Fri, 15 Dec 2017 18:21:04 -0800 Subject: [PATCH] Tweak link/code styles (#435) - Tone down link background - Tone down code background - Shrink font -- I'd prefer 15px Menlo and 17px Consolas but we'll meet in the middle at 16px where both look reasonable, unlike 17px Menlo which was comically large. ![before-after](https://user-images.githubusercontent.com/6820/34066487-360cf57e-e1c4-11e7-891e-db5d4cd59b1d.gif) --- src/theme.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/theme.js b/src/theme.js index cc8504af..38ce19f0 100644 --- a/src/theme.js +++ b/src/theme.js @@ -98,7 +98,7 @@ const fonts = { // Except when they must be used within nested CSS selectors. // This is the case for eg markdown content. const linkStyle = { - backgroundColor: hex2rgba(colors.brandLight, 0.5), + backgroundColor: hex2rgba(colors.brandLight, 0.3), borderBottom: `1px solid ${hex2rgba(colors.black, 0.2)}`, color: colors.text, @@ -233,10 +233,13 @@ const sharedStyles = { }, '& p > code, & li > code': { - background: hex2rgba(colors.note, 0.3), - padding: '0 3px', - fontSize: 'inherit', + background: hex2rgba(colors.note, 0.2), color: colors.text, + }, + + '& p > code, & li > code, & p > a > code, & li > a > code': { + padding: '0 3px', + fontSize: 16, wordBreak: 'break-word', },