Skip to content

Instantly share code, notes, and snippets.

@haimingzhao
Last active September 27, 2017 09:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haimingzhao/902550273ecd91dde25ef11d8fe41c74 to your computer and use it in GitHub Desktop.
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.
@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;
}
@haimingzhao
Copy link
Author

haimingzhao commented Sep 26, 2017

An dark theme that is easy to the eye and easy to read. With big font and big line width.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment