Last active
September 27, 2017 09:53
-
-
Save haimingzhao/902550273ecd91dde25ef11d8fe41c74 to your computer and use it in GitHub Desktop.
My custom stylesheets for Chrome plugin Just-Read https://github.com/ZachSaucier/Just-Read.
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
@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"); | |
} | |
@media screen { | |
* { | |
box-sizing: border-box; | |
} | |
} | |
body { | |
font-family: Merriweather, serif; | |
line-height: 2.75em; | |
font-size: 16px; | |
color: rgb(255, 167, 38); | |
background-color: rgb(45, 99, 125); | |
} | |
h1, h2 { | |
font-family: "Source Sans Pro Bold", sans-serif; | |
} | |
h1 { | |
font-size: 1.875em; | |
line-height: 2.125em; | |
} | |
h2 { | |
font-size: 1.25em; | |
line-height: 2.125em; | |
} | |
h3 { | |
font-family: Merriweather, serif; | |
font-size: 1em; | |
line-height: 2em; | |
padding-top: 0.9375em; | |
padding-bottom: 0.9375em; | |
border-bottom: 1px solid rgb(216, 216, 216); | |
border-top: 1px solid rgb(216, 216, 216); | |
} | |
hr { | |
height: 1px; | |
background-color: rgb(216, 216, 216); | |
border: none; | |
width: 100%; | |
margin: 0px; | |
} | |
a[href] { | |
color: rgb(39, 170, 225); | |
} | |
a[href]:hover { | |
color: rgb(78, 202, 255); | |
} | |
.youtubeContainer { | |
position: relative; | |
width: 100%; | |
height: 0px; | |
padding-bottom: 56.25%; | |
padding-top: 25px; | |
} | |
iframe[src*="youtube.com/embed/"] { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
} | |
img { | |
max-width: 100%; | |
} | |
li { | |
line-height: 2.5em; | |
} | |
pre { | |
background-color: rgb(224, 224, 224); | |
padding: 10px; | |
overflow: auto; | |
} | |
aside, [class*="sidebar"], [id*="sidebar"] { | |
max-width: 90%; | |
margin: 0px auto; | |
border: 1px solid lightgrey; | |
padding: 5px 15px; | |
} | |
.simple-date { | |
display: inline-block; | |
font-family: "Source Sans Pro Light", sans-serif; | |
font-size: 18px; | |
padding-right: 15px; | |
padding-top: 10px; | |
padding-bottom: 10px; | |
border-right: 1px solid rgb(216, 216, 216); | |
} | |
.rtl .simple-date { | |
border-left: 1px solid rgb(216, 216, 216); | |
border-right: none; | |
padding-right: 0px; | |
padding-left: 15px; | |
} | |
.simple-author { | |
display: inline-block; | |
font-family: "Source Sans Pro Semibold", sans-serif; | |
font-size: 18px; | |
color: rgb(39, 170, 225); | |
line-height: 22px; | |
padding-left: 10px; | |
padding-top: 10px; | |
padding-bottom: 10px; | |
} | |
.rtl .simple-author { | |
padding-left: 0px; | |
padding-right: 10px; | |
} | |
.simple-container { | |
max-width: 600px; | |
margin: 0px 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; | |
} | |
} | |
[class*="emoji"], [class*="icon"] { | |
width: 1em; | |
} | |
script { | |
display: none; | |
} | |
[class="ad"], [class*="ads"], [class^="ad-"], [class^="ad_"], [class*="-ad-"], [class$="-ad"], [class$="_ad"], [class~="ad"] { | |
display: none; | |
} | |
[class*="navigation"], [class*="nav"], nav, [class*="search"], [class*="menu"], [class*="print"]:not(.simple-print) { | |
display: none; | |
} | |
[class*="nocontent"], .hidden { | |
display: none; | |
} | |
[class*="popup"] { | |
display: none; | |
} | |
[class*="share"], [class*="sharing"], [class*="social"], [class*="follow"], [class*="newsletter"] { | |
display: none; | |
} | |
form, [class^="form-"], [class^="form"], [class*="-form-"], [class$="-form"], [class$="form"], [class~="form"] { | |
display: none; | |
} | |
[class*="related"], [class*="recommended"], [class*="see-also"], [class*="popular"], [class*="trail"] { | |
display: none; | |
} | |
[class*="comment"], [class*="disqus"], [id*="disqus"] { | |
display: none; | |
} | |
[class^="tag"], [class*="-tag-"], [class$="-tag"], [class$="_tag"], [class~="tag"], [class*="-tags-"], [class$="-tags"], [class$="_tags"], [class~="tags"], [id*="-tags-"], [id$="-tags"], [id$="_tags"], [id~="tags"] { | |
display: none; | |
} | |
[class*="subscribe"], [id*="subscribe"], [class*="subscription"], [id*="subscription"] { | |
display: none; | |
} | |
[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; | |
} | |
[class*="signup"], [id*="signup"], [class*="signin"], [id*="signin"], [class*="signIn"], [id*="signIn"] { | |
display: none; | |
} | |
footer, [class*="footer"], [id*="footer"] { | |
display: none; | |
} | |
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
An dark theme that is easy to the eye and easy to read. With big font and big line width.