artemis
/
xesite
forked from cadey/xesite
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/shim.css
View File

@ -58,8 +58,26 @@ img {
background-color: #282828; 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) { @media (prefers-color-scheme: light) {
.warning { .warning {
background-color: #fbf1c7; background-color: #fbf1c7;
} }
.logo {
background-color: #1d2021;
}
} }

48
static/img/xeiaso.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

2
templates/header.rs.html
View File

@ -92,7 +92,7 @@ la budza pu cusku lu
<body class="snow hack gruvbox-dark"> <body class="snow hack gruvbox-dark">
<div class="container"> <div class="container">
<header> <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> </header>
<div class="snowframe"> <div class="snowframe">