From 8231ef81cdbed41a1fd10572e3a5ada50f88327a Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Sat, 11 Jul 2020 06:15:13 +0200
Subject: [PATCH] add info icon for things with a tooltip

---
 Makefile        | 2 +-
 images/info.svg | 1 +
 style.css       | 8 +++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 images/info.svg

diff --git a/Makefile b/Makefile
index f2b93a8..62fc244 100644
--- a/Makefile
+++ b/Makefile
@@ -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 \
   )
 
diff --git a/images/info.svg b/images/info.svg
new file mode 100644
index 0000000..c96440d
--- /dev/null
+++ b/images/info.svg
@@ -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>
\ No newline at end of file
diff --git a/style.css b/style.css
index 94a2e09..3cb5215 100644
--- a/style.css
+++ b/style.css
@@ -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;
   }
 }