☰

Greasy Fork is available in English.

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

נכון ליום 19-01-2018. ראה הגרסה האחרונה.

  1. // ==UserScript==
  2. // @name         npmjs.com visual tweaks
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.5
  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. (function() {
  14.     'use strict';
  15.  
  16.     // I want to scale down the fonts and everything else a bit.  This was an easy way to do that.
  17.     GM_addStyle('.container { transform: scale(0.92); transform-origin: 50% 0; }');
  18.  
  19.     // Fill (almost) the whole width of the screen, like Wide-Github does.
  20.     GM_addStyle('.container { width: 98%; max-width: 100%; }');
  21.  
  22.     // Set fonts like GitHub
  23.     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; }');
  24.     GM_addStyle('#readme { font-family: line-height: 1.5;}');
  25.     GM_addStyle('pre, code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }');
  26.  
  27.     // Set font sizes like GitHub
  28.     // A snippet of code appearing within a paragraph
  29.     GM_addStyle('code { font-size: 88%; }');
  30.     // A line of code on its own
  31.     GM_addStyle('pre > code { font-size: 100%; }');
  32.     // A block of code
  33.     GM_addStyle('pre { font-size: 82%; line-height: 1.4; }');
  34.  
  35.     // Darker text
  36.     GM_addStyle('.markdown p, .markdown li, code { color: rgb(51, 51, 51); }');
  37.  
  38.     // Padding around code blocks and snippets
  39.     // A snippet of code appearing within a paragraph
  40.     GM_addStyle('code { padding: 0.2em 0.2em; }');
  41.     // A line of code on its own
  42.     GM_addStyle('pre > code { padding: 1em 2em; }');
  43.  
  44.     // Lighter background on code blocks and snippets
  45.     GM_addStyle('.highlight, code { background-color: #f6f8fa; }');
  46.  
  47.     // More of a gap after each paragraph?  Wasn't actually needed.  The problem was wrapping due to insufficient width.
  48.     //GM_addStyle('div, .highlight { padding-bottom: 20px; }');
  49. })();