3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-03 08:49:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
lib/server/generate.js
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);

4
lib/server/server.js
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);
});

24
lib/static/css/main.css
View file

@ -719,19 +719,17 @@ input::placeholder {
color: #e5e5e5;
}
code,
a code,
.mainContainer .wrapper a code,
.mainContainer .wrapper a:focus code {
color: $primaryColor;
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;
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;
/* avoids scale issues on mobile */
word-break: break-word;
}
pre code {