templates/header: add logo image that is responsive to theme preference

Thanks to many people on Twitter that helped with this:
https://twitter.com/theprincessxena/status/1480767115993010177

Signed-off-by: Xe <me@christine.website>
This commit is contained in:
Cadey Ratio 2022-01-11 09:28:32 -05:00
parent ce0ab58292
commit 97e31d0e8b
3 changed files with 67 additions and 1 deletions

View File

@ -58,8 +58,26 @@ img {
background-color: #282828;
}
.logo {
background-color: #fdf5d7;
-webkit-mask: url("/static/img/xeiaso.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask: url("/static/img/xeiaso.svg");
height: 32px;
width: 19px;
float: left;
display: inline;
margin: 3px;
vertical-align: middle;
}
@media (prefers-color-scheme: light) {
.warning {
background-color: #fbf1c7;
}
.logo {
background-color: #1d2021;
}
}

48
static/img/xeiaso.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -92,7 +92,7 @@ la budza pu cusku lu
<body class="snow hack gruvbox-dark">
<div class="container">
<header>
<p><a href="/">Xe</a> - <a href="/blog">Blog</a> - <a href="/contact">Contact</a> - <a href="/gallery">Gallery</a> - <a href="/resume">Resume</a> - <a href="/talks">Talks</a> - <a href="/signalboost">Signal Boost</a> - <a href="/feeds">Feeds</a> | <a target="_blank" rel="noopener noreferrer" href="https://graphviz.christine.website">GraphViz</a> - <a target="_blank" rel="noopener noreferrer" href="https://when-then-zen.christine.website/">When Then Zen</a></p>
<span class="logo"></span><nav><a href="/">Xe</a> - <a href="/blog">Blog</a> - <a href="/contact">Contact</a> - <a href="/gallery">Gallery</a> - <a href="/resume">Resume</a> - <a href="/talks">Talks</a> - <a href="/signalboost">Signal Boost</a> - <a href="/feeds">Feeds</a> | <a target="_blank" rel="noopener noreferrer" href="https://graphviz.christine.website">GraphViz</a> - <a target="_blank" rel="noopener noreferrer" href="https://when-then-zen.christine.website/">When Then Zen</a></nav>
</header>
<div class="snowframe">