☰

npmjs.com visual tweaks

Styles npmjs.com README pages similarly to GitHub's (font, size, colors, but not syntax highlighting), and makes the content wider

As of 2018-02-09. See the latest version.

  1. // ==UserScript==
  2. // @name         npmjs.com visual tweaks
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.6.3
  5. // @description  Styles npmjs.com README pages similarly to GitHub's (font, size, colors, but not syntax highlighting), and makes the content wider
  6. // @author       joeytwiddle
  7. // @copyright    2018, Paul "Joey" Clark (http://neuralyte.org/~joey)
  8. // @license      MIT
  9. // @match        https://www.npmjs.com/*
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. // Motivation: I didn't like the visual context switching between reading Github READMEs and npm READMEs, so I made READMEs on npm look similar to READMEs on Github.
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     // I want to scale down the fonts and everything else a bit.  This was an easy way to do that.
  19.     //GM_addStyle('.container { transform: scale(0.92); transform-origin: 50% 0; }');
  20.  
  21.     // Fill (almost) the whole width of the screen, like Wide-Github does.
  22.     GM_addStyle('.container { width: 98%; max-width: 100%; }');
  23.  
  24.     // Set fonts like GitHub
  25.     GM_addStyle('#readme { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Source Sans Pro", "Lucida Grande", sans-serif; }');
  26.     GM_addStyle('#readme { font-family: line-height: 1.5;}');
  27.     GM_addStyle('pre, code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }');
  28.  
  29.     // Set font sizes like GitHub
  30.     // A snippet of code appearing within a paragraph
  31.     GM_addStyle('code { font-size: 88%; }');
  32.     // A line of code on its own
  33.     GM_addStyle('pre > code { font-size: 100%; }');
  34.     // A block of code
  35.     GM_addStyle('pre { font-size: 82%; line-height: 1.4; }');
  36.  
  37.     // Darker text
  38.     // Github 2016
  39.     //GM_addStyle('.markdown p, .markdown li { color: #333; }');
  40.     // Github 2017
  41.     //GM_addStyle('.markdown p, .markdown li { color: #24292e; }');
  42.     // But weirdly the font strokes appears slightly finer on NPM, for a reason I cannot understand.  To compensate, I use a darker color.
  43.     GM_addStyle('.markdown p, .markdown li { color: #111; }');
  44.  
  45.     // Links should be normal weight (npm makes them bolder)
  46.     GM_addStyle('.markdown p a, .markdown li a { font-weight: initial; }');
  47.  
  48.     // Padding around code blocks and snippets
  49.     // A snippet of code appearing within a paragraph
  50.     GM_addStyle('code { padding: 0.2em 0.2em; }');
  51.     // A line of code on its own
  52.     GM_addStyle('pre > code { padding: 1em 2em; }');
  53.  
  54.     // Lighter background on code blocks and snippets
  55.     GM_addStyle('.highlight, code { background-color: #f6f8fa; }');
  56.  
  57.     // More of a gap after each paragraph?  Wasn't actually needed.  The problem was wrapping due to insufficient width.
  58.     //GM_addStyle('div, .highlight { padding-bottom: 20px; }');
  59.  
  60.     // Thicker font for section headers
  61.     GM_addStyle('.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-weight: 600; }');
  62.  
  63.     // Use the npm font for section headers, even though we aren't using it for main text.  (This is a divergence from Github's markdown scheme.)
  64.     //GM_addStyle(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif; }");
  65. })();