-
-
Save Zyst/56405fd1fd913b1dee871363579678cf to your computer and use it in GitHub Desktop.
@import url('https://fonts.googleapis.com/css?family=Roboto'); | |
@font-face { | |
font-family: 'Roboto'; | |
src: url("https://fonts.googleapis.com/css?family=Roboto:300"); | |
} | |
@font-face { | |
font-family: 'Source Sans Pro Semibold'; | |
src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf"); | |
} | |
@font-face { | |
font-family: 'Source Sans Pro Bold'; | |
src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); | |
} | |
@font-face { | |
font-family: 'Source Sans Pro Light'; | |
src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); | |
} | |
@font-face { | |
font-family: 'Merriweather'; | |
src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/Merriweather-Light.ttf"); | |
} | |
* { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'SF Pro Display', 'Roboto', BlinkMacSystemFont, 'Merriweather', serif; | |
line-height: 1.75em; | |
font-size: 18px; | |
color: #D1D1D1; | |
background-color: #222233; | |
} | |
h1, | |
h2 { | |
font-family: 'SF Pro Display', 'Roboto', BlinkMacSystemFont, 'Source Sans Pro Bold', sans-serif; | |
} | |
h1 { | |
font-size: 1.875em; | |
line-height: 2.125em; | |
} | |
h2 { | |
font-size: 1.25em; | |
line-height: 1.5625em; | |
} | |
h3 { | |
font-family: 'SF Pro Display', 'Roboto', BlinkMacSystemFont, 'Merriweather', serif; | |
font-size: 1em; | |
line-height: 1.7em; | |
padding-top: 0.9375em; | |
padding-bottom: 0.9375em; | |
border-bottom: 1px solid #D8D8D8; | |
border-top: 1px solid #D8D8D8; | |
} | |
hr { | |
height: 1px; | |
background-color: inherit; | |
border: none; | |
width: 100%; | |
margin: 0px; | |
} | |
a[href] { | |
color: #64BEFA; | |
text-decoration: none; | |
} | |
a[href]:hover { | |
color: #1872AE; | |
transition: color .5s; | |
} | |
img { | |
max-width: 100%; | |
} | |
li { | |
line-height: 1.5em; | |
} | |
/* Some sites set this to 'unset' */ | |
.content-container > * { | |
display: block !important; | |
} | |
aside, | |
[class *= "sidebar"], | |
[id *= "sidebar"] { | |
max-width: 90%; | |
margin: 0 auto; | |
border: 1px solid lightgrey; | |
padding: 5px 15px; | |
} | |
.simple-container { | |
max-width: 600px; | |
margin: 0 auto; | |
padding-top: 70px; | |
padding-bottom: 20px; | |
} | |
@media (max-width: 750px) { | |
.simple-container { | |
padding-left: 50px; | |
padding-right: 50px; | |
} | |
} | |
@media (max-width: 450px) { | |
.simple-container { | |
padding-top: 30px; | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
} | |
/* Table CSS! Ripped from Royal Road, goes well with the theme */ | |
table { | |
background: #004b7a; | |
margin: 10px auto; | |
border: none; | |
box-shadow: 1px 1px 1px rgba(0, 0, 0, .75); | |
border-spacing: 0; | |
font: inherit; | |
text-align: center; | |
} | |
table tr td, | |
table tr th, | |
table thead th { | |
margin: 3px; | |
padding: 5px; | |
color: #ccc; | |
border: 1px solid rgba(255, 255, 255, .25); | |
background: rgba(0, 0, 0, .1); | |
} | |
/* Hide extension elements, sorry for hiding these */ | |
button.simple-control.simple-close, | |
button.simple-control.simple-print, | |
button.simple-control.simple-edit-theme, | |
button.simple-control.simple-delete, | |
.simple-ext-info, | |
.simple-date, | |
.tooltip.notifier, | |
.simple-author, | |
.jr-tooltip, | |
.jr-notifier, | |
svg#Layer_1 { | |
display: none; | |
} | |
span { | |
word-wrap: break-word; | |
} | |
/* Hide some things I dislike seeing when I read articles */ | |
/* Ad hider */ | |
[class = "ad"], | |
[class *= "ads"], | |
[class ^= "ad-"], | |
[class ^= "ad_"], | |
[class *= "-ad-"], | |
[class $= "-ad"], | |
[class $= "_ad"], | |
[class ~= "ad"], | |
[id = "ad"], | |
[id *= "ads"], | |
[id ^= "ad-"], | |
[id ^= "ad_"], | |
[id *= "-ad-"], | |
[id $= "-ad"], | |
[id $= "_ad"], | |
[id ~= "ad"] { | |
display: none; | |
} | |
/* Nav, menu, and search hider */ | |
[class *= "navigation"], | |
[class *= "nav"], | |
nav, | |
[class *= "search"], | |
[class *= "menu"] { | |
display: none; | |
} | |
/* 'nocontent' hider */ | |
[class *= "nocontent"] { | |
display: none; | |
} | |
/* Popup hider */ | |
[class *= "popup"], | |
[id *= "popup"] { | |
display: none; | |
} | |
/* Sharing hider */ | |
[class *= "share"], | |
[class *= "sharing"], | |
[class *= "social"], | |
[id *= "share"], | |
[id *= "sharing"], | |
[id *= "social"], | |
[class *= "follow"], | |
[id *= "follow"], | |
[class *= "newsletter"], | |
[id *= "newsletter"] { | |
display: none; | |
} | |
/* Meta hider */ | |
[class *= "meta"]:not(.simple-meta), | |
[id *= "meta"] { | |
display: none; | |
} | |
/* Related/recommended hider */ | |
[class *= "related"], | |
[id *= "related"], | |
[class *= "recommended"], | |
[id *= "recommended"], | |
[class *= "see-also"], | |
[id *= "see-also"], | |
[class *= "popular"], | |
[id *= "popular"] { | |
display: none; | |
} | |
/* Comments hider */ | |
[class *= "comment"], | |
[id *= "comment"], | |
[class *= "disqus"], | |
[id *= "disqus"] { | |
display: none; | |
} | |
/* Tags hider */ | |
[class ^= "tag"], | |
[class *= "-tag-"], | |
[class $= "-tag"], | |
[class $= "_tag"], | |
[class ~= "tag"], | |
[id ^= "tag"], | |
[id *= "-tag-"], | |
[id $= "-tag"], | |
[id $= "_tag"], | |
[id ~= "tag"], | |
[class *= "-tags-"], | |
[class $= "-tags"], | |
[class $= "_tags"], | |
[class ~= "tags"], | |
[id *= "-tags-"], | |
[id $= "-tags"], | |
[id $= "_tags"], | |
[id ~= "tags"] { | |
display: none; | |
} | |
/* Subscribe/subscription hider */ | |
[class *= "subscribe"], | |
[id *= "subscribe"], | |
[class *= "subscription"], | |
[id *= "subscription"] { | |
display: none; | |
} | |
/* Fav/favorites hider */ | |
[class ^= "fav"], | |
[class *= "-fav-"], | |
[class $= "-fav"], | |
[class $= "_fav"], | |
[class ~= "fav"], | |
[id ^= "fav"], | |
[id *= "-fav-"], | |
[id $= "-fav"], | |
[id $= "_fav"], | |
[id ~= "fav"], | |
[class *= "favorites"], | |
[id *= "favorites"] { | |
display: none; | |
} | |
/* Signup/signin hider */ | |
[class *= "signup"], | |
[id *= "signup"], | |
[class *= "signin"], | |
[id *= "signin"], | |
[class *= "signIn"], | |
[id *= "signIn"] { | |
display: none; | |
} | |
/* Footer hider */ | |
footer, | |
[class *= "footer"], | |
[id *= "footer"] { | |
display: none; | |
} | |
/* Hide SVGs that use particular site names (usually icons) */ | |
svg[class *= "pinterest"], | |
[class *= "pinterest"] svg, | |
svg[id *= "pinterest"], | |
[id *= "pinterest"] svg, | |
svg[class *= "pinit"], | |
[class *= "pinit"] svg, | |
svg[id *= "pinit"], | |
[id *= "pinit"] svg, | |
svg[class *= "facebook"], | |
[class *= "facebook"] svg, | |
svg[id *= "facebook"], | |
[id *= "facebook"] svg, | |
svg[class *= "github"], | |
[class *= "github"] svg, | |
svg[id *= "github"], | |
[id *= "github"] svg, | |
svg[class *= "twitter"], | |
[class *= "twitter"] svg, | |
svg[id *= "twitter"], | |
[id *= "twitter"] svg, | |
svg[class *= "instagram"], | |
[class *= "instagram"] svg, | |
svg[id *= "instagram"], | |
[id *= "instagram"] svg, | |
svg[class *= "tumblr"], | |
[class *= "tumblr"] svg, | |
svg[id *= "tumblr"], | |
[id *= "tumblr"] svg, | |
svg[class *= "youtube"], | |
[class *= "youtube"] svg, | |
svg[id *= "youtube"], | |
[id *= "youtube"] svg, | |
svg[class *= "codepen"], | |
[class *= "codepen"] svg, | |
svg[id *= "codepen"], | |
[id *= "codepen"] svg, | |
svg[class *= "dribble"], | |
[class *= "dribble"] svg, | |
svg[id *= "dribble"], | |
[id *= "dribble"] svg, | |
svg[class *= "soundcloud"], | |
[class *= "soundcloud"] svg, | |
svg[id *= "soundcloud"], | |
[id *= "soundcloud"] svg, | |
svg[class *= "rss"], | |
[class *= "rss"] svg, | |
svg[id *= "rss"], | |
[id *= "rss"] svg, | |
svg[class *= "linkedin"], | |
[class *= "linkedin"] svg, | |
svg[id *= "linkedin"], | |
[id *= "linkedin"] svg, | |
svg[class *= "vimeo"], | |
[class *= "vimeo"] svg, | |
svg[id *= "vimeo"], | |
[id *= "vimeo"] svg, | |
svg[class *= "email"], | |
[class *= "email"] svg, | |
svg[id *= "email"], | |
[id *= "email"] svg { | |
display: none; | |
} |
Is there a simple modification to make the text wider horizontally? Currently, the text only fills half my screen (22" 4k monitor)... If I make the window half size the width is perfect. I'd like to make it 1.5x wider, leaving roughly a 2.5" space on the left and right of text. I attached a screenshot as an example of what it looks like on my screen. Thanks in-advance for your help!
Hi @coball2, by default this is indeed fairly small on bigger monitors (5k here):
I normally just zoom using the browser zoom tool (Control/Command
-+
) and zoom in, or press Control/Command
and use the scroll wheel to make the text and container bigger/smaller:
Alternatively you could add a class to the theme that changes the .simple-container
class from JustRead, which would have the benefit of leaving your font size unchanged, if you prefer that.
By default JustRead ships with the following container:
.simple-container {
max-width: 600px;
}
So you could just add something like this to the theme when you paste it in:
.simple-container {
max-width: 800px;
}
Which results in the following:
Just adjust the max-width
value until you find something you like!
Cheers
A modified version of this theme now comes with Just Read!
love the simplicity of your theme, thanks for sharing it!