Theme Gallery

[JulioV]

I want to start this thread by sharing my CSS customization.

• It increases the font size.
• It highlights an article's title and External Link and Comments links which I use the most. (they are easier to click on mobile)
• It uses a One-Dark-inspired color palette
• It keeps read articles dimmed but visible.
• It increases the size of the Mark this page as read link

:root {
    --link-color: #7e8083
}

body {
    background-color: #21252b;
}

.item-meta a:hover,
.item-meta a:focus {
    color: #7e8083
}

.item-meta a {
    color: #606f86;
    padding: 15px 0 15px 0;
    display: block;
    width: 100%;
}

.item-meta-icons li {
    margin-left: 5px;
    margin-right: 5px;
}

.hide-read-items .item-status-read:not(.current-item) {
    display: inherit;
}

.item-status-unread {
    border-style: none;
    margin-bottom: 20px;
}

.item-title > a {
    color: #abb2c0
}

.item-title {
    font-size: 25px
}

.item-meta-info,
.category {
    display: none
}

.item-meta-icons > li:nth-of-type(1n+1)>a>span {
    font-size: 20px;
}

.item-meta-icons > li:nth-of-type(1n+1) {
    background-color: #282c34;
    text-align: center;
    margin-top: 10px;
    width: 47%;
    display: inline-block;
}

.page-footer {
    background-color: #282c34;
    text-align: center;
    padding: 15px 0 15px 0;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
    font-size: 25px;
}

.confirm > a {
    margin: 0 10px 0 10px;
}

.page-footer > ul {
    margin-left: inherit;
}

.page-footer > ul >li {
    list-style-type: none;
}

.item-meta-icons > li:nth-of-type(1),
.item-meta-icons > li:nth-of-type(2) {
    display: none;
}