added css/html for inverse logo for darkmode
This commit is contained in:
parent
f6e4de9c93
commit
bd65552c2d
4
index.md
4
index.md
@ -5,7 +5,9 @@
|
|||||||
<a href="/colophon.html">colophon</a>
|
<a href="/colophon.html">colophon</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<img class="mt4" src="vi-sw.png">
|
<div class="logo-container">
|
||||||
|
<img id="logo" class="mt4" src="vi-sw.png" alt="Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
_Why? [vi](https://en.wikipedia.org/wiki/Vi) is the **de facto** standard
|
_Why? [vi](https://en.wikipedia.org/wiki/Vi) is the **de facto** standard
|
||||||
text editor in any Unix-like operating system._
|
text editor in any Unix-like operating system._
|
||||||
|
13
style.css
13
style.css
@ -241,10 +241,23 @@ h2 { font-size: 1.25rem; }
|
|||||||
|
|
||||||
.cut *, .cut *::before { color: #ccc; background-color: #f4f4f4; }
|
.cut *, .cut *::before { color: #ccc; background-color: #f4f4f4; }
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container img {
|
||||||
|
width: 75%;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
a, a:link, a:visited { color: #ffe489; }
|
a, a:link, a:visited { color: #ffe489; }
|
||||||
body, html { background-color: #111111; color: #888888; }
|
body, html { background-color: #111111; color: #888888; }
|
||||||
pre { background-color: #111111; color: #aaaaaa; }
|
pre { background-color: #111111; color: #aaaaaa; }
|
||||||
.clean { background-color: #111111; color: #aaaaaa; }
|
.clean { background-color: #111111; color: #aaaaaa; }
|
||||||
|
.logo-container img {
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user