☰

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

Verze ze dne 09. 02. 2018. Zobrazit nejnovější verzi.

  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. })();