rss2html/rss2html.css

:root {
    --item-bg: #fff;
    --itemlist-bg: #F6F6FF;
}

.item {
    border-style: none;
    border-width: 1px;
    border-color: #88F;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    padding: 0.5em;
    background-color: var(--item-bg);
    margin: 1em;
    hyphens: auto;
    -moz-hyphens: auto;
    max-width: 40em;
    box-shadow: 0.2em 0.2em 0.5em 0.3em #0002;
}

@media screen and (min-width: 45em) {
    .item {
        width: 40em;
    }
}

// .item:after {
//     display: block;
//     clear: both;
//     content: "";
//     background-color: #00F;
//     height: 6px;
//     background: linear-gradient(var(--item-bg), #EEEEFF);
// }

.op {
    float: right;
    padding: 6px;
}

.op a {
    border-style: none;
    border-radius: 3px;
    padding: 3px;
    background: linear-gradient(#88F, #008);
    color: #FFF;
}

h2 a {
    text-decoration: none;
}

h2 {
    font-family: "Quercus", sans-serif;
    font-variant: small-caps;
}

.itemno {
    font-size: 0.5em;
}

.itemno:before {
    content: " (";
    color: #F00;
}

.itemno:after {
    content: ") ";
    color: #F00;
}

.feed_info {
    display: table-row;
    border-style: solid;
    border-width: 1px;
    margin: .1em;
}

.feed_id {
    font-size: 0.7em;
    display: table-cell;
    text-align: right;
    padding-right: 0.5em;
}

.feed_title {
    padding-right: 0.2em;
}

.feed_items {
    background-color: #CCF;
    color: #888;
    display: table-cell;
    text-align: right;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.feed_unread {
    background-color: #DDF;
    color: #080;
    display: table-cell;
    text-align: right;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.feed_lastissued {
    background-color: #CCF;
    color: #000;
    display: table-cell;
    padding-left: 0.2em;
    padding-right: 0.2em;
    text-align: right;
}

.feed_lastseen {
    background-color: #DDF;
    color: #000;
    display: table-cell;
    padding-left: 0.2em;
    padding-right: 0.2em;
    text-align: right;
}

.feedlist {
    background-color: #BBF;
    float: left;
    display: table;
    margin-right: 0.5em;
    padding: 0.2em;
}

input[type=checkbox]:checked ~ .feedlist {
    display: block;
}

input[type=checkbox] ~ .feedlist {
    display: none;
}

.feedlist a {
    text-decoration: none;
}

.op a {
    text-decoration: none;
}

.itemlist {
    background-color: var(--itemlist-bg);
    font-family: "Quercus", sans-serif;
    display: flex;
    flex-flow: row wrap;
}

@media screen and (min-width: 45em) and (max-width: 60em) {
    .itemlist {
        max-width: 68%;
    }
    .feedlist {
        max-width: 32%;
    }
}

.item.read {
    background-color: #EEE;
}

.lastupdate {
    position: absolute;
    top: 0em;
    right: 0em;
}

h1 {
    background: linear-gradient(to right, #008, #CCF);
    margin: 0em;
    color: #FFF;
}

h1 a {
    text-decoration: none;
    color: inherit;
}

body {
    margin: 0em;
}

img {
    max-width: 99%;
}

.content {
    max-height: 50vh;
    overflow: auto;
}