Created
October 23, 2019 18:24
-
-
Save stedman/4fb20aff12baef01c9bc8c932522377d to your computer and use it in GitHub Desktop.
Bookmarklet to make GitHub READMEs a bit more readable (ala Medium.com).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:(function()%7Bconst%20d%3Ddocument%2Cb%3Dd.body%3Bif(b.classList.contains('RH'))return%3Bd.head.insertAdjacentHTML('beforeend'%2C%60%3Cstyle%3E.RH%20.js-header-wrapper%2C.RH%20.footer%2C.RH%20.pagehead%2C.RH%20.js-repo-meta-container%2C.RH%20.overall-summary%2C.RH%20.js-toggle-lang-stats%2C.RH%20.mt-2%2C.RH%20.mb-2%2C.RH%20.mb-3%2C.RH%20.d-flex%2C.RH%20.file-navigation%2C.RH%20.branch-infobar%2C.RH%20.commit-tease%2C.RH%20.file-header%2C.RH%20%23readme%3Eh3%2C.RH%20.px-2%2C.RH%20.f4%7Bdisplay%3Anone!important%7D.RH%20.file%2C.RH%20.Box%7Bborder%3A0%7D.RH%20.file-wrap%7Bleft%3A50%25%3Bmargin-left%3A-22.5rem%3Bposition%3Afixed%3Btop%3A0%3Btransform%3AtranslateY(-100%25)%3Btransition%3Atransform%20.5s%3Bwidth%3A45rem%3Bz-index%3A100%7D.RH%20.file-wrap%3Ahover%7Btransform%3AtranslateY(0)%7D.RH%20.file-wrap%3Aafter%7Bbackground%3A%23eee%3Bborder-radius%3A0%200%2050%25%2050%25%3Bcolor%3A%23fff%3Bcontent%3A%22%E2%97%8F%20%E2%97%8F%20%E2%97%8F%22%3Bposition%3Aabsolute%3Btext-align%3Acenter%3Bwidth%3A100%25%7D.RH%20.file-wrap%3Ahover%3Aafter%7Bbackground%3A%23999%7D.RH%20.Box-body%7Bpadding%3A0!important%7D.RH%20.markdown-body%7B-webkit-font-smoothing%3Aantialiased%3Bborder%3A0%3Bcolor%3A%23333%3Bfont%3A300%2020px%2F1.6%20%22minion-pro%22%2C%22Minion%20Pro%22%2C%22Palatino%22%2C%22Palatino%20Linotype%22%2CGeorgia%2Cserif%3Bmargin%3A5rem%20auto%3Bpadding%3A0%3Bwidth%3A45rem%7D.RH%20h1%2C.RH%20h2%2C.RH%20h3%2C.RH%20h4%2C.RH%20h5%2C.RH%20h6%7Bcolor%3A%23444%3Bfont-family%3Asans-serif%3Bmargin-top%3A2em%7D.RHB%7Bbackground%3A%23444%3Bborder-radius%3A1em%3Bcolor%3A%23eee%3Bmargin%3A5px%3Bopacity%3A.5%3Bpadding-left%3A1.7em%3Bposition%3Afixed%3Bz-index%3A10%7D.RHB%3Ahover%7Bopacity%3A1%7D.RHB%3Abefore%7Bcolor%3Agray%3Bcontent%3A%22%5C%5C25cb%22%3Bleft%3A.5em%3Bposition%3Aabsolute%7D.RHB-on%3Abefore%7Bcolor%3Alime%3Bcontent%3A%22%5C%5C25c9%22%7D%3C%2Fstyle%3E%60)%3Bb.insertAdjacentHTML('afterbegin'%2C'%3Cbutton%20id%3D%22RHB%22%20class%3D%22RHB%20RHB-on%22%20title%3D%22toggle%20on%2Foff%22%3EReadHub%3C%2Fbutton%3E')%3Bb.classList.add('RH')%3Bconst%20t%3Dd.getElementById('RHB')%3Bt.addEventListener('click'%2C()%3D%3E%7Bb.classList.toggle('RH')%3Bt.classList.toggle('RHB-on')%7D)%7D)() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const d=document,b=d.body; | |
| if(b.classList.contains('RH'))return; | |
| d.head.insertAdjacentHTML('beforeend',`<style> | |
| .RH .js-header-wrapper, | |
| .RH .footer, | |
| .RH .pagehead, | |
| .RH .js-repo-meta-container, | |
| .RH .overall-summary, | |
| .RH .js-toggle-lang-stats, | |
| .RH .mt-2, | |
| .RH .mb-2, | |
| .RH .mb-3, | |
| .RH .d-flex, | |
| .RH .file-navigation, | |
| .RH .branch-infobar, | |
| .RH .commit-tease, | |
| .RH .file-header, | |
| .RH #readme>h3, | |
| .RH .px-2, | |
| .RH .f4{display:none!important} | |
| .RH .file,.RH .Box{border:0} | |
| .RH .file-wrap{left:50%;margin-left:-22.5rem;position:fixed;top:0;transform:translateY(-100%);transition:transform .5s;width:45rem;z-index:100} | |
| .RH .file-wrap:hover{transform:translateY(0)} | |
| .RH .file-wrap:after{background:#eee;border-radius:0 0 50% 50%;color:#fff;content:"● ● ●";position:absolute;text-align:center;width:100%} | |
| .RH .file-wrap:hover:after{background:#999} | |
| .RH .Box-body{padding:0!important} | |
| .RH .markdown-body{-webkit-font-smoothing:antialiased;border:0;color:#333;font:300 20px/1.6 "minion-pro","Minion Pro","Palatino","Palatino Linotype",Georgia,serif;margin:5rem auto;padding:0;width:45rem} | |
| .RH h1,.RH h2,.RH h3,.RH h4,.RH h5,.RH h6{color:#444;font-family:sans-serif;margin-top:2em} | |
| .RHB{background:#444;border-radius:1em;color:#eee;margin:5px;opacity:.5;padding-left:1.7em;position:fixed;z-index:10} | |
| .RHB:hover{opacity:1} | |
| .RHB:before{color:gray;content:"\\25cb";left:.5em;position:absolute} | |
| .RHB-on:before{color:lime;content:"\\25c9"} | |
| </style>`); | |
| b.insertAdjacentHTML('afterbegin','<button id="RHB" class="RHB RHB-on" title="toggle on/off">ReadHub</button>'); | |
| b.classList.add('RH'); | |
| const t=d.getElementById('RHB'); | |
| t.addEventListener('click',()=>{b.classList.toggle('RH');t.classList.toggle('RHB-on')}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
References for optimal line length in content: