add colour transition to links on hover

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 \
   )
 

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>

index.html

@@ -42,7 +42,8 @@
     <dl>
       <dt>quantity <dd>2
       <dt>prons
-      <dd><span title='&quot;she&quot; in real life pls!!'>she, he*</span>
+      <dd title='&quot;she&quot; in real life pls!!'>
+        she, he
       <dt>limbs <dd>many
       <dt>consistency <dd>soft
     </dl>
@@ -54,10 +55,8 @@
     <h2>where to find gecs</h2>
     <dl>
       <dt>gallery
-      <dd>
+      <dd title='until then just look at my snouts media tab or something'>
-        <span title='until then just look at my snouts media tab or something'>
           coming soon?
-        </span>
       <dt>code
       <dd><a href=https://git.rhiannon.website/rhi>gitea</a>
       <dt>masto

style.css

@@ -7,7 +7,8 @@ body {
         hsl(348deg, 92%,  70%),
         hsl(334deg, 100%, 80%),
         hsl(234deg, 100%, 76%),
-        hsl(195deg, 100%, 67%)
+        hsl(195deg, 100%, 67%),
+        hsl(155deg, 70%,  62%)
       );
   --bg-image: url(images/niss_uwu_bg.png);
 }
@@ -107,15 +108,33 @@ dd {
   text-align: left;
 }
 
-[title] {
+@media (hover) {
+  [title] {
     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 {
+    content: attr(title);
+    font-size: 75%;
+    display: inline-block;
+  }
 }
 
 a {
   color: hsl(196deg, 100%, 85%);
   font-weight: bolder;
   text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+a:hover {
+  color: hsl(50deg, 100%, 82%);
 }
 
 .cake::before, .cake::after,
@@ -197,7 +216,8 @@ footer a {
           hsl(348deg, 56%, 55%),
           hsl(334deg, 60%, 43%),
           hsl(234deg, 60%, 40%),
-          hsl(195deg, 60%, 44%)
+          hsl(195deg, 60%, 44%),
+          hsl(155deg, 60%, 55%)
         );
     --bg-image: url(images/niss_uwu_bg_dim.png);
   }
@@ -213,11 +233,6 @@ footer a {
     mix-blend-mode: screen;
   }
 
-  a {
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-  }
-
   footer {
     background: hsla(0, 0%, 0%, 50%);
     color: white;
@@ -250,7 +265,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;
   }
 }