use faded primaryColor background for inline code snippets instead of link color (#276)

This commit is contained in:
Ricky Vetter 2017-12-12 12:46:52 -08:00 committed by Héctor Ramos
parent e655ac0f37
commit c22203523f
5 changed files with 50 additions and 14 deletions

View file

@ -13,6 +13,7 @@ function execute() {
const readMetadata = require('./readMetadata.js');
const renderToStaticMarkup = require('react-dom/server').renderToStaticMarkup;
const path = require('path');
const color = require('color');
const toSlug = require('../core/toSlug.js');
const React = require('react');
const mkdirp = require('mkdirp');
@ -355,6 +356,8 @@ function execute() {
const color = siteConfig.colors[key];
cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
});
const codeColor = color(siteConfig.colors.primaryColor).alpha(0.07).string();
cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
mkdirp.sync(targetFile.replace(new RegExp('/[^/]*$'), ''));
fs.writeFileSync(targetFile, cssContent);

View file

@ -17,6 +17,7 @@ function execute(port) {
const fs = require('fs-extra');
const os = require('os');
const path = require('path');
const color = require('color');
const toSlug = require('../core/toSlug.js');
const mkdirp = require('mkdirp');
const glob = require('glob');
@ -479,6 +480,9 @@ function execute(port) {
const color = siteConfig.colors[key];
cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
});
const codeColor = color(siteConfig.colors.primaryColor).alpha(0.07).string();
cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
res.send(cssContent);
});

View file

@ -719,19 +719,17 @@ input::placeholder {
color: #e5e5e5;
}
code,
a code,
.mainContainer .wrapper a code,
.mainContainer .wrapper a:focus code {
color: $primaryColor;
code {
padding: 2px 0;
background-color: $codeColor;
/* box-shadow acts as padding around inline code snippets
* while not adding any extra spacing between words. */
box-shadow: 2px 0 $codeColor, -2px 0 $codeColor;
color: inherit;
border-radius: .3em;
font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
}
a code {
text-decoration: underline;
}
a:hover code {
text-decoration: none;
/* avoids scale issues on mobile */
word-break: break-word;
}
pre code {

View file

@ -16,6 +16,7 @@
"babylon": "^6.17.4",
"chalk": "^2.1.0",
"classnames": "^2.2.5",
"color": "^2.0.1",
"commander": "^2.11.0",
"crowdin-cli": "^0.3.0",
"escape-string-regexp": "^1.0.5",

View file

@ -698,10 +698,30 @@ color-convert@^1.9.0:
dependencies:
color-name "^1.1.1"
color-name@^1.1.1:
color-convert@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
color-name "^1.1.1"
color-name@^1.0.0, color-name@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
color-string@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
color@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
dependencies:
color-convert "^1.9.1"
color-string "^1.5.2"
combined-stream@^1.0.5, combined-stream@~1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@ -1077,6 +1097,10 @@ ipaddr.js@1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
is-arrayish@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
is-finite@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
@ -1492,6 +1516,12 @@ shelljs@^0.7.8:
interpret "^1.0.0"
rechoir "^0.6.2"
simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
dependencies:
is-arrayish "^0.3.1"
sitemap@^1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-1.13.0.tgz#569cbe2180202926a62a266cd3de09c9ceb43f83"