dark_mode_solar.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

html {
    font-size: 20px
}

body {
    background: #000;
    color: #f9f9f9
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal
}

h1 {
    font-size: 2.5rem;
    line-height: .95;
    text-indent: -.15rem
}

h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

p {
    line-height: 1.4
}

a {
    color: #fdfdfd;
    text-decoration: none
}

a:hover {
    color: #adadad!important;
    text-decoration: none
}

#content {
    margin: auto;
    padding-bottom: 1rem
}

#content h1 {
    margin-top: 1rem;
    line-height: 1.1
}

#battery {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: #46443e;
}

#bat_data {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    font-size: .75rem;
    text-align: right;
    padding: 3px .5rem 0 0;
    border-top: 1px solid black
}

#charge_icon svg {
    vertical-align: bottom
}

.bat_status {
    display: inline-block
}

.bat_icon {
    display: inline-block;
    width: 15px;
    vertical-align: bottom
}

.svg_stroke {
    fill: none;
    stroke: black;
    stroke-miterlimit: 10;
    stroke-width: 33px
}

.svg_fill {
    fill: black
}

a:hover .svg_stroke {
    stroke: #adadad
}

a:hover .svg_fill {
    fill: #adadad
}

a:hover .icon {
    fill: #adadad
}

main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem
}

.description p {
    display: none
}

.low .featured-img,.low p.img,li.low .featured-img,li.low p.img {
    background-color: #162dab
}

.low .category,li.low .category {
    color: #0027ff;
}

.low .category-low,li.low .category-low {
    display: block
}

.hig .featured-img,.hig p.img,li.hig .featured-img,li.hig p.img {
    background-color: #670a03
}

.hig .category,li.hig .category {
    color: #d11305;
}

.hig .category-hig,li.hig .category-hig {
    display: block
}

.obs .featured-img,.obs p.img {
    background-color: #006951
}

.obs .category {
    color: #02ffc5;
}

.obs .category-obs {
    display: block
}

header.top {
    padding-bottom: .5rem;
    border-bottom: 2px solid #fdfdfd
}

header.top h1 {
    text-transform: uppercase
}

#menu-s {
    display: none
}

#menu ul {
    display: inline-block
}

#menu .category {
    margin: 0
}

#menu li {
    display: inline-block
}

#menu li::after {
    content: " | "
}

#menu li:last-child::after {
    content: ""
}

#menu-list .social {
    position: relative;
    top: 3px;
    left: -5px
}

nav .category {
    display: inline-block
}

.subtitle {
    margin: .25rem 0
}

.subtitle .icon {
    position: relative;
    top: 3px
}

.gray {
    color: #adadad
}

.social a:last-child {
    padding-left: 5px
}

.icon {
    width: 20px;
    height: 20px
}

.bar {
    width: 100px;
    background: black;
    margin: 10px
}

time {
    display: block;
    color: #adadad;
    font-size: .8rem
}

.cols {
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.cols li {
    max-width: 25%;
    padding: 1rem 1rem 1rem 0
}

.cols li:nth-child(4n) {
    padding-right: 0
}

.cols time {
    margin-top: .25rem
}

.cover li {
    flex: 1
}

.cover li:nth-child(2) {
    flex: 3;
    max-width: none;
    padding-right: 0
}

.cover .featured-img {
    height: 500px;
    background-size: 100%
}

.featured-img {
    margin: .5rem 0;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: hard-light;
    mix-blend-mode: multiply
}

.category {
    display: block;
    margin: .25rem 0
}

.paginator {
    margin: 2rem auto;
    text-align: center;
    font-size: 1rem
}

.paginator a {
    font-size: 1.5rem
}

#archive {
    list-style-type: none;
    margin-bottom: 2rem
}

#archive li {
    padding: .25rem 0;
    overflow: auto;
    border-bottom: 2px solid transparent
}

#archive li:hover {
    border-color: black
}

#archive .category,#archive .entry-title,#archive time {
    float: left;
    padding-right: .5rem
}

#archive time {
    color: black;
    font-size: 1rem
}

#archive time,#archive #date {
    width: 20%
}

#archive #title,#archive .entry-title {
    width: 60%
}

#archive #cat,#archive .category {
    margin: 0;
    width: 20%
}

#filters {
    padding: .25rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: auto;
    color: #f3e8e8
}

#filters>div {
    float: left
}

.filter:hover {
    cursor: pointer
}

.filter.active.asc::after {
    content: "\2191"
}

.filter.active.desc::after {
    content: "\2193"
}

.post-info {
    overflow: auto;
    margin-top: .25rem;
    font-size: .8rem
}

.post-info time {
    float: left;
    font-style: normal;
    padding-right: .2rem
}

.post-info address {
    float: left;
    font-style: normal;
    padding-right: .5rem
}

.entry-content a,.tags a,footer#content-info a,p.summary a {
    text-decoration: underline
}

.entry-content a:hover,.tags a:hover,footer#content-info a:hover,p.summary a:hover {
    text-decoration: none
}

.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content p,.entry-content ol,.entry-content ul,.entry-content pre {
    max-width: 33rem;
    width: 80%
}

.entry-content pre {
    margin: auto
}

.entry-content h2 {
    font-size: 2rem;
    text-indent: -.15rem;
    margin: 3rem auto 0
}

.entry-content h3 {
    margin: 2rem auto 0
}

.entry-content p {
    margin: 1rem auto
}

.entry-content ol,.entry-content ul {
    margin: 1rem auto;
    line-height: 1.4
}

.entry-content p.img {
    width: 100%;
    max-width: none;
    mix-blend-mode: multiply;
    margin-bottom: .25rem
}

.entry-content img {
    display: block;
    mix-blend-mode: hard-light
}

.entry-content .caption {
    width: 100%;
    max-width: none;
    display: block;
    font-size: .8rem;
    margin: 0
}

.entry-content li {
    margin-left: 1rem;
    margin-bottom: .5rem
}

p.summary {
    font-size: 1.5rem;
    text-indent: 0;
    margin-top: 1rem;
    line-height: 1.2
}

blockquote {
    margin: 1rem 0;
    border: 1px solid black;
    border-width: 2px 0
}

blockquote p {
    font-size: 1.3rem;
    line-height: 1.3;
    text-indent: 0
}

.longquote {
    margin: 1rem 1rem 0;
    border-left: 1px solid black;
    padding-left: 1rem
}

.longquote p {
    font-size: .9rem
}

.entry-content img {
    width: 100%;
    display: block
}

iframe {
    margin: auto;
    display: block
}

hr {
    border: 0;
    border-top: 2px solid #b59797
}

.footnote {
    font-size: .8rem;
    padding-top: .5rem;
    width: 80%;
    max-width: 33rem;
    margin: auto
}

.footnote ol {
    width: 100%
}

.footnote p {
    line-height: 1.2;
    word-wrap: break-word;
    margin: 0;
    width: 100%
}

sup {
    vertical-align: baseline;
    font-size: .75rem
}

sub {
    vertical-align: baseline;
    font-size: .75rem
}

.ref {
    border: 1px solid black;
    padding: .5rem;
    background: #fff;
    z-index: 10;
    position: absolute;
    right: 0;
    width: 300px;
    margin-top: -2rem;
    max-width: 50%;
    display: none
}

.ref p {
    margin: 0;
    word-wrap: break-word;
    display: inline
}

.ref:hover {
    cursor: pointer
}

.ref .footnote-backref {
    display: none
}

a.footnote-ref {
    text-decoration: none;
    padding-right: .25rem
}

a.footnote-ref:hover {
    cursor: pointer
}

[id^=fn] .ref {
    text-indent: 0
}

.show .ref {
    display: block
}

#comment-list {
    font-size: .75rem;
    font-family: monospace;
    counter-reset: comments
}

#comment-list a {
    word-wrap: break-word
}

h5 {
    margin: auto;
    font-size: .75rem;
    border-top: 2px solid black;
    padding-top: .5rem
}

h5::before {
    counter-increment: comments;
    content: counter(comments) ")";
    padding-right: 5px
}

.button {
    display: block;
    padding: .5rem;
    border: 2px solid black;
    border-width: 2px;
    text-align: center;
    margin: 1rem auto;
    width: 400px
}

.button:hover {
    cursor: pointer;
    color: #adadad;
    border-color: #adadad
}

.button .icon {
    vertical-align: bottom
}

footer#content-info {
    border-top: 2px solid black;
    padding: .5rem 0;
    overflow: auto
}

footer#content-info .support {
    float: left;
    margin-top: .5rem;
    width: auto
}

footer#content-info h2 a {
    text-decoration: none
}

address p {
    display: inline
}

.related,#post-nav {
    border-top: 2px solid black;
    padding-top: .5rem
}

#post-nav {
    width: 100%;
    list-style-type: none;
    overflow: auto;
    margin-bottom: 1rem
}

#post-nav li {
    display: block;
    float: left;
    width: 50%
}

#post-nav li.newer {
    padding-right: .5rem
}

#post-nav li.older {
    float: right
}

#post-nav .gray {
    font-size: .8rem
}

footer .dashboard .weather_day::before {
    content: " ";
    display: block
}

footer .dashboard .weather_day:first-child::before {
    content: ""
}

footer .dashboard li {
    width: 25%
}

.weather_icon {
    background: url(/extra/weather_sprite.png);
    display: inline-block;
    height: 1rem;
    width: 1rem;
    position: relative;
    top: 3px;
    background-size: 120px;
    background-position: -40px 0
}

.partly-cloudy-day {
    background-position: -20px 0
}

.clear-day {
    background-position: 0 0
}

.clear-night {
    background-position: -60px 0
}

.partly-cloudy-night {
    background-position: -80px 0
}

.rain {
    background-position: -100px 0
}

footer .weather_text {
    display: none
}

.entry-content .weather_text {
    display: inline-block;
    padding-left: .25rem
}

.entry-content .weather_day {
    margin-top: 1rem;
    display: block;
    text-transform: uppercase
}

dl {
    margin-bottom: 50px
}

dt,dd {
    padding: .5rem 0;
    border-bottom: 2px solid black
}

dt {
    width: 300px;
    float: left;
    padding-right: 1rem
}

@media screen and (max-width: 1100px) {
    .cols li {
        max-width:50%
    }

    .cols li:nth-child(2n) {
        padding-right: 0
    }

    .cover li:nth-child(2) {
        flex: 1
    }

    .cover li {
        max-width: 50%
    }

    .cover li .featured-img {
        height: 300px;
        background-size: auto 140%
    }

    .featured-img {
        background-size: 120%
    }
}

@media screen and (max-width: 890px) {
    #menu-s {
        display:block;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: .25rem
    }

    #menu-s:hover {
        cursor: pointer;
        color: #adadad
    }

    #menu-list {
        height: 0;
        overflow: hidden;
        transition: height 300ms ease-in-out
    }

    #menu-list.show {
        height: 240px
    }

    #menu ul {
        display: block
    }

    #menu li {
        display: block;
        margin: .5rem 0
    }

    #menu li::after,#menu li:last-child::after {
        content: ""
    }

    #menu li.social {
        margin-left: -.25rem
    }

    footer .cols li {
        width: 50%
    }
}

@media screen and (max-width: 666px) {
    h1 {
        font-size:2rem
    }

    .top h1 {
        font-size: 2rem
    }

    .cols.cover {
        flex-direction: column-reverse
    }

    .cover li,.cover li:nth-child(2) {
        width: 100%;
        padding: 0
    }

    .cols li {
        max-width: 100%;
        padding-right: 0
    }

    footer .cols li {
        width: 100%
    }

    .button {
        width: 100%
    }

    .entry-content h2 {
        font-size: 1.5rem;
        margin-left: 0
    }

    .entry-content h3 {
        margin-left: 0
    }

    .entry-content p,.entry-content ul,.entry-content ol,.entry-content h5 {
        width: 100%
    }

    .footnote {
        width: 100%
    }

    #archive li:hover {
        border-color: transparent
    }

    #archive .dl,#archive .dl-label {
        display: none
    }

    #archive #date,#archive #title,#archive #cat {
        width: 33%
    }

    #archive .category,#archive .entry-title,#archive time {
        float: none;
        width: 100%;
        padding-right: 0;
        margin: 5px 0
    }

    #archive time,#archive .category {
        font-size: .8rem
    }

    dt,dd {
        padding: 0
    }

    dt {
        border-bottom: 0;
        width: 100%;
        float: none
    }
}

@media print {
    html {
        font-size: 10.5pt
    }

    body {
        background: none
    }

    h1,footer h2 {
        font-size: 1.2rem;
        margin: 0;
        display: inline-block
    }

    .subtitle {
        display: inline-block;
        margin: 0
    }

    .subtitle .icon {
        height: 1rem
    }

    #content h1.entry-title {
        font-size: 2rem;
        margin-top: 2rem
    }

    p.summary {
        margin-bottom: 1rem
    }

    .entry-content {
        columns: 2;
        column-gap: 20pt
    }

    .entry-content a {
        text-decoration: none
    }

    .entry-content a:after {
        content: "(" attr(href) ") ";
        font-size: .8rem;
        font-weight: normal
    }

    .entry-content h2 {
        font-size: 1.5rem;
        margin-bottom: .5rem
    }

    .entry-content p.img {
        max-width: none;
        margin: 1rem auto .5rem auto;
        background-color: white!important;
        mix-blend-mode: normal!important;
        page-break-inside: avoid
    }

    .entry-content p.img img {
        max-width: 100%;
        mix-blend-mode: normal!important
    }

    .entry-content p.caption {
        margin-bottom: 1rem
    }

    .entry-content h2,.entry-content h3,.entry-content p,.entry-content .footnote {
        max-width: none;
        width: 100%
    }

    .entry-content p {
        margin: 0;
        line-height: 1.2;
        text-indent: 2rem
    }

    .entry-content h2+p,.entry-content p.caption,.entry-content p.caption+p,.entry-content .footnote p {
        text-indent: 0
    }

    .entry-content blockquote p {
        line-height: 1.1;
        text-indent: 0;
        margin: 1rem 0;
        page-break-inside: avoid
    }

    #bat_data {
        display: none
    }

    nav,#battery,#comment-list,#related,#post-nav,ul.cols .featured-img,footer .dashboard {
        display: none
    }

    ul.cols li {
        max-width: 50%
    }
}

style.diff

12,13c12,13
<     background: #f0f8ff;
<     color: black
---
>     background: #000;
>     color: #f9f9f9
37c37
<     color: black;
---
>     color: #fdfdfd;
61c61
<     background: #fff5d1
---
>     background: #46443e;
129c129
<     color: #162dab
---
>     color: #0027ff;
137c137
<     background-color: #d11305
---
>     background-color: #670a03
141c141
<     color: #d11305
---
>     color: #d11305;
153c153
<     color: #006951
---
>     color: #02ffc5;
162c162
<     border-bottom: 2px solid black
---
>     border-bottom: 2px solid #fdfdfd
341c341
<     color: black
---
>     color: #f3e8e8
480c480
<     border-top: 2px solid black
---
>     border-top: 2px solid #b59797