Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Custom Stylesheet for Desktop Safari
// 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%);
// Styles basically any webpage that I haven't designed (I added a class of `toni` to the <html> tag on all of my sites 😅)
// Codepen
html:not(.toni):not(.cookie_used_true.js.mac) {
body {
font-family: Avenir !important;
font-weight: 500 !important;
font-size: 1.1em !important;
line-height: 1.6 !important;
text-transform: none !important;
text-align: initial !important;
line-height: 1.6 !important;
}
// Because some websites are old AF
font {
font-family: Avenir !important;
font-weight: 500 !important;
font-size: 1.1 !important;
}
// I think I had to do this because of a specificity thing on certain websites
h1, h2, h3, h4, h5 {
font-family: Avenir !important;
}
// I personally believe that <h1> and at least <h2> should be weightier than the other headings (and the <body> text)
h1, h2 {
font-weight: 700 !important;
}
h3 {
font-weight: 600 !important;
}
h4, h5 {
font-weight: 500 !important;
}
// I probably could make a variable for the font stuff, but I'm too lazy to look that up
// The `:not()` is to whitelist GitHub
pre {
font-family: Operator Mono SSm !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;
}
code {
font-family: Operator Mono SSm !important;
font-size: 80% !important;
color: $lighterGray !important;
background-color: $lightGray !important;
padding: 0.15em !important;
border-radius: 0.4em !important;
border: 0.1em solid $darkGray !important;
}
// Yes, I have to have this to prevent the <code> within <pre> from having double styling wonkiness
pre code {
border: none !important;
padding: initial !important;
}
// Because some websites have no class
a:hover {
transition: 0.2s all ease-in-out !important;
}
// YouTube.com
// This website is satan
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;
}
}
// Squarespace
// This is satan's son of a website
#content.content-container {
max-width: 700px !important;
margin: auto !important;
h1, h2, h3, h4, h5, {
letter-spacing: initial !important;
}
}
// Marco's brown masthead gets overwhelmed by the increased font size i'm applying to <body> elements
// Marco.org
#mastheadbackground {
height: 185px !important;
margin-bottom: -185px !important;
}
// CSS-Tricks
.all-site-wrap {
// This is because CSS-Tricks uses those cool little <pre> labels for whatever type of code is featured in the <pre> block
pre code {
padding-top: 2rem !important;
background-color: initial !important;
}
}
// Not sure why this is necessary
#kottke-org {
font-size: 200% !important;
}
// Built in Safari error page
.text-container {
text-align: center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment