Skip to content

Instantly share code, notes, and snippets.

@Pycea
Last active June 28, 2022 08:04
Show Gist options
  • Save Pycea/73eeee25ff4f697b76c0d3d36035c749 to your computer and use it in GitHub Desktop.
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.
/* 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;
}
/* 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;
}
/* 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