Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
/* Makes ACX look like the old SSC */
/* Fix header in place */
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;
}
/* Global default font */
div#entry > div#main {
-webkit-font-smoothing: auto !important;
}
/* Topbar */
div#entry > div#main .topbar .container {
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 .main-menu .topbar .container .large-menu-name {
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 .main-menu .topbar .container .large-menu-name .large-menu-home-link {
color: white !important;
}
div#entry > div#main .subscribe-cta.subscribe-btn {
display: none !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 .post-meta-item.post-date {
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 .post-meta-item.post-date:before {
content: "Posted on " !important;
}
div#entry > div#main .post-meta-item.post-date:after {
content: " by Scott Alexander" !important;
}
div#entry > div#main .post-meta-item.post-date {
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 !important;
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;
}
div#entry > div#main .comments-page .comment-input-head {
padding-top: 0 !important;
}
div#entry > div#main .comments-page .comment-input-right {
margin-top: 2px !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;
}
/* Comment meta */
div#entry > div#main .commenter-name {
font-family: Verdana, sans-serif !important;
font-weight: bold !important;
color: black !important;
text-decoration: none !important;
}
div#entry > div#main .commenter-name > .account-hover-wrapper > a:after {
content: " says:" !important;
font-weight: normal;
font-style: italic;
}
div#entry > div#main .comment-meta .meta-details {
display: block !important;
padding-top: 10px !important;
padding-bottom: 4px !important;
margin-left: 0 !important;
}
div#entry > div#main .comment-meta .meta-details * {
font-family: Georgia, "Bitstream Charter", serif;
color: #888;
text-decoration: none;
}
div#entry > div#main .comment-meta .meta-details .commenter-publication {
display: block;
margin-bottom: 10px;
}
div#entry > div#main .comment-meta .meta-details .comment-publication-name-separator {
display: none;
}
div#entry > div#main .comment-meta .meta-details .edited-indicator, .comment-meta .meta-details .better-edited-indicator {
padding-left: 10px !important;
}
div#entry > div#main .comment-meta .highlight {
margin-left: 0 !important;
}
div#entry > div#main .account-hover-card-container {
transform-origin: top left !important;
transform: scale(.8) !important;
}
/* Comment content */
div#entry > div#main .comment .comment-body {
max-height: 620px;
}
div#entry > div#main .comment .comment-body.expanded {
max-height: initial;
}
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 .comment-actions {
color: #888 !important;
}
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;
}
/* 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 */
div#entry > div#main body {
overflow-y: hidden !important;
}
/* other fixes */
.dropdown-menu > .dropdown-menu-wrapper > li > a {
width: initial !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment