Everyone loves Paul Graham's site. It is a treasure trove of thought-provoking ideas and practical advice that has inspired and informed countless people over the years, making it a valuable resource for anyone seeking to gain a deeper understanding of the world around us and our place in it.
But let's face it, it could be more readable to human eyes. This userstyle make it essays centered, add necessary space, increase page width, and replace with more modern fonts, so you can comfortably read it on modern screens.
Notes
Userstyle doesn't have notes.
Source code
/* ==UserStyle==
@name Readable paulgraham.com
@namespace USO Archive
@author Chuck Chen
@description `Centers the layout of the content on paulgraham.com and make it more readable.`
@version 20230329
@license CC0-1.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("paulgraham.com") {
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');*/
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVQUwaEQbjB_mQ.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuxJPkqt8ndeYxZ2JTg.woff) format('woff');
}
/* Center the content on the page */
body > table {
margin: 0 auto;
}
/* Replace font to san-serif fonts */
font {
font-size: 16px;
font-family: "Open Sans", Lato, Helvectica, Calibri, san-serif;
}
/* Make it wider on modern monitor */
body > table > tbody > tr > td:nth-child(3) > table:nth-child(4) {
width: 960px !important;
}
body > table > tbody > tr > td:nth-child(1) > img {
opacity: 0.9;
}
body > table > tbody > tr > td:nth-child(1) > img:hover {
opacity: 1;
}
}
