When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
max-width: 38rem;
padding: 2rem;
margin: auto;
}| $.fn.wordify = function(){ | |
| this.find(":not(iframe,textarea)").addBack().contents().filter(function() { | |
| return this.nodeType === 3; | |
| }).each(function() { | |
| var textnode = $(this); | |
| var text = textnode.text(); | |
| text = text.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g,'<span>$1</span>'); | |
| textnode.replaceWith(text); | |
| }); | |
| return this; |
I've done the same process every couple years since 2013 (Mountain Lion, Mavericks, High Sierra, Catalina) and I updated the Gist each time I've done it.
I kinda regret for not using something like Boxen (or anything similar) to automate the process, but TBH I only actually needed to these steps once every couple years...
| #!/bin/sh | |
| ### | |
| # SOME COMMANDS WILL NOT WORK ON macOS (Sierra or newer) | |
| # For Sierra or newer, see https://github.com/mathiasbynens/dotfiles/blob/master/.macos | |
| ### | |
| # Alot of these configs have been taken from the various places | |
| # on the web, most from here | |
| # https://github.com/mathiasbynens/dotfiles/blob/5b3c8418ed42d93af2e647dc9d122f25cc034871/.osx |