Last active
March 8, 2023 19:14
-
-
Save ToniWonKanobi/75542d646685fb355778d50f962086ed to your computer and use it in GitHub Desktop.
Custom Stylesheet for Desktop Safari
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
| // 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