A simple and easy to read auto light/dark theme for blog.fefe.de
blog.fefe.de by tjb

Details
Authortjb
LicenseMIT
Categoryblog.fefe.de
Created
Updated
Size3.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name blog.fefe.de
@version 1.0.0
@namespace userstyles.world/user/tjb
@description A nice light/dark theme, based on fefe2.css
@author tjb
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://blog.fefe.de") {
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&display=swap');
body {
font-family: "JetBrains Mono", monospace;
font-size: 1em;
background-color: #ddd;
color: #333;
max-width: 720px;
margin: 2em auto;
line-height: 1.5em;
}
body > div:last-child {
text-align: center !important;
margin-top: 40px;
}
a {
color: #4eb90f !important;
text-decoration: none;
font-weight: 600 !important;
}
a:hover {
color: #fff !important;
background: #000 !important;
}
li p,
blockquote {
text-align: justify;
}
li p[u] b {
color: #000;
font-weight: bold;
}
h2 {
text-align: right;
margin-bottom: 0.2em;
text-transform: lowercase;
font-size: 2rem;
}
h3 {
margin-bottom: 0em;
text-transform: lowercase;
font-size: 1.4em;
}
b {
background-color: #000;
padding: 0.2em 0.3em;
float: right;
text-transform: uppercase;
width: 29em;
text-align: right;
font-weight: bold;
color: #fff;
}
body > b:first-of-type {
display: block;
clear: both;
margin-bottom: 20px;
font-size: .75em;
}
body > p:first-of-type {
content: "";
clear: both;
margin-bottom: 4rem;
}
ul b {
float: none;
color: #000;
padding: 0;
text-transform: none;
background: 0;
/*font: bold 1rem monospace;*/
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 1.3em 0;
border-color: #9f9f9f;
border-bottom: 1px dashed #808080;
}
li a {
text-decoration: none;
font-weight: bold;
}
li a:hover {
color: #fff;
background-color: #000;
}
li pre {
background: #ebf0f8;
padding: 1em;
border: 1px solid #999
}
blockquote {
font-style: italic;
border-left: 3px solid #999;
padding: 0 1em;
margin-left: 0;
}
li blockquote li {
margin: 0 1em;
}
li ul,
li ol {
margin: 1em 0;
}
li ul li,
li ol li {
padding: 0;
border: 0;
}
li ul li {
list-style-type: square;
}
li ol li {
list-style-type: upper-roman;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #151c22;
color: #eee;
}
a:hover {
color: #fff !important;
background: #62ab37 !important;
}
li pre {
background-color: #32363e;
border: none;
}
b {
background-color: #000;
color: #fff;
}
li p[u],
li p[u] b {
color: #fff;
}
li blockquote {
color: #ddd;
}
ul b {
color: #ddd;
}
}
@media (max-width: 960px) {
body {
margin: 2em 5%;
}
}
}