rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

add info icon for things with a tooltip

Browse source
This commit is contained in:
Rhiannon Morris 2020-07-11 06:15:13 +02:00
parent 91a218dbc1
commit 8231ef81cd
3 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -4,7 +4,7 @@ PAGES = index.html
IMAGES = $(patsubst %,images/%, \
mlem.gif mlem_static.png icon.png \
niss_uwu_bg_dim.png niss_uwu_bg.png \
star_small.png sparkles_large.png niss_wave_large.png \
info_small.png star_small.png sparkles_large.png niss_wave_large.png \
shortcake_large.png \
)

1
images/info.svg Normal file
View file

@ -0,0 +1 @@
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path clip-rule="evenodd" d="m0 0h32v32h-32z"/></clipPath><metadata/><path d="m0 0h32v32h-32z" fill="none"/><g clip-path="url(#a)"><path d="m32 8c0-4.418-3.582-8-8-8-4.887 0-11.113 0-16 0-4.418 0-8 3.582-8 8v16c0 4.418 3.582 8 8 8h16c4.418 0 8-3.582 8-8 0-4.887 0-11.113 0-16z"/><path d="m30 8c0-1.591-.632-3.117-1.757-4.243-1.126-1.125-2.652-1.757-4.243-1.757-4.724 0-11.276 0-16 0-1.591 0-3.117.632-4.243 1.757-1.125 1.126-1.757 2.652-1.757 4.243v16c0 1.591.632 3.117 1.757 4.243 1.126 1.125 2.652 1.757 4.243 1.757h16c1.591 0 3.117-.632 4.243-1.757 1.125-1.126 1.757-2.652 1.757-4.243 0-4.724 0-11.276 0-16z" fill="#30bfdb"/><g fill="#fff"><circle cx="16" cy="8" r="3"/><path d="m12 13h7v3h-7z"/><path d="m15 13h4v13h-4z"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 952 B

8
style.css
View file

@ -112,6 +112,11 @@ dd {
text-decoration: dotted underline;
text-decoration-thickness: 2px;
}
[title]::after {
content: url(images/info_small.png);
vertical-align: text-top;
mix-blend-mode: hard-light;
}
}
@media (hover: none) {
[title]::after {
@ -259,7 +264,8 @@ footer a {
.cake::before, .cake::after,
header rt::before, header rt::after,
section h2::before, section h2::after {
section h2::before, section h2::after,
[title]::after {
mix-blend-mode: initial;
}
}