Just Read - 다크 테마 (한글 가독성을 위해 수정)

dark-theme.css

@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: 'Noto Sans KR', 'Nanum Barun Gothic', 'Merriweather', serif;
    line-height: 2.0em;
    font-size: 18px;
    background-color: #212324;
    color: #ddd;
}

.simple-container {
    max-width: 675px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 20px;
}

p {
    color: #ddd;
    font-size: 18px;
}

h1,
h2 {
    font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Source Sans Pro Bold', sans-serif;
    color: #ddd;
}

h1 {
    font-size: 30px;
    line-height: 34px;
}

h2 {
    font-size: 20px;
    line-height: 25px;
}

h3 {
    font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Merriweather', serif;
    font-size: 16px;
    color: #ddd;
    line-height: 27px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #666;
    border-top: 1px solid #666;
}

hr {
    height: 1px;
    background-color: #666;
    border: none;
    width: 100%;
    margin: 0px;
}

a[href] {
    color: #27AAE1;
}

a[href]:hover {
    color: #4ECAFF;
}

img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
}

aside,
[class *="sidebar"],
[id *="sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Source Sans Pro Light', sans-serif;
    font-size: 18px;
    color: #ddd;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #666;
}

.simple-author {
    display: inline-block;
    font-family: 'Noto Sans KR', 'Nanum Barun Gothic', 'Source Sans Pro Semibold', sans-serif;
    font-size: 18px;
    color: #ddd;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.simple-close {
    position: fixed;
    top: 10px;
    right: 8px;
    font-size: 25px;

    background: none;
    border: 1px solid #ddd;
    color: #ddd;
    -webkit-transition: .3s;
    transition: .3s;
}

.simple-close:hover {
    border: 1px solid #ddd;
    color: #ddd;
}

.simple-close {
    color: #666;
    border-color: #666;
}

.simple-print {
    fill: #666;
}

.simple-print:hover {
    fill: #ddd;
}

.simple-ext-info {
    text-align: center;
}

@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;
    }
}

@media (min-width: 1921px) {
    body {
        font-size: 18px;
    }
}


/* Hide some things I dislike seeing when I read articles */
/* Very simple ad hider */
[class="ad"],
[class ^="ad-"],
[class ^="ad_"],
[class *="-ad-"],
[class $="-ad"],
[class $="_ad"],
[class~="ad"],
[id="ad"],
[id ^="ad-"],
[id ^="ad_"],
[id *="-ad-"],
[id $="-ad"],
[id $="_ad"],
[id~="ad"] {
    display: none;
}

/* Very simple sharing hider */
[class *="share"],
[class *="sharing"],
[class *="social"],
[id *="share"],
[id *="sharing"],
[id *="social"] {
    display: none;
}

/* Very simple related hider */
[class *="meta"]:not(.simple-meta),
[id *="meta"] {
    display: none;
}

/* Very simple related hider */
[class *="related"],
[id *="related"] {
    display: none;
}

/* Very simple comments hider */
[class *="comment"],
[id *="comment"] {
    display: none;
}

/* Very simple 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;
}

/* Very simple 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;
}

/* Very simple signup/signin hider */
[class *="signup"],
[id *="signup"],
[class *="signin"],
[id *="signin"],
[class *="signIn"],
[id *="signIn"] {
    display: none;
}

/* Very simple 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 *="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;
}