Last active
June 28, 2022 08:04
-
-
Save Pycea/73eeee25ff4f697b76c0d3d36035c749 to your computer and use it in GitHub Desktop.
Styling improvements for the ACX Substack. To load into Safari, copy the ones you want into a file, then go to Preferences > Advanced > Style sheet and select your file.
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
/* Fixes the header to the top of the page */ | |
div#entry > div#main .main-menu-content { | |
position: relative !important; | |
top: 0 !important; | |
} | |
div#entry > div#main .main-menu .backdrop { | |
position: fixed !important; | |
} | |
div#entry > div#main .topbar-replacement { | |
display: none; | |
} | |
div#entry > div#main .comment .comment-anchor { | |
top: 0 !important; | |
} |
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
/* Hides reactions */ | |
div#entry > div#main .comment-actions span:first-child { | |
display: none; | |
} | |
div#entry > div#main .comment-actions span:nth-child(2) { | |
margin-left: 0 !important; | |
} |
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
/* Anchor top menu */ | |
div#entry > div#main .main-menu-content { | |
position: relative !important; | |
top: 0 !important; | |
} | |
div#entry > div#main .main-menu .backdrop { | |
position: fixed !important; | |
} | |
div#entry > div#main .topbar-replacement { | |
display: none; | |
} | |
div#entry > div#main .comment .comment-anchor { | |
top: 0 !important; | |
} | |
/* Other misc styling */ | |
div#entry > div#main .comment .comment-actions > span { | |
margin-left: 0 !important; | |
margin-right: 10px; | |
} | |
div#entry > div#main .comment .comment-meta .highlight { | |
margin-right: 0 !important; | |
} | |
div#entry > div#main .comment .comment-meta .highlight .highlight-text { | |
top: -2px; | |
} | |
/* Global default font and look */ | |
:root { | |
--web_bg_color: #ffffff !important; | |
--background_contrast_1: #f7f7f7 !important; | |
--background_contrast_2: #ededed !important; | |
--background_contrast_3: #d6d6d6 !important; | |
} | |
div#entry > div#main { | |
-webkit-font-smoothing: auto !important; | |
background-color: #f0f0f0 !important; | |
} | |
/* Topbar */ | |
div#entry > div#main .main-menu-content .topbar-content { | |
background: linear-gradient(to bottom, rgba(139,171,232,1) 0%, rgba(79,115,193,1) 100%) !important; | |
text-decoration: none !important; | |
} | |
div#entry > div#main .topbar-content .navbar-title { | |
font-size: 43px !important; | |
max-height: 100px !important; | |
font-family: 'Raleway', Open Sans, Arial, sans-serif !important; | |
font-weight: normal !important; | |
text-align: center !important; | |
letter-spacing: 2px !important; | |
text-decoration: none !important; | |
-webkit-font-smoothing: auto !important; | |
} | |
div#entry > div#main .topbar-content .navbar-title .navbar-title-link { | |
color: white !important; | |
} | |
div#entry > div#main .topbar-spacer { | |
display: none; | |
} | |
div#entry > div#main .subscribe-cta.subscribe-btn { | |
display: none !important; | |
} | |
div#entry > div#main button.user-indicator.signed-in { | |
background-color: #00000000 !important; | |
} | |
div#entry > div#main .notification-container { | |
transform: scale(.8) !important; | |
} | |
/* Title and post info */ | |
div#entry > div#main .post-title { | |
font-size: 16px !important; | |
line-height: 1.3em !important; | |
margin-bottom: 10px !important; | |
text-transform: uppercase !important; | |
letter-spacing: 1px !important; | |
font-family: Georgia, "Bitstream Charter", serif !important; | |
font-weight: normal !important; | |
-webkit-font-smoothing: auto !important; | |
} | |
div#entry > div#main .subtitle { | |
font: 12px/20px Verdana, sans-serif !important; | |
padding-bottom: 8px !important; | |
} | |
div#entry > div#main .publish-context > time { | |
color: #888 !important; | |
font-size: 10px !important; | |
font-family: Verdana, sans-serif !important; | |
letter-spacing: 1px !important; | |
background: #f9f9f9 !important; | |
border: 1px solid #eee !important; | |
padding: 5px 7px !important; | |
display: inline !important; | |
text-transform: uppercase !important; | |
text-shadow: 1px 1px 1px #fff !important; | |
} | |
div#entry > div#main .publish-context > time:before { | |
content: "Posted on " !important; | |
} | |
div#entry > div#main .publish-context > time:after { | |
content: " by Scott Alexander" !important; | |
} | |
div#entry > div#main .publish-context > time { | |
margin-right: 16px !important; | |
} | |
/* Post content */ | |
div#entry > div#main .single-post-container { | |
background: #f0f0f0 !important; | |
padding: 10px 0px !important; | |
} | |
@media screen and (min-width: 800px) { | |
div#entry > div#main .single-post-container > .container { | |
margin: 0 auto; | |
width: 780px !important; | |
} | |
} | |
div#entry > div#main .single-post { | |
border: 1px solid #d5d5d5 !important; | |
border-radius: 10px !important; | |
background: #fff !important; | |
padding: 20px 28px !important; | |
margin-bottom: 10px !important; | |
} | |
div#entry > div#main article { | |
padding: 0 !important; | |
} | |
div#entry > div#main article .available-content p, article .available-content li { | |
color: #333 !important; | |
font: 12px/20px Verdana, sans-serif !important; | |
} | |
div#entry > div#main figcaption { | |
font: 12px/20px Verdana, sans-serif !important; | |
} | |
div#entry > div#main article .available-content p > a { | |
color: #0066cc !important; | |
text-decoration: underline !important; | |
} | |
div#entry > div#main blockquote { | |
border-left: 4px solid #ddd !important; | |
margin: 0 2em !important; | |
padding: 0 1em !important; | |
} | |
div#entry > div#main blockquote p { | |
margin-left: 0 !important; | |
font-family: Georgia, "Bitstream Charter", serif !important; | |
font-style: italic !important; | |
font-size: 13px !important; | |
line-height: 24px !important; | |
color: #333 !important; | |
} | |
/* Comments container */ | |
div#entry > div#main .comments-page-sort-menu-button { | |
background: transparent !important; | |
} | |
div#entry > div#main .comments-page-sort-menu-dropdown a { | |
font: 12px/20px Verdana, sans-serif !important; | |
padding-top: 6px !important; | |
padding-bottom: 6px !important; | |
} | |
div#entry > div#main .full-container-border { | |
display: none !important; | |
} | |
div#entry > div#main .comments-page { | |
background: #f0f0f0 !important; | |
padding-top: 10px !important; | |
} | |
div#entry > div#main .comments-page > .container { | |
box-sizing: border-box !important; | |
background-color: white !important; | |
justify-content: center !important; | |
border: 1px solid #d5d5d5 !important; | |
border-radius: 10px !important; | |
padding: 17px !important; | |
} | |
div#entry > div#main .comments-page .comments-heading { | |
margin-top: 0 !important; | |
font-family: Georgia, "Bitstream Charter", serif !important; | |
font-size: 16px !important; | |
font-weight: normal !important; | |
letter-spacing: 1px !important; | |
text-transform: uppercase; | |
} | |
div#entry > div#main .comments-page .comment-input-head { | |
padding-top: 0 !important; | |
} | |
div#entry > div#main .comments-page .comment-input-right { | |
margin-left: 16px !important; | |
} | |
@media screen and (min-width: 800px) { | |
div#entry > div#main .comments-page > .container { | |
width: 780px !important; | |
} | |
} | |
/* Comment box form */ | |
div#entry > div#main .comment-content .comment-rest { | |
border: 1px solid #ddd !important; | |
padding: 10px !important; | |
border-radius: 10px !important; | |
flex-grow: 1 !important; | |
background: #fafafa !important; | |
box-sizing: border-box !important; | |
} | |
div#entry > div#main .comment-content .comment-head { | |
border: none !important; | |
flex-grow: 0 !important; | |
background: none !important; | |
} | |
div#entry > div#main .comment-content tr { | |
display: flex !important; | |
} | |
div#entry > div#main .profile-img-wrap img { | |
border-radius: 0px !important; | |
height: 41px !important; | |
width: 41px !important; | |
position: relative !important; | |
} | |
div#entry > div#main .profile-img-wrap div.profile-img-badge { | |
right: -6px !important; | |
} | |
div#entry > div#main .comment > .comment-list-collapser { | |
top: 42px !important; | |
padding-top: 18px !important; | |
padding-left: 20px !important; | |
height: calc(100% - 67px) !important; | |
} | |
div#entry > div#main .comment > .comment-list-collapser:hover .comment-list-collapser-line { | |
box-shadow: inset 1px 0 #aaa !important; | |
} | |
/* Comment meta */ | |
div#entry > div#main .comment-meta { | |
display: initial !important; | |
} | |
div#entry > div#main .comment-meta > .commenter-name, .comment-meta > .commenter-publication, .comment-meta > .highlight { | |
display: block; | |
} | |
div#entry > div#main .comment-meta .commenter-name { | |
font-family: Verdana, sans-serif !important; | |
font-weight: bold !important; | |
color: black !important; | |
text-decoration: none !important; | |
} | |
div#entry > div#main .comment-meta .commenter-name:after { | |
content: " says:" !important; | |
font-weight: normal !important; | |
font-style: italic; | |
color: #333 !important; | |
} | |
div#entry > div#main .comment-meta > a, .comment-meta > span:not(.commenter-name):not(.highlight) { | |
font-family: Georgia, "Bitstream Charter", serif !important; | |
color: #888 !important; | |
text-decoration: none !important; | |
padding-top: 4px !important; | |
} | |
div#entry > div#main .comment-meta .comment-publication-name-separator { | |
display: none !important; | |
} | |
div#entry > div#main .comment-meta .edited-indicator, .comment-meta .better-edited-indicator { | |
margin-left: 10px; | |
} | |
div#entry > div#main .comment-meta .highlight { | |
margin-left: 0 !important; | |
margin-right: 0 !important; | |
} | |
div#entry > div#main .profile-hover-card-container { | |
transform-origin: top left !important; | |
transform: scale(.8) !important; | |
} | |
/* Comment content */ | |
div#entry > div#main .comment .comment-body { | |
max-height: 620px; | |
padding-top: 8px; | |
} | |
div#entry > div#main .comment-body p { | |
font: 12px/20px Verdana, sans-serif !important; | |
color: #333 !important; | |
} | |
div#entry > div#main .comment-body .comment_notice { | |
font: 12px/20px Verdana, sans-serif !important; | |
} | |
div#entry > div#main .comment.one-liner .comment-body { | |
display: block !important; | |
font: 12px/20px Verdana, sans-serif !important; | |
} | |
div#entry > div#main .comment-body .show-all-toggle { | |
background: linear-gradient(#fafafa00 0%, #fafafa 75%, #fafafa 100%) !important; | |
} | |
/* Comment actions */ | |
div#entry > div#main .comments-page .comment .comment-actions { | |
color: #888 !important; | |
display: block; | |
} | |
div#entry > div#main .comment.one-liner > .comment-content .comment-actions { | |
display: block !important; | |
margin-left: 0 !important; | |
margin-top: 6px !important; | |
} | |
div#entry > div#main .tooltip-portal .dropdown-menu a { | |
font: 12px/20px Verdana, sans-serif !important; | |
padding-top: 6px !important; | |
padding-bottom: 6px !important; | |
} | |
/* New comments */ | |
div#entry > div#main .highlight-new .comment.new-comment > .comment-content .comment-rest { | |
border: 2px solid #5a5; | |
} | |
div#entry > div#main .new-tag { | |
margin-left: 10px; | |
} | |
div#entry > div#main .comment .comment-meta span.new-tag-text { | |
color: #c5c5c5 !important; | |
} | |
/* Selected comment */ | |
div#entry > div#main .comment.selected > .comment-content .comment-rest { | |
background: #de912d2c !important; | |
} | |
div#entry > div#main .comment.selected > .comment-content::before { | |
background: inherit !important; | |
} | |
/* Black sorcery */ | |
body { | |
overflow-y: hidden !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment