github/pelican
1
0
Fork 1
mirror of https://github.com/getpelican/pelican.git synced 2025-10-15 20:28:56 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement dark mode for template

Browse source 
Signed-off-by: Jacki <jacki@thejackimonster.de>
This commit is contained in:
Jacki 2025-04-08 16:32:42 +02:00 • committed by Justin Mayer
commit f95466c8fe
1 changed files with 55 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
pelican/themes/notmyidea/static/css/main.css
View file

@ -27,6 +27,13 @@ body {
text-align: left;
}
@media (prefers-color-scheme: dark) {
body {
background: #070808;
color: #FFFEFE;
}
}
/* Headings */
h1 {font-size: 2em }
h2 {font-size: 1.571em} /* 22px */
@ -106,6 +113,12 @@ dd {margin-left: 1.5em;}
pre{background-color: rgb(238, 238, 238); padding: 10px; margin: 10px; overflow: auto;}
@media (prefers-color-scheme: dark) {
pre {
background: rgb(38, 38, 38);
}
}
/* Quotes */
blockquote {
margin: 20px;
@ -197,6 +210,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
@media (prefers-color-scheme: dark) {
#banner h1 a:link, #banner h1 a:visited {
color: #FFFAF8;
}
}
/* Main Nav */
#banner nav {
background: #000305;
@ -213,6 +232,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
-webkit-border-radius: 5px;
}
@media (prefers-color-scheme: dark) {
#banner nav {
background: #121518;
}
}
#banner nav ul {list-style: none; margin: 0 auto; max-width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
@ -255,6 +280,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
-webkit-border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
#featured {
background: #151617;
}
}
#featured figure {
border: 2px solid #eee;
float: right;
@ -284,6 +315,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
-webkit-border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
#content {
background: #111;
}
}
/*
Extras
*****************/
@ -306,6 +343,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
padding: .3em .25em;
}
@media (prefers-color-scheme: dark) {
#extras a:link, #extras a:visited {
color: #888;
}
}
#extras a:hover, #extras a:active {color: #fff;}
/* Blogroll */
@ -339,6 +382,12 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
-webkit-border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
#about {
background: #222;
}
}
#about .primary {float: left; max-width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
@ -367,6 +416,12 @@ li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
.entry-title a:visited {background-color: #fff;}
@media (prefers-color-scheme: dark) {
.entry-title a:link, .entry-title a:visited {
color: #C74350;
}
}
.hentry .post-info * {font-style: normal;}
/* Content */