Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
141 lines (119 sloc) 4.22 KB
///////////////////////////////////
// TheSaneSafariCustomStyleSheet //
///////////////////////////////////
// Variables
// Color for <code> and <pre>
$lighterGray: lighten(black, 25%)
// Background color for <code>
$lightGray: lighten(lightgray, 10%)
// Border color for <pre> and <code>
$darkGray: darken(lightgray, 3%)
// Background color of YouTube
$darkerGray: darken(gray, 35%)
// Sans
$sans: Avenir
// Monospace
$monospace: Operator Mono SSm, Monaco
// I added a class of `toni` to all of the websites I administer, so that I could exclude them from this custom style sheet
// :not(.mac) is to exclude CodePen
html:not(.toni)
// I find that it's necessary to also style <table>'s because if a website is still using <table>'s, their styles probably suck big A as well
body:not(.wrap):not(.safari_mode):not(.tisa_mode):not(.htmlOn-cssOn-jsOn), table, .body
// No font fallbacks here because if you're using Safari on a Mac, you have Avenir
font-family: $sans !important
font-weight: 500 !important
font-size: 1.1em !important
line-height: 1.6 !important
text-transform: none !important
text-align: initial !important
// Who would mess with this!?
letter-spacing: initial !important
i, em
font-weight: 500 !important
b, strong
font-weight: 700 !important
& i, em
font-weight: 700 !important
// Because some websites are old AF
font
font-family: $sans !important
font-weight: 500 !important
font-size: 1.1em !important
// I think I had to do this because of a specificity thing on certain websites
h1, h2, h3, h4, h5
font-family: $sans !important
font-weight: 700 !important
& i, em
font-weight: inherit !important
img
max-width: 100% !important
// I probably could make a variable for the font stuff, but I'm too lazy to look that up
// *Not* CodePen
pre:not(.CodeMirror-line), code
// If you're not using H&Co's Operator typeface, you really should be. It's so perfect.
font-family: $monospace !important
font-size: 80% !important
color: $lighterGray !important
background-color: $lightGray !important
padding: 1em !important
border-radius: 0.4em !important
border: 0.1em solid $darkGray !important
tab-size: 2 !important
code
padding: 0.15em !important
// Yes, I have to have this to prevent the <code> within <pre> from having double styling wonkiness
// Some websites put text that is literally semantically <code> into <span>'s for some reason, so that's why I had to do this
pre code,
pre span,
pre span > span
border: none !important
padding: initial !important
background-color: initial !important
// Site-specific things
// GitHub
.page-edit-blob
pre
font-family: $monospace !important
color: initial !important
background-color: initial !important
padding: initial !important
border-radius: initial !important
border: initial !important
// Twitter
// body[class^="user-style-"]
// font-family: Avenir !important
// YouTube.com
// This website is satan
// Look at this tag. What does it say about Google/YouTube that they can't even use an actual HTML5 tag?
ytd-app
font-size: 110% !important
background-color: $darkerGray !important
a#video-title.yt-simple-endpoint.style-scope.ytd-grid-video-renderer
font-weight: 700 !important
div#metadata-container.grid.style-scope.ytd-grid-video-renderer
font-weight: 500 !important
// Marco.org
// Marco's brown masthead gets overwhelmed by the increased font size i'm applying to <body> elements
#mastheadbackground
height: 185px !important
margin-bottom: -185px !important
// CSS-Tricks
.all-site-wrap
pre code
padding-top: 2rem !important
background-color: initial !important
// Not sure why this is necessary, but it is
#kottke-org
font-size: 200% !important
// Built in Safari error page
.text-container
text-align: center !important
// Safari Plain Text page
// Not sure how much more specific I can get here
pre:only-child
font-size: 60% !important
background-color: white !important
padding: 0.5em !important
border: initial !important
border-radius: none !important
tab-size: 2 !important
You can’t perform that action at this time.